This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Select and submit a number rating
- See the "Thank you" card state after submitting a rating
- Solution URL: https://github.com/Chillidot/rating
- Live Site URL: https://chillidot.github.io/rating/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Desktop-first workflow
Positioning images in front of svg.
<svg width="3rem" height="3rem" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="circle" cx="50%" cy="50%" r="50%" />
<image x="33%" y="33%" width="1rem" height="1rem" href="04_img/icon-star.svg" />
</svg>
.circle{
fill: var(--clr-medium-gray);
}
Efficient combination of CSS Grid/Flexbox.
- Resource 1 - This helped me with almost everything
- Frontend Mentor - https://www.frontendmentor.io/profile/Chillidot