A profile card with HTML, CSS

Community feedback

• 

  Shahin NJ•1,190

  @SJ-NosratPosted over 3 years ago

  Hi Gregorio, Great effort! I'd suggest the following with your HTML structure. Please don't use <div> tag everywhere; it's usually bad practice, considering that there are semantic tags like: <main>, <section>, <article>` etc.

  The <div> should primarily be used for decorative purposes. Secondly, for the stats part of the HTML structure; try the following:

  <ul>
     <li>
        80K 
        <span>Followers</span>
     </li>
  </ul>
  

  Then applying the necessary CSS styles.

  Also don't try and hard code line breaks into your HTML by using <br> tags, if you want to create space between various elements: use the margin and padding CSS properties.

  Lastly considering your question, you can add the bg-pattern-top.svg and bg-pattern-top.svg to the .content class as <img> and then postion them, as follows:

   .content {
     position: relative;
  }
  
  .bg-pattern-top {
     position: absolute;
     top: 0;
     left: 0;
  }
  
  .bg-pattern-bottom {
     position: absolute;
     bottom: 0;
     right: 0;
  }
  

  NB: Please note that I just named the classes for the pattern as .bg-pattern-top and .bg-pattern-bottom respectively.

  The above can be one approach using only CSS.

  Best of luck with your coding journey!!!

  Marked as helpful

  1