<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Landing</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, sans-serif;
color: #0f172a;
background: #f8fafc;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.25rem;
background: #0f172a;
color: white;
}
nav { display: flex; flex-wrap: wrap; gap: 0.75rem; }
nav a { color: #99f6e4; text-decoration: none; }
.hero {
display: grid;
gap: 1.25rem;
padding: 1.5rem 1.25rem;
align-items: center;
}
@media (min-width: 720px) {
.hero { grid-template-columns: 1.2fr 1fr; }
}
.hero img {
width: 100%;
height: auto;
border-radius: 1rem;
display: block;
}
h1 {
font-size: clamp(1.5rem, 4vw, 2.4rem);
margin: 0 0 0.5rem;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.85rem;
padding: 0 1.25rem 1.5rem;
}
.card {
background: white;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
padding: 1rem;
}
.table-wrap {
margin: 0 1.25rem 2rem;
overflow-x: auto;
background: white;
border-radius: 0.85rem;
border: 1px solid #e2e8f0;
}
table { width: 100%; min-width: 480px; border-collapse: collapse; }
th, td { padding: 0.65rem 0.75rem; border-bottom: 1px solid #e2e8f0; text-align: left; }
</style>
</head>
<body>
<header>
<strong>Belajar Responsive</strong>
<nav>
<a href="#fitur">Fitur</a>
<a href="#jadwal">Jadwal</a>
</nav>
</header>
<section class="hero">
<div>
<h1>Layout yang ikut layar</h1>
<p>Flex + Grid + gambar fleksibel + tabel aman di mobile.</p>
</div>
<img src="https://placehold.co/640x360/0f766e/fff?text=Hero" alt="Ilustrasi hero" />
</section>
<section id="fitur" class="cards">
<article class="card"><strong>Flex</strong><p>Navbar & kelompok item.</p></article>
<article class="card"><strong>Grid</strong><p>Kerangka & kartu.</p></article>
<article class="card"><strong>Images</strong><p>max-width 100%.</p></article>
</section>
<div id="jadwal" class="table-wrap">
<table>
<thead>
<tr><th>Hari</th><th>Materi</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Fondasi</td><td>Selesai</td></tr>
<tr><td>2</td><td>Flexbox</td><td>Selesai</td></tr>
<tr><td>3</td><td>Grid</td><td>Selesai</td></tr>
<tr><td>4</td><td>Images</td><td>Selesai</td></tr>
<tr><td>5</td><td>Tables</td><td>Selesai</td></tr>
</tbody>
</table>
</div>
</body>
</html>
asrul.dev