45 lines
3.2 KiB
HTML
45 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Landing Page Tugas SIG - Pertemuan 1-4</title>
|
|
<style>
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font-family:Inter,Segoe UI,Arial,sans-serif;background:#f5f7fb;color:#1f2937;min-height:100vh}
|
|
.hero{padding:52px 22px 28px;background:linear-gradient(135deg,#0f766e,#0ea5e9);color:white}
|
|
.wrap{max-width:1080px;margin:auto}
|
|
.badge{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:8px 12px;border-radius:999px;margin-bottom:18px;font-size:14px}
|
|
h1{font-size:clamp(30px,5vw,54px);line-height:1.05;margin-bottom:14px}
|
|
.hero p{max-width:760px;font-size:17px;line-height:1.7;opacity:.95}
|
|
main{max-width:1080px;margin:-18px auto 40px;padding:0 22px}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
|
|
.card{background:white;border-radius:20px;padding:22px;border:1px solid #e5e7eb;box-shadow:0 12px 30px rgba(15,23,42,.08);display:flex;flex-direction:column;min-height:250px}
|
|
.icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#ecfeff;font-size:24px;margin-bottom:15px}
|
|
.card h2{font-size:20px;margin-bottom:8px;color:#0f172a}
|
|
.card p{font-size:14px;color:#64748b;line-height:1.6;flex:1}
|
|
a.btn{display:inline-block;text-decoration:none;background:#0f766e;color:white;padding:11px 14px;border-radius:12px;font-weight:700;text-align:center;margin-top:18px}
|
|
a.btn:hover{background:#0d5f59}
|
|
.note{background:white;border:1px solid #e5e7eb;border-radius:16px;padding:16px;margin-top:20px;color:#475569;line-height:1.6;font-size:14px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section class="hero">
|
|
<div class="wrap">
|
|
<div class="badge">Mata Kuliah SIG • Pertemuan 1-4</div>
|
|
<h1>Kumpulan Tugas WebGIS</h1>
|
|
<p>Landing page ini menampilkan seluruh tugas WebGIS yang dikerjakan pada pertemuan kelas. Klik salah satu kartu untuk membuka project sesuai topik.</p>
|
|
</div>
|
|
</section>
|
|
<main>
|
|
<div class="grid">
|
|
<article class="card"><div class="icon">⛽</div><h2>Tugas 1</h2><p>WebGIS pemetaan lokasi SPBU di Kota Pontianak menggunakan marker Leaflet.</p><a class="btn" href="Tugas1/">Buka Tugas 1</a></article>
|
|
<article class="card"><div class="icon">🛣️</div><h2>Tugas 2</h2><p>WebGIS manajemen data jalan berbentuk polyline dan data tanah berbentuk polygon.</p><a class="btn" href="Tugas2/">Buka Tugas 2</a></article>
|
|
<article class="card"><div class="icon">🗂️</div><h2>Tugas 3</h2><p>Layer Groups dan Layers Control untuk menampilkan kategori SPBU buka 24 jam dan tidak 24 jam.</p><a class="btn" href="Tugas3/">Buka Tugas 3</a></article>
|
|
<article class="card"><div class="icon">🏙️</div><h2>Tugas 4</h2><p>WebGIS GeoJSON kecamatan Kota Pontianak yang menampilkan nama kecamatan dan jumlah populasi.</p><a class="btn" href="Tugas4/">Buka Tugas 4</a></article>
|
|
</div>
|
|
<div class="note"><b>Catatan:</b> Deploy cukup satu resource aplikasi di Coolify. Tugas dapat diakses melalui subfolder <code>/Tugas1/</code>, <code>/Tugas2/</code>, <code>/Tugas3/</code>, dan <code>/Tugas4/</code>.</div>
|
|
</main>
|
|
</body>
|
|
</html>
|