Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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 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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement