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

Responsive blog preview card using plain HTML CSS

P

@kassahunAmdie

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

The challenge I had was with the SVG. I was having blocks of white space on top and bottom. On css-tricks.com and article by Amelia Bellamy was very helpful in understanding SVG files. Learned a great deal. Unfortunately I was still left with my problem. Finally my next go to source of information on CSS, Kevin Powell's youtube channel, got me the solution. The actual video is entitled "How to use CSS object-fit to control your images". So this CSS property [object-fit] removed the white space and scaled the SVG file to fit the 200px I set on the height. This height is from the figma file.

Community feedback

@KingSlayer3x

Posted

It's a job well done! Happy coding.

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