04. The Header

Logo and navigation – so everyone instantly knows
who we are and what we’re about.

Mentor Hiram Abif

Hiram crosses his arms and eyes you with his typically critical gaze. “Logo on the left, icon on the right – and neatly, not all over the place. Remember the container class and proper alignment.”

Tinker beeps, “The icon is called menu_book!” Hiram nods. “There you go. Now get to it – bring in some structure.”

Your Task

Use clean, semantic HTML: structure your page meaningfully with <header> and <nav>.

The <header> shouldn’t stretch across the full width – so don’t forget the “container” class!
Also, give it some breathing room with a bit of inner spacing. (The right classes already exist!)

Grab the logo from img/logo.png and add a stylish Material Design icon – how about “menu_book”?

Now here’s the trick:
how do you get the logo and icon to stand side by side, keep their distance, and still line up perfectly?
Simple – use these three magical classes:

  • flex – for horizontal layout
  • space-between – for maximum distance
  • align-center – for perfect vertical alignment

Solve the task here in the console [–> Open in a new tab]

Treat for Bastet?
Treat for Bastet?
Scroll to Top