This exercise primarily focusses on the use of the FLEXBOX css module for layout. It should also reinforce your understanding of the use of multiple backgrounds.
First, download the starter files and screenshots.
Since this is an exercise, I have not sized the images down to the final size I would use them at. In a production site, I would definitely do so. Use the images as supplied. This is commonly done while figuring out how our layout is to behave.
You create all the HTML & CSS. I’ve supplied none.
Use so-called greek text, created with Emmet’s lorem functionality. In the paragraphs under story items, the paragraph lengths vary. To make the task easier, keep the headings short ( one or two words ). For the first image (ie the one in the feature story section), use the file bug-banner.jpg.
Conditions of the Exercise: Layout
You can’t use floats on anything. None. Zero. No br tags, either.
Do not make separate grid classes.
Use flex properties to control as much of your layout as possible, including widths of element boxes.
Notice the flow of alignments in the small menu area underneath the biggest image on the page—presumably, this would be a carousel kind of element. If a user clicked different numbers, they’d get different images and story titles. Don’t worry about adding that functionality, but definitely make sure you get the different responsive alignments of that little menu correct (more detail below).
Conditions of the Exercise: Perfect Vertical Alignment
I’ve included this below in the screenshots, but I wanted to describe what I’m looking for here, too.
When the number menu wraps, make sure that the headline and the menu items are perfectly centered vertically. Definitely make sure that there does not appear to be more space on the top of this area than on the bottom. You will likely need to use the Developer Tools (right click: Inspect Element) carefully to figure out what’s going on here.
Conditions of the Exercise: Multiple Backgrounds
Header & Feature Area
The header and feature area (combined) uses two background images to create the grid + noise pattern. They are found in the patterns folder: asfalt.png and batthern.png.
Page Bottom
Open the full size screenshot. Make sure you look at it at full size ( in Preview (Mac): View > Actual Size ). Scroll down to the bottom. Notice the subtle background pattern. Now start scrolling up slowly. See how the pattern gradually fades away after a couple story boxes.
Figure out how to create that effect.
The image I used here came also from transparenttextures.com: skulls.png (it’s in the patterns folder, too).