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

FEM Order summary

#sass/scss

@gideon-del

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


Hi guys,

Just finished the order summary project. It was a really fun and nice experience. Please check my solution and code. Am open to any advice in which i can improve.

Community feedback

Yokke 640

@Jexinte

Posted

Hello @gideon-del,

Good job on your solution.

So as you ask here some things that you can adjust :

  • It's seems that the background color on the rectangle with the music logo is not the same that one that you use . The background color on the middle rectangle is supposed to stand out less than the logo color.

  • The height of the same rectangle is little short compare to the design you can readjust it

  • Add some space between the "Annual Plan etc..." paragraph and the "change" link.

  • To avoid the repeating of your background you can use the property background-repeat : no-repeat then it's gonna be more closer that what expected on the design, more details here : https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

As I said upper you've done a great job what I've notice is just little things ( but as you could imagine fix little things earlier can be very helpful when you're gonna reach bigger project)

In hope it helps !

Marked as helpful

1

@gideon-del

Posted

@Jexinte Thanks a lot. I will do just as you have said

0
Yokke 640

@Jexinte

Posted

@gideon-del You're welcome

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