Design comparison
Solution retrospective
looking forward to insightful contributions as always
Community feedback
- @KingsleyChukwuPosted over 1 year ago
@Abolude30 Congratulations on making a nice attempt. It’s really a good one but I would like to make a few contributions or suggestions that would help make the design look a lot better.
You should make use of the style-guide file to get the appropriate colors and font-family used. That been said, you can also give the main-container a width of 350px which is subject to change if it’s run on a mobile device with a screen width lesser than the width specified, it would suffice to use a width of 95%.
For the container, you could use:
.container { width: 350px; border-radius: 10px; background: var(--dark-blue); padding: 1.4rem; }
As your root element from the style-guide file, this should suffice for the different colors used:
:root { --white: hsl(0, 0%, 100%); --light-gray: hsl(217, 12%, 63%); --medium-gray: hsl(216, 12%, 54%); --dark-blue: hsl(213, 19%, 18%); --very-dark-blue: hsl(216, 12%, 8%); }
The p element with an id set to T-card, there is no need for the width as it could cause unexpected behaviours when the page is resized. The container or card’s padding should take of its width. A font-size of 13px would do.
The p element with an id of info, this should help:
#info { font-size: 12px; color: rgb(255, 136, 0); background: hsl(217, 17%, 24%); padding: 6px 15px; border-radius: 15px; width: 58%; margin: 0 auto 26px; }
For the button elements,
.num-card .btn { width: 45px; height: 45px; border-radius: 100%; background: hsl(217, 17%, 24%); border: none; outline: none; font-size: 13px; text-align: center; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; color: var(--medium-gray); }
.num-card .btn:hover { background-color: rgb(255, 136, 0); font-weight: 700; color: var(--white); }
Add the following to your code to help with the styles. It’s a font imported from google fonts.
https://fonts.google.com/specimen/Overpass
Marked as helpful0@Abolude30Posted over 1 year ago@KingsleyChukwu thanks a lot for the contribution. id take note of it
1
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