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 with flex and max-width

P
simgeduru 50

@simgeduru

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 coded faster than the previous time.

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

I had a hard time adjusting the shadow size for phone and desktop. I solved it with the media query.

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

how can I adjust the shadow size without the need for media query? thank you for your help

Community feedback

Monica I. 200

@monicaivanov

Posted

Hi, for box shadow I used box-shadow property: box-shadow: 10px 10px rgba(0, 0, 0, 0.497);

I like a lot css-tricks website: https://css-tricks.com/almanac/properties/b/box-shadow/.

Happy coding!

Marked as helpful

0

@RamazanKrty

Posted

Hi Simge,

It looks good.

  • But when I want to view the code, it links to another repository (qr code compenent).
  • Also, you can start from h1 instead of h3 directly in the code.
  • After giving different classes to all p tags, it seems a bit complicated to choose p:nth-child(5) again.

Once more - Really Good Job

Marked as helpful

0

P
simgeduru 50

@simgeduru

Posted

@RamazanKrty Hi Ramazan,

I must have copied the wrong link. You can view it by selecting the Blog-Preview-Card branch. Thank you for the warning. Thank you for your suggestions, I will revise it.

The correct link to the project source : https://github.com/simgeduru/FrontEnd-Mentor/tree/Blog-Preview-Card

0
P
Craowx 180

@Craowx

Posted

Great solution

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