Design comparison
Community feedback
- @kkalvaaPosted about 1 year ago
A couple of things:
1: Do not use <body> as your component This rating component should be able to be placed on a page somwhere, you can't put a <body> inside of a <body>, unless you use an <iframe> (which you really shouldn't for this). The component should be a <section> or a <div> or possibly an <aside>.
2: You forgot to remove the default border on the button Try "border: 0;" in your css to remove default borders on buttons.
3: The text is the wrong typeface The design is clearly a sans-serif, the finished solution is using serif text.
4: Try adding a transition to the number buttons for the colour change. Transitions are simply easier on the eye than abrupt changes. My favourite: "transition: all ease-out 200ms;"
5: SuccessMessage text goes outside of the main box. Since you're spesifically setting a width on the success message which is larger than the container the text bleeds out of the box. Generally you'll never need to add a spesific width to any child element of a component (at least if you don't hate your life and want to make everything harder than it has to be).
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord