CSS pomoc w zakodowaniu

Question

JAK TO ZAKODOWAC W CSS? MYSLAŁEM O FLEXBOX. POMÓŻCIE

Answer 1

Witam.

Ja szedłbym w tym kierunku

<div class="container">
  <div class="ractangle">
    <div class="bottom">
      <div class="square"></div>
      <div class="square"></div>
    </div>
  </div>
  <div class="ractangle">
    <div class="right">
      <div class="square-2"></div>
      <div class="square-2"></div>
    </div>
  </div>
</div>

body{
  background-color: grey;
  height: 100vh;
}
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid red;
}
.container{
  width: 100%;
  height: 100vh;
}
.container:after{
  content: "";
  display: table;
  clear: both;
}
.ractangle{
  float: left;
  width: 50%;
  height: 100vh;
  position: relative;
}
.bottom{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40%;
}
.bottom:after{
  content: "";
  display: table;
  clear: both;
}
.square{
 float: left;
  width: 50%;
  height: 100%;
}
.right{
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
}
.square-2{
 width: 100%;
  height: 50%;
}