In this exercise, you’ll make a single page layout.
First please download the starter files. Once you unzip the folder, rename it TheSallyRoonies-YourFirstName-YourLastName.
Then download the screenshots.
Now, make the HTML, CSS, and JS to make the following page with the following details.
A Loom Video demonstration of the task.
Fonts
Use the system ui font stack throughout.
Header (5 marks)
- Site Title: Midterm
- Nav Area: Four Icons. Choose different ones at Font Awesome.
- Two Buttons, with icons of scales and search.
Make sure that the icons in the menu and buttons are part of accessible links.
Note the different spacing of the middle section in the top part of the header:
- Small: grouped with site-title
- Medium & Large: perfectly centered
Banner (3 marks)
Use the band.jpg image in the downloaded files.
Instead of the text The Sally Roonies, put your first and last name.
Arrange the banner text as it is in the screenshots.
Main Area (8 marks)
Twelve articles, each with:
- heading,
- random image,
- random image-city data,
- random image-street-address data, and
- a paragraph of 18 random words.
- Responsive columns: 1, 2, 4.
- When the image is clicked, a panel slides up
- Then the image city fades in, followed by the image street address fading in
Watching the Loom movie will help make clear what I mean here.
Note: this will require JavaScript.
If your JavaScript is not working, you can use css hovers — for half marks in this section.
Footer (4 marks)
- Title: Our Team
- Three Figures with Image and FigCaption
- Use image from supplied files
- Random person names
Check the responsive arrangements in the screenshots.