Untitled

------------HTML
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
<style>
body{
  padding: 0px;
  margin: 0px;
}
.container{
  display: flex;
  flex-wrap: wrap;
}
#a1{
  display: flex;
  height: 80px;
  background-color: red;
  width: 100%;
}
#a2{
  width: 25%;
  display: flex;
  height: 320px;
  background-color: blue;
}
#a3{
  display: flex;
  width: 50%;
  align-items: center;
  background-color: green;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 320px;

}
#banner{
  background-color: pink;
  margin: 10px;
  padding: 5px;
  align-items: center;
}
#a3 p{
  background-color: yellow;
  justify-content: center;
  padding: 8px;
  font-size: 27px;
  display: flex;
}
#a4{
  width: 25%;
  height: 320px;
  background-color: blue;
  display: flex;
  justify-content: center;
}
#a5{
  width: 100%;
  display: flex;
  height: 80px;
  background-color: gray;
  justify-content: flex-start;
}
#a5 p{
  background-color: #5c5c5c;
  display: flex;
  align-items: center;
  padding: 5px;
}

</style>
</head>
<body>
  <div class="container">
    <div id="a1">h fkodkjbfbhvvt</div>
    <div id="a2"> dfgfgh shsf  dddd z
    </div>
    <div id="a3">
      <p>adh sudj</p><p>zsgsdhjib sdiufuys uhs</p><p>bjgds dsbibi</p><p>dgkjbgs bufgbui</p><p>agsgkj sgdbugui</p>
    </div>
    <div id="a4">
      <div id="banner">ZVGBGDFSshdfhg</div>
    </div>
    <div id="a5">
      <p>abkfgyioFEyivF bjsdbui</p>
    </div>
  </div>
</body>
</html>