html, css, javascript

Community feedback

• 

  induwara-thisarindu•190

  @induwara-thisarinduPosted 5 months ago

  Hi, nice job on solving this challenge. Congrats 🎉 But I would like to give you some pointers that I used to do this challenge.

  1. Normally you don't want to set a fixed height in designs like this it messes up the responsiveness so I suggest not doing that. I believe you did that to keep your image up here's how I did it

  .card .image {
    background-image: url(../images/drawers.jpg);
    width: 985px;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  

  2. Also, in the design we can see that the card's text is not expanding over the whole area of the card. In your design the text keeps goings and I believe that is because you added the width in percentage to the card I think adding a fixed width is the way to go as this only a card design

  .card {
     width: 950px;
  }
  

  3. Also, on the user info space I think it would be better if you stack them in a div and then display them flex column

      <div class="profile-info">
            <div class="avatar">
              <img src="images/avatar-michelle.jpg" alt="avatar">
            </div>
            <div class="info">
              <h4>Michelle Appleton</h4>
              <p>28 Jun 2020</p>
            </div>
        </div>
  

  Now you can style it

  Also, you can do mobile responsive designs by @media queries check them out. 😊 While these may not be the best way hope it helped you out

  Happy Coding!

  0