hero section 1 – CSS Snippet

Go back

<section class="hero">
  <span class="hero-decoration hero-decoration--spark" aria-hidden="true">✦</span>
  <span class="hero-decoration hero-decoration--dot" aria-hidden="true">✦</span>

  <div class="hero-inner">
    <div class="hero-copy">
      <p class="hero-eyebrow">A LITTLE ABOUT ME</p>

      <h1>
        Curious mind.<br />
        <span>Big ideas.</span>
      </h1>

      <p class="hero-description">
        I’m Meet—a scholar and consistent performer who enjoys learning,
        competing, and exploring new ideas.
      </p>

      <a class="hero-button" href="#achievements">
        Explore my journey <span aria-hidden="true">↗</span>
      </a>
    </div>

    <div class="hero-photo-wrap">
      <span class="hero-photo-star" aria-hidden="true">✦</span>
      <div class="hero-photo-frame">
        <img src="profile.png" alt="Meet" />
      </div>
      <span class="hero-photo-note">Always<br />learning!</span>
    </div>
  </div>

  <span class="hero-decoration hero-decoration--bottom" aria-hidden="true">⌁</span>
</section>