Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing:border-box;
}
.header {
  background-color:#2196F3;
  float:left;
  width:100%;
}

.menu {
  background-color:blue;
  float:left;
  width:25%;
}

.topic {
  background-color:#f1f1f1;
  float:left;
  width:50%;
}

.ad {
  background-color:#4CAF50;
  float:left;
  width:25%;
}

.content {
  background-color:yellow;
  float:left;
  width:75%;
}

.footer {
  background-color:brown;
  float:left;
  width:80%; /* The width is 100%, when the viewport is 800px or smaller */
  margin-left:10%;
  margin-right:10%;
}


/* Use a media query to add a break point at 800px: */
@media screen and (max-width:900px) {
  .header {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .menu {
  width:25%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .topic {
  width:75%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .ad {
  width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .content {
  width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .footer {
  width:80%; /* The width is 100%, when the viewport is 800px or smaller */
  margin-left:10%;
  margin-right:10%;
  }

}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:600px) {
  .header {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .menu {
  width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .topic {
  width:50%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .ad {
  width:50%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .content {
  width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .ad.ad1 {
  width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .footer {
  width:80%; /* The width is 100%, when the viewport is 800px or smaller */
  margin-left:10%;
  margin-right:10%;
  }

}
</style>
</head>
<body>

<h2>Pirma uzduotis</h2>


<div class="header">
  <p>Header</p>
</div>

<div class="menu">
  <p>Menu</p>
</div>

<div class="topic">
  <p>Topic</p>
</div>

<div class="ad">
  <p>Ad</p>
</div>

<div class="content">
  <p>Content</p>
</div>

<div class="ad ad1">
  <p>Ad</p>
</div>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>