Purnima Kumar• 390
@purnimakumarr
Posted
Hey Kapline, Congrats on completing your first project involving JavaScript 🙌
I would suggest two changes:-
- You should re-position the
<footer></footer>
section. As right now, it seems to overlap the rating component in desktop design. I would suggest not to position the footer usingabsolute
. You can do it by using Flexbox. I see you are using Flexbox to center the contents inbody
horizontally and you have specified amargin-top
on the body to center the contents vertically. However, you can center the contents of body both horizontally and vertically by using Flexbox only. You only have to addjustify-content: center
css property to thebody
tag. This is a flexbox property which aligns the content vertically when theflex-direction: column
is set. And, you can addgap: 24px
to thebody
tag to have some spacing between rating card and footer. This is what your CSS code would look like:-
body {
height: 100%;
font-family: 'Overpass', sans-serif;
background-color: var(--very-dark-blue);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 24px;
}
.attribution {
font-size: 15px;
text-align: center;
color: var(--light-grey);
}
- Also you should put the JS
script
outside themain
section. It should be put at the very last in the code and beforebody
is closed.
Marked as helpful
0