Profile card component challenge using flexbox

Community feedback

• 

  Bryan Li•3,530

  @Zy8712Posted about 1 year ago

  Your site looks pretty good. Some feedback I'd give is that you forgot to use overflow: hidden on your body to hide the bottom of the circle. I personally think it would've been better if you used the background-image property to implement the circles. Something like this could have worked:

   background-color: var(--theme-dark-cyan);
    background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: right 52vw bottom 35vh, left 48vw top 52vh;
    /* top img is offset 52 percent of the vw from the right and offset 35 of the vh from the bottom*/
    /* bottom img is offset 48 percent of the vw from the left and offset 52 of the vh from the top*/
  

  With regards to your set up for the profile stats. I believe it would've been better if you did something like this:

     <div class="card_profile_stats">
  
        <div>
          <h3>80K</h3>
          <p>Followers</p>
        </div>
  
        <div>
          <h3>803K</h3>
          <p>Likes</p>
        </div>
  
        <div>
          <h3>1.4K</h3>
          <p>Photos</p>
        </div>
  
      </div>
  

  Then you could assign display: flex to the .card_profile_stats class, along with justify-content: space-between. You could also add in margins to adjust it to your liking. Structuring your <div> tags and imagining everything in boxes is how I learned to lay stuff out (along with grid and flexbox).

  Hope you found this useful 👍

  Marked as helpful

  0

  ---

  

  Adri Vasarhelyi•90

  @adrivasarhelyiPosted about 1 year ago

  @Zy8712 I absolutely found it useful thank you very much for your feedback! I'm not perfect with layouts and flexbox so you helped me a lot to understand better. Not to mention your background solution is much easier than mine. :)

  0