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 Components using plain HTML, CSS & lil bit of JS

mabrur 105

@mabrurherza

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

Solution retrospective


My 2nd challenge built with plain html and css. I sprinkled the icons with basic motion using css 🍨 and will be triggered (using JS) when the cursor hovers the card. Also works on mobile screen, but since there's no hovering state it will be triggered when you clicked the button. ✌

Community feedback

@radenadri

Posted

Great work man! The layout works great & the animations run smoothly in every device width! 🙌

I have several additions based on my opinions :

  1. If you increase the line height on the text a little bit, say it at least 2 or 2.15 i think it'll be great 😃.
  2. The button hover state works perfectly! But if you also change the text color to match the card background color, that would be more match the design as well!
  3. There's a horizontal overflow on smaller width, you might wanna check what's going on 😊.

Overall it's a great work, congratulations! Happy coding and also keep coding man! 👌👏

0

mabrur 105

@mabrurherza

Posted

@radenadri thanks bang for the feedback. sure bang, with extra ingredients from you will add extra layer of deliciousness 🧆

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