Design comparison
SolutionDesign
Community feedback
- @RioCantrePosted almost 3 years ago
Hello there! Nice work with this one. Looking at your solution, I would recommend the following for you...
- Wrap the
root
content with specific tag likemain
andattribution
withfooter
tag for readability - Clean the whitespaces in the code
- Add
width: 950px;
andmargin: 2rem auto;
in#root
rule set - Add border to
.card-sedans
withborder-top-left-radius: 0.5rem;
andborder-bottom-left-radius: 0.5rem;
. In.card-luxury
withborder-top-right-radius: 0.5rem;
andborder-bottom-right-radius: 0.5rem;
- Add the hover state of the
button
with the following concept...
.button.btn-sedans:hover { background: var(--bright-orange); border: 1px solid white; } .btn-sedans a:hover { color: white; }
- In the media queries add the borders to
.card-sedans
withborder-top-left-radius: 0.5rem;
andborder-top-right-radius: 0.5rem;
. In.card-luxury
withborder-top-right-radius: 0.5rem;
andborder-top-left-radius: 0.5rem;
. Adjust the breakpoints as well.
Hope this helps and Keep it going!
Marked as helpful0 - Wrap the
Please log in to post a comment
Log in with GitHubJoin 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