Order Summary component using CSS

Hey there,

It looks good, well done!

1. Your background looks fine! You can add both the image and the colour as a background like this: background: url(images/pattern-background-mobile.svg), #E0E8FF. But the way you did it works just as well. ^^

2. I'd say it's okay to have a section inside a section, although I see no reason to do this, unless it helps you reading your own code easier. By default, section isn't more semantic than a simple div. I usually use sections to separate bigger chunks of content belonging together because it makes it easier for me to find things in my own code ^^ But yeah, if you're interested in knowing more, I suggest reading this article.

There are some other small issues here and there with your solution that you may wanna take a look at:

1. You should swap your height to min-height: 100vh on the body. You don't want to lock it strictly at 100vh, that could cause problems.

2. Apart from setting a min-height on your body (which is there for your flexbox to vertically align your component) it's usually the best to avoid setting heights on your elements. If you feel like you need to add some height, try adding some padding or margin instead! That together with the default height of elements is all you need in 99% of cases.

3. Try not to set your font-size in pixels, you could use rem instead so it would scale if a user was to change their browser's font-size settings.

4. Don't use strong tag for styling purposes, it has a semantic meaning. Add font-weight to the element if you want to make it bolder.

5. You need to set a font-family for your buttons, otherwise the browser's default styles apply

6. No reason to set type="button" on buttons.

7. Margins, paddings are also best to be set in relative units, like em, rem, etc.

I hope this helped ^^ Good luck!

Hello!

Your solution looks almost like the design!

1. You had to use both versions of the background, one for desktop and another one for mobile. You could have done it using a picture tag and source tags inside of it. Add to each source tag the src of the image and a media attribute that informs the browser of when that image should be rendered based on the size of the page.
2. Yep! Sections are allowed to be nested inside of other sections. However you have to keep in mind is that they must have a heading (h2-h6) inside of it in order to inform screenreaders what that section is all about.

Other than that your solution is all clear! Hope this is useful.

Background looks perfect, I did it the same way, they only provide you with one "half" in the style guide, and the second half is identical copy just flipped with a lighter color.