Skip to content
Submitted almost 3 years ago

Order Summary Card - HTML, CSS, Flexbox

zshawdev•110
@zshawdev
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

Hi! I'd be grateful to know if my code is as clean and elegant as it could be, and if there's a better way to accomplish things than what I came up with.

The only real issue I was conscious of that I wasn't able to fix is that the background-image simply would not show up on my broswer. I even downloaded someone else's attempt of this challenge, whose preview had the background showing - and despite being present in their code as well - the background-image would not display when I ran, viewed, Chrome Dev Tools inspected etc. the .html myself. Why's that happening? I'm on the latest version of Chrome.

Any comments, insights, suggestions, and advice is appreciated. Thank you!

Community feedback

  • namlh•630
    @namlh023Posted almost 3 years ago

    Hello ZSHAW5555,

    You did pretty nice work but here are some ideas you should consider:

    • You don't have to download all the front into your project. In this case just import to your CSS file like this: @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');
    • Change <h2>Order Summary</h2> to <h1>Order Summary</h1> because of the accessability issues
    • The "Removes HTML Default Styling" section should get into a separate file.
    • .subcription have duplicate display: flex. Please remove one.
    • You should add cursor: pointer on hover.
    • And check .pay-btn padding :)
    Marked as helpful
    0
    zshawdev•110
    @zshawdevPosted almost 3 years ago

    @namlh023 Thank you, Ryan! That was incredibly helpful, and taught me quite a bit. :)

    0
    zshawdev•110
    @zshawdevPosted almost 3 years ago

    @namlh023 P.S. for the .pay-btn padding needed a bit more height to it, or that specifying 0 for the left & right padding was redundant as the padding wouldn't have an effect anyway if I specified it all fours around with only one value?

    0
    namlh•630
    @namlh023Posted almost 3 years ago

    @zshaw5555 I meant the padding-top & bottom. The payment button looks a bit lower in the preview. But I just saw you set padding: 15px so it's fine. Keep up the good work :)

    0
  • Alex•660
    @al3xbackPosted almost 3 years ago

    Hi ZSHAW5555,

    Looks like u're pointing the background-image in wrong place.

    Try change from: body { ... background-image: url(images/pattern-background-desktop.svg); ... }

    To this: body { ... background-image: url(../images/pattern-background-desktop.svg); ... }

    This means that the images folder is no longer the same place with css.

    Marked as helpful
    0
    zshawdev•110
    @zshawdevPosted almost 3 years ago

    @al3xback That fixed it! I thought I had tried everything, evidently not. Thanks so much, I'll have to add it to the design and play with it some more.

    0
    Alex•660
    @al3xbackPosted almost 3 years ago

    @zshaw5555 ur' welcome. good luck!

    0

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