hero section 2 – CSS Snippet

Go back

<section class="projects-section" id="projects">
  <span class="projects-section__sparkle" aria-hidden="true">✳</span>

  <header class="projects-section__heading">
    <p class="projects-section__eyebrow">LEARNING BY MAKING</p>
    <h2 class="projects-section__title">My <span>projects</span></h2>
    <p class="projects-section__intro">A few things I’ve been exploring and creating.</p>
  </header>

  <div class="projects-section__grid">
    <article class="project-card">
      <div class="project-card__art project-card__art--purple" aria-hidden="true">⌘</div>
      <h3>My Portfolio</h3>
      <p>A little corner of the internet about me.</p>
      <a href="#top" class="project-card__link">You’re here <span aria-hidden="true">↗</span></a>
    </article>

    <article class="project-card">
      <div class="project-card__art project-card__art--green" aria-hidden="true">✿</div>
      <h3>Creative Experiments</h3>
      <p>Ideas, designs, and things I’m trying out.</p>
      <a href="#youtube" class="project-card__link">See my channel <span aria-hidden="true">↗</span></a>
    </article>

    <article class="project-card">
      <div class="project-card__art project-card__art--blue" aria-hidden="true">▦</div>
      <h3>Science &amp; Ideas</h3>
      <p>Exploring questions and finding out how things work.</p>
      <a href="#achievements" class="project-card__link">See achievements <span aria-hidden="true">↗</span></a>
    </article>

    <article class="project-card">
      <div class="project-card__art project-card__art--orange" aria-hidden="true">★</div>
      <h3>More Coming Soon</h3>
      <p>I’m always learning and making something new.</p>
      <a href="#youtube" class="project-card__link">Follow along <span aria-hidden="true">↗</span></a>
    </article>
  </div>
</section>