php4

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Media Query</title>
 <style type="text/css">
  body{
   background: ghost;
   font-family: 'Segoe UI', serif;
  }
  header{
   text-align: center;
  }
  header h1{
   padding: 0;
   margin: 0;
  }
  nav{
   margin-top: 10px;
   display: inline-block;
  }
  nav ul{
   list-style: none;
   display: inline-block;
   padding: 0;
   margin: 0;
  }
  nav ul li{
   display: inline-block;
   margin-right: 10px;
   font-size: 24px;
  }
  nav a{
   transition: .3s;
   color: #666;
   text-decoration: none;
  }
  nav a:hover{
   transition: .3s;
   font-weight: bold;
  }

  @media (max-width: 320px){
   /*Tulis style css untuk ukuran layar maksimal 320px disini */
   nav{
    width: 100%;
   }
   nav ul, nav ul li{
    display: block;
   }
   nav ul li{
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    width: 100%;
   }
   nav a{
    font-size: 12px;
   }
  }
 </style>
</head>
<body>
 <header>
  <h1 class="title">
Brand Name</h1>
<nav>
   <ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Favorite</a></li>
<li><a href="#">Promo</a></li>
<li><a href="#">Deals</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Location</a></li>
</ul>
</nav>
 </header>

</body>
</html>