<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Halaman Web Kompleks</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Header</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<aside class="sidebar">
<h2>Sidebar</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
<main class="content">
<h2>Konten Utama</h2>
<p>Ini adalah konten utama halaman web. Di sini Anda dapat menambahkan teks, gambar, dan elemen lainnya.</p>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</main>
</div>
<footer>
<p>Footer © 2024</p>
</footer>
</body>
</html>
CSS (style.css)
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
.container {
display: flex; /* Mengaktifkan flexbox untuk konten */
}
.sidebar {
background-color: #e0e0e0;
padding: 15px;
width: 200px; /* Lebar sidebar */
}
.content {
flex-grow: 1; /* Membuat konten mengambil sisa ruang */
padding: 15px;
}
footer {
text-align: center;
padding: 10px 0;
background-color: #4CAF50;
color: white;
}
/* Grid untuk item di konten utama */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 kolom */
gap: 10px; /* Jarak antar item */
}
.grid-item {
background-color: #ccc; /* Warna latar belakang item grid */
padding: 20px; /* Padding untuk item */
text-align: center; /* Menengahkan teks */
border: 1px solid #999; /* Border untuk item */
border-radius: 5px; /* Sudut membulat */
}
Penjelasan
- Header: Menampilkan judul dan menu navigasi.
- Sidebar: Menampilkan daftar tautan.
- Konten Utama: Menampilkan informasi utama dan area untuk item grid.
- Footer: Menampilkan informasi hak cipta.
Kustomisasi
Anda dapat menyesuaikan gaya dan struktur sesuai kebutuhan proyek Anda. Misalnya, menambahkan lebih banyak kolom atau mengubah warna latar belakang dan teks. Dengan menggunakan Flexbox dan Grid, Anda dapat membuat layout yang responsif dan menarik.