For this exercise, you will create a one-page layout.
Please download the files you will need for the exercise:
The images in the layout in the screenshots will be different than the supplied images. Do not worry about that.
There is not a starter HTML or CSS file. Instructions on what text to use are found later in the exercise.
Examine the screenshots closely to determine the styling, spacing and alignments required.
There is also a short Loom video demo of the layout.
Fonts
All the fonts used in the document are from Google. The site title (upside) is Syncopate. All other type is Merriweather.
You choose appropriate the appropriate font-weights and sizes for all type.
Make the type as readable as possible.
Responsive States
There are two layouts: small and large. Choose responsive breakpoints that work for the content.
The content must never get wider than 1200px, and it must be centered in the browser window at larger screen sizes. See the large screenshot for more info.
In the phone view, the images go to the edge of the screen.
The text must not touch the edge of the screen at any size.
The Header & Footer
The header and footer are nearly identical, except that at the large size, the navigation and site name are on different sides.
There is supposed to be only a single H1 in any HTML document, so make the site name in the footer look the same way as the h1 in the header, without repeating the H1 tag.
The icons are from font-awesome:
- sign in
- search
A useful hint: you can align grid children vertically by using align-items: center on the grid parent.
Menu Behaviour
When the social icons are hovered over, make the icons turn orange.
When the search and the sign-in icons are hovered over, make the icons turn red.
Do not change the black background color on hover.
Section One
This section has four stories.
Each story has an image. Use the images with the words section 1 in in the names.
Each story has a title with three words of randomly generated text.
Each story has a paragraph with twelve words of randomly generated text.
To generate random text in Visual Studio Code, type loremXX, where xx represents the number of words you want.
It is OK to make one story, then duplicate it to create the other ones, but the images must be different.
Please examine the screenshots to see the responsive behaviour of content in this section.
Section Two
The story in section two uses the image with the word stand in the file name.
That story will have a title of Hotpink Rubber Chicken and three paragraphs. Each paragraph will have 20 random words.
This story will have a light blue background in phone view, but no background when the page is full size.
Please examine the screenshots to see the responsive behaviour of content in this section.
Section Three
The story in section three uses the image with the word walrus in the file name.
For the text in this part of the exercise, use this text. Mark it up with appropriate HTML
1,052 mass shootings in 1,066 days: this is what America's gun crisis looks like The mass shooting in San Bernardino, California, is the deadliest in the US since a gunman killed 20 children and six adults at Sandy Hook Elementary School in December 2012. “We have a pattern now of mass shootings in this country that has no parallel anywhere else in the world,” Barack Obama said on Wednesday. Data compiled by the crowd-sourced website ShootingTracker.com reveals a shocking human toll: there is a mass shooting – defined as four or more people shot in one incident – nearly every day. (Updated on 3 Dec 2015)
Please examine the screenshots to see the responsive behaviour of content in this section.
Photo Credits
With the stories in sections two and three, put a photo credit in the bottom left corner of the image. Use your name as the photographer.
Zoom in on the screenshots to see the exact placement of the photo credit.
Marks Breakdown
If this is an exercise, the mark is out of 1.
If this is a test, the marks will break down like this:
| Typography | 2 |
| Header / Footer | 4 |
| Section One | 4 |
| Section Two | 4 |
| Section Three | 4 |
| Photo Credit | 2 |
Bonus Points
For two bonus points, make the black part of the icons circular, with the icon perfectly centered inside.
Handing In
If you are a PUBL student, please rename the project folder midterm-your-name, zip it, and then hand it into Brightspace.
Otherwise, please rename the project folder upside-your-name, zip it, and then hand it in.