Profile Card Solution

Community feedback

• 

  Oto•400

  @TagviPosted almost 3 years ago

  Hello Tymur, The first issue is with accessibility, the font size is too small for most users. Second one is that you could use the <main> tag for semantic purposes. Third one is with selectors, you don't have to use classes to select something like:

  <div class="social-item">
    <p class="number">1.4K</p>
    <span class="text">Photos</span>
  </div>
  

  you can just use

  <div class="social-item">
    <p>1.4K</p>
    <span>Photos</span>
  </div>
  

  p {
    /* whatever */
  }
  span {
    /*  whatever */
  }
  

  So it's not really useful. You could also turn the span into a p and use :first-child and :not(:first-child) pseudo-selectors. Fourth issue is with giving each div width: calc(100% / 3). While the easiest way is to just use 100% width on the parent container and justify-conent: space-between which will put the remaining space in between elements. You can also use the gap property if you want to keep a gap between elements when there is no free space. I've been into coding for a while now, and I can easily spot some common mistakes, don't let this discourage you, keep learning, and you will not make as many mistakes, I will also review your solutions in the future for more help. ~ Oto ❤️

  Marked as helpful

  0
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Tymur,

  I really appreciate the design and use of pseudo-elements - nice work!

  You could consider clearing up your accessibility report including a <h1> and a <main> tag.

  Happy coding!

  Marked as helpful

  0
• 

  Fabricio Rivera•90

  @FabricioRivera2021Posted almost 3 years ago

  Hey, good solution, how do you do to make the 2 backgrounds circles to stay in the center, i couldnt do that.

  0

  ---

  

  Joao Antonio Mendonca•70

  @mendoncajoaoPosted almost 3 years ago

  @FabricioRivera2021 I did it this way:

  body {
    background: hsla(185, 75%, 39%, 1);
    background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");
    background-size: 100vh, 100vh;
    background-position: -10vh -50vh, calc(100vw - 90vh) 50vh;
    background-repeat: no-repeat, no-repeat;
    font-family: 'Kumbh', sans-serif;
  }
  

  You can check out my solution at: https://www.frontendmentor.io/solutions/profile-card-component-Yie_uM_pg

  0