profile-card challenge

Community feedback

• 

  Adarsh Pratap•5,515

  @adarshcodesPosted almost 4 years ago

  Hi @mansi05041, Welcome to this amazing community, and congratulations on submitting your first solution over here. You can do a few things to make it better.

  • Remove background-attachment: fixed; from the body
  • You can use background-position: x-axis for the first img y-axis, x-axis for the second img y-axis; for positioning the images.
  • Use the height 100vh to the body and also adding margin: auto; will center the card(You can also use flexbox for that).
  • If you are just starting web-development, you should learn CSS-Flexbox and CSS-Grid to make sites more responsive. You can learn Flexbox from here and CSS-Grid from here.
  • Code aspect: It is good practice to style body and HTML on the top.
  • Great work, no HTML or Accessibility issues aroused👍. Keep it up. Happy Coding😀

  3

  ---

  

  mansi•195

  @mansi05041Posted almost 4 years ago

  thanks a lot for valuable suggestions

  0
• 

  Renszo Camacho•1,615

  @RenszCamachoPosted almost 4 years ago

  Hiya 👋🏻 mansi. Congratulations, on doing your first challenge 🚀 🚀 🚀

  I've been checking your code. Just some suggestion:

  -if you want to center an item, I recommend you use flex-box.click here

  -It'd be nice if you have a container and inside of the container place all the elements inside.

  ` <article class="card"> <div class="card__header"></div>

      <div class="card__body">
        <img
          src="./images/image-victor.jpg"
          alt="user image"
          class="card__img"
        />
        <h1 class="card__title">
          Victor Crest
          <span class="card__age">26</span>
        </h1>
        <p class="card__location">London</p>
      </div>
  
      <div class="card__footer">
        <div class="card__followers">
          <p class="card__numbers">80k</p>
          <span>Followers</span>
        </div>
  
        <div class="card__likes">
          <p class="card__numbers">803k</p>
          <span>Likes</span>
        </div>
  
        <div class="card__photos">
          <p class="card__numbers">1.4k</p>
          <span>Photos</span>
        </div>
      </div>
    </article>
  

  `

  I hope that it helps you.

  Keep coding🧑‍💻

  4

  ---

  

  mansi•195

  @mansi05041Posted almost 4 years ago

  @RenszCamacho thanks for valuable suggestion . i will check it out...

  0