Interactive rating card with Flexbox

Hey there! 👋 Here are some suggestions to help improve your code:

• This LINK is a heading ⚠️ so it needs to wrapped in a heading element.

• The “icons/illustrations” in this component are purely decorative. ⚠️ Their alt tag should be left blank to hide them from assistive technology.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

• Unfortunately, the HTML for the ratings needs to be rewritten as it was done incorrect ❌:

To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.

1. Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
2. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
3. The last thing you will want to include will be a button so users can submit their choice.

Here is how it looks like fully implemented: EXAMPLE

More Info: 📚

MDN: Form Element

MDN: <input type="radio">

MDN: Field Set Element

If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

Happy Coding! 👾

Hi Derek👋

Yes, you can add a circular border to an element with an irregular shape by using the "clipping" technique.

To do this, you would create a parent element with a circular shape and set its overflow property to "hidden".

Then, you would place the element with the irregular shape inside the parent element, so that only the part of the element within the circular boundary is visible.

Here's an example:

.parent { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; }

.child { width: 300px; height: 100px; }

<div class="parent">

`<div class="child">`This element has a circular border!`</div>`

</div>

In this example, the parent element creates a circular shape, and the child element is clipped so that only the part of it within the circular boundary is visible.

Good Luck