Order Summary Component design from the website Frontend Mentor.
https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj
You can see my finished version here:
This design wasn't that difficult to create, but it was definitely fun.
The only problem I had was with the background, more specifically I didn't know how to position it to look exactly like the original design. So I looked at some of its' properties - background-position and background-size - more closely. I'm used to setting the position to center, and the size to cover, because it always did what I wanted 😆.
Turns out it's possible to fine-tune the background's position. You can read more about it here:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
In the end, I set the two properties like this:
background-position: top;
background-size: 100%;
And it worked like a charm. I think.
One more thing I wanted to mention is that I recently found out you can set aria-hidden="true" on any HTML elements that you want to hide from screen readers, such as decorative images, so I did just that. If you use it on images, you still have to include the alt text, but set it to an empty string:
alt=""
Top comments (0)