Skip to content
Submitted about 3 years ago

Semantic HTML5 markup - CSS custom styling. - Flexbox - Mobile-first

Asiimawe•150
@Pablo-cyber21
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

My first challenge on frontend mentor. All advice and critic are very much welcome. Qn. -How can I align the music svg icon with the rest of the elements on the Annual pricing section ?

Community feedback

  • Nguyen Duy•245
    @koalalikecodePosted about 3 years ago

    Hey Asiimawe, congrats on your first challenge. I think you have grasped a basic use of HTML and CSS, but you need to practice more on your next challenge.

    • Firstly, your card is too big compared to the design, you can css your card class with max-width: ...;background-color: white; and have your img in it and the container class with max-width: 100%. You can try these codes.
    • Secondly, your background image should have css that background-repeat: none; to remove the default value.
    • Try to use your h tag respectively, such as h1 -> h2 -> h3
    • Finally, try to make your solution close to the design as much as you can.

    Happy coding!

    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