WMDD 4835-02 MIDTERM (Dickens)
Rename the unzipped project folder dickens-yourfirstname-yourlastname.
Basic Details of The Page
• System UI font stack
• Black background, white text, white borders
• Accent Color: deeppink
• Font Awesome Icons used:
book, skull, user-astronaut, twitter, book-open-reader
• Header Nav Hover Colors:
deeppink, rgb(47, 210, 228), orangered, #ecf807
• Readmore “Line” Hover Color: deeppink (see movie)
The index.html file has fourteen blocks of text. It is linked to a file called starter-styles.css.
Each block in index.html contains the title of a Charles Dickens novel and the first paragraph of that novel.
You need to mark them up as 14 articles within a single main element.
You must use those html elements, or else the starter “counting” CSS will not work.
Do not delete any of the starter css. Add your styles to that file.
You will also need to add the header and footer content: see screenshots
Each article will have
• a “counter” pseudo-element (code is in starter-styles.css file)
• the feature image
• the novel title: remove the word [title]
• the article text
• the readmore + icon link pair
• a random year between 1836 and 1870.
(the vscode-random extension will help there).Task One: Header (5 marks)
• the same layout for phone and desktop
• the name charles dickens scales with browser width, but nothing else in the header scales
• text must be marked up semantically (making sense to screenreaders and search engines)
• floral character is an entity: https://www.toptal.com/designers/htmlarrows/symbols/
Task Two: Navigation Interaction (10 marks)
• When links are hovered, the circle border blurs (outwardly) and changes color, over .35 seconds.
This may require some creative thinking.
Below, the skull is hovered over.
• Font Awesome Icons used:
book, skull, user-astronaut, twitter, book-open-reader
• Header Nav Hover Colors:
deeppink, rgb(47, 210, 228), orangered, #ecf807Task Three: Common Article Styling (20 marks)
The following characteristics are common to all articles. See screenshot for styling.
• You added: Image, heading markup, paragraph markup, readmore with icon, date
• I’ve added: “Counter” Pseudo-Element via CSS counter in Starter Stylesheet
• The starter CSS is keeping the images 600px tall, while allowing varying width without distortion. If any heads are
“chopped off”, google for a way to fix that.
• On hover, READ MORE line beneath word turns deeppink, with a transition over .35s
• Counter Number and Date are perfectly horizontally centeredTask Four: Main Area Responsive Behaviour (10 marks)
• At phone size, articles are a single column.
• At tablet size, the main element starts breaking into columns
• Columns are added as browser screen width increases
• However, no column is ever less than 300px wideTask Five: Advanced Main Area Responsive Behaviour (10 marks)
• At tablet screen size and above, there are two article widths:
• The small articles take one column. The large articles take two columns.
• Content automatically “rearranges” to fill empty spaces. Note the screenshot article “count”
• In the screenshot below, you’ll notice that the wide article paragraphs split into columns. This is done in task
six.
The articles that become twice as wide are numbers 1,3,4,9,and 12. Their titles are:
• a tale of two cities
• great expectations
• oliver twist
• dombey and son
• barnaby rudgeTask Six: Article Styling Difference (10 marks)
• At tablet size and above, the paragraph in the “wide” articles splits into two columns.
• The text in these columns flow into each other.
Note in the screenshot, how the sentence from column one continues into column two.
• Note: this paragraph “flowing” layout is NOT done with grid or flex.
• This will likely require some googling.
• The link “hover” effect is also shown in this image.Task Seven: Footer Markup and Styling (10 marks)
Note: Only the layout changes. The font size does not.
(The screenshots create an illusion that the type gets bigger at smaller sizes.)
Small size:
Medium Size
Large SizeBonus Task (10 marks)
• The bonus task can be used to make up for any lost marks, but you can’t get over 100%.
• With a single line of CSS, make all the images have a vignette effect
• Hint: mask-image
WHEN YOU ARE DONE
• Make sure that your folder is named correctly: dickens-yourfirstname-yourlastname.
• ZIP the folder
• Hand it in to Brightspace