Assalamu'alaikum, hallo semuanya! Kembali lagi dengan saya Fadli Mahesa, seorang siswa yang bersekolah di SMKN 4 Bandung dan duduk di bangku kelas XI RPL 3. Kali ini saya akan membagikan lagi sedikit ilmu di dunia percodingan, yaitu tentang Contoh CSS Media Query. Mari kita bahas!
Syntax (PHP) Pembuatan Studi Kasus 3 While :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query, by Fadli Mahesa XI-RPL 3</title>
<style>
body {
background: #F2F2F2;
font-family: 'SF Pro','Segoe UI', Tahoma, Geneva, Verdana, sans-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: 400px) {
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>
Hasil :
0 komentar: