HTML and CSS

Hello Adaeze! Congrats on your submission. Keep pushing and keep the work up. Here are some things that you need to update in order to improve your website :

• Reduce the card height by adjusting the height of the hero section, the about section, and the stats section (as well as the padding).
• Let the border-radius be 20px instead of 7px, in order to make it look as close as possible to the given design.
• For h1 the heading in both the about and the stats sections, use color:hsl(229, 23%, 23%);, instead of letting it be black (by default).
• You can also add some letter-spacing to span's inside of the stats section (Followers, etc.).
• For the background, there are plenty of ways to do it, and honestly I don't know what is the best one among them, but I will tell you what I did. For the HTML, I added a div with a class .circles containing the two circles, and another div containing the card component, as you can see here

  <div class="circles">
    <img src="images/bg-pattern-top.svg" class="c1" alt="circle" />
    <img src="images/bg-pattern-bottom.svg" class="c2" alt="circle" />
  </div>
  <main>
</main>

And for the styling, I just did the following :

.c1 {
    bottom: 40%;
    right:50%;
    position:fixed;
} 
.c2 {
    top:50%;
    left:50%;
    position:fixed;
}  
main {
    width:100%;
    height: 100%;
    background-color: var(--dark-cyan);
    /* + Other stuff */
}
.card {
    z-index: 999;
   /* So the card stays on top of everything */
}

I hope you will find this helpful!

Hi Adaeze, great effort on this one!

Try this: background-position: right calc(47vw + 15%) bottom calc(65vh - 15vw), left calc(40vw + 25%) top calc(72vh - 10vw);