Skip to content
Submitted 4 months ago

Responsive blog preview card with vanilla HTML and CSS

Juan•480
@JEWebDev
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?

I'm proud of finishing this project in less than 1 hour and 30 min. Also i learned something new with the css clamp method.

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

Adjusting the font sizes without media queries, it was challenging and fun!

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

Any feedback is welcome. Have a great day!

Community feedback

  • Emal•110
    @syeero7Posted 4 months ago

    Well done!

    You can use <time> for the publish date inside <p>. also, please note that the -webkit-font-smoothing property only works on macOS. The page did not render well on my browser.

    Marked as helpful
    0
    Juan•480
    @JEWebDevPosted 4 months ago

    @SyeerO7

    Interesting! I have never had that problem before, thanks for letting me know! I was trying a new CSS reset and had been having great results till now. I will fix it as soon as i can. Have a great day!

    0
  • mer•110
    @MER-PEXPosted 4 months ago

    you're website look great really ,i would like to know how did you manage to place the profile picture and the name so perfectly?

    0
    Juan•480
    @JEWebDevPosted 4 months ago

    @MER-PEX

    Hello! Of course!

    i putted the profile picture and the name inside a div and applied these styles:

    .card-footer{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    You can look at the css in the repo as reference and if you have more questions i will answer them the best i can. Have a nice day!

    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