hero section 5 – CSS Snippet

Go back

<section class="achievements-section" id="achievements">
  <header class="achievements-section__heading">
    <p class="achievements-section__eyebrow">MILESTONES I’M PROUD OF</p>
    <h2 class="achievements-section__title">My <span>achievements</span></h2>
    <p class="achievements-section__intro">Some things I’ve worked hard for.</p>
  </header>

  <div class="achievements-section__grid">
    <article class="achievement-card">
      <span class="achievement-card__icon achievement-card__icon--purple" aria-hidden="true">🥇</span>
      <p class="achievement-card__label">INTERNATIONAL OLYMPIAD</p>
      <h3>IMO Gold Medal</h3>
      <p>Won an international gold medal in the IMO.</p>
    </article>

    <article class="achievement-card">
      <span class="achievement-card__icon achievement-card__icon--orange" aria-hidden="true">🥈</span>
      <p class="achievement-card__label">INTERNATIONAL OLYMPIAD</p>
      <h3>French Olympiad</h3>
      <p>Won an international silver medal.</p>
    </article>

    <article class="achievement-card">
      <span class="achievement-card__icon achievement-card__icon--blue" aria-hidden="true">🏆</span>
      <p class="achievement-card__label">INTER-SCHOOL</p>
      <h3>Science Competition</h3>
      <p>Won first place and a trophy.</p>
    </article>

    <article class="achievement-card">
      <span class="achievement-card__icon achievement-card__icon--green" aria-hidden="true">🏅</span>
      <p class="achievement-card__label">SCHOOL QUIZ</p>
      <h3>Current Affairs</h3>
      <p>Placed first in the whole school.</p>
    </article>

    <article class="achievement-card">
      <span class="achievement-card__icon achievement-card__icon--pink" aria-hidden="true">🎤</span>
      <p class="achievement-card__label">PERFORMANCE</p>
      <h3>RAM Annual Event</h3>
      <p>Performed at the large annual event.</p>
    </article>

    <article class="achievement-card">
      <span class="achievement-card__icon achievement-card__icon--yellow" aria-hidden="true">🎵</span>
      <p class="achievement-card__label">MUSIC</p>
      <h3>School Music Team</h3>
      <p>Part of my school’s music team.</p>
    </article>

    <article class="achievement-card">
      <span class="achievement-card__icon achievement-card__icon--green" aria-hidden="true">⭐</span>
      <p class="achievement-card__label">ACADEMICS</p>
      <h3>Scholar &amp; Consistent Performer</h3>
      <p>Recognized as a scholar and consistent performer.</p>
    </article>

    <article class="achievement-card">
      <span class="achievement-card__icon achievement-card__icon--purple" aria-hidden="true">🙌</span>
      <p class="achievement-card__label">LEADERSHIP</p>
      <h3>Class Representative</h3>
      <p>Represented my class at school.</p>
    </article>
  </div>
</section>