hero section 3 – CSS Snippet

Go back

<section class="about-section" id="about">
  <div class="about-section__illustration" aria-hidden="true">
    <div class="about-section__panel"></div>
    <div class="about-section__face">🙂</div>
    <span class="about-section__note">Always<br>learning!</span>
  </div>

  <div class="about-section__content">
    <p class="about-section__eyebrow">A LITTLE ABOUT ME</p>

    <h2 class="about-section__title">
      Curious by nature.<br>
      <span>Ready to learn.</span>
    </h2>

    <p class="about-section__text">
      I’m a scholar and consistent performer who enjoys taking part in school
      activities, competitions, music, and creative projects. I’m also proud
      to represent my class.
    </p>

    <ul class="about-section__list">
      <li>Class representative</li>
      <li>Member of my school’s music team</li>
      <li>Scholar and consistent performer</li>
    </ul>
  </div>

  <span class="about-section__sparkle" aria-hidden="true">✧</span>
</section>