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 Design

@FahithKRM

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

P
gatep5 20

@gatep5

Posted

@Fahith K.R.M.

Good work on this solution! Just keep in mind for the future that the design files provide the width for the main part of the card (384px) as well as the border radius (20px) that should be used. Fixing that width should help the main image inside the card be closer to the size of the design.

Also, you can use an overall padding inside the main container to push the contents away from the edge. In this case the design file showed a 24px padding. Just be sure to change your box-sizing to border-box so that it will not grow the size of the container by adding the padding.

2

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