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

Use CSS hover effect

Abby 60

@Abby-Liu

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?

To figure out the problems of aligning text and images. I would utilize ChatGPT to help me find the appropriate elements.

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

It's a little complicated to organize everything into a clear structure. But if I try it at times, it will be better doing this job.

Community feedback

@GraceAriane

Posted

to align the images and the text, you should have created a div which will contain the text, which will contain the profile and the image. you make a flex display, then in the div containing the text, you should still have done a flex display, flex direction column so that it is displayed in column and put a gap to space the elements. That's a bit like what I did and it lined up well.now I don't know if it was done on purpose as your name and the div are directly stuck to each other, but to be able to put a space, you could have put the body in display flex, with flex-direction column , a space-between put a height and a width on the body then make an auto margin on the div so it is displayed lower

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