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"
    />

    <title>Frontend Mentor | 3-column preview card component</title>

    <link rel="stylesheet" href="./styles/style.css" />
  </head>

  <body>
    <main>
      <!-- CARD CONTAINER -->
      <section class="previewContainer">
        <div class="card">
          <div class="card__icon">
            <img src="./images/icon-sedans.svg" alt="" />
          </div>
          <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>
          <div class="card__button">
            <a href="#">learn more</a>
          </div>
        </div>

        <div class="card">
          <div class="card__icon">
            <img src="./images/icon-suvs.svg" alt="" />
          </div>
          <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>
          <div class="card__button">
            <a href="#">learn more</a>
          </div>
        </div>

        <div class="card">
          <div class="card__icon">
            <img src="./images/icon-luxury.svg" alt="" />
          </div>
          <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>
          <div class="card__button">
            <a href="#">learn more</a>
          </div>
        </div>
      </section>
    </main>

    <footer class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by
      <a href="https://www.frontendmentor.io/profile/mohamed-ndoye811"
        >Mohamed Ndoye</a
      >.
    </footer>
  </body>
</html>