Membuat Landing Page Responsif Modern dengan HTML5 & CSS dari Nol

Membuat Landing Page Responsif Modern dengan HTML5 & CSS dari Nol

Membuat Landing Page Responsif Modern dengan HTML5 & CSS dari Nol

Novian Hidayat
2025-05-09

Pelajari langkah demi langkah cara merancang dan mengkodekan landing page yang menarik secara visual, berfungsi optimal di semua ukuran layar, dan menggunakan praktik HTML5 serta CSS3 terkini. Sempurna untuk pemula!

Membangun Landing Page Menawan dan Responsif dengan HTML5 & CSS: Panduan untuk Pemula

Selamat datang di panduan komprehensif untuk membuat landing page yang modern dan responsif! Jika Anda seorang pemula yang ingin memahami bagaimana website yang cantik dan fungsional dibuat, Anda berada di tempat yang tepat. Kita akan membahas semuanya, mulai dari struktur dasar HTML hingga styling dengan CSS, dan yang terpenting, membuatnya tampak hebat di perangkat apa pun.

Apa itu Landing Page?

Landing page adalah halaman web tunggal yang dirancang dengan fokus pada satu tujuan atau call to action (CTA). Tujuannya bisa berupa pengumpulan email, penjualan produk, pendaftaran acara, atau lainnya. Landing page yang efektif harus jelas, menarik, dan mudah dinavigasi.

Mengapa Responsif?

Di era multi-perangkat ini, pengguna mengakses web dari berbagai ukuran layar: desktop, laptop, tablet, dan smartphone. Landing page responsif secara otomatis menyesuaikan tata letaknya agar tetap terlihat baik dan mudah digunakan, apa pun perangkat yang digunakan pengunjung. Ini krusial untuk pengalaman pengguna (UX) yang positif dan konversi yang lebih baik.

Apa yang Akan Kita Buat?

Kita akan membuat landing page sederhana untuk sebuah produk fiktif “SolusiHebat”. Landing page ini akan memiliki beberapa bagian standar:

  1. Navbar (Navigasi): Untuk tautan cepat dan branding.
  2. Hero Section: Bagian utama yang menarik perhatian dengan judul besar dan CTA.
  3. Features Section: Menyoroti fitur-fitur unggulan produk.
  4. Testimonials Section: Umpan balik positif dari pengguna (penting untuk kepercayaan).
  5. Call to Action (CTA) Section: Ajakan bertindak yang lebih spesifik.
  6. Footer: Informasi hak cipta dan tautan tambahan.

Prasyarat

  • Text Editor: Seperti VS Code (gratis, sangat direkomendasikan), Sublime Text, atau bahkan Notepad++.
  • Web Browser: Chrome, Firefox, atau Edge untuk melihat hasil pekerjaan Anda.
  • Keinginan untuk Belajar: Tidak perlu pengalaman coding sebelumnya, tapi semangat untuk mencoba itu penting!

Mari kita mulai!

Langkah 1: Persiapan Proyek dan Struktur Folder

Organisasi yang baik adalah kunci. Mari siapkan folder proyek kita.

  1. Buat folder utama untuk proyek ini, misalnya proyek-landingpage-modern.
  2. Di dalam proyek-landingpage-modern, buat:
    • File index.html (untuk kode HTML kita)
    • File style.css (untuk kode CSS kita)
    • Folder images (untuk menyimpan semua gambar yang akan kita gunakan)
    • (Opsional) Folder css jika Anda ingin meletakkan style.css di dalamnya. Jika ya, path di HTML harus disesuaikan menjadi css/style.css. Untuk tutorial ini, kita akan meletakkannya di root.

Struktur Anda akan terlihat seperti ini:

proyek-landingpage-modern/
├── index.html
├── style.css
└── images/
    └── (kosongkan dulu atau siapkan beberapa gambar placeholder)

Langkah 2: Menulis Struktur Dasar HTML (index.html)

Buka index.html di text editor Anda dan ketikkan kode dasar HTML5 berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SolusiHebat - Tingkatkan Produktivitas Anda!</title>
    <link rel="stylesheet" href="style.css">
    <!-- Kita bisa menambahkan link Google Fonts di sini nanti -->
    <!-- Contoh: <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> -->
</head>
<body>

    <!-- Akan kita isi bagian per bagian -->

</body>
</html>

Penjelasan:

  • <!DOCTYPE html>: Mendefinisikan dokumen sebagai HTML5.
  • <html lang="id">: Elemen root, dengan atribut bahasa Indonesia.
  • <head>: Berisi informasi meta tentang halaman (tidak terlihat langsung oleh pengguna).
    • charset="UTF-8": Pengkodean karakter standar.
    • name="viewport" ...: SANGAT PENTING untuk desain responsif. Ini memberitahu browser untuk mengatur lebar halaman sesuai lebar layar perangkat dan skala awal 1.0 (tidak ada zoom).
    • <title>: Judul yang muncul di tab browser.
    • <link rel="stylesheet" href="style.css">: Menghubungkan file HTML ini dengan file CSS kita.

Langkah 3: Membangun Navbar (Bagian Navigasi)

Mari tambahkan bagian header dan navigasi di dalam <body>.

<!-- Di dalam <body> -->
<header id="navbar">
    <nav class="container">
        <a href="index.html" class="logo">SolusiHebat</a>
        <ul class="nav-links">
            <li><a href="#hero">Beranda</a></li>
            <li><a href="#fitur">Fitur</a></li>
            <li><a href="#testimoni">Testimoni</a></li>
            <li><a href="#cta" class="nav-cta">Coba Gratis</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
</header>
<!-- Sisanya di bawah sini -->

Penjelasan:

  • <header>: Menampung navigasi. id="navbar" untuk styling nanti.
  • <nav class="container">: Elemen navigasi. Kelas container akan kita gunakan untuk membatasi lebar konten dan menengahkan.
  • <a href="index.html" class="logo">: Logo situs, biasanya link ke halaman utama.
  • <ul class="nav-links">: Daftar tidak berurutan untuk tautan navigasi.
    • <li><a href="#hero">: Tautan yang mengarah ke bagian halaman dengan ID tertentu (misal, #hero akan scroll ke elemen dengan id="hero").
    • class="nav-cta": Untuk styling tombol CTA di navigasi.
  • <div class="burger">: Ikon “burger” untuk menu di tampilan mobile. Awalnya akan kita sembunyikan di desktop.

Langkah 4: Membuat Hero Section

Ini adalah bagian pertama yang dilihat pengunjung. Harus menarik!

<!-- Di bawah </header> -->
<main>
    <section id="hero" class="hero-section">
        <div class="container hero-content">
            <h1>Revolusi Cara Anda Bekerja dengan <span class="highlight">SolusiHebat</span></h1>
            <p>Platform inovatif kami dirancang untuk menyederhanakan alur kerja, meningkatkan kolaborasi tim, dan membawa produktivitas Anda ke level berikutnya.</p>
            <a href="#cta" class="btn btn-primary">Mulai Sekarang Juga!</a>
            <a href="#fitur" class="btn btn-secondary">Pelajari Fitur</a>
        </div>
        <!-- Opsional: Gambar di hero section -->
        <!-- <div class="hero-image">
            <img src="images/hero-image.png" alt="Ilustrasi SolusiHebat">
        </div> -->
    </section>
<!-- Sisanya di dalam <main> -->

Penjelasan:

  • <main>: Konten utama halaman kita.
  • <section id="hero" class="hero-section">: Bagian hero.
  • <div class="container hero-content">: Menggunakan container lagi dan hero-content untuk styling spesifik.
  • <h1>: Judul utama yang paling menonjol. <span class="highlight"> untuk memberi warna berbeda pada kata kunci.
  • <p>: Deskripsi singkat.
  • <a class="btn btn-primary"> dan <a class="btn btn-secondary">: Tombol Call to Action. Kita akan membuat kelas .btn, .btn-primary, dan .btn-secondary di CSS.

Langkah 5: Membuat Features Section (Bagian Fitur)

Menjelaskan apa yang ditawarkan produk/layanan Anda.

<!-- Di dalam <main>, di bawah </section> hero -->
    <section id="fitur" class="features-section">
        <div class="container">
            <h2 class="section-title">Mengapa Memilih SolusiHebat?</h2>
            <div class="features-grid">
                <article class="feature-item">
                    <img src="images/icon-intuitive.svg" alt="Ikon Intuitif" class="feature-icon"> <!-- Ganti dengan ikon Anda -->
                    <h3>Desain Intuitif</h3>
                    <p>Antarmuka yang bersih dan mudah digunakan, bahkan untuk pemula sekalipun.</p>
                </article>
                <article class="feature-item">
                    <img src="images/icon-kolaborasi.svg" alt="Ikon Kolaborasi" class="feature-icon"> <!-- Ganti dengan ikon Anda -->
                    <h3>Kolaborasi Tim Real-time</h3>
                    <p>Bekerja bersama tim Anda secara efisien tanpa hambatan geografis.</p>
                </article>
                <article class="feature-item">
                    <img src="images/icon-analitik.svg" alt="Ikon Analitik" class="feature-icon"> <!-- Ganti dengan ikon Anda -->
                    <h3>Analitik Mendalam</h3>
                    <p>Dapatkan wawasan berharga dari data untuk pengambilan keputusan yang lebih baik.</p>
                </article>
                 <article class="feature-item">
                    <img src="images/icon-keamanan.svg" alt="Ikon Keamanan" class="feature-icon"> <!-- Ganti dengan ikon Anda -->
                    <h3>Keamanan Terjamin</h3>
                    <p>Data Anda aman bersama kami dengan protokol keamanan terkini.</p>
                </article>
            </div>
        </div>
    </section>
<!-- Sisanya di dalam <main> -->

Penjelasan:

  • <h2 class="section-title">: Judul untuk bagian ini.
  • <div class="features-grid">: Kontainer untuk item-item fitur, kita akan gunakan CSS Grid atau Flexbox untuk layoutnya.
  • <article class="feature-item">: Setiap item fitur. Penggunaan <article> cocok untuk konten mandiri.
  • <img class="feature-icon">: Ikon untuk setiap fitur. Anda bisa menggunakan file .svg (rekomendasi) atau .png. Carilah ikon gratis di situs seperti Flaticon, Font Awesome, atau SVGRepo. Jika belum ada, Anda bisa mengomentari tag <img> ini dulu.

Langkah 6: Membuat Testimonials Section (Bagian Testimoni)

Bukti sosial sangat penting untuk membangun kepercayaan.

<!-- Di dalam <main>, di bawah </section> fitur -->
    <section id="testimoni" class="testimonials-section">
        <div class="container">
            <h2 class="section-title">Apa Kata Mereka Tentang SolusiHebat</h2>
            <div class="testimonials-grid">
                <article class="testimonial-card">
                    <img src="images/user1.jpg" alt="Foto Pengguna 1" class="testimonial-avatar"> <!-- Ganti dengan foto placeholder -->
                    <p class="testimonial-text">"SolusiHebat telah mengubah cara tim kami bekerja! Produktivitas meningkat pesat dan antarmukanya sangat ramah pengguna."</p>
                    <p class="testimonial-author">- Dian S., Manajer Proyek</p>
                </article>
                <article class="testimonial-card">
                    <img src="images/user2.jpg" alt="Foto Pengguna 2" class="testimonial-avatar"> <!-- Ganti dengan foto placeholder -->
                    <p class="testimonial-text">"Awalnya ragu, tapi setelah mencoba versi gratisnya, saya langsung upgrade. Fitur analitiknya luar biasa!"</p>
                    <p class="testimonial-author">- Budi P., CEO Startup</p>
                </article>
                <article class="testimonial-card">
                    <img src="images/user3.jpg" alt="Foto Pengguna 3" class="testimonial-avatar"> <!-- Ganti dengan foto placeholder -->
                    <p class="testimonial-text">"Dukungan pelanggannya responsif dan sangat membantu. Saya merekomendasikan SolusiHebat kepada siapa pun."</p>
                    <p class="testimonial-author">- Citra A., Freelancer</p>
                </article>
            </div>
        </div>
    </section>
<!-- Sisanya di dalam <main> -->

Penjelasan:

  • Mirip dengan Features, kita punya judul bagian dan grid untuk testimoni.
  • <article class="testimonial-card">: Setiap kartu testimoni.
  • <img class="testimonial-avatar">: Foto pengguna (gunakan placeholder jika belum ada foto asli).

Langkah 7: Membuat Call to Action (CTA) Section

Setelah meyakinkan pengunjung, berikan ajakan bertindak yang jelas.

<!-- Di dalam <main>, di bawah </section> testimoni -->
    <section id="cta" class="cta-section">
        <div class="container cta-content">
            <h2>Siap Mengoptimalkan Kinerja Anda?</h2>
            <p>Bergabunglah dengan ribuan pengguna puas dan rasakan bedanya dengan SolusiHebat. Coba gratis selama 14 hari, tanpa kartu kredit!</p>
            <a href="#" class="btn btn-primary btn-large">Daftar Sekarang, Gratis!</a>
        </div>
    </section>
</main> <!-- Tutup tag main di sini -->

Penjelasan:

  • Bagian ini lebih sederhana, fokus pada judul, deskripsi singkat, dan tombol CTA besar.
  • class="btn-large": Untuk membuat tombol ini lebih besar dari tombol biasa.

Bagian akhir halaman untuk informasi tambahan.

<!-- Di bawah </main> -->
<footer class="footer-section">
    <div class="container">
        <div class="footer-content">
            <div class="footer-col">
                <h4>SolusiHebat</h4>
                <p>Membantu Anda bekerja lebih cerdas, bukan lebih keras.</p>
            </div>
            <div class="footer-col">
                <h4>Tautan Cepat</h4>
                <ul>
                    <li><a href="#fitur">Fitur</a></li>
                    <li><a href="#">Harga</a></li> <!-- Ganti dengan link sebenarnya nanti -->
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Karir</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Hubungi Kami</h4>
                <p>Email: support@solusihebat.com</p>
                <p>Telepon: (021) 123-4567</p>
                <!-- Tambahkan ikon sosial media jika perlu -->
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; <span id="currentYear"></span> SolusiHebat. Semua Hak Dilindungi.</p>
        </div>
    </div>
</footer>

<!-- Tambahkan sedikit JavaScript untuk tahun otomatis dan menu burger nanti -->
<script>
    document.getElementById('currentYear').textContent = new Date().getFullYear();
</script>
<!-- Tutup </body> di sini -->

Penjelasan:

  • <div class="footer-content">: Menggunakan Flexbox atau Grid untuk layout kolom.
  • <div class="footer-col">: Setiap kolom di footer.
  • <div class="footer-bottom">: Untuk baris hak cipta.
  • <script> kecil ditambahkan untuk secara otomatis memperbarui tahun hak cipta.

Sekarang, file index.html Anda sudah memiliki struktur lengkap!

Langkah 9: Styling Dasar dengan CSS (style.css)

Buka style.css. Kita akan mulai dengan reset dasar, variabel warna, dan gaya global.

/* style.css */

/* 0. Import Font (Opsional, jika menggunakan Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
/* Jika tidak, hapus baris di atas dan sesuaikan font-family di bawah */

/* 1. Variabel CSS */
:root {
    --primary-color: #007bff; /* Biru cerah */
    --secondary-color: #6c757d; /* Abu-abu */
    --accent-color: #ffc107; /* Kuning untuk highlight/CTA */
    --light-color: #f8f9fa; /* Putih keabuan */
    --dark-color: #343a40; /* Hitam keabuan */
    --text-color: #212529;
    --text-muted: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;

    --font-family-base: 'Poppins', sans-serif; /* Ganti jika tidak pakai Poppins */
    --font-size-base: 1rem; /* 16px default */
    --line-height-base: 1.6;

    --container-width: 1140px;
    --border-radius: 0.25rem; /* 4px */
    --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* 2. Reset Dasar & Gaya Global */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Animasi scroll halus saat klik link # */
    font-size: 100%; /* Untuk kemudahan kalkulasi rem */
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: #fff;
    overflow-x: hidden; /* Mencegah scroll horizontal yang tidak diinginkan */
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: darken(var(--primary-color), 10%); /* Fungsi darken perlu preprocessor atau ganti manual */
    /* Ganti manual: color: #0056b3; */
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Menghilangkan spasi ekstra di bawah gambar inline */
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; }   /* 32px */
h3 { font-size: 1.75rem; } /* 28px */
h4 { font-size: 1.5rem; }  /* 24px */

p {
    margin-bottom: 1rem;
}

/* 3. Utilitas / Kelas Pembantu */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.section-title {
    text-align: center;
    font-size: 2.25rem; /* 36px */
    margin-bottom: 3rem; /* Spasi lebih besar di bawah judul bagian */
    color: var(--dark-color);
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem; /* 12px 24px */
    font-size: var(--font-size-base);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap; /* Agar teks tombol tidak wrap */
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
}
.btn-primary:hover {
    background-color: #0056b3; /* Warna lebih gelap dari primary */
    color: #fff;
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: #fff;
}
.btn-secondary:hover {
    background-color: #545b62; /* Warna lebih gelap dari secondary */
    color: #fff;
}

.btn-large {
    padding: 1rem 2rem; /* 16px 32px */
    font-size: 1.125rem; /* 18px */
}

.highlight {
    color: var(--accent-color);
}

Penjelasan CSS Awal:

  • Variabel CSS (:root): Memudahkan pengelolaan warna, font, dll. Sangat berguna untuk tema dan konsistensi.
  • Reset Dasar: Menghilangkan gaya default browser yang tidak konsisten. box-sizing: border-box; adalah praktik modern yang membuat layout lebih mudah.
  • Gaya Global: Diterapkan ke body, a, img, heading, dll.
  • Utilitas: Kelas .container untuk membatasi lebar konten dan menengahkan. Kelas .btn untuk styling tombol dasar, dengan variasi .btn-primary dan .btn-secondary.

Langkah 10: Styling Navbar

/* 4. Styling Navbar */
#navbar {
    background-color: #fff;
    padding: 1rem 0;
    position: fixed; /* Navbar tetap di atas saat scroll */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Pastikan navbar di atas elemen lain */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, padding 0.3s ease;
}

/* (Opsional) Efek navbar mengecil saat scroll, perlu sedikit JS nanti */
/* #navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 0.5rem 0;
    box-shadow: var(--box-shadow);
} */

#navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#navbar .logo {
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    color: var(--dark-color);
}
#navbar .logo:hover {
    color: var(--primary-color);
}

#navbar .nav-links {
    display: flex;
    align-items: center;
}

#navbar .nav-links li {
    margin-left: 25px;
}

#navbar .nav-links a {
    color: var(--text-color);
    font-weight: 500;
    padding: 0.5rem;
    position: relative; /* Untuk efek garis bawah */
}

#navbar .nav-links a::after { /* Efek garis bawah saat hover */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

#navbar .nav-links a:hover::after,
#navbar .nav-links a.active::after { /* .active bisa ditambahkan dengan JS */
    width: 100%;
}

#navbar .nav-links a:hover {
    color: var(--primary-color);
}

#navbar .nav-cta {
    background-color: var(--accent-color);
    color: var(--dark-color);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-weight: 600;
}
#navbar .nav-cta:hover {
    background-color: #e0a800; /* Sedikit lebih gelap dari accent */
    color: var(--dark-color);
}
#navbar .nav-cta:hover::after {
    width: 0; /* Hilangkan garis bawah untuk CTA */
}

#navbar .burger {
    display: none; /* Sembunyikan di desktop */
    cursor: pointer;
}

#navbar .burger div {
    width: 25px;
    height: 3px;
    background-color: var(--dark-color);
    margin: 5px;
    transition: all 0.3s ease;
}

Langkah 11: Styling Hero Section

/* 5. Styling Hero Section */
.hero-section {
    background-color: var(--light-color); /* Warna latar belakang lembut */
    /* Alternatif: Gunakan gradient atau gambar background */
    /* background: linear-gradient(to right, var(--primary-color), #0056b3), url('images/hero-bg.jpg') no-repeat center center/cover; */
    /* color: #fff; */
    padding-top: 120px; /* Beri ruang untuk navbar fixed */
    padding-bottom: 60px;
    min-height: 80vh; /* Atau sesuaikan agar pas */
    display: flex;
    align-items: center;
    text-align: center; /* Konten di tengah untuk tampilan awal */
}

.hero-section .hero-content {
    max-width: 700px; /* Sesuaikan agar tidak terlalu lebar */
    margin-left: auto;
    margin-right: auto;
}

.hero-section h1 {
    font-size: 3rem; /* 48px */
    margin-bottom: 1.5rem;
    /* Jika menggunakan background gelap, color: #fff; */
}

.hero-section p {
    font-size: 1.125rem; /* 18px */
    margin-bottom: 2rem;
    color: var(--text-muted);
    /* Jika menggunakan background gelap, color: rgba(255,255,255,0.8); */
}

.hero-section .btn {
    margin: 0.5rem;
}

/* Jika ada hero-image, stylingnya bisa seperti ini: */
/* .hero-section { text-align: left; }
.hero-section .container { display: flex; align-items: center; justify-content: space-between; }
.hero-content { flex: 1; padding-right: 2rem; }
.hero-image { flex: 1; text-align: center; }
.hero-image img { max-width: 450px; border-radius: 8px; box-shadow: var(--box-shadow); } */

Langkah 12: Styling Features Section

/* 6. Styling Features Section */
.features-section {
    padding: 60px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsif otomatis */
    gap: 30px; /* Jarak antar item */
}

.feature-item {
    background-color: #fff;
    padding: 30px;
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
}

.feature-icon {
    width: 60px; /* Sesuaikan ukuran ikon Anda */
    height: 60px;
    margin-bottom: 1.5rem;
    /* Jika ikon SVG, Anda bisa warnai dengan: fill: var(--primary-color); */
}

.feature-item h3 {
    font-size: 1.5rem; /* 24px */
    margin-bottom: 0.75rem;
    color: var(--dark-color);
}

.feature-item p {
    font-size: 0.95rem; /* Sedikit lebih kecil */
    color: var(--text-muted);
    line-height: 1.7;
}

Tips Ikon: Untuk ikon, Anda bisa menggunakan Font Awesome (library ikon) atau unduh file SVG dari situs seperti SVGRepo atau Flaticon. Letakkan file SVG di folder images Anda.

Langkah 13: Styling Testimonials Section

/* 7. Styling Testimonials Section */
.testimonials-section {
    padding: 60px 0;
    background-color: var(--light-color);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background-color: #fff;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Membuat gambar bundar */
    object-fit: cover; /* Memastikan gambar tidak terdistorsi */
    margin-bottom: 1.5rem;
    border: 3px solid var(--primary-color);
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 1rem;
    color: var(--text-muted);
    flex-grow: 1; /* Agar teks mengambil ruang yang tersedia dan author di bawah */
}

.testimonial-text::before {
    content: '“'; /* Tanda kutip pembuka */
    font-size: 2rem;
    color: var(--primary-color);
    margin-right: 0.25em;
    vertical-align: -0.4em; /* Sesuaikan posisi */
}
.testimonial-text::after {
    content: '”'; /* Tanda kutip penutup */
    font-size: 2rem;
    color: var(--primary-color);
    margin-left: 0.25em;
    vertical-align: -0.4em;
}

.testimonial-author {
    font-weight: 600;
    color: var(--dark-color);
    margin-top: auto; /* Mendorong author ke bawah jika kartu tingginya beda */
}

Langkah 14: Styling CTA Section

/* 8. Styling CTA Section */
.cta-section {
    background-color: var(--primary-color);
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
    color: #fff;
}

.cta-content p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.cta-section .btn-primary { /* Overwrite default jika perlu */
    background-color: var(--accent-color);
    color: var(--dark-color);
    border-color: var(--accent-color);
    font-weight: 600;
}
.cta-section .btn-primary:hover {
    background-color: #e0a800;
    border-color: #e0a800;
    color: var(--dark-color);
    transform: translateY(-3px);
}
/* 9. Styling Footer */
.footer-section {
    background-color: var(--dark-color);
    color: rgba(255, 255, 255, 0.7);
    padding: 50px 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap; /* Agar wrap di layar kecil */
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.footer-col {
    flex: 1; /* Kolom fleksibel */
    min-width: 200px; /* Lebar minimum sebelum wrap */
}

.footer-col h4 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.footer-col h4::after { /* Garis kecil di bawah judul kolom footer */
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 2px;
    background-color: var(--primary-color);
}

.footer-col p,
.footer-col ul li {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.footer-col ul li a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-col ul li a:hover {
    color: #fff;
    padding-left: 5px; /* Efek geser kecil saat hover */
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}

.footer-bottom p {
    margin-bottom: 0;
}

Sekarang, coba buka index.html di browser Anda. Anda seharusnya sudah melihat landing page yang cukup menarik! Tapi, ini belum responsif.

Langkah 16: Membuat Landing Page Responsif (Media Queries)

Media queries memungkinkan kita menerapkan gaya CSS yang berbeda berdasarkan karakteristik perangkat, seperti lebar layar.

Tambahkan kode berikut di akhir file style.css Anda.

/* 10. Media Queries untuk Responsivitas */

/* Tablet dan perangkat lebih kecil (misal, <= 992px) */
@media (max-width: 992px) {
    .features-grid,
    .testimonials-grid {
        /* Sudah auto-fit, tapi bisa disesuaikan jika perlu 2 kolom */
        /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    }
    .hero-section h1 { font-size: 2.5rem; }
    .hero-section p { font-size: 1rem; }

    .footer-content {
        /* Biarkan flex-wrap yang bekerja atau atur kolom jika mau */
        /* flex-direction: column;
        text-align: center; */
    }
    /* .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    } */
}

/* Mobile (misal, <= 768px) */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2, .section-title { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }

    /* Navbar Mobile */
    #navbar .nav-links {
        position: fixed;
        top: 0; /* Akan disesuaikan dengan tinggi navbar saat JS aktif */
        right: -100%; /* Awalnya di luar layar */
        width: 70%; /* Lebar menu mobile */
        max-width: 300px;
        height: 100vh;
        background-color: var(--dark-color);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 60px; /* Ruang untuk tombol close nanti */
        transition: right 0.5s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
        z-index: 999; /* Di bawah burger, tapi di atas konten lain */
    }

    #navbar .nav-links.nav-active { /* Kelas ini ditambahkan oleh JS */
        right: 0;
    }

    #navbar .nav-links li {
        margin: 20px 0;
    }

    #navbar .nav-links a {
        font-size: 1.2rem;
        color: #fff;
    }
    #navbar .nav-links a:hover,
    #navbar .nav-links a.active {
        color: var(--accent-color);
    }
    #navbar .nav-links a::after {
        background-color: var(--accent-color); /* Garis bawah di mobile */
    }

    #navbar .nav-cta {
        background-color: var(--accent-color);
        color: var(--dark-color);
        padding: 0.75rem 1.5rem;
    }
    #navbar .nav-cta:hover {
        background-color: #e0a800;
    }


    #navbar .burger {
        display: block; /* Tampilkan burger di mobile */
        z-index: 1001; /* Pastikan burger di atas menu mobile */
    }

    /* Animasi Burger menjadi X (opsional) */
    .burger.toggle .line1 {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .burger.toggle .line2 {
        opacity: 0;
    }
    .burger.toggle .line3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Hero Section Mobile */
    .hero-section {
        padding-top: 100px; /* Lebih banyak ruang untuk navbar */
        padding-bottom: 40px;
        text-align: center; /* Paksa tengah di mobile */
    }
    .hero-section h1 {
        font-size: 2.25rem; /* Sedikit lebih kecil */
    }
    .hero-section .btn {
        display: block; /* Tombol jadi full width */
        width: 80%;
        margin: 1rem auto;
    }

    /* Features Section Mobile */
    .features-grid {
        grid-template-columns: 1fr; /* Satu kolom di mobile */
    }
    .feature-item {
        padding: 20px;
    }

    /* Testimonials Section Mobile */
    .testimonials-grid {
        grid-template-columns: 1fr; /* Satu kolom di mobile */
    }

    /* CTA Section Mobile */
    .cta-section {
        padding: 60px 20px;
    }
    .cta-content h2 {
        font-size: 1.8rem;
    }

    /* Footer Mobile */
    .footer-content {
        flex-direction: column; /* Kolom jadi baris */
        align-items: center;
        text-align: center;
    }
    .footer-col {
        margin-bottom: 20px;
        width: 100%; /* Ambil lebar penuh */
    }
    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%); /* Tengahkan garis bawah */
    }
}


/* Perbaikan kecil untuk layar sangat kecil (misal, < 400px) */
@media (max-width: 400px) {
    .hero-section h1 {
        font-size: 1.8rem;
    }
    .hero-section p {
        font-size: 0.9rem;
    }
    .section-title {
        font-size: 1.5rem;
    }
}

Penting: max-width: 768px berarti “ketika lebar layar adalah 768px ATAU KURANG dari itu”. Gaya di dalam media query ini akan menimpa gaya di luar jika kondisinya terpenuhi.

Langkah 17: Menambahkan JavaScript untuk Menu Burger (dan Efek Scroll Navbar Opsional)

Agar menu burger berfungsi, kita perlu sedikit JavaScript. Buat file baru bernama script.js di root proyek Anda, atau tambahkan tag <script> sebelum </body> di index.html.

Pilihan 1: JavaScript di file terpisah (script.js) Buat file script.js dan isi:

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const burger = document.querySelector('#navbar .burger');
    const navLinks = document.querySelector('#navbar .nav-links');
    const navLinkItems = document.querySelectorAll('#navbar .nav-links li');

    // Toggle Nav
    burger.addEventListener('click', () => {
        // Toggle Nav
        navLinks.classList.toggle('nav-active');

        // Animate Links
        navLinkItems.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = '';
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
            }
        });

        // Burger Animation
        burger.classList.toggle('toggle');
    });

    // Close nav when a link is clicked
    navLinkItems.forEach(item => {
        item.addEventListener('click', () => {
            if (navLinks.classList.contains('nav-active')) {
                navLinks.classList.remove('nav-active');
                burger.classList.remove('toggle');
                // Reset link animations
                navLinkItems.forEach(link => link.style.animation = '');
            }
        });
    });

    // (Opsional) Navbar scroll effect
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) { // Jika scroll lebih dari 50px
            // navbar.classList.add('scrolled'); // Aktifkan jika ada style .scrolled
        } else {
            // navbar.classList.remove('scrolled');
        }
    });

    // (Opsional) Active link highlighting on scroll (lebih kompleks, perlu Intersection Observer)
    // Ini adalah versi sederhana, bisa disempurnakan
    const sections = document.querySelectorAll('main section[id]');
    window.addEventListener('scroll', navHighlighter);

    function navHighlighter() {
        let scrollY = window.pageYOffset;
        sections.forEach(current => {
            const sectionHeight = current.offsetHeight;
            const sectionTop = current.offsetTop - 100; // -50 atau -tinggi navbar
            let sectionId = current.getAttribute('id');

            if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
                document.querySelector('.nav-links a[href*=' + sectionId + ']').classList.add('active');
            } else {
                document.querySelector('.nav-links a[href*=' + sectionId + ']').classList.remove('active');
            }
        });
    }
});

Jika menggunakan file script.js terpisah, jangan lupa tambahkan ini sebelum </body> di index.html: <script src="script.js"></script>

Pilihan 2: JavaScript langsung di HTML Jika memilih ini, letakkan kode JavaScript di atas (dari document.addEventListener...) di dalam tag <script> sebelum </body>:

<!-- Sebelum </body> -->
<script>
    document.getElementById('currentYear').textContent = new Date().getFullYear();

    // --- Mulai kode JS menu burger dari sini ---
    document.addEventListener('DOMContentLoaded', () => {
        const burger = document.querySelector('#navbar .burger');
        // ... (sisa kode JS seperti di atas) ...
    });
    // --- Akhir kode JS menu burger ---
</script>
</body>

Untuk animasi link di menu mobile, tambahkan CSS ini di style.css (bisa di bagian mana saja, atau di dalam media query mobile):

/* Animasi untuk link navigasi mobile */
@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

Kesimpulan dan Langkah Selanjutnya

Selamat! Anda telah berhasil membuat landing page yang modern dan responsif dari awal. Anda telah mempelajari:

  • Struktur HTML5 semantik.
  • Styling dengan CSS3, termasuk variabel, Flexbox, dan Grid.
  • Dasar-dasar desain responsif menggunakan Media Queries.
  • Sentuhan JavaScript untuk interaktivitas menu.

Apa Selanjutnya?

  1. Kustomisasi: Ubah warna, font, gambar, dan konten sesuai kebutuhan Anda.
  2. Optimasi: Kompres gambar, minifikasi CSS dan JS untuk performa lebih baik.
  3. Validasi: Gunakan validator W3C untuk HTML dan CSS untuk memeriksa error.
  4. Fitur Tambahan: Pertimbangkan menambahkan form kontak, peta, animasi lebih lanjut, atau integrasi dengan layanan lain.
  5. Belajar Lebih Lanjut: Pelajari JavaScript lebih dalam, framework CSS seperti Bootstrap atau Tailwind CSS, atau preprocessor CSS seperti SASS/SCSS.

Teruslah berlatih dan bereksperimen. Web development adalah perjalanan pembelajaran yang berkelanjutan. Semoga berhasil!

Tutorial Terkait