HTML and CSS

Community feedback

• 

  dania•530

  @adimidaniaPosted over 3 years ago

  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!

  Marked as helpful

  2

  ---

  

  Adaeze Ikemefuna•95

  @AdaezeIkemefunaPosted over 3 years ago

  @adimidania your tips were really helpful, especially as regards height.

  0

  

  dania•530

  @adimidaniaPosted over 3 years ago

  @Ada-ikemefuna happy to know that <33

  0
• 

  darryncodes•6,370

  @darryncodesPosted over 3 years ago

  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);

  Marked as helpful

  0

  ---

  

  Adaeze Ikemefuna•95

  @AdaezeIkemefunaPosted over 3 years ago

  @darryncodes worked like magic

  0