Skip to content
OverviewSolutions
7
Comments
4
Youssef Mohammed
@YussefMo

All comments

  • Youssef Mohammed•90
    @YussefMoPosted about 5 hours ago

    thay are not alike in the hight cuz i don't have pro acc so idon't get figma file so i use my Instinct😅

    0
  • Cesare•50
    @Cesare94Submitted about 15 hours ago
    What are you most proud of, and what would you do differently next time?

    It didn't take me long to make it and I'm happy with it

    What challenges did you encounter, and how did you overcome them?

    I had trouble just trying to arrange the items in the correct order

    What specific areas of your project would you like help with?

    At the moment none. Maybe with more difficult exercises

    Social-profile

    2
    Youssef Mohammed•90
    @YussefMoPosted about 13 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
  • Youssef Mohammed•90
    @YussefMoPosted 5 days ago

    IDK why the screenshot like this but it display will like the design in 1440px width screen and 1400px

    0
  • Youssef Mohammed•90
    @YussefMoPosted 5 days ago

    the 1440px width vew fixed but i ran out of credits to regenrate new screenshot😅

    0