SHARE
TWEET

Untitled

Rofihimam Oct 9th, 2019 82 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1">
  5.     <title>Media Query</title>
  6.     <style type="text/css">
  7.         body{
  8.             background: ghost;
  9.             font-family: 'Segoe UI', serif;
  10.         }
  11.         header{
  12.             text-align: center;
  13.         }
  14.         header h1{
  15.             padding: 0;
  16.             margin: 0;
  17.         }
  18.         nav{
  19.             margin-top: 10px;
  20.             display: inline-block;
  21.         }
  22.         nav ul{
  23.             list-style: none;
  24.             display: inline-block;
  25.             padding: 0;
  26.             margin: 0;
  27.         }
  28.         nav ul li{
  29.             display: inline-block;
  30.             margin-right: 10px;
  31.             font-size: 24px;
  32.         }
  33.         nav a{
  34.             transition: .3s;
  35.             color: #666;
  36.             text-decoration: none;
  37.         }
  38.         nav a:hover{
  39.             transition: .3s;
  40.             font-weight: bold;
  41.         }
  42.         @media (max-width: 320px) {
  43.             /* Tulis Style CSS untuk layar maksimal 320px disini */
  44.             nav{
  45.                 width: 100%;
  46.             }
  47.             nav ul, nav ul li{
  48.                 display: block;
  49.             }
  50.             nav ul li{
  51.                 margin-bottom: 10px;
  52.                 border-bottom: 1px solid #ddd;
  53.                 width: 100%
  54.             }
  55.             nav a{
  56.                 font-size: 12px;
  57.             }
  58.         }
  59.     </style>
  60. </head>
  61. <body>
  62.     <header>
  63.         <h1 class="title">Brand Name</h1>
  64.         <nav>
  65.             <ul>
  66.                 <li><a href="#">Home</a></li>
  67.                 <li><a href="#">About Us</a></li>
  68.                 <li><a href="#">Product</a></li>
  69.                 <li><a href="#">Service</a></li>
  70.                 <li><a href="#">Testimonial</a></li>
  71.                 <li><a href="#">Favorite</a></li>
  72.                 <li><a href="#">Promo</a></li>
  73.                 <li><a href="#">Deals</a></li>
  74.                 <li><a href="#">Contact Us</a></li>
  75.                 <li><a href="#">Location</a></li>
  76.             </ul>
  77.         </nav>
  78.     </header>
  79. </body>
  80. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top