Mobile-first solution using CSS Grid and Flexbox

Hi BehzodKholmahmadov. Great job done! 👍

Thumbs up for implementing both the mobile and desktop versions.

HTML: You use semantic elements like main and button which is good so keep it up.

The only minor thing I will encourage in your HTML is with your button element. It’s best practice to always declare the type when you create a button.

For example, this could have been

<button class=”button” type=”button”>Continue</button>

CSS: Your background colors for the summary items are not faded like the one in the project because you are using hsl() and not hsla(). The a in hsla() is for alpha. And that is what handles transparency.

So for example, you have the following variables declared in your root.

  –clr-accent-1: 0, 100%, 67%;
  –clr-accent-2: 39, 100%, 56%;
  –clr-accent-3: 166, 100%, 37%;
  –clr-accent-4: 234, 85%, 45%;

These values are by default using hsl() because each one has three values and no transparency is being applied. To achieve the transparency, you can use hsla(), and give each one an alpha value for transparency.

Here is an example for the first one.

  –clr-accent-1: hsla(0, 100%, 67%, 0.1);

Also, you didn’t give any color to the .summary-item-title elements.

I hope this helps.

Cheers and happy coding!

Hi, great job!

You should to modify the opacity to background-color: hsl(var(--item-color), .1 );. And for the .summary-item-title you should to use the color without opacitiy.

For your .result-score span add font-weight: 700; and It will look better.

I hope this are helpful to you.