How to create a Landing page using HTML CSS and JavaScript ?

Last Updated : 07 Apr, 2025

A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing visitor information through a form, while reassuring them that the website can address their needs. In this article, we are going to create a landing page using HTML, CSS, and JavaScript.

Create a captivating landing page that converts your target audience into high-paying customers in just a few clicks with Instapage. It is an easy-to-use landing page builder that lets you build a landing page of your choice without any coding.

How Landing page is different from a Home Page?

The landing page is a single web page that appears in response to clicking on a search engine-optimized search result or any online advertisement and the Home page is the initial or the main web page of a website. The landing page acts as the front door to the website and the Home page acts as the expressway to the visitor’s desired destination.

Approach

Create the basic layout of the landing page using HTML that includes a basic nav bar, a basic homepage a body section, and a signup page.
Style the layout created by HTML using CSS and link the CSS file to the HTML file.
Create an index.js file and write the JavaScript code to display the nav bar in a sliding menu when the website is viewed on small screens

Example: In this example, we will be creating a landing page using HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Landing Page</title>
</head>

<body>
    <nav>
        <div class="heading">Landing Page</div>
        <span class="sideMenuButton" 
            onclick="openNavbar()">
            &#9776
        </span>

        <div class="navbar">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Sign Up</a></li>
            </ul>
        </div>
    </nav>

    <!-- Side navigation bar for 
        responsive website -->
    <div class="sideNavigationBar" 
        id="sideNavigationBar">
        <a href="#" class="closeButton" 
            onclick="closeNavbar()">
            &#x274C
        </a>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Sign Up</a>
    </div>

    <!-- Content -->
    <div class="line" id="Home">
        <div class="side1">
            <h1>GeeksforGeeks</h1>
            <button>
                <a href=
"https://www.geeksforgeeks.org/">
                    Explore More
                </a>
            </button>
        </div>
        <div class="side2">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"
                width="500">
        </div>
    </div>

    <section class="about" id="My Projects">
        <div class="content">
            <div class="title">
                <span>Courses</span>
            </div>
            <div class="boxes">
                <div class="box">
                    <div class="topic">
                        <a href="" target="_blank">
                            DSA
                        </a>
                    </div>
                    <p>
                        The term DSA stands for Data 
                        Structures and Algorithms. As 
                        the name itself suggests, it 
                        is a combination of two 
                        separate yet interrelated 
                        topics.
                    </p>
                </div>
                <div class="box">

                    <div class="topic">
                        <a href="" target="_blank">
                            HTML
                        </a>
                    </div>
                    <p>
                        HTML stands for HyperText 
                        Markup Language. It is used 
                        to design web pages using 
                        the markup language.
                    </p>
                </div>

                <div class="box">
                    <div class="topic">
                        <a href="" target="_blank">
                            Javascript
                        </a>
                    </div>
                    <p>
                        JavaScript (JS) is the most 
                        popular lightweight, interpreted 
                        compiled programming language.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="contact" id="contact">
        <div class="content">
            <div class="title"><span>Sign Up</span></div>
            <div class="contactMenu">
                <div class="input1">
                    <div class="label1">Your Name</div>
                    <div class="input2">
                        <input type="text" 
                            placeholder="Enter your Name here">
                    </div>
                    <div class="label1">
                        <label>Your Email</label>
                    </div>
                    <div class="input2">
                        <input type="text" 
                            placeholder="Enter your Email here">
                    </div>
                    <div class="label1">
                        <label>Your Password</label>
                    </div>
                    <div class="input2">
                        <input type="text" 
                            placeholder="Enter your Password here">
                    </div>
                    <div class="button">
                        <button>Sign Up</button>
                    </div>
                </div>
                <div class="input3">
                    <div class="rightside1">
                        <div class="title1">
                            <span>
                                Contact Us
                            </span>
                        </div>
                        <div class="content1">
                            A-143, 9th Floor, Sovereign 
                            Corporate Tower, Sector-136, 
                            Noida, Uttar Pradesh - 201305
                        </div>
                        <div class="title1">
                            <span>More Information</span>
                        </div>
                        <div class="content1">
                            Greetings to all the Geeks out there!
                            We welcome you to the platform where we
                            consistently strive to offer the best 
                            of education. This platform has been 
                            designed for every geek wishing to 
                            expand their knowledge, share their 
                            knowledge and is ready to grab their 
                            dream job. We have millions of articles,
                            live as well as online courses, thousands 
                            of tutorials and much more just for the 
                            geek inside you.Thank you for choosing 
                            and supporting us!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Footer section -->
    <footer>
        <div class="footer">
            <span>
                Created By
                <a href="https://www.geeksforgeeks.org/" 
                    target="_blank">
                    GeeksforGeeks
                </a>
            </span>
        </div>
    </footer>
    <script src="index.js"></script>
</body>

</html>

CSS

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

body {
    background-color: white;
    color: black;
    font-family: "Fira Sans", sans-serif;
    background-color: white;
}

nav {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    padding: 20px 5%;
    background-color: #8cc099;
}

nav .heading {
    font-size: 30px;
    font-weight: 700;
    color: white;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    padding: 8px 15px;
    border-radius: 10px;
    transition: 0.2s ease-in;
}

nav ul li a {
    color: black;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    color: white;
}

nav ul li:hover {
    background-color: green;
}

nav ul li a:hover {
    color: white;
}

nav .sideMenuButton {
    font-size: 30px;
    font-weight: bolder;
    cursor: pointer;
    display: none;
}

/* responsive navbar css */
@media screen and (max-width: 600px) {
    nav .sideMenuButton {
        display: flex;
    }

    nav .navbar {
        display: none;
    }

    .sideNavigationBar {
        display: block !important;
    }
}

.sideNavigationBar {
    height: 100%;
    position: fixed;
    top: 0;
    right: 0%;
    background-color: green;
    overflow-x: hidden;
    transition: 0.3s ease-in;
    padding-top: 60px;
    display: none;
}

.sideNavigationBar a {
    padding: 8px 8px 8px 40px;
    display: block;
    font-size: 25px;
    font-weight: 500;
    color: #d1d1d1;
    transition: 0.3s;
    text-decoration: none;
}

.sideNavigationBar a button {
    padding: 10px 20px;
    border-radius: 10px;
    color: green;
    font-size: 16px;
    border-style: none;
    font-weight: 700;
}

.sideNavigationBar a:hover {
    color: white;
}

.sideNavigationBar .closeButton {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 20px;
    margin-left: 50px;
}

.line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2% 5%;
}

.line .side1 {
    padding-right: 50px;
}

.side1 h1 {
    font-size: 60px;
    margin-bottom: 10px;
    color: green;
}

.side1 button {
    width: 200px;
    padding: 12px 20px;
    border-radius: 20px;
    border-style: none;
    color: black;
    font-size: 17px;
    font-weight: 600;
}

a {
    text-decoration: none;
    color: black;
}

/* Header content responsive */
@media screen and (max-width: 980px) {
    .side2 img {
        width: 350px;
    }

    .side1 h1 {
        font-size: 40px;
    }

    .side1 p {
        font-size: 17px;
    }

    .line {
        margin-top: 80px;
    }
}

@media screen and (max-width: 600px) {
    .side1 h1 {
        font-size: 35px;
    }

    .line {
        flex-direction: column;
    }

    .line .side1 {
        padding: 30px;
    }
}

/* section */

section .topic a {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 10px;
}

.about .boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.about .boxes .box {
    margin: 10px 20px;
    max-width: calc(100% / 3 - 50px);
    text-align: center;
    border-radius: 12px;
    padding: 30px 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
    cursor: default;
}

/* Contact Page  */

.contact {
    padding: 20px;
}

.contact .content {
    margin: 0 auto;
    padding: 30px 0;
}

.content .title {
    width: 80%;
    text-align: center;
    font-weight: bolder;
    font-size: 40px;
}

.title {
    margin-bottom: 30px;
    margin-left: 80px;
}

.contactMenu {
    display: flex;
    justify-content: space-evenly;
}

.input2 {
    margin-top: 10;
}

.label1 {
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-weight: bolder;
}

.contactMenu .input1 input {
    border-radius: 13px;
    padding: 6px;
}

.input2 input {
    border-color: rgb(252, 244, 244);
    width: 400px;
}

.button {
    margin-top: 12px;
    margin-left: 5px;
}

.button button {
    width: 162px;
    height: 35px;
    border-radius: 12px;
    border-color: transparent;
}

.button button:hover {
    background-color: #8cc099;
}

button {
    width: 162px;
    height: 35px;
    border-radius: 12px;
    border-color: transparent;
}

button:hover {
    background-color: #8cc099;
}

.rightside1 {
    display: flex;
    flex-direction: column;
    margin-left: 300px;
}

.title1 {
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 5px;
    font-weight: bolder;
}

.content1 {
    width: 450px;
    margin-top: 2px;
    color: grey;
}

/* Footer */
footer {
    background: var(--primary-color);
    padding: 15px 0;
    text-align: center;
    font-family: "Poppins", sans-serif;
}

footer .footer span {
    font-size: 17px;
    font-weight: 400;
    color: var(--white-color);
}

footer .footer span a {
    font-weight: 500;
    color: var(--white-color);
}

footer .footer span a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 1060px) {
    .contactMenu {
        flex-direction: column;
        align-items: center;
    }

    .rightside1 {
        display: flex;
        flex-direction: column;
        margin-left: 0px;
    }

    .content1 {
        width: 100%;
        margin-top: 2px;
        color: grey;
    }

    .side2 img {
        width: 95%;
        height: 90%;
    }
}

@media screen and (max-width: 600px) {
    .side2 img {
        width: 100%;
    }

    section .topic a {
        font-size: 20px;
    }

    section .topic p {
        font-size: 5px;
    }

    .about .boxes {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about .boxes .box {
        max-width: 70%;
    }
}

JavaScript

function openNavbar() {
    document.getElementById("sideNavigationBar")
        .style.width = "50%";
}
function closeNavbar() {
    document.getElementById("sideNavigationBar")
        .style.width = "0%";
}