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
Request path contains unescaped characters
Not Found
Not Found
Not Found

Submitted

Order Summary using CSS Flexbox

ZJStrinic 120

@ZJStrinic

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Added shadow for more aesthetic look.

All suggestions to improve are welcomed :)

Community feedback

Tony Ruiz 55

@tonyruizo

Posted

Looks really good!

In the html you should wrap your <div class="attribution"> inside a <footer></footer> for that html validation report. I had the same issue with one of my challenges. Also, check out all this shadowbox examples from this site https://getcssscan.com/css-box-shadow-examples , they have really smooth looks.

1

ZJStrinic 120

@ZJStrinic

Posted

@tonyruizo thank you I just did that !

That site's amazing, thank you !

0

@krypton225

Posted

Your design is great, well done! 🥰

But if you lowered the address (Order Summary) a little further from the image, and made the text in the middle less transparent (opacity), it would be better, Allah willing.

Happy opportunity, good luck! 😁

1

ZJStrinic 120

@ZJStrinic

Posted

@krypton225 thank you for advice, I knew something was missing but just couldn't get my head around it, I've reuploaded the solution but it's still showing old one.

1

@krypton225

Posted

@ZJStrinic you are welcome!

I think that it is ok to download the new solution on this site, and even if the old one is there, it is ok, at least you have learned something new in this project, God willing 😄

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