Order Summary Component (with SCSS)

Hi Cellmix, congratulations on completing the challenge, great job! 😁

Some little tips for optimizing your code:

• For fix the top image in the background just put more specific background properties to the body:

background: url("../img/pattern-background-desktop.svg") no-repeat top center;
background-size: contain;
background-color: #e0e8ff;

• you can use article tag instead of a simple div to the container card for improve the Accessibility
• add descriptive text in the alt attribute of the images
• remove all margin from card class because with flex they are superfluous
• use flexbox properties to the body to center the card. Read here -> best flex guide
• use min-height: 100vh to main tag instead of height, otherwise the content is cut off when the browser height is less than the content
• add transition on the element with hover effect
• instead of using px use relative units of measurement like rem -> read here

Hope this help! Happy coding 😉

👾Hello Cellmix, congratulations for your new solution!

The value you’ve used for the shadow make it too much dark and strong, to create a smooth shadow you need to give it less opacity and more blur try this value for example and see the difference between the previous shadow and this one box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 5%); If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

👋 I hope this helps you and happy coding!

Hello Cellmix,

The card looks fantastic on both mobile and desktop. I just have a few suggestions, if you don't mind.

• A little bit of top and bottom padding to the button on bigger screens would make it look even better.
• Try to put the attribution outside of the card and inside a footer.
• The font sizes can be increased a little bit on bigger screens, so that they don't look small.
• h1 tag is usually used for page headings and for other sections and components, usually h2-h6 tags are preferred.
• Semantic tags can be used for the card component, like section, article, etc., for better accessibility.

I hope my feedback is helpful. Good luck!

Hello everything is fine?

I liked the result of your project, the way you positioned the background image was very effective, it was pretty cool it was repeated only to the sides. I have a tip to slightly improve the responsiveness of the project:

1- Add a side padding to the body padding: 0 20px;, so that when the resolution is lower the content doesn't hit the edge.

The rest is really good! Hope it helps... 👍