How to Make an App Landing Page with Pure HTML and CSS

Hello My Dear Readers, Today in this post you will learn how to create a responsive app landing page design using Pure HTML and CSS no Javascript. This website is for beginners who want to create their first website. Previously we saw the Top 10 Awesome Modern Free Ecommerce Templates . and now it's time to Responsive App Landing Page Design.
Having a good app landing page for your website is important. It can help to drive the customers to your site where they'll find your products and services and hopefully take action.

To Download Source code and Images Scroll down at last...
By the end of this tutorial, you will be able to create:
Sticky Header
navbar with toggle menu bar effect
Pricing table
Contact us page

I believe that as a beginner, you will be able to level up your CSS too after completing this tutorial.
YouTube Tutorial with Step by Step :

Table of Contents
Home section using Flexbox

Feature section
About section
Testimonial section
Pricing Table
Contact section
Footer section

First of all, open your editor then create an index.html file in your Project folder and paste the following code:

<!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">
<title>Responsive Landing Page Design By Codicgyan</title>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">


<link rel="stylesheet" href="style.css">

</head>

<body>

</body>

</html>

Write the code between the <body> </body>

Now create a CSS file in your project folder and paste the following code below...

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap');


:root{
    --blue: rgb(32, 75, 227);
    --lightblue: rgb(70, 219, 249);
    --gradient:linear-gradient(90deg, var(--blue), var(--lightblue));
}


*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-transform: capitalize;
}
*::selection {
    background: var(--lightblue);
    color: #fff;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body{
    background: #f9f9f9;
}



section{
    min-height: 100vh;
    padding: 0 9%;
    padding-top: 7.5rem;
    padding-bottom: 2rem;
}

.btn{
    display: inline-block;
    margin-top: 1rem;
    padding: .8rem 3rem;
    border-radius: 5rem;
    background: var(--gradient);
    font-size: 1.7rem;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
    transition: all .3s linear;
}

.btn:hover {
    border: 3px dotted var(--blue);
    color: var(--lightblue);
    background: #fff;
}

HTML:

Now we'll create a Sticky Header / Navbar with a toggle menu bar effect.

    <!-- Header section starts -->

    <header>

        <a href="# " class="logo"><span>Android</span>App</a>

        <input type="checkbox" id="menu-bar">
        <label for="menu-bar" class="fas fa-bars"></label>

        <nav class="wrapper">
            <a href="#home">home</a>
            <a href="#features">features</a>
            <a href="#about">about</a>
            <a href="#testimonial">testimonial</a>
            <a href="#pricing">pricing</a>
            <a href="#contact">contact</a>
        </nav>

    </header>

    <!-- Header section end -->

CSS:

.heading{
    text-align: center;
    background: var(--gradient);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 3.5rem;
    text-transform: uppercase;
    padding: 1rem;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    background: #fff;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
    padding: 2rem 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

header .logo {
    font-size: 2rem;
    color: var(--blue);
}


header .logo span{
    color: var(--lightblue);
}

header .wrapper a {
    font-size: 1.7rem;
    margin-left: 2rem;
    color: var(--blue);
}

header .wrapper a:hover {
    color: var(--lightblue);
    transition: 0.3s;
}

header input{
    display: none;
}

header label{
    font-size: 3rem;
    color: var(--blue);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
}

HTML: Home Section

    <!-- home section starts  -->

    <section class="home" id="home">

        <div class="content">
            <h3>App that <br>
                suits You <span>Better</span>
            </h3>
            <p>Inappropriate behaviour is often laughed off as "boys will be boys," women face higher
                conduct standards.
            </p>
            <a href="#" class="btn">download now</a>
        </div>

        <div class="image">
            <img src="images/banner-img.png" alt="">
        </div>

    </section>

    <!-- home section end -->

CSS:

.home{
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/home-banner-bg.jpg);
    background-size: cover;
    background-position: center;
}

.home .image img {
    width: 18vw;
    margin-right: 120px;
    animation: float 3s linear infinite;
}

@keyframes float {
    0%, 100%{
        transform: translateY(0rem);
    }
    50%{
        transform: translateY(-3.5rem);
    }
}

.home .content h3 {
    font-size: 5.3rem;
    color: #333;
    text-transform: uppercase;
}

.home .content h3 span {
   
    color: var(--lightblue);
    text-transform: uppercase;
}


.home .content p {
    font-size: 1.7rem;
    color: #666;
    padding: 2rem 0;
    margin-right: 10rem;
}

HTML: Feature Section

    <!-- Features section starts  -->
    <section class="features" id="features">

        <h1 class="heading"> Unique features </h1>

        <div class="box-container">

            <div class="box">
                <img src="images/iphone.png" alt="">
                <h3>Expert Technicians</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam minus recusandae autem, repellendus
                    fugit quaerat provident voluptatum non officiis ratione.</p>
                <a href="#" class="btn">read more</a>
            </div>

            <div class="box">
                <img src="images/iphone.png" alt="">
                <h3>Professional service</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam minus recusandae autem, repellendus
                    fugit quaerat provident voluptatum non officiis ratione.</p>
                <a href="#" class="btn">read more</a>
            </div>

            <div class="box">
                <img src="images/iphone.png" alt="">
                <h3>Great Support</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam minus recusandae autem, repellendus
                    fugit quaerat provident voluptatum non officiis ratione.</p>
                <a href="#" class="btn">read more</a>
            </div>

        </div>

    </section>



    <!-- Features section end -->

CSS:

.features .box-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.features .box-container .box{
    flex:1 1 30rem;
    background:#fff;
    border-radius: .5rem;
    border:.1rem solid rgba(0,0,0,.2);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    margin:1.5rem;
    padding:3rem 2rem;
    border-radius: .5rem;
    text-align: center;
    transition: .2s linear;
}

.features .box-container .box img{
    height: 15rem;
}

.features .box-container .box h3{
    font-size: 2rem;
    color:#333;
    padding-top: 1rem;
}

.features .box-container .box p{
    font-size: 1.3rem;
    color:#333;
    padding: 1rem 0;
}

HTML: About Section

  <!-- About section starts  -->


    <section class="about" id="about">

        <h1 class="heading">about the app</h1>

        <div class="column">

            <div class="image">
                <img src="images/iphone.png" alt="">
            </div>

            <div class="content">
                <h3>we believe that interior beautifies the total structure</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Nostrum ratione repudiandae iste.
                </p>

                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                    Nostrum ratione repudiandae iste.
                </p>

                <div class="buttons">
                    <a href="#" class="btn"><i class="fab fa-apple"></i>app store</a>
                    <a href="#" class="btn"><i class="fab fa-google-play">google-play</i></a>
                </div>

            </div>
        </div>

    </section>

    <!-- About section end -->

CSS:

.about{
    background-size: cover;
    background-position: center;
    padding-bottom: 3rem;
}

.about .column{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}


.about .column .image{
    flex: 1 1 40rem;
}

.about .column .image img{
    width: 65%;
}

.about .column .content{
    flex: 1 1 40rem;
}


.about .column .content h3{
   font-size: 3rem;
   color: #333;
}


.about .column .content p{
    font-size: 1.5rem;
    color: #666;
    padding: 1rem 0;
 }
 
 .about .column .content .buttons a:last-child{
     margin-left: 2rem;
 }

HTML: Newsletter section

    <!-- newsletter  -->

    <div class="newsletter">

        <h3>Subscribe For New Features</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sed aliquam quibusdam neque magni magnam est
            laborum doloribus, facere dolores.</p>
        <form action="">
            <input type="email" placeholder="enter your email">
            <input type="submit" value="Subscribe">
        </form>

    </div>

CSS:

 .newsletter{
    text-align: center;
    padding:5rem 1rem;
    background:url(../images/subscribe-bg.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.newsletter h3{
    color:#fff;
    font-size: 3rem;
    text-transform: uppercase;
}

.newsletter p{
    color:#fff;
    font-size: 1.6rem;
    margin:2rem auto;
    width:70rem;
}

.newsletter form{
    display: flex;
    max-width: 70rem;
    border:.2rem solid #fff;
    padding:.5rem;
    border-radius: 5rem;
    margin:2rem auto;
    height:5.5rem;
}

.newsletter form input[type="email"]{
    padding: 0 2rem;
    font-size: 1.7rem;
    background: none;
    width: 100%;
    color: #fff;
    text-transform: none;
}
.newsletter form input[type="email"]::placeholder{
    color: #eee;
    text-transform: capitalize;
}

.newsletter form input[type="submit"]{

    font-size: 1.7rem;
    background: #fff;
    width: 20rem;
    border-radius: 5rem;
    cursor: pointer;
}

.newsletter form input[type="submit"]:hover{
    color: var(--lightblue);
}

HTML: Testimonial Section

   <!-- Testimonial section starts -->


    <section class="testimonial" id="testimonial">

        <h1 class="heading">Our testimonials</h1>

        <div class="box-container">

            <div class="box">
                <i class="fas fa-quote-right"></i>
                <div class="user">
                    <img src="images/pic1.jpeg" alt="">
                    <h3>karanjeet</h3>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="comment">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Aliquam nulla ipsam eaque ipsa ea, dolores harum error,
                        accusantium itaque quaerat nihil sint fuga.
                        Aliquam minus esse mollitia, explicabo incidunt voluptatibus?
                    </div>
                </div>
            </div>


            <div class="box">
                <i class="fas fa-quote-right"></i>
                <div class="user">
                    <img src="images/pic2.jpeg" alt="">
                    <h3>nairobi</h3>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="comment">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Aliquam nulla ipsam eaque ipsa ea, dolores harum error,
                        accusantium itaque quaerat nihil sint fuga.
                        Aliquam minus esse mollitia, explicabo incidunt voluptatibus?
                    </div>
                </div>
            </div>


            <div class="box">
                <i class="fas fa-quote-right"></i>
                <div class="user">
                    <img src="images/pic3.jpeg" alt="">
                    <h3>denver</h3>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="comment">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Aliquam nulla ipsam eaque ipsa ea, dolores harum error,
                        accusantium itaque quaerat nihil sint fuga.
                        Aliquam minus esse mollitia, explicabo incidunt voluptatibus?
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonial section end -->

CSS:

.testimonial .box-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.testimonial .box-container .box{
    background: #fff;
    margin: 1rem;
    padding: 1rem;
    text-align: center;
    position: relative;
    border: .1rem solid rgba(0, 0, 0, .2);
    border-radius: 0 .5rem 1rem rgba(0, 0, 0, .1);
    flex: 1 1 30rem;
    border-radius: .5rem;
}

.testimonial .box-container .box .user img{
    border-radius: 50%;
    object-fit: cover;
    height: 7rem;
    width: 7rem;
    margin-top: 2rem;
}
.testimonial .box-container .box .fa-quote-right{
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-size: 8rem;
    color: var(--lightblue);
    opacity: .3;
}

.testimonial .box-container .box .user h3{
    color: var(--lightblue);
    font-size: 2rem;
}
.testimonial .box-container .box .user .stars i {
    color: var(--blue);
    font-size: 1.5rem;
    padding: 1rem 0;
}

.testimonial .box-container .box .comment{
    color: #666;
    font-size: 1.4rem;
    padding: 1rem;
}

HTML: Pricing Section

<!-- Pricing section starts  -->
<section class="pricing" id="pricing">

    <h1 class="heading"> Suitable Pricing Plans </h1>

    <div class="box-container">

        <div class="box">
            <h3 class="title">Standard</h3>
            <div class="price">£199<span>/year</span></div>
            <ul>
                <li> <i class="fas fa-check"></i> 2.5 GB Free Photos </li>
                <li> <i class="fas fa-check"></i> Secure Online Transfer </li>
                <li> <i class="fas fa-times"></i> Unlimited Styles For Interface </li>
                <li> <i class="fas fa-times"></i> Reliable Custom Service </li>
                <li> <i class="fas fa-times"></i> Manual Backup Provided</li>
            </ul>
            <a href="#" class="btn">check out</a>
        </div>

        <div class="box">
            <h3 class="title">business</h3>
            <div class="price">£399<span>/year</span></div>
            <ul>
                <li> <i class="fas fa-check"></i> 2.5 GB Free Photos </li>
                <li> <i class="fas fa-check"></i> Secure Online Transfer </li>
                <li> <i class="fas fa-check"></i> Unlimited Styles For Interface</li>
                <li> <i class="fas fa-times"></i> Reliable Custom Service </li>
                <li> <i class="fas fa-times"></i> Manual Backup Provided </li>
            </ul>
            <a href="#" class="btn">check out</a>
        </div>

        <div class="box">
            <h3 class="title">ultimate</h3>
            <div class="price">£499<span>/year</span></div>
            <ul>
                <li> <i class="fas fa-check"></i> 2.5 GB Free Photos </li>
                <li> <i class="fas fa-check"></i> Secure Online Transfer </li>
                <li> <i class="fas fa-check"></i> Unlimited Styles For Interface </li>
                <li> <i class="fas fa-check"></i> Reliable Custom Service</li>
                <li> <i class="fas fa-check"></i> Manual Backup Provided</li>
            </ul>
            <a href="#" class="btn">check out</a>
        </div>

    </div>

</section>

<!-- Pricing section end -->

CSS:

.pricing .box-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.pricing .box-container .box{
    flex:1 1 27rem;
    background:#fff;
    border-radius: .5rem;
    border:.1rem solid rgba(0,0,0,.2);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    margin:1rem;
    padding:1rem;
    text-align: center;
    padding-bottom: 3rem;
}

.pricing .box-container .box:nth-child(2),
.pricing .box-container .box:hover {
    border: .2rem solid var(--lightblue);
}

.pricing .box-container .box .title {
    color: var(--blue);
    font-size: 2.5rem;
    padding-top: 1rem;
}

.pricing .box-container .box .price{
    color: var(--lightblue);
    font-size: 4rem;
    padding-top: 1rem 0;
}

.pricing .box-container .box .price span{
  
    font-size: 2rem;
  
}

.pricing .box-container .box ul{
  padding: 1rem 0;
  list-style: none;
  
}

.pricing .box-container .box ul li{
    padding: .5rem 0;
    color: #666;
    font-size: 1.7rem;
   
  }

  .pricing .box-container .box ul li .fa-check{
      color: lightgreen;
  }

  .pricing .box-container .box ul li .fa-times{
    color: tomato;
}

HTML: Contact Section

<!-- contact form  -->
<section class="contact" id="contact">

    <div class="image">
        <img src="images/contact-img.png" alt="">
    </div>

    <form action="">

        <h1 class="heading">contact us</h1>

        <div class="inputBox">
            <input type="text" required>
            <label>name</label>
        </div>

        <div class="inputBox">
            <input type="email" required>
            <label>email</label>
        </div>

        <div class="inputBox">
            <input type="number" required>
            <label>phone</label>
        </div>

        <div class="inputBox">
            <textarea required name="" id="" cols="30" rows="10"></textarea>
            <label>message</label>
        </div>

        <input type="submit" class="btn" value="send message">

    </form>

</section>
<!-- contact section end -->

CSS:

.contact{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 4rem;
}

.contact .image{
    flex:1 1 40rem;
}

.contact .image img{
    width:100%;
    padding:2rem;
}

.contact form{
    flex:1 1 40rem;
    background:#fff;
    border-radius: .5rem;
    border:.1rem solid rgba(0,0,0,.2);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
 
    padding:2rem 3rem;
   
   
}

.contact form .heading{
    text-align: left;
    padding: 0;
    padding-bottom: 2rem;
}

.contact form .inputBox{
    position: relative;
}

.contact form .inputBox input, .contact form .inputBox textarea{
    width: 100%;
    background:none;
    color: #666;
    margin: 1.5rem 0;
    padding: .5rem 0;
    font-size: 1.7rem;
    border-bottom: .1rem solid rgba(0, 0, 0, .1);
    text-transform: none;
}

.contact form .inputBox textarea{
    resize: none;
    height: 13rem;
}

.contact form .inputBox label{
    position: absolute;
    top: 1.7rem;
    left: 0;
    font-size: 1.7rem;
    color: #666;
    transition: .2s linear;
}

.contact form .inputBox input:focus ~ label,
.contact form .inputBox input:valid ~ label,
.contact form .inputBox textarea:focus ~ label,
.contact form .inputBox textarea:valid ~ label {
    top: -.5rem;
    font-size: 1.5rem;
    color: var(--lightblue);
}

HTML: Footer section

<!-- footer section starts  -->

<div class="footer">

    <div class="box-container">

        <div class="box">
            <h3>about us</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
               </p>
        </div>

        <div class="box">
            <h3>quick links</h3>
            <a href="#">home</a>
            <a href="#">features</a>
            <a href="#">about</a>
            <a href="#">review</a>
            <a href="#">pricing</a>
            <a href="#">contact</a>
        </div>

        <div class="box">
            <h3>follow us</h3>
            <a href="#">facebook</a>
            <a href="#">instagram</a>
            <a href="#">pinterest</a>
            <a href="#">twitter</a>
        </div>

        <div class="box">
            <h3>contact info </h3>
            <div class="info">
                <i class="fas fa-phone"></i>
                <p> +123-456-7890 <br> +111-2222-333</p>
            </div>
            <div class="info">
                <i class="fas fa-envelope"></i>
                <p>karanjeet802212@gmail.com <br>karanjeet802212@gmail.com</p>
            </div>
            <div class="info">
                <i class="fas fa-map-marker-alt"></i>
                <p>noida, india - 201304</p>
            </div>
        </div>

    </div>

    <h1 class="credit"> &copy; copyright @2022 by Codicgyan</h1>
</div>

<!-- footer section ends -->

CSS:

.footer{
    padding-top: 3rem;
    background: url(../images/footer-bg.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.footer  .box-container{
    display: flex;
    flex-wrap: wrap;
}

.footer  .box-container .box{
    flex: 1 1 25rem;
    margin: 2rem;
}

.footer  .box-container .box h3{
    font-size: 2.5rem;
    padding: 1rem 0;
    color: #fff ;
    text-decoration: underline;
    text-underline-offset: 1rem;
}

.footer  .box-container .box p{
    font-size: 1.5rem;
    padding: .5rem 0;
    color: #eee;
}

.footer  .box-container .box a {
    display: block;
    font-size: 1.5rem;
    padding: .5rem 0;
    color: #eee;
}

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

.footer  .box-container .box .info {
    display: flex;
    align-items: center;
}

.footer .box-container .box .info i{
    margin:.5rem 0;
    margin-right: 1rem;
    border-radius: 50%;
    background:#fff;
    color:var(--blue);
    font-size: 1.5rem;
    height:4.5rem;
    width:4.5rem;
    line-height: 4.5rem;
    text-align: center;
}
.footer .credit{
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: .1rem;
    color: #fff;
    border-top: .1rem solid #fff5;
    padding: 2.5rem 1rem;
    text-align: center;
}

Done!

If you creating this website step by step and have some problem with the website code then download the full source code below.

Image Link :

Download Now

Source Code including images:

You have to wait 15 seconds.

Generating Demo/Download Link...

If you have any problem making this app landing page website then please feel free to comment below. and remember to subscribe to our channel for more tutorials like this one...

App Landing Page Template design Using Pure HTML and CSS - Codicgyan

How to Make an App Landing Page with Pure HTML and CSS

YouTube Tutorial with Step by Step :

Table of Contents

HTML: Home Section

CSS:

HTML: Feature Section

CSS:

HTML: About Section

CSS:

HTML: Newsletter section

CSS:

HTML: Testimonial Section

CSS:

HTML: Pricing Section

CSS:

HTML: Contact Section

CSS:

HTML: Footer section

CSS:

Image Link :

Source Code including images:

Contact Form