Hero section

Build the hero section layout with flexbox.

What does the hero section do?

The hero section at the top of a landing page is what visitors see first. It holds a large heading, a short description, and a button. We'll style the TaskFlow hero with the .hero selector.

To center the content both horizontally and vertically, we'll make the container flexible. With display: flex, the element becomes a flex container and starts laying out its children.

justify-content and align-items

A flex container has two axes: the main axis (horizontal by default) and the cross axis (vertical). We use two properties to align content.

justify-content aligns children along the main axis; center centers them. align-items aligns children along the cross axis; again center centers them. Using both fully centers the content.

Hero background with background-color

To make the hero stand out, let's give it a dark background color. The background-color property paints an element's background. Light-colored text is used on top so it stays readable.

For TaskFlow we'll use a dark navy tone, #1a2b4a. Hex colors start with a hash sign followed by six digits. Now let's add the hero section to the file.

Exercise Add the hero section

Take the file with the header comment from the previous lesson. Below it, add a .hero class selector rule with these declarations: display: flex, justify-content: center, align-items: center, and background-color: #1a2b4a. End each declaration with a semicolon.

Show example solution

/* TaskFlow landing page */

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1a2b4a;
}

Test yourself

What does display: flex do?
- Changes the element's background color
- Centers text horizontally
- Makes the element a flex container and lays out children
- Hides the element
Show answer

Makes the element a flex container and lays out children — Correct. display: flex turns the element into a flex container and starts laying out its children.

Complete the justify-content value

.hero {
  display: flex;
  justify-content: ____;
  align-items: center;
  background-color: #1a2b4a;
}

Show answer

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1a2b4a;
}

Match flex properties to their meanings

display: flex

Makes a flex container
justify-content

Main-axis alignment
align-items

Cross-axis alignment
background-color

Background color

Next lesson: Feature list

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies