Pada artikel ini, kita akan membuat minimalis landing page sederhana menggunakan HTML, CSS, dan perlu sedikit JavaScript untuk menghandle elemen hamburger dan navbar pada mode mobile. Project ini cocok untuk pemula yang ingin memahami bagaimana cara mengatur struktur layout, memberikan styling pada elemen, serta menambahkan sentuhan interaktif pada halaman web agar terlihat lebih rapih dan elegan.

Persiapan Awal

Sebelum kita lanjut ngoding, alat atau tools (software) yang perlu kita siapkan adalah:

Text Editor (Visual Studio Code, Sublime Text)
Browser (Google Chrome) Selain itu, kita juga perlu melakukan installasi font dari Google Fonts agar desain tampak lebih menarik dan profesional.

Baca Juga Artikel Terkait Installasi Font dari Google Fonts

Tutorial Styling Text dengan Fonts, Sizes, Colors, dan Spacing Menggunakan CSS

Implementasi Coding

Buatlah folder dengan nama minimalist-landing-page berisikan 2 file yaitu index.html dan styles.css. Tempelkan kode HTML dibawah ini kedalam file index.html.

Kode HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimalis Landing Page - NganggurDev</title>
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="logo">NganggurDev</a>
            <ul class="nav-menu">
                <li class="nav-item"><a href="#home">Home</a></li>
                <li class="nav-item"><a href="#features">Features</a></li>
                <li class="nav-item"><a href="#about">About</a></li>
                <li class="nav-item"><a href="#contact">Contact</a></li>
            </ul>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>
    <section class="hero" id="home">
        <div class="hero-content">
            <h1>Welcome to NganggurDev</h1>
            <p>We offer comprehensive programming tutorials in multiple languages, ranging from basic to advanced levels.</p>
            <a href="#features" class="cta-button">Let's Start Now</a>
        </div>
    </section>
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 All Rights Reserved | NganggurDev</p>
        </div>
    </footer>

    <script>
        const hamburger = document.querySelector('.hamburger');
        const navMenu = document.querySelector('.nav-menu');

        hamburger.addEventListener('click', () => {
            hamburger.classList.toggle('active');
            navMenu.classList.toggle('active');
        });

        document.querySelectorAll('.nav-item a').forEach(link => {
            link.addEventListener('click', () => {
                hamburger.classList.remove('active');
                navMenu.classList.remove('active');
            });
        });
    </script>
</body>
</html>

Pada kode di atas, kita menggunakan struktur HTML standar dengan penambahan font dari Google Fonts. Dalam project ini, font yang kita pakai adalah Inter. Selain itu, kita juga menambahkan kode JavaScript pada tag <script> dan membuat interaksi sederhana untuk elemen navbar pada mode mobile.

const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');

hamburger.addEventListener('click', () => {
		hamburger.classList.toggle('active');
		navMenu.classList.toggle('active');
});

document.querySelectorAll('.nav-item a').forEach(link => {
		link.addEventListener('click', () => {
				hamburger.classList.remove('active');
				navMenu.classList.remove('active');
		});
});

Berikut penjelasan dari kode JavaScript diatas:

Mendapatkan Elemen HTML

Variabel bernama hamburger dan navMenu merupakan representasi elemen yang masing-masing memiliki class berbeda yaitu.hamburger dan navMenu.

Event Listener

hamburger.addEventListener('click', ...) akan menjalankan fungsi ketika elemen dengan class .hamburger di klik. Fungsi ini menambahkan atau menghapus class .active (toggle) pada elemen hamburger dan navMenu.

Close Nav Menu After Redirect

document.querySelectorAll('.nav-item a') mengambil seluruh tautan atau link <a> didalam elemen nav-item, lalu di looping menggunakan fungsi forEach, dan setiap elemen hasil dari looping akan direpresentasikan melalui paramenter link.
link.addEventListener('click', ...) ketika tautan di klik, maka class .active pada elemen hamburger dan navMenu akan terhapus.

Setelah itu, tempelkan kode CSS dibawah ini pada file styles.css.

Kode CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-item a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-item a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background: #2563eb;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-item a:hover::after {
    width: 100%;
}

.nav-item a:hover {
    color: #2563eb;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #333;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1)"/><stop offset="100%" style="stop-color:rgba(255,255,255,0)"/></radialGradient></defs><circle cx="200" cy="300" r="100" fill="url(%23a)"/><circle cx="800" cy="200" r="150" fill="url(%23a)"/><circle cx="600" cy="700" r="120" fill="url(%23a)"/></svg>') no-repeat center center;
    background-size: cover;
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.hero-content {
    text-align: center;
    color: white;
    z-index: 2;
    position: relative;
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

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

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #1e293b;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    border-radius: 2px;
}

.footer {
    background: #1e293b;
    color: white;
    text-align: center;
    padding: 2rem 0;
}

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        padding: 2rem 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active {
        left: 0;
    }

    .hamburger {
        display: flex;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1.1rem;
        padding: 0 1rem;
    }

    .nav-container {
        padding: 0 1rem;
    }

    .container {
        padding: 0 1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

Kita akan membahas beberapa bagian dari kode CSS diatas.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Bagian ini biasa disebut dengan Reset CSS yang berfungsi untuk menghapus margin atau padding default dari browser serta mengatur box-sizing menjadi border-box.

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

Elemen navbar menggunakan position fixed sehingga navbar akan selalu berada di bagian atas layar.

.nav-item a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background: #2563eb;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.nav-item a:hover::after {
    width: 100%;
}

Dengan pseudo-class :hover dan :after pada tag <a> kita memberikan efek garis animasi saat kursor mengarah pada link. Dengan begitu, akan meningkatkan interaksi visual dan pengalaman pengguna (UX) yang lebih baik.

@media (max-width: 768px) {
    ...
}

Memastikan tampilan akan selalu responsif dengan CSS Media Query pada perangkat mobile, dan penyesuaian pada font, layout, dan navigasi.

Baca Juga Artikel Terkait

Hasil Imeplementasi

Berikut adalah hasil dan tampilan dari implementasi kode diatas. Create Minimalist Landing Page - NganggurDev

Kesimpulan

Pada seri Belajar CSS Untuk Pemula kita sudah mempelajari fondasi penting agar mahir menggunakan CSS mulai dari pengertian tentang Pseudo-class, Selector CSS, CSS Box, dan lain sebagainya. Hingga saat ini, kita mencoba melakukan implementasi apa yang telah kita pelajari dengan membuat Minimalist Landing Page dengan HTML dan CSS.

Terimakasih