Skip to content
Submitted almost 3 years ago

Responsive layout using HTML and CSS

Jeremiah Lateef•160
@jeremiahlateef
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 wasn't given the color for the box-shadow property so I had to invent one. The background-image I was given was also different. All in all, it was a fairly easy challenge.

Community feedback

  • Danilo Blas•6,300
    @Sdann26Posted almost 3 years ago

    Hi Jeremiah!

    Add the following attributes in your body

    background-repeat: no-repeat;
background-size: contain;

    And uncomment the line background color: hsl(225, 100%, 94%); to make it more similar to the design

    Also do not forget that when using the main tag it is good practice to use an h1 tag to avoid accessibility problems. Good coding!

    Marked as helpful
    1
    Jeremiah Lateef•160
    @jeremiahlateefPosted almost 3 years ago

    @Sdann26 Thank you so much, Danilo, especially about the main tag accessibility problems. I had seen it in my previous solution but did not understand it. Thanks a lot.

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

    Hi Jeremiah,

    You've done a really good job here, with a few tweaks it could be perfect!

    • to make your background better match the design: background-repeat: no-repeat; background-size: 100% auto; (the first value is for the width, and the second is for the height) background-color: hsl(225, 100%, 94%);. CSS background property has a shorthand too.
    • also add dome Flexbox to your <body> to centre it nicely in the viewport responsively display: flex; justify-content: center; align-items: center; min-height: 100vh;
    • add cursor: pointer; to your button and link

    All the best!

    Marked as helpful
    0
  • Jeremiah Lateef•160
    @jeremiahlateefPosted almost 3 years ago

    Wow. So much to recommendations. Thank you so much, Darrycodes! I have implemented all you wrote. Didn't know I still had so much to still do. Really appreciate the help.

    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