Skip to content
Submitted over 2 years ago

Order Summary using Solid JS, CSS Modules, Flexbox, and Grid

solid-js
Brian Michael Poblete•490
@Brian-Pob
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Adding and styling the click animation for the buttons was fun. It consists of three parts:

  1. Changing element scale on hover and click
  2. Setting the drop-shadow and box-shadow on hover and click
  3. Adding a transition for each

[Update 2023-03-05] I updated the code for this challenge to use an h1 tag as recommended by a Frontend Mentor user.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Finney•3,010
    @Finney06

    Hello there 👋. Good job on completing the challenge !

    Here are some suggestions regarding your code that may be of interest to you.

    HTML 🔤:

    To clear the Accessibility report:

    Use an h1 tag for the main text in the design given and always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy.

    I hope you find it helpful!😏 Above all, the solution you submitted is 👌. 🎉Happy coding!

    Marked as helpful

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