3-column-preview-card-component
Design comparison
Community feedback
- @shashreesamuelPosted almost 2 years ago
Awesome work completing this challenge
Your solution looks great however with regards to your accessibility issues, your html document should have a main landmark in order to identify the main content of the page. In order to resolve this issue just wrap all the elements within your body element inside a main tag like this.
<main> <section class="cars__section"> <div class="container"> <div class="sedans__car"> <img src="/images/icon-sedans.svg" alt="Sedan car" class="type__img"> <h1 class="type__name">Sedans</h1> <p class="paragraph">Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p> <button class="btn btn-sedan">Learn More</button> </div> <div class="suv__car"> <img src="/images/icon-suvs.svg" alt="Suv car" class="type__img"> <h1 class="type__name">SUVs</h1> <p class="paragraph">Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p> <button class="btn btn-suv">Learn More</button> </div> <div class="luxury__car"> <img src="/images/icon-luxury.svg" alt="Luxury car" class="type__img"> <h1 class="type__name">Luxury</h1> <p class="paragraph">Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p> <button class="btn btn-luxury">Learn More</button> </div> </div> </section> </main>
Note: indentation is inconsistent
Secondly in order to resolve your second accessibility issue, use
<div>
instead of<section
since it is more meaningful and more descriptive. The section tag becomes purposeful only when the the role attribute is specified.Hope this helps
Cheers
Marked as helpful0 - @acasadovalenciaPosted almost 2 years ago
Hello Samuel. Thanks for your feedback! I will try to fix following your comments.
Thank you again for your support.
1
Please log in to post a comment
Log in with GitHubJoin 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