Skip to content
Submitted over 1 year ago

Order Summary Card Component Using Only HTML and CSS

Rizki Bagus•50
@RizkiB12
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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
    @NehalSahu8055Posted 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
    1
    Rizki Bagus•50
    @RizkiB12Posted over 1 year ago

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

    1
    _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    @RizkiB12

    Always happy to help

    Thanks for your kind words 🙂.

    Marked as helpful
    1
  • Kamlesh Rajesh Yadav•5,060
    @Kamlesh0007Posted 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
    1

Please log in to post a comment

Log in with GitHub

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