Day 10: Footer 👇

A footer is a component that sits at the bottom of every page. It usually consists of navigation and additional information, like website copyright and legal links.

The example component is visible below.

A few notes about this footer component:

• CSS Variables are used for colors,
• CSS Flexbox is used for layout,
• the gap property is used to add spacing between flex items,
• text-decoration-style and text-decoration-thickness properties are used to style the link hover state.

The code:

<div class="advent-footer">
  <nav>
    <ul>
      <li><a href="/#home">🎄 🎄 🎄</a></li>
      <li><a href="/#home">Home</a></li>
      <li><a href="/#blog">Blog</a></li>
      <li><a href="/#portfolio">Portfolio</a></li>
      <li><a href="/#about">About</a></li>
      <li><a href="/#contact">Contact</a></li>
      <li><a href="/#search">Search</a></li>
    </ul>
  </nav>
  <p>&copy; December 2021, Santa Claus</p>
</div>

.advent-footer {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;
  background-color: var(--color-xmas-beta);
  color: var(--color-xmas-alpha);
  border-top: .2em solid var(--color-xmas-gamma);
  padding: 1rem;
  text-align: center;
}

.advent-footer ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

.advent-footer p {
  font-size: 1ch;
}

.advent-footer a {
  color: inherit;
  text-decoration: none;
}

.advent-footer a:hover,
.advent-footer a:focus,
.advent-footer a:active {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: from-font;
}