Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card

@Lifeofkelvin

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@andrew-g-ayad

Posted

Hi There! Awesome work already! 👏👏 You did a really good job, and your solution looks good to me, but it needs attention to some details to become awesome and perfect!

  • As a best practice, Try setting all margins and paddings to Zero * { margin: 0; padding: 0; }

  • Consider adding equal padding to all sides in the card padding: 1.5rem

  • The correct border width in the design is 1px

  • Try spacing vertically by adding margin-top to the newly added elements

  • Refer to the design to get the correct font sizes

  • Use this piece of code at the top of your CSS file to add the font family to your CSS @font-face { font-family: 'Figtree'; src: url('/assets/fonts/Figtree-VariableFont_wght.ttf'); }

0

Please log in to post a comment

Log in with GitHub
Discord logo

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