card 4 – CSS Snippet

Go back

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

  <div class="youtube-section__content">
    <p class="youtube-section__eyebrow">WATCH WHAT I’M UP TO</p>

    <h2 class="youtube-section__title">
      More fun<br>
      on <span>YouTube.</span>
    </h2>

    <p class="youtube-section__text">
      Videos and more from my creative world.
    </p>

    <a
      class="youtube-section__button"
      href="https://www.youtube.com/@vidyamath_official"
      target="_blank"
      rel="noopener noreferrer"
    >
      Visit my channel <span aria-hidden="true">↗</span>
    </a>
  </div>

  <a
    class="youtube-video"
    href="https://www.youtube.com/@vidyamath_official"
    target="_blank"
    rel="noopener noreferrer"
    aria-label="Visit the Vidyamath YouTube channel"
  >
    <span class="youtube-video__back" aria-hidden="true"></span>
    <span class="youtube-video__front">
      <span class="youtube-video__play" aria-hidden="true">▶</span>
      <span class="youtube-video__caption">MY YOUTUBE CHANNEL</span>
    </span>
    <span class="youtube-video__sparkle" aria-hidden="true">✦</span>
  </a>
</section>