Social-profile

Community feedback

• 

  Youssef Mohammed•90

  @YussefMoPosted about 9 hours ago

  Hello There Good work You've done but it can be better by doing this

  HTML

  you'r code
      <div class="container">
          <img src="images/istockphoto-1411901680-612x612.jpg" alt="profile photo">
          <b>John Doe</b>
          <span><strong>Rome, Italy</strong></span>
  
          <p>Front-end devoleper and copywriter</p>
          <ul>
              <li>GitHub</li>
             
              <li>Facebook</li>
              
              <li>Linkedin</li>
             
              <li>Telegram</li>
              
              <li>Instagram</li>
          </ul>
          
      </div>
  better to do
   <div class="container">
     <div class="card">
     ..........
     </div>
   </div>
  

  here you add an anthor container coald card to hold every thing tou want to make better result in css and more responsive desgin

  you'r code
  body{
      background-color: black;
      max-width: 1440px;
  }
  better to do
  body{
      background-color: black;    
      font-family: Arial, Helvetica, sans-serif;
  
  }
  .container {
      width: 100vw;
      hight: 100vh;
      background-color: rgba(103, 108, 116, 0.233);
      color: white;
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      text-align: center;
  }
  .card{
     width: 30%
     hight: 60%
  }
  

  -better to put the font family in the body not the container

  -here you used static width in the body and that's make the web not responsive better to do is use vw for width and vh for hight for the container not body so the container will adjust automatically for any screen size 100vw mean is 100% of the whole screen in total whatever the screen width is it will take 100% of it and same goes for the vh

  -then the justify and align is to make sure the content is alwes in the center of the screen

  -and it's better to use :root to put you'r main conf like text algin color font size etc and it will be applayed for the whole web

  -if you like to see something like what i told you chike this repo of me and the live site to understand better what i told you upove

  -if you find it helpful dont forget to mark it as helpful😊

  0
• 

  Mohammedrefaat98•60

  @Mohammedrefaat98Posted about 9 hours ago

  the card isn't fully visible on the page. Try to make it to center of the page

  0