<!DOCTYPE html>
<html>
<head>
<title>pattern_html</title>
</head>
<body>
<!-- Start your code here -->
  <div class = "header" >
    <div class = "sth">sth1 </div>
    <div class = "sth"> sth2</div>
    <div class = "menu">menu </div>
    
  </div>
  
 <div class = "content">
  <div id = "a"> 1st</div>
  <div id = "b">2nd</div>
  <div id = "c">3rd</div>
  <div id = "d"></div>
</div>

<!-- End your code here -->
</body>
</html>

*{
  margin: 0;
  padding: 0;
 
   }
div {
  width:100%;
  height: 250px;
  text-align: center;
  font: 25px Luna;

  }
#a, #c {
  background-color: #FFC500;
  
  }

#b, #d {
  background-color: #00FF05;
  
  }




.header {
  background-color: #38B6D6;
  height: 12.5%;
  position: fixed ;
  top: 0;
  }

.sth, .menu{
  display: inline-block;
  padding: 15px;
  color: orange;
  padding-top:auto ;
  padding-bottom: auto;
  width: 20px;
  }

.menu {
  position: relative;
 
}

#a {
  margin-top: 69px;
  }
#a, #b, #c, #d {
  padding-top: 50%
  
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.