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-MAIN

@RogerTito455

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?

Well, I think that I developed an hability to make this kind of css html project so easily. I would like to try new things like trying to make it good.

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

Well, I didn't know how to make the borders of the box and the shadow but I overcome using a little bit of chatgpt and gave me an advice.

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

The same as the previous one, I really want to know if my code can be smaller to make it efficient.

Community feedback

@Gehad28

Posted

Hi @RogerTito455, nice work!

You can use border: 1px solid black; to make a thin border in all sides. Then you can use box-shadow: 10px 10px; to make the solid shadow on the right side and the bottom.

The first number in the box-shadow property is the horizontal offset, a positive value puts shadow on the right side and a negative value puts it on the left side. The second number is the vertical offset, a positive value puts the shadow on the bottom side and a negative one puts it on the top side.

Hope this helped! ☘️

Marked as helpful

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