Proyek: Landing Page

Tugas mandiri

Proyek terbesar di track CSS ini. Buat landing page untuk produk/jasa khayalan (atau portofoliomu sendiri) yang responsif penuh: rapi di 360px, 768px, dan 1280px.

Spesifikasi

1. Navbar: sticky/fixed, logo + menu + tombol CTA. Di HP, menu boleh disederhanakan (tidak wajib hamburger, tapi nilai plus).
2. Hero: judul dengan clamp(), subjudul max-width 60ch, tombol CTA, dan visual (gradien/gambar).
3. Fitur: minimal 3 kartu fitur memakai grid auto-fit + minmax (tanpa media query untuk gridnya).
4. Testimoni: minimal 2 kartu testimoni dengan ::before tanda kutip dekoratif.
5. CTA akhir + footer: ajakan bertindak dan footer sederhana.
6. Animasi: minimal 3 transisi/hover effect (tombol, kartu, link) + 1 keyframes (misal fade-in hero atau floating).
7. Responsif: mobile-first, uji di 360/768/1280, tanpa scroll horizontal.

Struktur yang disarankan

<header class="navbar">...</header>
<main>
  <section class="hero">...</section>
  <section class="fitur">
    <div class="kartu-fitur">...</div>
    x3
  </section>
  <section class="testimoni">
    <blockquote>...</blockquote>
    x2
  </section>
  <section class="cta-akhir">...</section>
</main>
<footer>...</footer>

Teknik yang harus terlihat

Penilai AI akan mencari: clamp() pada tipografi, auto-fit/minmax pada grid, flexbox pada navbar, transisi hover, minimal satu @keyframes, variabel CSS untuk warna, dan media query yang berbasis konten.

/* Contoh fondasi yang bisa kamu pakai */
:root {
  --utama: #38bdf8;
  --teks: #0f172a;
  --abu: #64748b;
}

.hero h1 {
  font-size: clamp(2.25rem, 7vw, 4.5rem);
}

.fitur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 3vw, 32px);
}

Cara mengirim

Kirim HTML dan CSS-mu via form tugas di bawah. AI menilai dan memberi masukan per kriteria. Kerjakan dengan serius: ini calon portofolio pertamamu.

Catatan: tidak ada playground di sini. Setup file sendiri adalah bagian dari penilaian kesiapanmu sebagai developer.