Submitted over 1 year ago

Order Summary Card Component Using Only HTML and CSS

Rizki Bagus• 50

@RizkiB12

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

What did you find difficult while building the project?

the difficult first is make a waves background and use svg for the background
Make image people enjoy music fit and width auto with the border container card Do you have any questions about best practices?
Please can you help me to make this card responsive
Make a background wave with the SVG image that frontend mentor give the image
Make a best structure of HTML and css

Community feedback

_nehal💎• 6,710

@NehalSahu8055

Posted over 1 year ago

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

➨ Use Semantics for the proper design of your code.

<body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>

➨ For an image like .svg are decorative which screen reader will not render it to be important and skip it, so it makes no sense to add alt leave it blank.

➨ Use max-width instead of width to make your design responsive

➨ Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

link.

➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.

I hope you find this helpful.

Happy coding😄

Marked as helpful

Rizki Bagus• 50

@RizkiB12

Posted over 1 year ago

@NehalSahu8055 thank you so much, may God always bless you

_nehal💎• 6,710

@NehalSahu8055

Posted over 1 year ago

@RizkiB12

Always happy to help

Thanks for your kind words 🙂.

Marked as helpful

Kamlesh Rajesh Yadav• 5,060

@Kamlesh0007

Posted over 1 year ago

Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. make the container center properly use min-height:100vh instead of height:80vh which is used to ensure that a container or element takes up at least the full height of the viewport (the visible area of the browser window) regardless of the content inside it.

Here's an example code snippet:

.order-summary-container {
min-height: 100vh;
}

Marked as helpful

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