Submitted over 2 years ago

Order Summary Component with Flexbox

Arturo Simon•1,785

@artimys

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello,

Another challenge done. Something I did learn is that hsl(value, value%, value%, 1) can take a 4th value for opacity. I usually converted hsl value to rgba.

For the purple ish active color and box shadow, I took the bright-blue color and reduced opacity. But because bright-blue hsl values were duplicated 3 times in my code I wanted to dry(don't repeat yourself) it up.

Wrote a sass function but didn't work when I applied it to a custom property. No errors. If anyone has any thoughts on it?

@function brightBlue($opacity: null) {
  @if ($opacity) {
    @return hsl(245, 75%, 52%, $opacity);
  } @else {
    @return hsl(245, 75%, 52%);
  }
}
:root {
    --bright-blue: brightBlue();
}

Happy coding!!

Community feedback

Martin Kamír•490
@Martin-K-KamirPosted over 2 years ago
Hey @artimys,

cool idea about the function. To make it work, you need to use interpolation.

Add this to your code and it will work.

@function brightBlue($opacity: null) { @if ($opacity) { @return hsl(245, 75%, 52%, $opacity); } @else { @return hsl(245, 75%, 52%); } }

:root { --bright-blue: #{brightBlue(0.5)}; }
Marked as helpful
1
Arturo Simon•1,785
@artimysPosted over 2 years ago
@Martin-K-Kamir

Thanks, it worked like a charm
0
Shashree Samuel•9,260
@shashreesamuelPosted over 2 years ago
Hey good job completing this challenge. Keep up the good work.

Your solution looks great however I think that your card has a bit more margin on the bottom, just decrease it a little

In terms of your accessibility issues simply wrap all your content between main tags

I hope this helps

Cheers Happy coding 👍
1
Arturo Simon•1,785
@artimysPosted over 2 years ago
@TheCoderGuru

Good catch, there was a point were I had my margin/padding setup with ems and when I corrected some font-sizes in some of the child or parent containers. All hell broke loose.

<main> tag added. Thanks again
0

Please log in to post a comment

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