Design comparison
Solution retrospective
Your feedback is always welcome. Please provide your views on this solution and feel free to point out any mistakes or improvements that I can make. I just had a few doubts, please answer if you know:-
- how could I add that background shadow?
- how could I make the whole component small to match it the same(I took the same dimensions as instructed).
Community feedback
- @Anq92Posted over 2 years ago
Hello!
According to your questions:
- For bg shadow you use box-shadow property box-shadow
- Resizing elements for smaller screens can be done in a flexible way e.g. with clamp() function. You can resize containers, as well as fonts. clamp method You can also use media-queries to switch between different screen sizes media queries
Other things:
-
it's good to use semantic elements like <header> <main> <footer> in your html semantic elements
-
it's better to use rem units than px in CSS => rem units
-
you missed hover effects in your solution, use pseudo-classes for it pseudo-classes
-
don't use fixed dimensions like you did for margin-top in .box selector, because it doesn't look good for smaller screens, use flexbox instead and place the element in the center of the screen. guide to flexbox
Keep good work and good luck with the next challenges!
Marked as helpful1 - @denieldenPosted over 2 years ago
Hi Hardik, great work on this challenge! 😉
Here are a few tips for improve your code:
- add
main
tag and wrap the card for improve the Accessibility - You can add the effect
:hover
creating adiv
that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution - using
<hr>
for the line is not the best way because this tag have a semantic meaning... in this case use div withborder-bottom
because this line is decorative - remove all
margin
frombox
class - use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px
use relative units of measurement likerem
-> read here - you can add background shadow using shadows css property
Overall you did well 😁 Hope this help!
1@HardikRajakPosted over 2 years agoThanks, @denielden for these tips. They helped a lot.
1 - add
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