Skip to content
Submitted over 1 year ago

Blog Preview Card (HTML | CSS)

Cheosphere•1,040
@Cheosphere
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

...made with a lot of love 🤘🏻🙂

Code

Please log in to post a comment

Log in

Community feedback

  • Mauricio Lovera•140
    @mauLovera

    Hey this is a great looking solution! I did notice that one of the hover states is missing though. When hovering over the blog header, the card's drop shadow should extend from 8px x&y to 16px x&y. Hope this helps!

    Marked as helpful
  • P
    Daniel Theuri•60
    @dantheuri

    Wow. Pixel-perfect !!! Do you have access to the figma files ?

  • Coding nub•150
    @coding-stock

    My God! it's perfect, i wonder if i will ever reach here , how long have you been programming if you don't mind me asking

  • harpreet-singh-147•240
    @harpreet-singh-147

    Nice work!

  • Michael Alexander Gottung•10
    @MichaelGee76

    I'm thrilled man. Pixel perfect design. Great work

  • P
    Dominik•300
    @onlydominik

    Hi, I'm looking at your work and it really is pixel accurate. And I'm just wondering what's next when it comes to responsiveness. I see that you have a lot of things like container etc. set rigidly in px. Do you do this only in the projects on this website or in general?

  • Harshbardhan Behera•150
    @HarshBehera

    Bro you are damn talented

  • Randall3475•360
    @Randall3475

    Hello!

    How do you make these pixel perfect? I follow every value provided in the Figma file, but in the end it's still not pixel perfect.

    What's your secret?

    Thanks!

  • Muqtadeer•340
    @hashmi7917

    apple designer is looking for you bro, what a amazing work perfect. one more request kindly share your learning resources and tips and tricks to follow or any learning path would be helpfull ;)

  • ridhonurbagjag•40
    @ridhonurbagjag

    Wow! that is great one!

    It is amazing how accurate your solution to the challenge design. Even with the figma starter pack, I am unable to create exactly like that. cheers to you!

  • SierLor•400
    @SierLor

    Magnífico. Enhorabuena por tu trabajo¡

  • Dago Salas•180
    @Dago04

    Excelente diseño me encanto ♥

  • Iggy19944•160
    @Iggy19944

    Looks great as expected! P.S Thank you for reviewing my projects :)

  • Mazen Hassan•600
    @Mazz100

    GREAT WORK!!: I always since I started on FEM, trying to pixel-perfect match every project. I don't have access to PRO for Figma files but I saw your reply on using PS to analyze image canvas and size, I am familiar with adobe apps so if you have any tricks you using in photoshop I will gladly take it.

  • Redened•40
    @Redened

    Hello, exquisite solution, very well done.

    May i ask how did you get the design and solution screenshots to be identical?

    I've tried to do what you have done (I tried to copy the design screenshot pixel by pixel), but for some reason my solution looks smaller than the design in the comparison with the design when i uploaded it.

    Cheers.

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