Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

Order Summary Component using Html, CSS

Ashok Kumar Dharanikota•210
@Ashok-Kumar-dharanikota
A solution to the Order summary component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I have two issues here,

  1. I am unable to make the background the way it is given in the design. I searched a lot but didn't get the correct answer for this.

  2. I didn't understand how to make the div "third" immediately right to the music icon.

I truly appreciate your help, if you help me find the mistake or correct approach for this. Thank you.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Claudio Netto Junior•180
    @claudionetto
    Posted almost 2 years ago

    Depending on the image problem, you have some properties that can help you with this, in this case it would be: background-repeat: no-repeat; background-size: contain;

    The first, as the name implies, is for non-repeat, and the second with background-size contain, the background image is sized to fit completely inside the parent element, so that the image is not cut off. There are other possibilities with these attributes too, but for this case these would be the ideas.

    Another tip is to try to use shorthands, for example in the margin, in some places you have defined 3 properties for the margin when you could use the margin shorthand and define just one, for example, margin: 0px 30px 20px 30px, I'm saying that I want a margin-top of 0px, a margin-right of 30px, a margin-bottom of 20px and a margin-left of 30px, if you want to set it equal to the sides and equal vertically as well just use margin: 10px 20px; in that case you've set 10px for top-bottom and 20px for right-left.

    There are several other abbreviations that made your code shorter and cleaner, it's worth researching. Good studies!!!

    Marked as helpful
  • Nayan Bhatt•1,000
    @freaky4wrld
    Posted almost 2 years ago

    Hey there, congratulations on completing the challenge, here's what you can do with the background image:-

    • first of all add the background-image property to body
    • then use the following code
    body{
          background-image: url(img-url);
          background-repeat: none;
          background-size: cover;
          background-position: center;
    }
    
    • to make it more like the challenge one you can add a linear gradient as well, here you go with the references:- background-image linear-gradient

    Hope you find it useful

    Marked as helpful
  • Rajaul Islam Ratul•1,250
    @ratul0407
    Posted almost 2 years ago

    @Ashok-Kumar-dharanikota congratulations on completing this challenge, you've done a great job🎉 But there are some things you should consider changing🙂 :

    • I don't know why you chose to give a background-color to your wave-container (background: rgba(55, 210, 237, 0.412); )🤔 Remove it, you don't need this.
    • Then inside of your wave-container you've already set the background-image you just need to set the other background properties to make it work properly
    .wave-container {
    background-size: contain;
    background-repeat: no-repeat; //it will stop the repeating issue with your background-image
    background-color: hsl(225, 100%, 94%); //pale blue
    

    The background image and color issue is solved🎉🎉

    • And now to make the third div go right next to the music icon, You don't need the .third div inside of your div one you can have two children's a second div and a <a> tag. Inside of your second div you can put the music icon and a <p> with a <span> just like you set on your third div and then
    .one {
    display:flex;
    justify-content: space-between:
    }
    

    There are two items in your one div a div with a class of second and a anchor tag so justify content of space between will separate both of them to the side of their parent element which one so the music icon and the p will go to one side as and the a tag will go to the other side as they are siblings and you can adjust the space of the music icon and p by giving the second a class of flex or maybe using padding or margin as you would like

    I hope it was helpful for you👍👍

    Happy coding brother🙂🙂

  • Nayan Bhatt•1,000
    @freaky4wrld
    Posted almost 2 years ago

    @Ashok-Kumar-dharanikota can you be more clear on your second query, like what exactly you want to ask and achieve........

    To me the interface looks pretty fine!!!

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub