0
\$\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://i.sstatic.net/ZyCU0.jpg

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\$ Commented Jul 29, 2021 at 14:18

1 Answer 1

2
\$\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
    Commented Jul 30, 2021 at 10:57
  • \$\begingroup\$ I apologize I cannot upvote this answer because my reputation is too low, but thank you so much \$\endgroup\$
    – ChinoQT
    Commented Jul 30, 2021 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
    Commented Jul 30, 2021 at 11:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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