Flexbox have been used

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Yokke, Congratulations on completing this challenge...

  • To handle the background circles, you need to give the section that contains the profile card the following style to put these circles as a background image:

  .container {
    background: url(../images/bg-pattern-top.svg) right 50vw bottom 40vh no-repeat,
      url(../images/bg-pattern-bottom.svg) 50vw 50vh no-repeat;
    //...
  }
  

  • To center the component on the page add justify-content: center;

  .container {
    background: url(../images/bg-pattern-top.svg) right 50vw bottom 40vh no-repeat,
      url(../images/bg-pattern-bottom.svg) 50vw 50vh no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* flex-direction: column; */  <------
    /* max-width: 100%; */         <------  you don't need to these properties here
    /* margin:8em auto; */         <------
  }
  

  • I suggest you put the status of the profile card into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:

  <ul class="stats">
     <li><span class="stats-num">80K</span>Followers</li>
     <li><span class="stats-num">803K</span>Likes</li>
     <li><span class="stats-num"> 1.4K</span>Photos</li>
  </ul>
  

  I hope this is helpful to you... Keep coding👍

  Marked as helpful

  1
• 

  Yokke•620

  @JexintePosted over 2 years ago

  @Bayoumi-dev Thanks for the advice I will update the solution later and try to pay more attention to semantics . What you suggested it's just a base but I'm so used to div that I forget your recommandation thanks again !

  0