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
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 are you most proud of, and what would you do differently next time?

I am proud of being able to complete this solution and they appear to be similar.

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

I had difficulty trying to centre the image and round its corners, I tried using class selector as per the HTML (.svg) but this wasn't working. I had also tried setting the width but this threw it odd completely.

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

How should I have rounded the corners of the image? Also how to centre the name by the image of Gregg so it's inline.

Community feedback

@KirativeWD

Posted

Hi there!

Great job completing this challenge.

To apply rounded corners to the image, you'll want to use border-radius on the svg like you did on .container.

To get the author image and name aligned horizontally, you can wrap them in a div with a class name of your choice and display flex with align-items: center; e.g.

<div class="author">
  <img>
  <p></p>
</div>
.author {
  display: flex;
  align-items: center;
}

Marked as helpful

1

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