Submitted about 1 year ago

Making Order Summary Card component using HTML5/CSS3

Ahmedkh24• 20

@Ahmedkh24

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello, folks!

This is my second HTML/CSS project and it's about building a card component, and I learned a lot of new CSS properties in this project such as "max-width", "text-decoration", "over-flow", "box-shadow", "transition" and some Pseudo classes such as ": hover, active, link, visited ". So, please give it a look and I wish to get feedback on it and what could be done better.

Thanks in advance!

Community feedback

Parvez785• 180

@Parvez785

Posted about 1 year ago

Hey, there congrats on completing challenge,the image is not properly positioned use /background-size: contain;/ to match background image position also u have not used background-color for body as below background-color: hsl(225, 100%, 94%); make above changes to match the design

Happy coding ! and great work done

Marked as helpful

Ahmedkh24• 20

@Ahmedkh24

Posted about 1 year ago

@Parvez785 Thanks for your feedback, I really appreciate it, I didn't notice the other color in the background!

Aimal Khan• 2,260

@Aimal-125

Posted about 1 year ago

Bro increase the height of the container for example 120 or 150vh for small heighted screens by using media queries.

Ahmedkh24• 20

@Ahmedkh24

Posted about 1 year ago

@Aimal-125 Thanks!

Please log in to post a comment

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