3-column-preview-card-component/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <link rel="stylesheet" href="/3-column-preview-card-component/style.css">

  <title>3-column preview card component</title>

</head>

<body>

  <main class="container">

    <section class="card-component">
      <div class="card box-one" tabindex="0">
        <img src="/3-column-preview-card-component/images/icon-sedans.svg" alt="sedan icon" class="img-sedan">
        <h2 class="card-title">Sedans</h2>
        <p class="card-text">
          Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
          or on your next road trip.
        </p>
        <a href="#" class="learn-more">Learn More</a>
      </div>
      <div class="card box-two" tabindex="0">
        <img src="/3-column-preview-card-component/images/icon-suvs.svg" alt="suv icon" class="img-suv">
        <h2 class="card-title">SUVs</h2>
        <p class="card-text">
          Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
          and off-road adventures.
        </p>
        <a href="#" class="learn-more">Learn More</a>
      </div>
      <div class="card box-three" tabindex="0">
        <img src="/3-column-preview-card-component/images/icon-luxury.svg" alt="luxury icon" class="img-luxury">
        <h2 class="card-title">Luxury</h2>
        <p class="card-text">
          Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
          rental and arrive in style.
        </p>
        <a href="#" class="learn-more">Learn More</a>
      </div>
    </section> <!-- card component-->

    <footer class="footer">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a
        href="https://github.com/vimode/frontend-mentor-challenges">vimode</a>
    </footer>


  </main><!-- container-->

</body>

</html>