Skip to content
Submitted 22 days ago

Blog-Card

Shlok Negi•40
@tejasnegi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Hover Animation. the shadow animation looks cool

What challenges did you encounter, and how did you overcome them?

Challenge I faced was in spacing between each text elements. to get exact I had to put in a lot of work

What specific areas of your project would you like help with?

probably css

Community feedback

  • KoalaChang•70
    @KoalaChangPosted 21 days ago

    Hi, tejasnegi!

    Your website looks so good, and I agree the animation of the card and the shadow is really cool. Honestly I don't think there is anything to revise.

    As for the css you mentioned, here are some advices:

    Reduce Redundancies

    • maybe you can try to combine some repetitive styles such as font-weight: bolder.
    • Define colors, padding, font sizes, and other recurring values as CSS variables. This will improve readability and make updates easier. For example:
    :root {
    --primary-bg-color: #f4d04e;
    --font-bold: bolder;
    --text-gray: #6b6b6b;
}

.card-category {
    background-color: var(--primary-bg-color);
}

    Custom Fonts Fallback

    • Include fallback fonts in case Google Fonts fails to load.
    Marked as helpful
    0
    Shlok Negi•40
    @tejasnegiPosted 21 days ago

    @KoalaChang Thank you so much for your suggestion!! I will definitely use it from next big projects. Really Variables completely went off my mind XD Thanks for reminding me also XD.

    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