12. Overlays and cards assignment

12.1. Assignment

Exercise 12.1

Add a text overlay to your hero image. Use a dynamic font for the <h1> in the overlay. Add four cards to your site. Add a hover effect to your cards.

Tip

Other helpful resources for the assignment

• MDN’s position property

• CSS Tricks’ Absolute, Relative, Fixed Positioning: How Do They Differ?

Info on pseudo-elements ::before and ::after

• CSS Tricks

• MDN docs ::before

• MDN docs ::after

Videos on positioning

• CSS Positioning: Position absolute and relative explained (~8 minutes). He is Canadian, so “zed-index” means “z-index” in American English.

• Stop fighting with CSS positioning - longer video (~20 mins) that goes more in-depth on positioning, containing blocks, and “the flow.”

12.2. Rubric

Rubric

Requirement	Points
Repo passes all automated tests Validator and a proofer test 2 points each (4 points total) See assignment README for list of 37 pretests. The 3 new pretests (related to the hero text and cards and marked by a star in the README) are 5 points each (15 points total) The remaining pretests from previous assignments are 1 point each (34 points total)	53
Proper hero image overlay Hero images is de-emphasized with a semi-transparent background, a gradient background, or a CSS filter. No overlay “gap” at the bottom of the image is visible. An h1 and subtitle are positioned over the hero image.	20
**Cards have a hover effect with a transition ** You can choose the hover effect.	20
General Any issues not covered by the pretests or other rubric entries (see feedback for details if you miss points here)	10
Whitespace Appropriate use of white space (site is not crowded)	10
GitHub About info Include a description and link to your web page in the About section of your repo.	2