Profile card component with simple funky background

Solution retrospective
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!
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on jackzorola's solution.
Join 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