0

I want to separate Container1 and Container2.

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  text-align: center;
  background-color: #404258;
  font-family: 'Cousine', monospace;
}

header {
  display: flex;
  background-color: #404258;
  justify-content: center;
  padding: 1px;
  align-items: center;
}

p {
  font-size: 12px;
}

.myImage {
  width: 100%;
  height: auto;
  clip-path: circle(40%);
}

.imgcon {
  margin: auto;
  height: 200px;
  width: 200px;
}

.container1,
.container2 {
  display: flex;
  flex-direction: column;
  margin: auto;
  height: 100%;
  align-items: center;
  background-color: #A3C7D6;
  width: 40%;
  border-radius: 50px;
}
<body>
  <header>
    <h1>
      Portfolio
    </h1>
  </header>
  <div class="container1">
    <div>
      <div class="imgcon">
        <img class="myImage" src="images/circled-user-icon-user-pro-icon-11553397069rpnu1bqqup.png" alt="">
      </div>
      <h1>Thomas Ypil</h1>
      <p>I'm a 3rd Year College student of <strong>Cebu Technological University.</strong></p>
      <p>With a course <strong>Bachelor of Science in Information and Technology.</strong></p>
    </div>
  </div>

  <div class="container2">
    <div>
      <div>
        <img src="" alt="">
      </div>
      <h1>Current Study</h1>
      <p>I currently study HTML and CSS, because I want to be a Web Developer.</p>
      <p>I want to learn more about CSS and modern designs in making a Website.</p>
    </div>
  </div>

</body>

and the Output is above.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Thomas Jowell Ypil
  • 1
  • Please see [ask]. For your next visit, ask a clear question in the title and stick to the facts in the post. Also take the [tour] so you know how this site works. – isherwood Jan 31 '23 at 14:25
  • Protip: A class is a set of like things. I can see no reason why `container1` and `container2` couldn't have simply been `container` here. – isherwood Jan 31 '23 at 14:26

0 Answers0