Interactive Rating Component (HTML + CSS + JS)

Very good work! The functionality works well and you almost nailed the layout and design of the site.

There are a few minor changes that could be made though.

I noticed that the font doesn't match the one in the design. You can download or link/import the font from this website, which is full of fonts provided by Google: Overpass - Google Fonts. The one I linked is the one that's used in the design mockups.

I saw that you're using position: absolute; with top, bottom, and transform to center the card on the screen:

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

While this method works on large screen sizes, on screensizes where the card is too large to fit on the screen all at once, parts of the card get cut off, which hinders the usability and user experience of your site.

To fix this, you could add this to your code:

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 50px;
}

min-height: 100vh; sets the minimum height of the body element to 100vh, but allows it to expand if necessary.

display: flex;, justify-content: center;, and align-items: center; places the card in the center of the viewport.

position: relative; makes it so that the .attribution element, which has been given the property of position: absolute;, is positioned relative to the body element.

Finally, I added some padding to the body element as whitespace is good for improving visual balance.

Make sure to remove the position: absolute;, top: 50%, left: 50%, and transform: translate(-50%, -50%); properties from the .container element if you decide to use this method instead.

Other than that, this solution is great!

Hope this helped! :)

Hi! #id raises "specificity" in CSS, which'll make that rule more difficult to override when you need to. It's better to use classes for styles when possible, and use IDs to link elements together, for example:

<label for="the-id"></label>
<input id="the-id" type="radio" />

If you specify the width and height of the SVG inside the viewBox attribute, you can change the size with CSS:

<!-- Remove `width` and `height` -->
<svg viewBox="0 0 17 16"></svg>

The design uses a radial-gradient() for the background instead of a linear gradient. I think that's why it looks slightly different.

Good work!