Unit 3 · Read All About It
Stage 5 of 7
Unit 3 · Read All About It
Stage 5 of 7
Unit 3 · Stage 5
Each story card now has a photo at the top. You will size the photos and style the headlines and body text so every card reads clean and clear. (pause on a highlighted word to see what it does)
We added an <img> to the top of each story. Give them all one even size so the cards line up.
width and height100% wide and a fixed 180px tall makes every card photo the same size.object-fitcover fills that space and crops the extra, the same trick you used on the hero.displayblock removes the small gap under the image.Set the story heading and paragraph so they sit neatly inside the card with comfortable spacing.
margin16px 16px 8px sets top, sides, and bottom.line-height1.6 opens up the paragraph so it is easy to read.color.story img (width: 100%;, height: 180px;, object-fit: cover;, display: block;), .story h3 (font-size: 20px;, margin: 16px 16px 8px;), and .story p (margin: 0 16px 16px;, line-height: 1.6;, color: #444444;) then press ▶ Run.What property sets the space between lines of text for easy reading? Type it, then press Submit to unlock the last step.
These are placeholder photos and sample stories. When you are ready, swap in real headlines and photos about your own community.
To complete Stage 5, style your .story img and give your paragraphs a line-height. Press Check my work when you are ready. This opens Stage 6 and lets your teacher see that you finished.