In this article, we will create a simple minimalist landing page using HTML, CSS, and a little JavaScript to handle the hamburger and navbar elements in mobile mode. This project is suitable for beginners who want to understand how to set up layout structures, style elements, and add interactive touches to web pages to make them look neater and more elegant.

Initial Preparation

Before we start coding, the tools (software) we need to prepare are:

Text Editor (Visual Studio Code, Sublime Text)
Browser (Google Chrome) Additionally, we need to install fonts from Google Fonts to make the design more attractive and professional.

Read Also Related Articles Installing Fonts from Google Fonts

How To Styling Text with Fonts, Sizes, Colors, and Spacing Using CSS

Coding Implementation

Create a folder named minimalist-landing-page containing two files: index.html and styles.css. Paste the HTML code below into the index.html file.

HTML Code

<!DOCTYPE html>
<html lang="en">
<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>

In the code above, we use a standard HTML structure with the addition of fonts from Google Fonts. In this project, the font we use is Inter. In addition, we also add JavaScript code to the <script> tag and create simple interactions for the navbar element in mobile mode.

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');
		});
});

Here is an explanation of the JavaScript code above:

Getting HTML Elements

The variables named hamburger and navMenu represent elements that each have different classes, namely .hamburger and navMenu.

Event Listener

hamburger.addEventListener(‘click’, ...) will execute the function when the element with the class .hamburger is clicked. This function adds or removes the class .active (toggle) on the elements hamburger and navMenu.

Close Nav Menu After Redirect

document.querySelectorAll(‘.nav-item a’) retrieves all links or <a> elements within the nav-item element, then loops them using the forEach function, and each element resulting from the loop is represented through the link parameter.
link.addEventListener(‘click’, ...) When the link is clicked, the .active class on the hamburger and navMenu elements will be removed.

After that, paste the following CSS code into the styles.css file.

CSS code

* {
    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);
}

We will discuss several parts of the CSS code above.

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

This section is commonly referred to as CSS Reset, which serves to remove the default margin or padding from the browser and set box-sizing to 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;
}

The navbar element uses the fixed position so that the navbar will always be at the top of the screen.

.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%;
}

Using the pseudo-classes :hover and :after on the <a> tag, we create an animated line effect when the cursor hovers over the link. This enhances visual interaction and provides a better user experience (UX).

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

Ensuring the layout remains responsive on mobile devices using CSS Media Queries, along with adjustments to fonts, layout, and navigation.

Read Related Articles

Implementation Result

Here are the results and display of the implementation of the code above. Create Minimalist Landing Page - NganggurDev

Conclusion

In the Learning CSS for Beginners series, we have learned the important foundations for mastering CSS, starting with the concepts of pseudo-classes, CSS selectors, CSS boxes, and more. So far, we have tried to implement what we have learned by creating a Minimalist Landing Page using HTML and CSS.

Thank you.