By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
How to set the dropdown value by clicking on a table row
Javascript – How to set the dropdown value by clicking on a table row
JavaScript
Attempting to increase the counter, when the object's tag exist
Javascript – Attempting to increase the counter, when the object’s tag exist
JavaScript
Cycle2 JS center active slide
Javascript – Cycle2 JS center active slide
JavaScript
Can import all THREE.js post processing modules as ES6 modules except OutputPass
Javascript – Can import all THREE.js post processing modules as ES6 modules except OutputPass
JavaScript
How to return closest match for an array in Google Sheets Appscript
Javascript – How to return closest match for an array in Google Sheets Appscript
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > HTML & CSS > How to Make Application Website Using HTML
HTML & CSSLanding Pages

How to Make Application Website Using HTML

Admin
Last updated: 2022/12/03 at 4:03 AM
Admin
Share
40 Min Read
Application Website Using HTML

In this article, we will learn to make an Application Website Using HTML, CSS, and JavaScript. This website will have simple UI, but has massive things in it. We will create it by using only HTML, CSS and little bit JavaScript to make it more cool. It will be completely responsive like any other website does. Let’s create it step by step.

Contents
Pre-requisites to Make an Application Website Using HTML, CSS, and JavaScriptSteps of an Application Website Using HTML, CSS, and JavaScriptCreating HTML Markup and File StructureAdding The Header SectionAdding Share SectionAdding Home SectionAdding Feature SectionAdding Screenshot SectionAdding Review SectionAdding Plan SectionAdding Download SectionAdding The Footer SectionAdding ResponsivenessAdding Functionality to Scroll and Adding Owl CarouselFull Source Code to Make Application Website Using HTML, CSS, and JavaScriptOutput
Demo

Pre-requisites to Make an Application Website Using HTML, CSS, and JavaScript

  • Good knowledge of HTML.
  • Good knowledge of CSS.
  • Good knowledge of JavaScript.

Steps of an Application Website Using HTML, CSS, and JavaScript

  • Basic structure of HTML and CSS
  • Reset HTML & Reusable CSS Classes
  • Header Section
  • Home Section
  • Feature Section
  • Sticky Share Section
  • Scroll Spy
  • Screenshot Section
  • Review Section
  • Plan/Pricing Table Section
  • Download Section
  • Footer Section

Creating HTML Markup and File Structure

First of all, we have added link of our style.css, then we have added owl carousel link to make our slider responsive. Then we have added a font-awesome library to add some icon from this library. And Lastly, we have added our JavaScript file.

In CSS, we have added basic and common CSS styles for whole project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complete Responsive App Landing Page Website Design Tutorial</title>

    <!-- owl carousel css cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

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

    <!-- custom css file link  -->
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</body>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

:root{
    --blue:#3F50CC;
}

*{
    font-family: 'Open Sans', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    text-transform: capitalize;
    transition: all .2s linear;
}

*::selection{
    background:var(--blue);
    color:#fff;
}

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

Adding The Header Section

In header section, we have added a div for header, in which we have added an icon as our logo. And then we have added to another div in which we have added menu button, and it will be shown when screen will be small. We will set it up using CSS later on in responsiveness section. Then after we have added a list to create our navbar, we have added home, feature, screenshot, review, plan, and download and all have some links. For now, section ID’s for these navbar elements.

Now in CSS, we have adjusted the size of the header and also, we gave some basic styles to the fonts. And also we have hid the menu button for now, we will access them while adding the responsiveness to the website.

<header>

    <a href="#" class="logo"><i class="fas fa-smile"></i>app</a>

    <div id="menu" class="fas fa-bars"></div>

    <nav class="navbar">
        <ul>
            <li><a class="active" href="#home">home</a></li>
            <li><a href="#feature">feature</a></li>
            <li><a href="#screenshot">screenshot</a></li>
            <li><a href="#review">review</a></li>
            <li><a href="#plan">plan</a></li>
            <li><a href="#download">download</a></li>
        </ul>
    </nav>

</header>
.heading{
    text-align: center;
    padding:1rem;
    padding-top: 6.5rem;
}

.heading span{
    display: inline-block;
    font-size: 2.5rem;
    padding:.5rem 7rem;
    color:#444;
    background:#fff;
    border:.2rem solid var(--blue);
    border-left-width: 1rem;
    border-right-width: 1rem;
}

header{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top:0; left: 0;
    padding:0 2rem;
    background:#444;
    z-index: 1000;
    box-shadow: 0 .1rem .3rem rgba(0,0,0,.3);
}

header .logo{
    font-size: 2.5rem;
    padding:1rem 4rem;
    background:#fff;
    color:#444;
}

header .logo i{
    padding:0 .5rem;
    color:var(--blue);
}

header .navbar ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

header .navbar ul li a{
    font-size: 2rem;
    color:#fff;
    padding:.5rem 2rem;
    margin-left: 1rem;
}

header .navbar ul li a.active,
header .navbar ul li a:hover{
    color:#444;
    background:#fff;
}

header #menu{
    font-size: 3rem;
    color:#fff;
    cursor: pointer;
    display: none;
}
Application Website Using HTML

Adding Share Section

Now in Share section, we have added a share icon, and also we have added some social media icons which have some links of course.

Now in CSS, we have fixed the position of this share button to the right side of the screen and also, we have hid the social media icons from here. We will bring these back when the share icon gets clicked. Then we have adjusted the icons color and hide them by default. We also added some hovering effect on these. Then after we have added some sliding effect after share icon becomes active.

In the JavaScript part, we have fetched the status of the share icon and if it is active, then we have applied active class using toggleClass method.

<div id="share">
    <i class="fas fa-share"></i>
    <a href="#" class="fab fa-facebook-f"></a>
    <a href="#" class="fab fa-twitter"></a>
    <a href="#" class="fab fa-instagram"></a>
    <a href="#" class="fab fa-linkedin"></a>
    <a href="#" class="fab fa-pinterest"></a>
</div>
#share{
    position: fixed;
    top:50%; right:-29.5rem;
    display: flex;
    transform: translateY(-50%);
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
    z-index: 100;
}

#share.share-active{
    right:0;
}

#share i, #share a{
    font-size: 2rem;
    padding:1.5rem 2rem;
}

#share i{
    background:#444;
    color:#fff;
    cursor: pointer;
}

#share a{
    background:#fff;
    color:var(--blue);
    border-left: .1rem solid rgba(0,0,0,.3);
}

#share a:hover{
    background:var(--blue);
    color:#fff;
}

#share i:hover{
    background:#222;;
}
$(document).ready(function(){
   $('#share').click(function(){
        $(this).toggleClass('share-active');
    });
});
Application Website Using HTML

Adding Home Section

In Home section, we have added a div for blog section, In which we have added some text and heading. And then we have added 2 buttons, one for learn more and other for download button. Then we have added an image here.

In CSS, we have adjusted the size of the image size, and we have applied some basic CSS and styling to the text of home section. Then after we have styled the both buttons using some basic styling.

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

<div class="content">
    <h1>creative way to showcase your app</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non consectetur suscipit aut ut eos odio nobis minima officiis mollitia tempore.</p>
    <div class="buttons">
        <a href="#"><button class="btn">download</button></a>
        <a href="#"><button class="btn">learn more</button></a>
    </div>
</div>

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

</section>
.home{
    min-height: 100vh;
    background:url(../images/home.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:1rem 2rem;
    padding-top: 6rem;
}

.home .content{
    width:45vw;
}

.home .content h1{
    font-size: 5rem;
    color:#444;
}

.home .content p{
    font-size: 1.8rem;
    color:#666;
    padding:1rem 0;
}

.home .content .buttons a:nth-child(2) .btn{
    background:#444;
    margin-left: 1rem;
}
Application Website Using HTML

Adding Feature Section

In the Feature section, we have added a div in which we will add some more divs for feature cards. We will create these as cards of features, in these cards we have added icons and some description about the cards.

In CSS, we have adjusted the sizes and text of these cards, also we have applied some basic CSS styling on the icons as well. Then we have added some hovering effect on the cards as well.

<section class="feature" id="feature">

<h1 class="heading"><span>app features</span></h1>

<div class="box-container">

    <div class="box">
        <i class="fas fa-sync-alt"></i>
        <h3>free updates</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

    <div class="box">
        <i class="fas fa-headset"></i>
        <h3>app support</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

    <div class="box">
        <i class="fas fa-cogs"></i>
        <h3>easy settings</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

    <div class="box">
        <i class="fas fa-shield-alt"></i>
        <h3>privacy protect</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

    <div class="box">
        <i class="far fa-bell"></i>
        <h3>notifications</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

    <div class="box">
        <i class="far fa-credit-card"></i>
        <h3>in app purchase</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

</div>

</section>
.feature{
    min-height: 100vh;
}

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

.feature .box-container .box{
    text-align: center;
    width:30rem;
    padding:2rem;
    margin:2rem;
    border:.1rem solid rgba(0,0,0,.1);
    box-shadow: 0 0 2rem rgba(0,0,0,.1);
    cursor: pointer;
}

.feature .box-container .box i{
    font-size: 5rem;
    padding:2rem 0;
    color:var(--blue);
}

.feature .box-container .box h3{
    font-size: 2rem;
    color:#444;
}

.feature .box-container .box p{
    font-size: 1.2rem;
    color:#666;
    padding:1rem;
}

.feature .box-container .box:hover{
    background:#444;
}

.feature .box-container .box:hover i{
    color:#fff;
}

.feature .box-container .box:hover h3{
    color:#fff;
}

.feature .box-container .box:hover p{
    color:#eee;
}
Application Website Using HTML

Adding Screenshot Section

In the Screenshot section, we have added a div, in which we have another 5 divs to form 5 cards. In each card, we have added an image for screenshot of the app.

In CSS, we have added some basic styling to adjust the sizes of the images.

In the JavaScript part, we have fetched the screenshot section and applied owlCarousel a method to in which we have looped these image and also added autoplay for these. Then we have managed the images for responsiveness perspective.

<section class="screenshot" id="screenshot">

<h1 class="heading"><span>app screenshot</span></h1>

<div class="screen-slider owl-carousel">

    <div class="item">
        <img src="images/img1.png" alt="">
    </div>
    <div class="item">
        <img src="images/img2.png" alt="">
    </div>
    <div class="item">
        <img src="images/img3.png" alt="">
    </div>
    <div class="item">
        <img src="images/img4.png" alt="">
    </div>
    <div class="item">
        <img src="images/img5.png" alt="">
    </div>

</div>

</section>
.screen-slider{
    width:75%;
    margin:2rem auto;
}

.screen-slider .item{
    margin:0 auto;
    width:30rem;
}

.screen-slider .item img{
    box-shadow: 0 0 1rem rgba(0,0,0,.2);
    border:.1rem solid rgba(0,0,0,.1);
}
$('.screen-slider').owlCarousel({
        loop:true,
        center:true,
        autoplay:true,
        nav:false,
        dots:false,
        responsive:{
            0:{
                items:1
            },
            710:{
                items:2
            },
            1200:{
                items:3
            }
        }
    });
Application Website Using HTML

Adding Review Section

In the Review section, we have added a div, in which we have another 4 divs to form 4 cards. In each card, we have added an image for the person. And we have added some description of them, then we have added a div in which we have added star icon for the 5 times.

In CSS, we have added some basic styling to adjust the sizes of the images. And we have styled these cards with the help of CSS styling.

In the JavaScript part, we have fetched the screenshot section and applied owlCarousel a method to in which we have looped these image and also added autoplay for these. Then we have managed the images for responsiveness perspective.

<section class="review" id="review">

<h1 class="heading"><span>customers review</span></h1>

<div class="review-slider owl-carousel">

    <div class="box">
        <img src="images/pic1.jpg" alt="">
        <h3>john deo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, voluptates mollitia! Omnis porro deleniti modi sed ducimus voluptate, tenetur nihil voluptatem repellendus pariatur dignissimos atque dolorum eligendi odit ex quisquam?</p>
        <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-half-alt"></i>
        </div>
    </div>

    <div class="box">
        <img src="images/pic2.jpg" alt="">
        <h3>john deo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, voluptates mollitia! Omnis porro deleniti modi sed ducimus voluptate, tenetur nihil voluptatem repellendus pariatur dignissimos atque dolorum eligendi odit ex quisquam?</p>
        <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-half-alt"></i>
        </div>
    </div>

    <div class="box">
        <img src="images/pic3.jpg" alt="">
        <h3>john deo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, voluptates mollitia! Omnis porro deleniti modi sed ducimus voluptate, tenetur nihil voluptatem repellendus pariatur dignissimos atque dolorum eligendi odit ex quisquam?</p>
        <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-half-alt"></i>
        </div>
    </div>

    <div class="box">
        <img src="images/pic4.jpg" alt="">
        <h3>john deo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, voluptates mollitia! Omnis porro deleniti modi sed ducimus voluptate, tenetur nihil voluptatem repellendus pariatur dignissimos atque dolorum eligendi odit ex quisquam?</p>
        <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-half-alt"></i>
        </div>
    </div>

</div>

</section>
.review{
    min-height: 100vh;
}

.review .review-slider{
    margin:2rem auto;
    width:80%;
}

.review .review-slider .box{
    text-align: center;
    padding:2rem;
    margin:2rem;
    box-shadow: 0 0 1rem rgba(0,0,0,.1);
    border:.1rem solid rgba(0,0,0,.1);
}

.review .review-slider .box img{
    height:10rem;
    width:10rem;
    margin:1rem auto;
    border-radius: 50%;
    object-fit: cover;
}

.review .review-slider .box h3{
    color:#444;
    font-size: 2rem;
}

.review .review-slider .box p{
    color:#666;
    font-size: 1.5rem;
    padding:2rem;
}

.review .review-slider .box .stars i{
    color:var(--blue);
    font-size: 1.5rem;
}
$('.review-slider').owlCarousel({
        loop:true,
        center:true,
        autoplay:true,
        nav:false,
        dots:false,
        responsive:{
            0:{
                items:1
            },
            750:{
                items:2
            },
            1200:{
                items:3
            }
        }
    });
Application Website Using HTML

Adding Plan Section

Now after that, we need to add some plan and subscription section. For that, we have added a div in which we have added 3 more divs for the three plan sections. In these cards we have added some details about the plans like prices, And also we have added some cross and check icons for the list of access. Also, we have added a button for each of the card.

In the CSS section, we have styled the elements of the cards. And we have formed these cards using CSS styling. Then we have styled the button with some hovering effect. And lastly we have added some animation on these cards on hover effect.

<section class="plan" id="plan">

<h1 class="heading"><span>choose a plan</span></h1>

<div class="box-container">

    <div class="box">
        <h3 class="title">basic</h3>
        <h3 class="price">$10<span>/mo</span></h3>
        <ul class="list">
            <li> <i class="fas fa-check"></i> full access </li>
            <li> <i class="fas fa-check"></i> full support </li>
            <li> <i class="fas fa-times"></i> new themes </li>
            <li> <i class="fas fa-times"></i> admin panel </li>
            <li> <i class="fas fa-times"></i> unlimited package </li>
        </ul>
        <a href="#"><button class="btn">check out</button></a>
    </div>

    <div class="box">
        <h3 class="title">standard</h3>
        <h3 class="price">$20<span>/mo</span></h3>
        <ul class="list">
            <li> <i class="fas fa-check"></i> full access </li>
            <li> <i class="fas fa-check"></i> full support </li>
            <li> <i class="fas fa-check"></i> new themes </li>
            <li> <i class="fas fa-times"></i> admin panel </li>
            <li> <i class="fas fa-times"></i> unlimited package </li>
        </ul>
        <a href="#"><button class="btn">check out</button></a>
    </div>

    <div class="box">
        <h3 class="title">premium</h3>
        <h3 class="price">$30<span>/mo</span></h3>
        <ul class="list">
            <li> <i class="fas fa-check"></i> full access </li>
            <li> <i class="fas fa-check"></i> full support </li>
            <li> <i class="fas fa-check"></i> new themes </li>
            <li> <i class="fas fa-check"></i> admin panel </li>
            <li> <i class="fas fa-check"></i> unlimited package </li>
        </ul>
        <a href="#"><button class="btn">check out</button></a>
    </div>

</div>

</section>
.plan{
    min-height: 100vh;
    background:#eee;
}

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

.plan .box-container .box{
    margin:2rem;
    background:#fff;
    text-align: center;
    width:30rem;
    border:.1rem solid rgba(0,0,0,.2);
    box-shadow: 0 0 1rem rgba(0,0,0,.1);
}

.plan .box-container .box .title{
    background:var(--blue);
    color:#fff;
    font-size: 2.7rem;
    padding:1rem 0;
}

.plan .box-container .box .price{
    color:#444;
    font-size: 3.5rem;
    padding:1.5rem 0;
}

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

.plan .box-container .box .list{
    text-align: left;
    list-style: none;
    padding:1rem 0;
    padding-left: 8rem;
}

.plan .box-container .box .list li{
    font-size: 1.5rem;
    padding:.5rem 0;
    color:#666;
}

.plan .box-container .box .list li .fa-check{
    padding:0 .3rem;
    color:lime;
}

.plan .box-container .box .list li .fa-times{
    padding:0 .3rem;
    color:tomato;
}

.plan .box-container .box .btn{
    margin-bottom: 3rem;
}

.plan .box-container .box:hover{
    transform: scale(1.02);
}
Application Website Using HTML

Adding Download Section

Now we need to add a download section, for this we have added a div, in which we have added other 3 divs for the three cards. In these cards, we have added an icon and some description, Then we added a button to each of the card.

In CSS, we have formed these cards using the CSS styling. And we have customized the icons, then we have styled the button and added some hovering effect on the button as well.

<section class="download" id="download">

<h1 class="heading"><span>download the app</span></h1>

<div class="box-container">

    <div class="box">
        <i class="fab fa-google-play"></i>
        <h3>google play</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ex delectus, sequi asperiores hic dolorum eius deleniti? Necessitatibus, aliquid officiis?</p>
        <a href="#"><button class="btn">download</button></a>
    </div>

    <div class="box">
        <i class="fab fa-windows"></i>
        <h3>microsoft store</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ex delectus, sequi asperiores hic dolorum eius deleniti? Necessitatibus, aliquid officiis?</p>
        <a href="#"><button class="btn">download</button></a>
    </div>

    <div class="box">
        <i class="fab fa-apple"></i>
        <h3>apple store</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ex delectus, sequi asperiores hic dolorum eius deleniti? Necessitatibus, aliquid officiis?</p>
        <a href="#"><button class="btn">download</button></a>
    </div>

</div>

</section>
.download{
    min-height: 100vh;
    background:#222;
}

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

.download .box-container .box{
    margin:2rem;
    text-align: center;
    margin:2rem;
    padding:2rem;
    background:#333;
    box-shadow: 0 .3rem .5rem #000;
    width:35rem;
}

.download .box-container .box i{
    color:#fff;
    font-size: 5rem;
    padding:2rem 0;
}

.download .box-container .box h3{
    color:#fff;
    font-size: 2rem;
}

.download .box-container .box p{
    color:#eee;
    font-size: 1.4rem;
    padding:2rem;
}
Application Website Using HTML

Adding The Footer Section

In footer section, we have added a div for footer section. In this we have added 3 div, in first one, we have added some text and description then we have added some quick links. And lastly, we have added an input field for email and a button for subscribe. Basically newsletter section.

In the CSS part, we have just added some basic styles on the text and added some effect on these elements. Then we have added some styling on newsletter section using CSS.

<section class="footer">

    <div class="box-container">

        <div class="box">
            <h3>why choose us?</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur, facere iusto excepturi at modi illo tenetur atque fugiat numquam rerum.</p>
        </div>

        <div class="box">
            <h3>quick links</h3>
            <a href="#">home</a>
            <a href="#">feature</a>
            <a href="#">screenshot</a>
            <a href="#">review</a>
            <a href="#">plan</a>
            <a href="#">download</a>
        </div>

        <div class="box">
            <h3>newsletter</h3>
            <p>subscribe for latest updates</p>
            <form action="">
                <input type="email" placeholder="enter your email">
                <button class="fas fa-paper-plane"></button>
            </form>
        </div>

    </div>

    <h1 class="credit">created by <a href="#">mr. web designer</a> | all rights reserved. </h1>

</section>
.footer{
    background:#eee;
}

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

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

.footer .box-container .box h3{
    color:var(--blue);
    font-size: 2.5rem;
}

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

.footer .box-container .box:nth-child(2){
    text-align: center;
}

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

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

.footer .box-container .box form{
    display: flex;
    width:100%;
}

.footer .box-container .box form input{
    height:4.5rem;
    width:100%;
    background:#fff;
    padding:0 1rem;
    font-size: 1.7rem;
    color:#333;
    border:none;
    box-shadow: 0 .1rem .3rem rgba(0,0,0,.2);
}

.footer .box-container .box form button{
    height:4.5rem;
    width:6rem;
    line-height: 4rem;
    text-align: center;
    background:var(--blue);
    font-size: 1.7rem;
    color:#fff;
    border:none;
    box-shadow: 0 .1rem .3rem rgba(0,0,0,.2);
    cursor: pointer;
}

.footer .box-container .box form button:hover{
    background:#333;
}

.footer .credit{
    text-align: center;
    padding:2rem 1rem;
    font-size: 2rem;
    background:#444;
    color:#ccc;
}

.footer .credit a{
    color:#fff;
}
Application Website Using HTML

Adding Responsiveness

For every screen resolution, we have added every element here. We used @media element to add every resolution, in this we have just adjusted every element size.

/* media queries  */

@media (max-width:991px){

    html{
        font-size: 55%;
    }

    header #menu{
        display: block;
    }

    header .navbar{
        position: fixed;
        top:5.3rem; right:-120%;
        height:100vh;
        background:#222;
        z-index: 1000;
        width: 35rem;
    }

    header .navbar ul{
        flex-flow: column;
        justify-content: center;
        height:100%;
    }

    header .navbar ul li a{
        display: block;
        font-size: 2.5rem;
        border:.2rem solid #fff;
        margin:1rem 0;
    }

    .fa-times{
        transform: rotate(180deg);
    }

    header .navbar.nav-toggle{
        right: 0;
    }

}

@media (max-width:768px){

    .home{
        flex-flow: column-reverse;
    }

    .home .content{
        padding:2rem 0;
        width:auto;
    }

    .home .content h1{
        font-size: 4rem;
    }

}

@media (max-width:500px){

    html{
        font-size: 50%;
    }

    header .navbar{
        width:100vw;
    }

    .home .image img{
        width:90vw;
    }

    .screen-slider{
        width:90%;
    }

    .review .review-slider{
        width:auto;
    }

}

Adding Functionality to Scroll and Adding Owl Carousel

$(document).ready(function(){

    $('#menu').click(function(){
        $(this).toggleClass('fa-times');
        $('.navbar').toggleClass('nav-toggle');
    });

    $('#share').click(function(){
        $(this).toggleClass('share-active');
    });

    $(window).on('load scroll',function(){

        $('#menu').removeClass('fa-times');
        $('.navbar').removeClass('nav-toggle');

        $('section').each(function(){

            let height = $(this).height();
            let top = $(window).scrollTop();
            let id = $(this).attr('id');
            let offset = $(this).offset().top - 200;

            if(top >= offset && top < height + offset){
                $('.navbar ul li a').removeClass('active');
                $('.navbar').find(`[href="#${id}"]`).addClass('active');
            }

        });

    });

    $('.screen-slider').owlCarousel({
        loop:true,
        center:true,
        autoplay:true,
        nav:false,
        dots:false,
        responsive:{
            0:{
                items:1
            },
            710:{
                items:2
            },
            1200:{
                items:3
            }
        }
    });

    $('.review-slider').owlCarousel({
        loop:true,
        center:true,
        autoplay:true,
        nav:false,
        dots:false,
        responsive:{
            0:{
                items:1
            },
            750:{
                items:2
            },
            1200:{
                items:3
            }
        }
    });

});

Full Source Code to Make Application Website Using HTML, CSS, and JavaScript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complete Responsive App Landing Page Website Design Tutorial</title>

    <!-- owl carousel css cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

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

    <!-- custom css file link  -->
    <link rel="stylesheet" href="style.css">

</head>
<body>
    
<!-- header section starts  -->

<header>

    <a href="#" class="logo"><i class="fas fa-smile"></i>app</a>

    <div id="menu" class="fas fa-bars"></div>

    <nav class="navbar">
        <ul>
            <li><a class="active" href="#home">home</a></li>
            <li><a href="#feature">feature</a></li>
            <li><a href="#screenshot">screenshot</a></li>
            <li><a href="#review">review</a></li>
            <li><a href="#plan">plan</a></li>
            <li><a href="#download">download</a></li>
        </ul>
    </nav>

</header>

<!-- header section ends -->

<!-- share icons  -->

<div id="share">
    <i class="fas fa-share"></i>
    <a href="#" class="fab fa-facebook-f"></a>
    <a href="#" class="fab fa-twitter"></a>
    <a href="#" class="fab fa-instagram"></a>
    <a href="#" class="fab fa-linkedin"></a>
    <a href="#" class="fab fa-pinterest"></a>
</div>

<!-- home section starts  -->

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

<div class="content">
    <h1>creative way to showcase your app</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non consectetur suscipit aut ut eos odio nobis minima officiis mollitia tempore.</p>
    <div class="buttons">
        <a href="#"><button class="btn">download</button></a>
        <a href="#"><button class="btn">learn more</button></a>
    </div>
</div>

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

</section>

<!-- home section ends -->

<!-- feature section starts  -->

<section class="feature" id="feature">

<h1 class="heading"><span>app features</span></h1>

<div class="box-container">

    <div class="box">
        <i class="fas fa-sync-alt"></i>
        <h3>free updates</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

    <div class="box">
        <i class="fas fa-headset"></i>
        <h3>app support</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

    <div class="box">
        <i class="fas fa-cogs"></i>
        <h3>easy settings</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

    <div class="box">
        <i class="fas fa-shield-alt"></i>
        <h3>privacy protect</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

    <div class="box">
        <i class="far fa-bell"></i>
        <h3>notifications</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

    <div class="box">
        <i class="far fa-credit-card"></i>
        <h3>in app purchase</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fuga alias ea quis repudiandae modi architecto reiciendis fugit libero sunt.</p>
    </div>

</div>

</section>

<!-- feature section ends -->

<!-- screenshot section starts  -->

<section class="screenshot" id="screenshot">

<h1 class="heading"><span>app screenshot</span></h1>

<div class="screen-slider owl-carousel">

    <div class="item">
        <img src="images/img1.png" alt="">
    </div>
    <div class="item">
        <img src="images/img2.png" alt="">
    </div>
    <div class="item">
        <img src="images/img3.png" alt="">
    </div>
    <div class="item">
        <img src="images/img4.png" alt="">
    </div>
    <div class="item">
        <img src="images/img5.png" alt="">
    </div>

</div>

</section>

<!-- screenshot section ends -->

<!-- review section starts  -->

<section class="review" id="review">

<h1 class="heading"><span>customers review</span></h1>

<div class="review-slider owl-carousel">

    <div class="box">
        <img src="images/pic1.jpg" alt="">
        <h3>john deo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, voluptates mollitia! Omnis porro deleniti modi sed ducimus voluptate, tenetur nihil voluptatem repellendus pariatur dignissimos atque dolorum eligendi odit ex quisquam?</p>
        <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-half-alt"></i>
        </div>
    </div>

    <div class="box">
        <img src="images/pic2.jpg" alt="">
        <h3>john deo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, voluptates mollitia! Omnis porro deleniti modi sed ducimus voluptate, tenetur nihil voluptatem repellendus pariatur dignissimos atque dolorum eligendi odit ex quisquam?</p>
        <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-half-alt"></i>
        </div>
    </div>

    <div class="box">
        <img src="images/pic3.jpg" alt="">
        <h3>john deo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, voluptates mollitia! Omnis porro deleniti modi sed ducimus voluptate, tenetur nihil voluptatem repellendus pariatur dignissimos atque dolorum eligendi odit ex quisquam?</p>
        <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-half-alt"></i>
        </div>
    </div>

    <div class="box">
        <img src="images/pic4.jpg" alt="">
        <h3>john deo</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, voluptates mollitia! Omnis porro deleniti modi sed ducimus voluptate, tenetur nihil voluptatem repellendus pariatur dignissimos atque dolorum eligendi odit ex quisquam?</p>
        <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-half-alt"></i>
        </div>
    </div>

</div>

</section>

<!-- review section ends -->

<!-- plan section starts  -->

<section class="plan" id="plan">

<h1 class="heading"><span>choose a plan</span></h1>

<div class="box-container">

    <div class="box">
        <h3 class="title">basic</h3>
        <h3 class="price">$10<span>/mo</span></h3>
        <ul class="list">
            <li> <i class="fas fa-check"></i> full access </li>
            <li> <i class="fas fa-check"></i> full support </li>
            <li> <i class="fas fa-times"></i> new themes </li>
            <li> <i class="fas fa-times"></i> admin panel </li>
            <li> <i class="fas fa-times"></i> unlimited package </li>
        </ul>
        <a href="#"><button class="btn">check out</button></a>
    </div>

    <div class="box">
        <h3 class="title">standard</h3>
        <h3 class="price">$20<span>/mo</span></h3>
        <ul class="list">
            <li> <i class="fas fa-check"></i> full access </li>
            <li> <i class="fas fa-check"></i> full support </li>
            <li> <i class="fas fa-check"></i> new themes </li>
            <li> <i class="fas fa-times"></i> admin panel </li>
            <li> <i class="fas fa-times"></i> unlimited package </li>
        </ul>
        <a href="#"><button class="btn">check out</button></a>
    </div>

    <div class="box">
        <h3 class="title">premium</h3>
        <h3 class="price">$30<span>/mo</span></h3>
        <ul class="list">
            <li> <i class="fas fa-check"></i> full access </li>
            <li> <i class="fas fa-check"></i> full support </li>
            <li> <i class="fas fa-check"></i> new themes </li>
            <li> <i class="fas fa-check"></i> admin panel </li>
            <li> <i class="fas fa-check"></i> unlimited package </li>
        </ul>
        <a href="#"><button class="btn">check out</button></a>
    </div>

</div>

</section>

<!-- plan section ends -->

<!-- download section starts  -->

<section class="download" id="download">

<h1 class="heading"><span>download the app</span></h1>

<div class="box-container">

    <div class="box">
        <i class="fab fa-google-play"></i>
        <h3>google play</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ex delectus, sequi asperiores hic dolorum eius deleniti? Necessitatibus, aliquid officiis?</p>
        <a href="#"><button class="btn">download</button></a>
    </div>

    <div class="box">
        <i class="fab fa-windows"></i>
        <h3>microsoft store</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ex delectus, sequi asperiores hic dolorum eius deleniti? Necessitatibus, aliquid officiis?</p>
        <a href="#"><button class="btn">download</button></a>
    </div>

    <div class="box">
        <i class="fab fa-apple"></i>
        <h3>apple store</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ex delectus, sequi asperiores hic dolorum eius deleniti? Necessitatibus, aliquid officiis?</p>
        <a href="#"><button class="btn">download</button></a>
    </div>

</div>

</section>

<!-- download section ends -->

<!-- footer section starts  -->

<section class="footer">

    <div class="box-container">

        <div class="box">
            <h3>why choose us?</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur, facere iusto excepturi at modi illo tenetur atque fugiat numquam rerum.</p>
        </div>

        <div class="box">
            <h3>quick links</h3>
            <a href="#">home</a>
            <a href="#">feature</a>
            <a href="#">screenshot</a>
            <a href="#">review</a>
            <a href="#">plan</a>
            <a href="#">download</a>
        </div>

        <div class="box">
            <h3>newsletter</h3>
            <p>subscribe for latest updates</p>
            <form action="">
                <input type="email" placeholder="enter your email">
                <button class="fas fa-paper-plane"></button>
            </form>
        </div>

    </div>

    <h1 class="credit">created by <a href="#">mr. web designer</a> | all rights reserved. </h1>

</section>

<!-- footer section ends -->
























<!-- jquery cdn link  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- owl carousel js cdn link  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- custom js file link  -->
<script src="js.js"></script>

</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');

:root{
    --blue:#3F50CC;
}

*{
    font-family: 'Open Sans', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    text-transform: capitalize;
    transition: all .2s linear;
}

*::selection{
    background:var(--blue);
    color:#fff;
}

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

.btn{
    font-size: 2rem;
    padding:.7rem 2rem;
    color:#fff;
    background:var(--blue);
    cursor: pointer;
    margin-top: 1rem;
    border:none;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}

.btn:hover{
    opacity: .8;
    box-shadow: none;
}

.heading{
    text-align: center;
    padding:1rem;
    padding-top: 6.5rem;
}

.heading span{
    display: inline-block;
    font-size: 2.5rem;
    padding:.5rem 7rem;
    color:#444;
    background:#fff;
    border:.2rem solid var(--blue);
    border-left-width: 1rem;
    border-right-width: 1rem;
}

header{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top:0; left: 0;
    padding:0 2rem;
    background:#444;
    z-index: 1000;
    box-shadow: 0 .1rem .3rem rgba(0,0,0,.3);
}

header .logo{
    font-size: 2.5rem;
    padding:1rem 4rem;
    background:#fff;
    color:#444;
}

header .logo i{
    padding:0 .5rem;
    color:var(--blue);
}

header .navbar ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

header .navbar ul li a{
    font-size: 2rem;
    color:#fff;
    padding:.5rem 2rem;
    margin-left: 1rem;
}

header .navbar ul li a.active,
header .navbar ul li a:hover{
    color:#444;
    background:#fff;
}

header #menu{
    font-size: 3rem;
    color:#fff;
    cursor: pointer;
    display: none;
}

#share{
    position: fixed;
    top:50%; right:-29.5rem;
    display: flex;
    transform: translateY(-50%);
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
    z-index: 100;
}

#share.share-active{
    right:0;
}

#share i, #share a{
    font-size: 2rem;
    padding:1.5rem 2rem;
}

#share i{
    background:#444;
    color:#fff;
    cursor: pointer;
}

#share a{
    background:#fff;
    color:var(--blue);
    border-left: .1rem solid rgba(0,0,0,.3);
}

#share a:hover{
    background:var(--blue);
    color:#fff;
}

#share i:hover{
    background:#222;;
}

.home{
    min-height: 100vh;
    background:url(../images/home.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:1rem 2rem;
    padding-top: 6rem;
}

.home .content{
    width:45vw;
}

.home .content h1{
    font-size: 5rem;
    color:#444;
}

.home .content p{
    font-size: 1.8rem;
    color:#666;
    padding:1rem 0;
}

.home .content .buttons a:nth-child(2) .btn{
    background:#444;
    margin-left: 1rem;
}

.feature{
    min-height: 100vh;
}

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

.feature .box-container .box{
    text-align: center;
    width:30rem;
    padding:2rem;
    margin:2rem;
    border:.1rem solid rgba(0,0,0,.1);
    box-shadow: 0 0 2rem rgba(0,0,0,.1);
    cursor: pointer;
}

.feature .box-container .box i{
    font-size: 5rem;
    padding:2rem 0;
    color:var(--blue);
}

.feature .box-container .box h3{
    font-size: 2rem;
    color:#444;
}

.feature .box-container .box p{
    font-size: 1.2rem;
    color:#666;
    padding:1rem;
}

.feature .box-container .box:hover{
    background:#444;
}

.feature .box-container .box:hover i{
    color:#fff;
}

.feature .box-container .box:hover h3{
    color:#fff;
}

.feature .box-container .box:hover p{
    color:#eee;
}

.screen-slider{
    width:75%;
    margin:2rem auto;
}

.screen-slider .item{
    margin:0 auto;
    width:30rem;
}

.screen-slider .item img{
    box-shadow: 0 0 1rem rgba(0,0,0,.2);
    border:.1rem solid rgba(0,0,0,.1);
}

.review{
    min-height: 100vh;
}

.review .review-slider{
    margin:2rem auto;
    width:80%;
}

.review .review-slider .box{
    text-align: center;
    padding:2rem;
    margin:2rem;
    box-shadow: 0 0 1rem rgba(0,0,0,.1);
    border:.1rem solid rgba(0,0,0,.1);
}

.review .review-slider .box img{
    height:10rem;
    width:10rem;
    margin:1rem auto;
    border-radius: 50%;
    object-fit: cover;
}

.review .review-slider .box h3{
    color:#444;
    font-size: 2rem;
}

.review .review-slider .box p{
    color:#666;
    font-size: 1.5rem;
    padding:2rem;
}

.review .review-slider .box .stars i{
    color:var(--blue);
    font-size: 1.5rem;
}

.plan{
    min-height: 100vh;
    background:#eee;
}

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

.plan .box-container .box{
    margin:2rem;
    background:#fff;
    text-align: center;
    width:30rem;
    border:.1rem solid rgba(0,0,0,.2);
    box-shadow: 0 0 1rem rgba(0,0,0,.1);
}

.plan .box-container .box .title{
    background:var(--blue);
    color:#fff;
    font-size: 2.7rem;
    padding:1rem 0;
}

.plan .box-container .box .price{
    color:#444;
    font-size: 3.5rem;
    padding:1.5rem 0;
}

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

.plan .box-container .box .list{
    text-align: left;
    list-style: none;
    padding:1rem 0;
    padding-left: 8rem;
}

.plan .box-container .box .list li{
    font-size: 1.5rem;
    padding:.5rem 0;
    color:#666;
}

.plan .box-container .box .list li .fa-check{
    padding:0 .3rem;
    color:lime;
}

.plan .box-container .box .list li .fa-times{
    padding:0 .3rem;
    color:tomato;
}

.plan .box-container .box .btn{
    margin-bottom: 3rem;
}

.plan .box-container .box:hover{
    transform: scale(1.02);
}

.download{
    min-height: 100vh;
    background:#222;
}

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

.download .box-container .box{
    margin:2rem;
    text-align: center;
    margin:2rem;
    padding:2rem;
    background:#333;
    box-shadow: 0 .3rem .5rem #000;
    width:35rem;
}

.download .box-container .box i{
    color:#fff;
    font-size: 5rem;
    padding:2rem 0;
}

.download .box-container .box h3{
    color:#fff;
    font-size: 2rem;
}

.download .box-container .box p{
    color:#eee;
    font-size: 1.4rem;
    padding:2rem;
}

.footer{
    background:#eee;
}

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

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

.footer .box-container .box h3{
    color:var(--blue);
    font-size: 2.5rem;
}

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

.footer .box-container .box:nth-child(2){
    text-align: center;
}

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

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

.footer .box-container .box form{
    display: flex;
    width:100%;
}

.footer .box-container .box form input{
    height:4.5rem;
    width:100%;
    background:#fff;
    padding:0 1rem;
    font-size: 1.7rem;
    color:#333;
    border:none;
    box-shadow: 0 .1rem .3rem rgba(0,0,0,.2);
}

.footer .box-container .box form button{
    height:4.5rem;
    width:6rem;
    line-height: 4rem;
    text-align: center;
    background:var(--blue);
    font-size: 1.7rem;
    color:#fff;
    border:none;
    box-shadow: 0 .1rem .3rem rgba(0,0,0,.2);
    cursor: pointer;
}

.footer .box-container .box form button:hover{
    background:#333;
}

.footer .credit{
    text-align: center;
    padding:2rem 1rem;
    font-size: 2rem;
    background:#444;
    color:#ccc;
}

.footer .credit a{
    color:#fff;
}


















/* media queries  */

@media (max-width:991px){

    html{
        font-size: 55%;
    }

    header #menu{
        display: block;
    }

    header .navbar{
        position: fixed;
        top:5.3rem; right:-120%;
        height:100vh;
        background:#222;
        z-index: 1000;
        width: 35rem;
    }

    header .navbar ul{
        flex-flow: column;
        justify-content: center;
        height:100%;
    }

    header .navbar ul li a{
        display: block;
        font-size: 2.5rem;
        border:.2rem solid #fff;
        margin:1rem 0;
    }

    .fa-times{
        transform: rotate(180deg);
    }

    header .navbar.nav-toggle{
        right: 0;
    }

}

@media (max-width:768px){

    .home{
        flex-flow: column-reverse;
    }

    .home .content{
        padding:2rem 0;
        width:auto;
    }

    .home .content h1{
        font-size: 4rem;
    }

}

@media (max-width:500px){

    html{
        font-size: 50%;
    }

    header .navbar{
        width:100vw;
    }

    .home .image img{
        width:90vw;
    }

    .screen-slider{
        width:90%;
    }

    .review .review-slider{
        width:auto;
    }

}

script.js

$(document).ready(function(){

    $('#menu').click(function(){
        $(this).toggleClass('fa-times');
        $('.navbar').toggleClass('nav-toggle');
    });

    $('#share').click(function(){
        $(this).toggleClass('share-active');
    });

    $(window).on('load scroll',function(){

        $('#menu').removeClass('fa-times');
        $('.navbar').removeClass('nav-toggle');

        $('section').each(function(){

            let height = $(this).height();
            let top = $(window).scrollTop();
            let id = $(this).attr('id');
            let offset = $(this).offset().top - 200;

            if(top >= offset && top < height + offset){
                $('.navbar ul li a').removeClass('active');
                $('.navbar').find(`[href="#${id}"]`).addClass('active');
            }

        });

    });

    $('.screen-slider').owlCarousel({
        loop:true,
        center:true,
        autoplay:true,
        nav:false,
        dots:false,
        responsive:{
            0:{
                items:1
            },
            710:{
                items:2
            },
            1200:{
                items:3
            }
        }
    });

    $('.review-slider').owlCarousel({
        loop:true,
        center:true,
        autoplay:true,
        nav:false,
        dots:false,
        responsive:{
            0:{
                items:1
            },
            750:{
                items:2
            },
            1200:{
                items:3
            }
        }
    });

});

Output

Application Website Using HTML
Application Website Using HTML
Application Website Using HTML
Application Website Using HTML
Application Website Using HTML
Application Website Using HTML
Application Website Using HTML
Demo
Download Code

Checkout Video Reference Here:

You May Also Like:

  • How To Make Gaming Website Using HTML, CSS, and JavaScript
  • How to Make a Modern eCommerce Website with HTML
  • How To Make Skeleton Loading Animation With CSS & JS

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: Animation, Application Website Using HTML, UI Design, UX Design
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article Personal Blog Website Using HTML How to Make Personal Blog Website Using HTML
Next Article Responsive Covid-19 Website Using HTML How to Make Responsive Covid-19 Website Using HTML
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Price Range Slider

How to Make Price Range Slider Using JavaScript

December 8, 2022
qr code generator in html

How to Make QR Code Generator in JavaScript

December 5, 2022
File Downlaoder Using JavaScript

How to Make File Downloader Using JavaScript

December 5, 2022
save text as File in HTML

How to Save Text as File in JavaScript

December 5, 2022
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?