Skip to content
Submitted almost 3 years ago

Pure HTML and CSS

ibelkedar•40
@ibelkedar
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

I'm here to share with you my second challenge, hope you'll like it, and if there is any suggestion of how I can improve it, it will be welcome. I'm still learning :) Thanks a lot.

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Ibelkedar,

    Good effort on this, it looks really close to the design!

    I'd recommend adding background-image: url(images/pattern-background-desktop.svg); background-repeat: no-repeat; background-size: 100% auto; to your <body> and deleting <div class="desktop_img"></div> to get a closer match to the challenge.

    You could clear your accessibility report if you changed your h2 to a h1 and used a <main> tag. Semantic html is really important

    Happy coding!

    Marked as helpful
    1
  • Rio Cantre•9,690
    @RioCantrePosted almost 3 years ago

    Hello there! You did a great job in this challenge. Looking at your solution the code is pretty decent and I would suggest the following to improve some parts of the code:

    • Add a height in the .desktop_img, set it to 50%
    • Instead of using div which is very common, wrap the .card with main tag for readability

    Overall you did well and keep up the good work!

    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