Header: logo, title and sub-title

README.md

Header: Horizontal banner with logo, site title and sub-title

This gist builds upon a simpler gist that does not have a sub-title.

1. Create a flex container:

   .container {
     display: flex;
   }

2. Use justify-content to control how items are horizontally positioned (when in row direction):

   .container {
     justify-content: center;
   }

3. Flexbox alignment (up-down when in the row direction) defaults to stretch, which breaks image aspect ratio. Use align-items to centre the items instead:

   .container {
     align-items: center;
   }

Assumptions

Simple html page header:

<header class="container">
  <img src="https://picsum.photos/id/237/150" alt="Puppy logo">
  <div>
    <h1>Lucifer</h1>
    <h2>The Demon Puppy</h2>
  </div>
</header>

img and div are the Flex items. h1 and h2 are not included in the Flex context and are regular block elements.

Background material

1. HTML:
   • <header>
   • MDN: Using HTML sections and outlines
2. CSS Selectors:
   • Class selector
3. Flexbox:
   • MDN: Flexbox basics
   • MDN: justify-content
   • MDN: align-items
   • Reference: Complete Guide to Flexbox

index.html

<header class="container">
  <img src="https://picsum.photos/id/237/150" alt="Puppy logo">
  <div>
    <h1>Lucifer</h1>
    <h2>The Demon Puppy</h2>
  </div>
</header>

style.css

/* Objective: Create a  horizontal logo/heading banner */

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*********************/
/* Additional styles */
/*********************/

/* Make it pretty */

body {
  margin: 0;

  font-size: 24px;
  font-variant: small-caps;
  font-family: Trebuchet MS, Helvetica, sans-serif;
  letter-spacing: 0.2em;
  text-align: center;
}

header {
  padding: 1rem;
}

header > * {
  margin: 1rem;
}
img {
  border-radius: 50%;
}