- HTML
- CSS
Profile card component
Hey @momenkamal221, congrats on completing the challenge!
I had a look at your final solution and I have a few suggestions for you that I hope will be useful:
-
You don't need to set a
height
property on your .card - your layout should be created in such a way to naturally adjust to the available content. When you set fixed values for your height, or even width, it becomes more difficult to create a robust responsive design. -
You can vertically and horizontally center your design by using flex display on your body element. Also, add
min-height: 100vh
to your body element https://alligator.io/css/viewport-units/ -
Your .card is also missing a box-shadow -> refer to the original design
-
Change styling for the
.unit
elements. Currently, they're a bit different from the original design -
You don't need an hr element. You can simply set a
border-top
property on your.flip-scores
element and then also addpadding-top
as to push the line further above
Hope this helps. Keep up the good work!