Mobile-first solution using CSS Grid and Flexbox
Design comparison
Solution retrospective
The Summary part and colors were very hard for me to do. So i am not sure about colors and summary secyion
Community feedback
- @BenjaminSemahPosted about 1 year ago
Hi BehzodKholmahmadov. Great job done! 👍
Thumbs up for implementing both the mobile and desktop versions.
HTML: You use semantic elements like
main
andbutton
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 nothsla()
. Thea
inhsla()
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!
Marked as helpful0@BehzodKholmahmadovPosted about 1 year agoThanks i appreciate your support @BenjaminSemah
0 - @MaximilianoDanielGarciaPosted about 1 year ago
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
addfont-weight: 700;
and It will look better.I hope this are helpful to you.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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