Day 8: Hero 🦸‍♂️

A hero component usually displays the page title, description, and, sometimes, a CTA.

The example component is visible below.

A few notes about this hero component:

• CSS Variables are used for colors,
• the :before pseudo-element is used for background,
• the background is animated using CSS animation.

The code:

<div class="advent-hero">
  <h2>Advent of UI components 🦸‍♂️</h2>
  ...
</div>

.advent-hero {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;

  color: var(--color-xmas-beta);
  text-align: center;
  position: relative;
  padding: 5rem;
  overflow: hidden;
}

.advent-hero:before {
  content: "";
  background-image: linear-gradient(45deg, var(--color-xmas-beta) 30%, var(--color-xmas-gamma) 60%);
  position: absolute;
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
  animation: rotate 10s linear infinite alternate-reverse;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

To check the code for the button component, see Day 1: Button post.