Profile card component using HTML and CSS

Community feedback

• 

  Ahmed Bayoumi•6,680

  @Bayoumi-dev

  Posted about 3 years ago

  Hey Moris,

  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-color: var(--clr-Darkcyan); */   <--- Remove
     background: url(../images/bg-pattern-top.svg) right 50vw bottom 40vh no-repeat,
                 url(../images/bg-pattern-bottom.svg) 50vw 50vh no-repeat 
                 var(--clr-Darkcyan);
     //...
  }
  

  • Page should contain a level-one heading, Change h2 to h1

  <h1 class="name">Victor Crest <span class="text-reg">26 </span></h1>
  

  You should always have one h1 per page of the document... in this challenge, you will use h1 just to avoid the accessibility issue that appears in the challenge report... but don't use h1 on small components <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page.

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

  05

  Marked as helpful