Step 2.4 · Day 2: CSS design

Style the hero, cards, rule and footer

Control the page width, crop the photos to consistent shapes, and build the cards with the box model.

You will work in: css/styles.css

The box model

Every element is a rectangle with four layers, from the inside out:

Layer	What it is	Print equivalent
Content	The text or image	The text frame’s contents
Padding	Space inside the box, around the content	Text frame inset
Border	A line around the padding	Frame stroke
Margin	Space outside the box, pushing other elements away	Space between frames

To see it, right-click any element on your page, choose Inspect, and hover over the code: the browser colors the margin, padding and content.

Set the page width and style the hero.

css/styles.css

/* ===== 4. MAIN CONTENT ===== */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

/* Hero */
.hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
}

.hero h2 {
  font-size: 2.25rem;
  margin-top: 1.5rem;
}

.button {
  display: inline-block;
  background-color: var(--orange);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
}

.button:hover {
  background-color: var(--brown);
}

Code	What it does
`max-width: 1100px`	The content never gets wider than 1100px, which keeps lines readable on big monitors. On smaller screens it simply fills the width.
`margin: 0 auto`	No margin on top and bottom; equal automatic margins left and right. This centers the content.
`aspect-ratio: 16 / 9`	Gives the image a 16:9 shape, whatever shape the photo is.
`object-fit: cover`	Fills that shape by cropping the photo instead of stretching it, like placing an image in a frame with “fill frame proportionally.”
`border-radius: 16px`	Rounds the corners. `999px` on the button makes a pill shape.
`display: inline-block`	Lets the link take padding like a box while still sitting in the line of text.

Style the cards.

css/styles.css

/* Cards */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.card {
  background-color: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(59, 42, 30, 0.15);
}

.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card h3 {
  font-size: 1.4rem;
  margin: 1rem 1.25rem 0.25rem;
}

.card p {
  margin: 0 1.25rem 1.25rem;
}

Code	What it does
`display: grid`	Turns on CSS grid, which arranges the cards in rows and columns.
`grid-template-columns: 1fr`	One column that takes all the space: cards stack on phones. You add more columns in step 2.5.
`gap: 1.5rem`	The gutter between cards.
`overflow: hidden`	Clips the photo to the card’s rounded corners.
`box-shadow: 0 4px 12px …`	A soft drop shadow: 0 horizontal offset, 4px down, 12px blur, in brown at 15% opacity.
`aspect-ratio: 4 / 3`	All three card photos get the same shape, even if your photos don’t match. Consistency reads as polish.

Restyle the horizontal rule and the footer.

css/styles.css

/* Horizontal rule */
hr {
  border: none;
  height: 4px;
  width: 80px;
  margin: 2.5rem auto;
  background-color: var(--orange);
  border-radius: 2px;
}

/* ===== 5. FOOTER ===== */
.site-footer {
  background-color: var(--brown);
  color: var(--cream);
  text-align: center;
  padding: 1.5rem;
}

.site-footer a {
  color: var(--tan);
}

Browsers draw <hr> with a gray border. border: none removes it, then height, width and background-color turn it into a short orange bar. margin: 2.5rem auto adds space above and below and centers it.

Save and look. Your page is designed. Make the browser window narrow: the cards stack in a single column. Now make it wide: they still stack. You fix that next.

Design check

Step back and squint at your page. Is the hierarchy clear (name, then section headings, then text)? Is the spacing consistent? Adjust sizes, margins and colors until it feels like one system.