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

@BiswajitHemram

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

HaDo Dev 290

@hadodev

Posted

Hi @BiswajitHemram,

Your desktop solution look great. These are my recomendations:

  • Don't forget the active states. You must add the :hover and :focus-visible to the learn more links/buttons. For example:
button:hover,
button:focus-visible {
  background-color: white;
}
  • Pay attention to the responsive design. Mobile-first workflow is a good approach and it's widely use nowadays. You start your design in a mobile screen and after you add media queries @media or container queries @container to adjust the design for wider screens. In your desgin, you need to change the border-radius property of the first and the last sections.

Keep going and happy coding!

Marked as helpful

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