-1
\$\begingroup\$

I am new to web development and I am making a small "About Me" website using html/css . I managed to do this layout : https://imgur.com/a/Kb0xPQA

Although it did the job done, I am just concerned that with this layout/code will affect the future ones

.container {
    transform: translate( 0, 150px);
    display: block;
    margin: 0 auto;
    align-items: center;
    background-color: black;
    width: 80%;
    height: 100vh;
    border-radius: 20px;
    border: 2px solid white;
}

.pfp {
    width: 30px;
    margin: 0 auto;
    float: left;
    padding: 60px;
}

.pfpp {
    width : 250px;
    border-radius: 20px;
}

.textt {
    margin: 0 auto;
    text-align: center;

}

.txtdesign {
    color: white;
    transform: translate(250px, 150px);
    float: left;
}
<section id="AboutMe">
    <div class="container">
            <div class="pfp">
                <img src="https://via.placeholder.com/150/0000FF/808080?text=my%20face" class="pfpp">
            </div> 
            <div class="textt">   
            <h1 class="txtdesign">Hi! My name is...</h1>
        </div>
    </div>
</section>

\$\endgroup\$
1
  • 4
    \$\begingroup\$ Welcome to Code Review! The current question title, which states your concerns about the code, is too general to be useful here. Please edit to the site standard, which is for the title to simply state the task accomplished by the code. Please see How to get the best value out of Code Review: Asking Questions for guidance on writing good question titles. \$\endgroup\$ Jul 29 at 14:18
0
\$\begingroup\$

You can do something like this:

*{margin:0;padding:0;}

.item1{grid-area:pfp;}
.item2{grid-area:text;}

.container{
  display:grid;
  grid-template-columns: 150px auto;
  width:80%;
  background-color:black;
  margin:0 auto;
  margin-top:10vh;
  padding:30px 30px 30px 30px;
  height:90%;
  border-radius:10px;
  min-height:600px;
}
<section id="AboutMe">

    <div class="container">
    
        <div class="pfp">
            <img src="https://via.placeholder.com/150/0000FF/808080?text=my%20face">
        </div> 
        
        <div class="text" style="padding:5px 20px 5px 20px;">   
          <h1 class="txtdesign" style="color:white">Hi! My name is...</h1>
        </div>
        
    </div>

</section>

Note: this css uses grid layout, you can read more about it here

\$\endgroup\$
3
  • 1
    \$\begingroup\$ Thank you so much its much better now :D \$\endgroup\$
    – ChinoQT
    Jul 30 at 10:57
  • \$\begingroup\$ I apologize I cannot upvote this answer because my reputation is too low, but thank you so much \$\endgroup\$
    – ChinoQT
    Jul 30 at 10:57
  • \$\begingroup\$ There are cool features in CSS that allow you to do complex things with simple code. It's good to learn different approaches, because CSS codes can become really dirty and unpleasant. \$\endgroup\$
    – Gass
    Jul 30 at 11:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.