Profile card component using HTML and CSS

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Dean,

  My suggestions:

  • To center the component on the page, Set the height of the container min-height: 100vh; :
  • 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 {
    /* margin: 8rem auto; ;  <---Remove */
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  
    /* background-image: url(images/bg-pattern-top.svg);  <---Remove */
    margin: 0;   /* <---- Add */
    min-height: 100vh;    /* <---- Add */
  
    background: url("./images/bg-pattern-top.svg") right 50vw bottom 40vh no-repeat, 
      url("./images/bg-pattern-top.svg") 50vw 50vh no-repeat #19a2ae;   /* <---- Add */
  }
  
  main::before {   /* <---- Remove all */
    /* content: ""; */
    /* position: fixed; */
    /* top: 0; */
    /* left: 0; */
    /* width: 100%; */
    /* height: 100%; */
    /* z-index: -1; */
    /* background-color: rgb(86 122 124);*/
    /* background-image: linear-gradient(115deg, rgb(16 79 92 / 80%), rgb(177 219 251 / 70%)),
     url(images/bg-pattern-top.svg);*/
    /* background-size: contain; ;*/
    /* background-position: center; */
    /* background-repeat: no-repeat; */
  }
  
  

  • I suggest you put the status of the profile card into the list item to add more semantics to your project.

  <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 is helpful to you... Keep coding👍

  Marked as helpful

  1
• 

  Dean Hudek•290

  @deksa89Posted over 2 years ago

  Thank you very much Ahmed!!! I appreciate it :D

  0