hero sections 4 – CSS Snippet

Go back

<section class="interests-section" id="interests">
  <span class="interests-section__flower" aria-hidden="true">✿</span>

  <header class="interests-section__heading">
    <p class="interests-section__eyebrow">A FEW OF MY FAVORITE THINGS</p>
    <h2 class="interests-section__title">Things I <span>like</span></h2>
    <p class="interests-section__intro">Interests that keep me curious.</p>
  </header>

  <div class="interests-section__grid">
    <article class="interest-card interest-card--yellow">
      <span class="interest-card__icon" aria-hidden="true">🏎️</span>
      <h3>Cars</h3>
    </article>

    <article class="interest-card interest-card--blue">
      <span class="interest-card__icon" aria-hidden="true">🚀</span>
      <h3>Space</h3>
    </article>

    <article class="interest-card interest-card--green">
      <span class="interest-card__icon" aria-hidden="true">🏏</span>
      <h3>Cricket</h3>
    </article>

    <article class="interest-card interest-card--pink">
      <span class="interest-card__icon" aria-hidden="true">🦸</span>
      <h3>Marvel</h3>
    </article>
  </div>
</section>