Skip to content
Submitted over 2 years ago

3-column preview card component solution using flexbox

Aziz Najjar•240
@Njoura7
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

Hello guys, I enjoyed doing this project especially that it is a good opportunity to practice flexbox and nested flexbox, I am curious to start learning sass (which is for those who don't know it one of the most famous CSS pre-processors), I think it will make my code more efficient and scalable, but first I need to finish an intermediate project with semantic html and vanilla CSS, Your feedback are appreciated as always !! Good luck for your journey and I wish we all become front-end/full stack engineers :D

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hi Aziz, very good work on this challenge! 😉

    When you pass over the buttons you see a jump due to the edge... to avoid this nasty little effect assign the same edge even in the normal state so in the hover it will not jump.

    Also the margin of main tag in the large screen is superfluous, I would add it with an @media-query, but that might be fine too

    Hope this help! 😁 Keep it up

    Marked as helpful
    0
    Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    @denielden thank your for your feedback, I got the second point and I was thinking about it too xd but I didnt understand what do you mean by "edge" what should i add exactly to the normal state

    1
    Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    @Njoura7 Sorry, I meen the same border of normal state

    0
    Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    @denielden ahh okayy I got It I've just fixed both of your points, the buttom is muuuch more better, but am not really satisfied with the query xd, but it's better i guess feel free to check.

    1
    Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    @Njoura7 it seems perfect to me! Keep it up :)

    1
    Aziz Najjar•240
    @Njoura7Posted over 2 years ago

    @denielden thank youu ..appreciate it

    1

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