Home » » Cara Membuat Landing Page Wifi RT/RW Sederhana dengan HTML & CSS

Cara Membuat Landing Page Wifi RT/RW Sederhana dengan HTML & CSS

By  Mei 18, 2026  

Di era digital saat ini, bisnis Wifi RT/RW menjadi salah satu peluang usaha yang sangat menjanjikan di lingkungan masyarakat. Agar usaha Wifi net Anda terlihat lebih profesional dan mempermudah pelanggan dalam memilih paket internet, memiliki sebuah Landing Page atau halaman dinamis adalah kuncinya.


landing page

Landing page ini akan berfungsi sebagai halaman penyambung (halaman masuk) ketika pelanggan terhubung ke jaringan Wifi Anda, atau sekadar sebagai brosur digital.

Dalam artikel ini, kita akan belajar cara membuat landing page Wifi RT/RW yang sederhana, ringan, dan responsif (ramah tampilan HP) hanya dengan menggunakan HTML dan CSS.

Struktur Folder Proyek

Sebelum mulai menulis kode, buatlah sebuah folder baru di komputer Anda (misalnya diberi nama wifi-rtrw). Di dalam folder tersebut, buat dua buah file dengan nama:

  1. index.html (untuk struktur halaman)

  2. style.css (untuk desain dan tampilan)

1. Menulis Struktur HTML (index.html)

Langkah pertama adalah membuat pondasi halaman menggunakan HTML. Halaman ini akan berisi nama Wifi, keunggulan, daftar harga paket, dan tombol kontak admin.

Salin kode berikut dan tempelkan ke dalam file index.html:

HTML
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wifi RT/RW Net - Internet Cepat & Murah</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Header / Hero Section -->
    <header class="hero">
        <div class="container">
            <h1>WARGA-NET WIFI</h1>
            <p>Solusi Internet Cepat, Stabil, dan Ramah di Kantong untuk Keluarga</p>
            <a href="#paket" class="btn-utama">Lihat Paket</a>
        </div>
    </header>

    <!-- Fitur / Keunggulan -->
    <section class="fitur">
        <div class="container grid-3">
            <div class="kartu-fitur">
                <h3>🚀 Super Cepat</h3>
                <p>Streaming video, game online, dan kerja remote tanpa buffering.</p>
            </div>
            <div class="kartu-fitur">
                <h3>💰 Hemat</h3>
                <p>Pilihan paket fleksibel sesuai dengan kebutuhan bulanan Anda.</p>
            </div>
            <div class="kartu-fitur">
                <h3>🛠️ CS 24/7</h3>
                <p>Tim teknisi lokal siap membantu jika terjadi gangguan jaringan.</p>
            </div>
        </div>
    </section>

    <!-- Daftar Paket -->
    <section id="paket" class="paket">
        <div class="container">
            <h2>Pilihan Paket Internet</h2>
            <p class="sub-judul">Pilih paket yang paling sesuai dengan aktivitas harianmu</p>
            
            <div class="grid-3">
                <!-- Paket 1 -->
                <div class="kartu-harga">
                    <h4>Paket Harian</h4>
                    <div class="harga">Rp 5.000<span>/24 Jam</span></div>
                    <ul>
                        <li>Kecepatan Up to 5 Mbps</li>
                        <li>Kuota Unlimited</li>
                        <li>Bisa untuk 1 Perangkat</li>
                    </ul>
                    <a href="https://wa.me/6281234567890?text=Halo%20Admin,%20saya%20mau%20beli%20Paket%20Harian" class="btn-beli">Beli Voucher</a>
                </div>

                <!-- Paket 2 (Populer) -->
                <div class="kartu-harga populer">
                    <div class="badge">Terlaris</div>
                    <h4>Paket Mingguan</h4>
                    <div class="harga">Rp 25.000<span>/7 Hari</span></div>
                    <ul>
                        <li>Kecepatan Up to 10 Mbps</li>
                        <li>Kuota Unlimited</li>
                        <li>Bisa untuk 2 Perangkat</li>
                    </ul>
                    <a href="https://wa.me/6281234567890?text=Halo%20Admin,%20saya%20mau%20beli%20Paket%20Mingguan" class="btn-beli">Beli Voucher</a>
                </div>

                <!-- Paket 3 -->
                <div class="kartu-harga">
                    <h4>Paket Bulanan</h4>
                    <div class="harga">Rp 100.000<span>/Bulan</span></div>
                    <ul>
                        <li>Kecepatan Up to 15 Mbps</li>
                        <li>Kuota Unlimited (FUP Ringan)</li>
                        <li>Bisa untuk 3 Perangkat</li>
                    </ul>
                    <a href="https://wa.me/6281234567890?text=Halo%20Admin,%20saya%20mau%20beli%20Paket%20Bulanan" class="btn-beli">Daftar Sekarang</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <p>&copy; 2026 Warga-Net WiFi. All Rights Reserved.</p>
    </header>

</body>
</html>

2. Mempercantik Tampilan dengan CSS (style.css)

Tanpa CSS, halaman di atas akan terlihat polos dan berantakan. Mari kita tambahkan gaya visual, penataan warna biru khas teknologi, serta pengaturan layout agar rapi saat dibuka di smartphone.

Salin kode berikut dan tempelkan ke dalam file style.css:

CSS
/* Reset CSS Dasar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
}

.container {
    width: 85%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(0, 4, 40, 0.7), rgba(0, 78, 146, 0.7)), url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?q=80&w=1000') no-repeat center center/cover;
    height: 60vh;
    color: #fff;
    display: flex;
    align-items: center;
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.btn-utama {
    background-color: #ffc107;
    color: #000;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 25px;
    transition: 0.3s ease;
}

.btn-utama:hover {
    background-color: #e0a800;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

/* Tata Letak Grid */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

/* Bagian Fitur */
.fitur {
    padding: 40px 0;
    background-color: #fff;
}

.kartu-fitur {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    border-bottom: 4px solid #004e92;
}

.kartu-fitur h3 {
    margin-bottom: 10px;
    color: #004e92;
}

/* Bagian Paket Harga */
.paket {
    padding: 60px 0;
    text-align: center;
}

.paket h2 {
    font-size: 2rem;
    color: #004e92;
}

.sub-judul {
    color: #666;
    margin-bottom: 20px;
}

.kartu-harga {
    background: #fff;
    padding: 35px 20px;
    border-radius: 10px;
    border: 1px solid #e1e1e1;
    position: relative;
    transition: transform 0.3s ease;
}

.kartu-harga:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.kartu-harga h4 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #333;
}

.harga {
    font-size: 1.8rem;
    font-weight: bold;
    color: #004e92;
    margin-bottom: 20px;
}

.harga span {
    font-size: 0.9rem;
    color: #777;
}

.kartu-harga ul {
    list-style: none;
    margin-bottom: 30px;
    text-align: left;
    padding-left: 15px;
}

.kartu-harga ul li {
    margin-bottom: 10px;
    color: #555;
}

.kartu-harga ul li::before {
    content: "✓ ";
    color: #28a745;
    font-weight: bold;
}

.btn-beli {
    display: block;
    background: #004e92;
    color: #fff;
    padding: 10px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

/* Gaya Khusus Paket Terlaris */
.kartu-harga.populer {
    border: 2px solid #004e92;
    background: #f0f7ff;
}

.kartu-harga.populer .btn-beli {
    background: #ffc107;
    color: #000;
}

.badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffc107;
    color: #000;
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 20px;
    text-transform: uppercase;
}

/* Footer */
footer {
    background: #111;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
}

Analisis Kode & Cara Kerjanya

  1. Responsif Otomatis (Grid CSS): Perhatikan kode grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); pada CSS. Kode ini otomatis mengatur susunan kotak paket menjadi 3 kolom pada layar laptop, dan otomatis menyusun ke bawah menjadi 1 kolom jika dibuka melalui HP Android atau iPhone.

  2. Integrasi WhatsApp: Pada tombol beli, tautan mengarah langsung ke [https://wa.me/6281234567890?text=](https://wa.me/6281234567890?text=).... Anda hanya perlu mengganti angka 6281234567890 dengan nomor WhatsApp admin Anda untuk menerima orderan voucher secara instan.

  3. Desain Menarik (Hero Image): Bagian atas menggunakan gradasi warna biru gelap transparan di atas gambar latar belakang bertema teknologi untuk memberikan kesan modern dan tepercaya.

Kesimpulan

Membuat landing page untuk Wifi RT/RW tidak harus rumit dan berat. Dengan kombinasi HTML dan CSS sederhana di atas, Anda sudah memiliki halaman penjualan yang fungsional, ringan dimuat (cepat terbuka saat login), dan sedap dipandang.

Anda bisa mengembangkan halaman ini lebih lanjut dengan mengintegrasikannya ke sistem hotspot seperti Mikrotik (sebagai template login page), atau mengunggahnya ke layanan hosting gratis seperti GitHub Pages agar bisa diakses oleh calon pelanggan dari luar jaringan. Selamat mencoba!

Careers at FIFA

Memuat...

UHO

Memuat...

Baca Juga