Submitted about 3 years ago

3 column preview card

John Carson•50

@wppaing

Preview site View code

This is a solution for...3-column preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

Use main and footer semantic tags for every web page that you create it is necessary for better accessibility

Also check your Hover effect you need to change text color to white when the background goes orange on that Learn more button

<body>
<main>
  <div class="container">
      <div class="child">
          <div class="sedan">
              <img src="./images/icon-sedans.svg" alt="">
              <h1>Sedans</h1>
              <p>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="#">Learn More</a>
          </div>
          <div class="suv">
              <img src="./images/icon-suvs.svg" alt="">
              <h1>SUVs</h1>
              <p> Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation 
                and off-road adventures.</p>
                <a href="#">Learn More</a>
          </div>
          <div class="luxury">
              <img src="./images/icon-luxury.svg" alt="">
              <h1>Luxury</h1>
              <p>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="#">Learn More</a>
          </div>
      </div>
  </div>
</main>

 <footer>
<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div> 
</footer>
</body>

John Carson•50

@wppaingPosted about 3 years ago

@JuveriaD Thanks a lot sir. I'll try better

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

@wppaing not sir😂but that's ok

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord