Skip to content
Submitted over 3 years ago

3 Column Preview Card Components using plain HTML, CSS & lil bit of JS

mabrur•105
@mabrurherza
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

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

  • Adriana Eka Prayudha•160
    @radenadriPosted over 3 years ago

    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
    @mabrurherzaPosted over 3 years ago

    @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

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