Profile card component using HTML and CSS

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 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👍

  Marked as helpful

  0

  ---

  

  Moris Tibenkana•160

  @tmorisPosted over 2 years ago

  @Bayoumi-dev, Thanks for saving me up, actually i have been having this accessibility report issue always and background images issue. You advise bails me up now. Very helpful, thanks once again and best regards

  0

  

  Moris Tibenkana•160

  @tmorisPosted over 2 years ago

  Hey, @Bayoumi-dev. I have updated it, and its eye catching i love it. Thanks a lot for helping me out.

  0

  

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  @tmoris You are welcome

  0

  

  Moris Tibenkana•160

  @tmorisPosted over 2 years ago

  @Bayoumi-dev. I need to kick start challenges which involves JS however, am not well conversant with it now. I will be disturbing you a little for help brother, Thanks

  1

  

  Usanase Makala•330

  @usanCodePosted over 2 years ago

  @Bayoumi-dev Hello,

  How are you? You've really provided a very helpful post here. Me too I have issues on how to put the images into their proper places and make them stay there when changing the viewport's width. The other problem is how to put a container right in the middle of the body of the webpage vertically. And something else I would like to know... is how to screenshot or highlight some parts of the code or words ,as you've done in this comment, and paste them here.

  0