2022-10-22 20:39:44 +02:00
# Frontend Mentor - Interactive rating component solution
2022-10-05 22:32:03 +02:00
2022-11-01 22:28:57 +01:00
This is a solution to the [Interactive rating component challenge on Frontend Mentor ](https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI ). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
2022-10-05 22:32:03 +02:00
2022-10-22 20:39:44 +02:00
## Table of contents
2022-10-05 22:32:03 +02:00
2022-10-22 20:39:44 +02:00
- [Overview ](#overview )
- [The challenge ](#the-challenge )
- [Screenshot ](#screenshot )
- [Links ](#links )
- [My process ](#my-process )
- [Built with ](#built-with )
- [Author ](#author )
- [Acknowledgments ](#acknowledgments )
## Overview
2022-10-05 22:32:03 +02:00
2022-10-22 20:39:44 +02:00
### The challenge
2022-10-05 22:32:03 +02:00
2022-10-22 20:39:44 +02:00
Users should be able to:
2022-10-05 22:32:03 +02:00
- 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
2022-10-22 20:39:44 +02:00
### Screenshot
2022-10-05 22:32:03 +02:00
2022-11-01 22:28:57 +01:00
![Mobile Front ](screenshots/mobile-front.png )
![Mobile Back ](screenshots/mobile-back.png )
![Mobile Active States ](screenshots/mobile-active-states.png )
![Desktop Front ](screenshots/desktop-front.png )
![Desktop Back ](screenshots/desktop-back.png )
2022-10-05 22:32:03 +02:00
2022-10-22 20:39:44 +02:00
### Links
2022-10-05 22:32:03 +02:00
2022-11-01 22:28:57 +01:00
- Solution URL: [Github ](https://github.com/tarasis/tarasis.github.io/tree/main/projects/FrontendMentor/newbie/interactive-rating-component )
- Live Site URL: [tarasis.github.io ](https://tarasis.github.io/FrontendMentor/newbie/interactive-rating-component/ )
2022-10-05 22:32:03 +02:00
2022-10-22 20:39:44 +02:00
## My process
2022-10-05 22:32:03 +02:00
2022-10-22 20:39:44 +02:00
### Built with
2022-10-05 22:32:03 +02:00
2022-10-22 20:39:44 +02:00
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
2022-10-05 22:32:03 +02:00
2022-10-22 20:39:44 +02:00
## Author
2022-10-05 22:32:03 +02:00
2022-11-01 22:28:57 +01:00
- Website - [Robert McGovern ](https://www.your-site.com )
- Frontend Mentor - [@tarasis ](https://www.frontendmentor.io/profile/tarasis )
- Twitter - [@tarasis ](https://www.twitter.com/tarasis )
2022-10-05 22:32:03 +02:00