Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 column preview card

John Carson• 50

@wppaing

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Juveria Dalvi• 1,375

@Juveria-Dalvi

Posted

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>
0

John Carson• 50

@wppaing

Posted

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

1
Juveria Dalvi• 1,375

@Juveria-Dalvi

Posted

@wppaing not sir😂but that's ok

0

Please log in to post a comment

Log in with GitHub
Discord logo

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