Hatem Henchir• 530
@hatemhenchir
Posted
Hey Prithivi Raj, how are you ? I really liked the result of your project, but I have some tips that I think you will enjoy:
- replace
<div class="card">with<section class="card">and<div class="attribution">with<footer class="attribution">for semantic page. You can read more about semantic HTML here: HTML Semantic Elements. - The background image should be in the body, so move all the main style to the body and just add this line in your class main
margin: 0 auto;. - Consider using rem for font size. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
- I'm notice that the card not have a box shadow. This code, it will help you to do it
box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75); -webkit-box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75); -moz-box-shadow: -11px 10px 19px -3px rgba(0,0,0,0.75);.
You can try an online box shadow generator like this Box Shadow CSS Generator.
The rest is great!
Great work, and happy coding.
2
