First, please download these files. This zip archive contains a folder of images.
Now download these screenshot files.
Make a new folder named vancouver-gallery-yourname. Put the downloaded images folder inside the folder you just made.
You will make all the HTML & CSS for the exercise.
The Task
Make a page that a header and an area which contains 16 articles. Pay close attention to all the downloaded screenshots.
The Header
The header will have the following properties:
- The phrase Scenes From Vancouver will be on the first line.
- The current year will be on the second line.
- This text will appear horizontally and vertically centered at all times.
- The context will be styled as below.
The Gallery
As noted the gallery will have 16 articles.
Each article will have
- a heading with two random words
- a paragraph with 32 random words
- an image from the downloaded folder
If this is a test, you can duplicate the same article 16 times. But if you have unique content in all the articles, you will get a higher mark.
If this is not a test, you must have unique content in all the articles.
The Responsive States
In the phone view, the articles look like this:
The articles are arranged in a single column, with adequate space between each.
First Responsive Breakpoint
At the first responsive breakpoint (at your first media query), the articles will look like this:
Here, they are still in a single column.
Second Responsive Breakpoint
At the second responsive breakpoint, the articles get arranged into two columns:
Third Responsive Breakpoint
At the final responsive breakpoint the articles are still in two columns, but the text area changes its layout:
Make sure that the heading and the paragraphs do not touch.
Make sure, also, that this text is vertically centered and has appropriate spacing.
Don’t forget to consult the downloaded screenshots.
Marks Breakdown
If this is a lab exercise, it is out of 1 mark.
If this is a test, here is the breakdown of the marks:
| Header | 5 Marks |
| Content Generation (Duplicated Articles) | 5 Marks |
| Content Generation (Articles with Unique Content) | 10 Marks |
| Phone View | 5 Marks |
| First Responsive State | 10 Marks |
| Second Responsive State | 5 Marks |
| Third Responsive State | 15 Marks |
| POSSIBLE TOTAL | 50 |
When You Are Done
If this is a Langara test, please hand in your named folder to studentshare.
If this is a Langara online test, or you’re on a labtop in a Langara lab, you can access studentshare via myfiles.langara.ca.
.