Profile Card Component built using HTML and CSS

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey! It looks good!...

  My suggestions:

  An easy way to handle the background circles, Give the body or the profile card container the following style to put these circles as a background image:

  body {
     //...
     background: url("./images/bg-pattern-top.svg") right 50vw bottom 40vh no-repeat, 
                  url("./images/bg-pattern-bottom.svg") 50vw 50vh no-repeat var(--dark-cyan);    /* <---- Add */
  }
  
  .main-container::before {         /* <---- Remove */
     //...
  }
  .main-container::after {         /* <---- Remove */
     //...
  }
  

  • 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>
  

  Hope this help!... Keep it up👍

  Marked as helpful

  1

  ---

  

  Promise•100

  @Promise30Posted over 2 years ago

  @Bayoumi-dev Thank you very much. Your comment has been really helpful, I will make the necessary changes and also implement them in my future projects.

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hi Promise!

  Apart from the recommendations above you can try adding letter-spacing to the words below the numbers to make them separate letters.

  Like this:

  .stats .numbers p {
    font-size: 14px;
    font-weight: 400;
    color: var(--dark-gray);
    letter-spacing: 1px;
  }
  

  I think that's my little input I can give you, everything else seems to me to be pretty good, good luck :D!

  Marked as helpful

  0

  ---

  

  Promise•100

  @Promise30Posted over 2 years ago

  @Sdann26 Thank you very much. I will make the necessary change and also take note of it in my future projects.

  1