@jackzorola10
Submitted
Hi!
Thank you for reviewing this, was relatively simple to build, but found a couple of problems, particularly with the background circles, I explained more in the repository's README, but I'll add it here as well:
In order to do the circles on the background I did the following:
HTML
<figure class="backImg">
<div id="topCircleContainer">
<img src="images/bg-pattern-top.svg" alt="" id="topCircle">
</div>
<div id="bottomCircleContainer">
<img src="images/bg-pattern-bottom.svg" alt="" id="bottomCircle">
</div>
</figure>
CSS
.backImg{
overflow: hidden;
position: absolute;
width: 100vw;
height: 110vh;
z-index: -1;
margin-top: -30vh; /*I had to add this because for some reason it kept pushing my figure down */
}
#topCircleContainer{
position: absolute;
}
#bottomCircleContainer{
position: absolute;
}
#topCircle{
margin-top: -50vh;
margin-left: -10vw;
}
#bottomCircle{
margin-top: 50vh;
margin-left: 50vw;
}
My problem
I have some doubts, I found myself in the situation that for some reason my <figure> did not covered the entire background I had to give it a height: 110vh; but this was not enough as my content kept (for some reason unknown to me) being pushed down. So I had to add margin-top: -30vh;. Not sure what I may have been missing here.
Additionally I found that the font sizes specified in the design are sending this on the lighthouse report: "Document doesn't use legible font sizes" , if this were a real project, would it have been a good idea to go back to the designer and tell them about this?
Thank you all for your time!
