interactive rating card

@Abolude30 Congratulations on making a nice attempt. It’s really a good one but I would like to make a few contributions or suggestions that would help make the design look a lot better.

You should make use of the style-guide file to get the appropriate colors and font-family used. That been said, you can also give the main-container a width of 350px which is subject to change if it’s run on a mobile device with a screen width lesser than the width specified, it would suffice to use a width of 95%.

For the container, you could use:

.container { width: 350px; border-radius: 10px; background: var(--dark-blue); padding: 1.4rem; }

As your root element from the style-guide file, this should suffice for the different colors used:

:root { --white: hsl(0, 0%, 100%); --light-gray: hsl(217, 12%, 63%); --medium-gray: hsl(216, 12%, 54%); --dark-blue: hsl(213, 19%, 18%); --very-dark-blue: hsl(216, 12%, 8%); }

The p element with an id set to T-card, there is no need for the width as it could cause unexpected behaviours when the page is resized. The container or card’s padding should take of its width. A font-size of 13px would do.

The p element with an id of info, this should help:

#info { font-size: 12px; color: rgb(255, 136, 0); background: hsl(217, 17%, 24%); padding: 6px 15px; border-radius: 15px; width: 58%; margin: 0 auto 26px; }

For the button elements,

.num-card .btn { width: 45px; height: 45px; border-radius: 100%; background: hsl(217, 17%, 24%); border: none; outline: none; font-size: 13px; text-align: center; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; color: var(--medium-gray); }

.num-card .btn:hover { background-color: rgb(255, 136, 0); font-weight: 700; color: var(--white); }

Add the following to your code to help with the styles. It’s a font imported from google fonts.

https://fonts.google.com/specimen/Overpass