index.html

<link rel="stylesheet" href="style.css" />
<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

<section class="content">
      <main class="card">
        <div class="breaking-bad">
          <h1 class="title" style="font-family: 'Zeyada', cursive">
            Fitness Freak
          </h1>
          <ul class="meta">
            <li>Cardio Workout</li>
            <li>Fitness Workout</li>
            <li>Power Yoga</li>
          </ul>
          <p class="description">Work Hard To Get Better Life.</p>
          <hr class="break" />
          <div class="bottom-info">
            <a class="watch"> <i class="fa-solid fa-play"></i> Watch Classes </a
            ><a class="plus"
              ><i class="fa-solid fa-plus" style="color: black"></i></a
            ><a class="add-to">JOIN NOW</a
            ><span class="add-meta">Explore Fitness Life</span>
          </div>
        </div>
        <div class="nav">
          <ul>
            <li class="facebook"><i class="fa-brands fa-facebook"></i></li>
            <li class="youtube"><i class="fa-brands fa-youtube"></i></li>
            <li class="globe"><i class="fa-solid fa-globe"></i></li>
            <li class="pinterest"><i class="fa-brands fa-pinterest"></i></li>
          </ul>
        </div>
      </main>
    </section>