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

column-preview_htmlcss

@Kamalsrikanta07

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

@MaracaraCarlos

Posted

Hello Kamal, There are a couple of things you can do to improve your code:

  • You must take care of the proportions so that they are as similar as possible to the design.
  • You can add transitions with the :hover pseudo element so that the button changes color.
  • In the buttons you can place the class cursor: pointer; this will cause every time the mouse cursor passes over your button the hand will appear pointing to the element.
  • To make your HTML semantic you can use <section>, <main>, <header> instead of <div>. Semantic HTML5 Elements Explained
  • You can use rem instead of px for the font-size dimensions of this text to adapt better to browsers and devices. Why font-size must NEVER be in pixels
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