How To Create Shopping Website Using HTML CSS And jQuery

byGoing-To InternetPosted atNovember 19, 2020

E-Commerce shopping website

In this post, you will learn how to make a shopping website using HTML, CSS, and jQuery.You can Easily create an E-Commerce shopping website using HTML, CSS, and jQuery. Beginners easily learn about HTML in this tutorial. I also provide you the youtube video tutorial which helps you to understand this tutorial better way. How to make E-Commerce shopping using the HTML tutorial link is given below.

How To Make a Responsive Shopping Website Using HTML, CSS, And jQuery

0.0 - 2.40 min : Intro
2.40 - 104.14 min: Create an E-Commerce Shopping Website Using HTML, CSS and jQuery.

Basic HTML Code

This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices.



<html>
<head>
<meta charset="utf-8">
<meta content="IE-edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, intial-scale=1.0" name="viewport">
<title>Shopping Website</title>
<!--fav-icon---------------->
<link rel="shortcut icon" href="images/fav-icon.png"/>
	<!--style----->
	<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>

YOUR EXISTING AD GOES HERE

Navigation Bar

I create the Navigation Bar for the E-commerce website using HTML, CSS, and Javascript to show the search bar, login, and Sign up box when clicking on their icons. There has the logo of the website on the left side of the navigation, the menu on the center of the navigation, and some icons for show search and login on the right side. This navigation has been fixed with the window when we scroll down the page. All secitons HTML and CSS code is given below.

➤Navigation Bar HTML Code have given below.


  
   <nav> 
           <!--social-links-and-phone-number----------------->
    <div class="social-call">
        <!--social-links--->
        <div class="social">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-youtube"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
        </div>
        <!--phone-number------>
        <div class="phone">
            <span>Call: +123456789</span>
        </div>
    </div>

    <!--menu-bar----------------------------------------->
    <div class="navigation">
        <!--logo------------>
        <a href="#" class="logo"><img src="images/logo.png"></a>
        <!--menu-icon------------->
        <div class="toggle"></div>
        <!--menu----------------->
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li  class="shop"><a href="#" >Shop</a></li>

            <li><a href="#">Men</a>
                <!--lable---->
                <span class="sale-lable">Sale</span>
            </li>

            <li><a href="#">Women</a></li>
            <li><a href="#">Kids</a></li>
        </ul>
        <!--right-menu----------->
        <div class="right-menu">
            <a href="javascript:void(0);" class="search">
                <i class="fas fa-search"></i>
            </a>
            <a href="javascript:void(0);" class="user">
                <i class="far fa-user"></i>
            </a>
            <a href="#">
                <i class="fas fa-shopping-cart">
                    <span class="num-cart-product">0</span>
                </i>
            </a>
        </div>
        </div>
    </nav>

➤ Font Awesome Link


  <!--using FontAwesome--------------->
<script crossorigin="anonymous" src="https://kit.fontawesome.com/c8e4d183c2.js"></script>

➤Navigation Bar CSS Code is have given below.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
    margin:0px;
    padding: 0px;
    font-family: poppins;
    background-color: #ffffff;
}
*{
    box-sizing: border-box;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
nav{
    width:100%;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
    z-index: 100;
}
.social-call{
    height: 40px;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: center;
    align-items: center;
}
.social a{
    margin: 0px 5px;
    color: rgba(0,0,0,0.7);
    font-size: 0.9rem;
}
.phone{
    color: rgba(0,0,0,0.7);
    margin-left: 30px;
    font-size: 0.9rem;
}
.social a:hover{
    color: #0b9d8a;
    transition: all ease 0.3s;
}
.navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 45px;
}
.logo img{
    height: 30px;
}
.menu{
    display: flex;
}
.menu li{
    position: relative;
    margin: 20px;
    display: flex;
    text-transform: uppercase;
    font-weight: 500;
}
.menu li a{
    color: #555555;
}
.right-menu a{
    margin: 0px 10px;
    font-size: 1.2rem;
    color: rgba(0,0,0,0.7);
}
.menu a:hover,
.right-menu a:hover,
.search-cancel:hover,
.form-cancel:hover{
    color: #0b9d8a;
    transition: all ease 0.3s;
}
.sale-lable{
    width:38px;
    height: 17px;
    background-color: #f76b6a;
    color: #ffffff;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    position: absolute;
    top: -20px;
    right: -20px;
}
.sale-lable:after{
    content: '';
    width:0px;
    height: 0px;
    border-bottom: 5px solid transparent;
    border-left: 3px solid transparent;
    border-top: 7px solid #f76b6a;
    border-right: 5px solid transparent;
    position: absolute;
    left: 10%;
    top: 100%;
}
.fa-shopping-cart{
    position: relative;
}
.num-cart-product{
    position: absolute;
    top: -17px;
    right: -17px;
    width:25px;
    height: 25px;
    font-size: 0.8rem;
    border-radius: 50%;
    background-color: #0b9d8a;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
}

Search Bar

➤Search Bar HTML Code have given below.


   <!--search-bar----------------------------------->
    <div class="search-bar">
    
        <!--search-input------->
        <div class="search-input">
        <input type="text" placeholder="Search For Product" name="search" />
        <!--cancel-btn--->
        <a href="javascript:void(0);" class="search-cancel">
            <i class="fas fa-times"></i>
        </a>
    
    </div>
    </div>

➤ Search Bar CSS Code is have given below.

.search-bar{
    width:100%;
    height: 300px;
    background-color: #ffffff;
    position: fixed;
    left: 0px;
    bottom: 0px;
    display: flex;
    justify-content: center;
    box-shadow: 2px -5px 30px rgba(0,0,0,0.1);
    z-index: 101;
    animation: search 0.3s;
}
.search-input{
    width:90%;
    border-bottom: 2px solid #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    margin-top: 20px;
}
.search-bar input{
    width:100%;
    padding: 30px;
    border: none;
    outline: none;
    font-size: 2rem;
    margin: 20px;
    padding: 0px 20px;
}
.search-cancel{
    color: #272727;
    font-size: 2rem;
    padding-right: 40px;
}
.search-bar{
    display: none;
}
.search-bar-active{
    display: flex;
}
@keyframes search{
    0%{
        bottom: -300px;
    }
    100%{
        bottom: 0px;
    }
}

➤JQuery Link


  <!--using JQuery--------------->
<script
  src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

➤Search Bar JavaScript

   
    /*-----For Search Bar-----------------------------*/
    $(document).on('click','.search',function(){
        $('.search-bar').addClass('search-bar-active')
    });

    $(document).on('click','.search-cancel',function(){
        $('.search-bar').removeClass('search-bar-active')
    });

Login And Sign Up Form

➤Side Login and Registration Form Bar HTML Code have given below.


  <!---login-and-sign-up--------------------------------->
    <div class="form">
        <!--login---------->
        <div class="login-form">
            <!--cancel-btn---------------->
            <a href="javascript:void(0);" class="form-cancel">
                <i class="fas fa-times"></i>
            </a>

            <strong>Log In</strong>
            <!--inputs-->
            <form>
                <input type="email" name="email" placeholder="Example@gmail.com" required/>
                <input type="password" name="password" placeholder="Password" required/>
                <input type="submit" value="Log In"/>
            </form>
            <!--forget-and-sign-up-btn-->
            <div class="form-btns">
                <a href="#" class="forget">Forget Your Password?</a>
                <a href="javascript:void(0);" class="sign-up-btn">Create Account</a>
            </div>
        </div>



            <!--Sign-up---------->
            <div class="sign-up-form">
                <!--cancel-btn---------------->
            <a href="javascript:void(0);" class="form-cancel">
                <i class="fas fa-times"></i>
            </a>

                <strong>Sign Up</strong>
                <!--inputs-->
                <form>
                    <input type="text" name="fullname" placeholder="Full Name" required/>
                    <input type="email" name="email" placeholder="Example@gmail.com" required/>
                    <input type="password" name="password" placeholder="Password" required/>
                    <input type="submit" value="Sign Up"/>
                </form>
                <!--forget-and-sign-up-btn-->
                <div class="form-btns">
                    <a href="javascript:void(0);" class="already-account">
                        Already Have Account?</a>
    
                </div>
            </div>


    </div>

➤ Login and Sign Up Form CSS Code is have given below.


.form{
    width:100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 102;
}
.login-form,
.sign-up-form{
    width:420px;
    padding: 20px 10px;
    background-color: #ffffff;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    position: relative;

}
.login-form form,
.sign-up-form form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
.login-form strong,
.sign-up-form strong{
    color: #272727;
    font-size: 2rem;
    margin: 2px 7px 7px 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.login-form input,
.sign-up-form input{
    width:90%;
    height: 45px;
    margin: 6px 0px;
    padding: 0px 10px;
    border: 1px solid rgba(0,0,0,0.1);
    outline: none;
    border-radius: 7px;
}
.login-form input::placeholder,
.sign-up-form input::placeholder{
    color: rgba(0,0,0,0.5);
}
.login-form input[type="submit"],
.sign-up-form input[type="submit"]{
    background-color: #0b9d8a;
    color: #ffffff;
    border: none;
    outline: none;
    text-transform: uppercase;
    margin-top: 10px;
    border-radius: 3px;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
}
.form-btns{
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
.form-btns a{
    color: #4d4d4d;
    font-size: 0.9rem;
}
.sign-up-btn{
    border-bottom: 1px solid #868686;
    line-height: 16px;
}
.form-cancel{
    position: absolute;
    right: 20px;
    top: 10px;
    color: #868686;
}
.login-form,
.sign-up-form,
.form{
    display: none;
}
.login-active,
.login-active .login-form{
    display: flex;
    animation: fade 0.3s;
}

.sign-up-active,
.sign-up-active .sign-up-form{
    display: flex;
    animation: fade 0.3s;
}
@keyframes fade{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

➤Login and Sign Up JavaScript Code

    /*---For Login and Sign-up----------------------------*/
    $(document).on('click','.user,.already-account',function(){
        $('.form').addClass('login-active').removeClass('sign-up-active')
    });

    $(document).on('click','.sign-up-btn',function(){
        $('.form').addClass('sign-up-active').removeClass('login-active')
    });

    $(document).on('click','.form-cancel',function(){
        $('.form').removeClass('login-active').removeClass('sign-up-active')
    });

Full Slider

➤Full Slider HTML Code have given below.


   <!-----------full-slider----------------------------->
    <ul id="adaptive" class="cs-hidden">
        
        <!--box-1--------------------------->
        <li class="item-a">
            <!---box------------------->
    <div class="full-slider-box f-slide-1">
        
        <div class="f-slider-text-container">
        <div class="f-slider-text">
            <span>Limited Offer</span>
            <strong>30% Off<br/> With <font>Promo Code</font></strong>
            <a href="#" class="f-slider-btn">Shop Now</a>
        </div>
        </div>
    
    </div>
    </li>
     <!--box-2--------------------------->
        <li class="item-b">
            <!---box------------------->
    <div class="full-slider-box f-slide-2">
        
        <div class="f-slider-text-container">
        <div class="f-slider-text">
            <span>Limited Offer</span>
            <strong>30% Off<br/> With <font>Promo Code</font></strong>
            <a href="#" class="f-slider-btn">Shop Now</a>
        </div>
        </div>
    
    </div>
    </li>
         <!--box-3--------------------------->
         <li class="item-c">
            <!---box------------------->
    <div class="full-slider-box f-slide-3">
        
        <div class="f-slider-text-container">
        <div class="f-slider-text">
            <span>Limited Offer</span>
            <strong>30% Off<br/> With <font>Promo Code</font></strong>
            <a href="#" class="f-slider-btn">Shop Now</a>
        </div>
        </div>
    
    </div>
    </li>
     
    </ul>

➤Light Slider Files


  <!--light-slider-files-->
<link rel="stylesheet" href="css/lightslider.css">
<!--js-link--------------------->
<script src="js/Jquery.js"></script>
<script src="js/lightslider.js"></script>

➤Full Slider CSS Code is have given below.

  
.full-slider-box{
    width:100%;
    height: 65vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.f-slide-1{
    background-image: url(../images/Slider_01.jpg);
}
.f-slide-2{
    background-image: url(../images/Slider_02.jpg);
}
.f-slide-3{
    background-image: url(../images/Slider_03.jpg);
}
.slider-text-container{
    width:80%;
    height: 90%;
    display: flex;
    align-items: center;
}
.f-slider-text{
    display: flex;
    flex-direction: column;
    margin-right: auto;
}
.f-slider-text strong{
    color: #333333;
    font-size: 3rem;
    line-height: 55px;
    margin-top: 10px;
    letter-spacing: 1px;
}
.f-slider-text span{
    text-transform: uppercase;
    letter-spacing: 6px;
    font-weight: 500;
    color: #666666;
    font-size: 1.2rem;
}
.f-slider-btn{
    width:170px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: #0b9d8a;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 14px;
}
.f-slider-text strong font{
    color: #0b9d8a;
}

➤Full Slider JavaScript Code

      /*----Full Page Slider---------------*/

    $(document).ready(function() {
    $('#adaptive').lightSlider({
        adaptiveHeight:true,
        auto:true,
        item:1,
        slideMargin:0,
        loop:true
    });
});

FEATURED CATEGORIES

➤Featured Categories Slider HTML Code have given below.


  <!--product-categories-slider---------------------->

        <ul id="autoWidth" class="container" class="cs-hidden">
            <!--box-1--------------------->
            <li class="item">
                <div class="feature-box">
                    <a href="#">
                        <img src="images/feature_1.jpg">
                    </a>
                </div>
                <span>T-Shirts</span>
            </li>
            <!--box-2--------------------->
            <li class="item">
                <div class="feature-box">
                    <a href="#">
                        <img src="images/feature_2.jpg">
                    </a>
                </div>
                <span>Men T-Shirts</span>
            </li>
            <!--box-3--------------------->
            <li class="item">
                <div class="feature-box">
                    <a href="#">
                        <img src="images/feature_3.jpg">
                    </a>
                </div>
                <span>Kids T-Shirts</span>
            </li>
            <!--box-4--------------------->
            <li class="item">
                <div class="feature-box">
                    <a href="#">
                        <img src="images/feature_4.jpg">
                    </a>
                </div>
                <span>Pillow</span>
            </li>
            <!--box-5--------------------->
            <li class="item">
                <div class="feature-box">
                    <a href="#">
                        <img src="images/feature_5.jpg">
                    </a>
                </div>
                <span>Phone Cover</span>
            </li>
            <!--box-6--------------------->
            <li class="item">
                <div class="feature-box">
                    <a href="#">
                        <img src="images/feature_6.jpg">
                    </a>
                </div>
                <span>Shopping Bags</span>
            </li>
            
          </ul>

➤Featured Categories Slider CSS Code is have given below.


.feature-heading{
    display: flex;
    justify-content: center;
    align-items: center;
}
.feature-heading h2{
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #1b1919;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 40px;
    padding: 5px 30px;
    border: 1px solid #e0e0e0;
}
.feature-box{
    width:155px;
    height: 160px;
    margin: 0px 20px;
    border-radius: 10px;
    overflow: hidden;
}
.feature-box a img{
    width:100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.item span{
    font-size: 1rem;
    font-weight: 600;
    margin: 5px;
    color: #444444;
}
.item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#autoWidth{
    display: flex;
    justify-content: center !important;
    margin: 10px auto 40px auto;
}

➤Featured Categories Slider JavaScript Code

      /*--For-Product-SLider----------------*/
    $(document).ready(function() {
    $('#autoWidth').lightSlider({
        autoWidth:true,
        loop:true,
        onSliderLoad: function() {
            $('#autoWidth').removeClass('cS-hidden');
        } 
    });  
  });

Product List-1

➤Product list-1 HTML Code have given below.


   <!--NEW ARRIVAL-------------------------------->
          <section class="new-arrival">
            
            <!--heading-------->
            <div class="arrival-heading">
                <strong>New Arrival</strong>
                <p>We Provide You New Fasion Design Clothes</p>
            </div>

              <!--products----------------------->
              <div class="product-container">
                  
                <!--product-box-1---------->
                  <div class="product-box">

                      <!--product-img------------>
                      <div class="product-img">
                          <!--add-cart---->
                          <a href="#" class="add-cart">
                              <i class="fas fa-shopping-cart"></i>
                            </a>
                          <!--img------>
                        <img src="images/p-1.png">
                      </div>

                      <!--product-details-------->
                      <div class="product-details">
                          <a href="#" class="p-name">Drawstring T-Shirt</a>
                          <span class="p-price">$22.00</span>
                      </div>
                  </div>

                    <!--product-box-2---------->
                    <div class="product-box">
                        <!--product-img------------>
                        <div class="product-img">
                            <!--add-cart---->
                          <a href="#" class="add-cart"><i class="fas fa-shopping-cart"></i></a>
                          <!--img------>
                          <img src="images/p-2.png">
                        </div>
                        <!--product-details-------->
                        <div class="product-details">
                            <a href="#" class="p-name">Drawstring T-Shirt</a>
                            <span class="p-price">$22.00</span>
                        </div>
                    </div>
                  <!--product-box-3---------->
                  <div class="product-box">
                    <!--product-img------------>
                    <div class="product-img">
                        <!--add-cart---->
                        <a href="#" class="add-cart"><i class="fas fa-shopping-cart"></i></a>
                        <!--img------>
                      <img src="images/p-3.png">
                    </div>
                    <!--product-details-------->
                    <div class="product-details">
                        <a href="#" class="p-name">Drawstring T-Shirt</a>
                        <span class="p-price">$22.00</span>
                    </div>
                </div>
                  <!--product-box-4---------->
                  <div class="product-box">
                    <!--product-img------------>
                    <div class="product-img">
                        <!--add-cart---->
                        <a href="#" class="add-cart"><i class="fas fa-shopping-cart"></i></a>
                        <!--img------>
                      <img src="images/p-4.png">
                    </div>
                    <!--product-details-------->
                    <div class="product-details">
                        <a href="#" class="p-name">Drawstring T-Shirt</a>
                        <span class="p-price">$22.00</span>
                    </div>
                </div>
                  <!--product-box-5---------->
                  <div class="product-box">
                    <!--product-img------------>
                    <div class="product-img">
                        <!--add-cart---->
                        <a href="#" class="add-cart"><i class="fas fa-shopping-cart"></i></a>
                        <!--img------>
                      <img src="images/p-5.png">
                    </div>
                    <!--product-details-------->
                    <div class="product-details">
                        <a href="#" class="p-name">Drawstring T-Shirt</a>
                        <span class="p-price">$22.00</span>
                    </div>
                </div>
                  <!--product-box-6---------->
                  <div class="product-box">
                    <!--product-img------------>
                    <div class="product-img">
                        <!--add-cart---->
                        <a href="#" class="add-cart"><i class="fas fa-shopping-cart"></i></a>
                        <!--img------>
                      <img src="images/p-6.png">
                    </div>
                    <!--product-details-------->
                    <div class="product-details">
                        <a href="#" class="p-name">Drawstring T-Shirt</a>
                        <span class="p-price">$22.00</span>
                    </div>
                </div>
                  <!--product-box-7---------->
                  <div class="product-box">
                    <!--product-img------------>
                    <div class="product-img">
                        <!--add-cart---->
                        <a href="#" class="add-cart"><i class="fas fa-shopping-cart"></i></a>
                        <!--img------>
                      <img src="images/p-7.png">
                    </div>
                    <!--product-details-------->
                    <div class="product-details">
                        <a href="#" class="p-name">Drawstring T-Shirt</a>
                        <span class="p-price">$22.00</span>
                    </div>
                </div>
                  <!--product-box-8---------->
                  <div class="product-box">
                    <!--product-img------------>
                    <div class="product-img">
                        <!--add-cart---->
                        <a href="#" class="add-cart">
                            <i class="fas fa-shopping-cart"></i>
                        </a>
                        <!--img------>
                      <img src="images/p-8.png">
                    </div>
                    <!--product-details-------->
                    <div class="product-details">
                        <a href="#" class="p-name">Drawstring T-Shirt</a>
                        <span class="p-price">$22.00</span>
                    </div>
                </div>


              </div>
          </section>

➤Product list-1 CSS Code is have given below.

.arrival-heading strong{
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #1b1919;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 40px;
    padding: 5px 30px;
    border: 1px solid #e0e0e0;
}
.arrival-heading{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.arrival-heading strong{
    color: #ffffff;
    background-color: #202020;
    font-weight: 500;
}
.arrival-heading p{
    color: #808080;
    margin: 10px;
    font-size: 0.9rem;
}
.product-container{
    width:90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}
.product-box{
    display: flex;
    flex-grow: 0.5;
    flex-direction: column;
    align-items: center;
    border: 1px solid #f7f7f7;
    border-radius: 10px;
    margin: 20px;
}
.product-img{
    width:200px;
    height: 210px;
    margin: 20px;
    cursor: pointer;
    position: relative;
}
.product-img img{
    width:100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.product-details{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    border-top: 1px solid #f3f3f3;
}
.p-name{
    color: #727272;
}
.p-price{
    color: #333333;
    font-size: 1.2rem;
    font-weight: 400;
}
.product-box:hover{
    box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
}
.add-cart{
    position: absolute;
    right: -20px;
    top: 10px;
    width:50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: #0b9d8a;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
    display: none;
    animation: fade 0.3s;

}
.add-cart:hover{
    background-color: #f76b6a;
    transition: all ease 0.2s;
}
.product-box:hover .add-cart{
    display: flex;
}
.new-arrival{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Sale Offer Boxes

➤Sale Offer Boxes HTML Code have given below.


  <!---sale------------------------------------>
          <section class="sale">
              <!--sale-box-1-------------------->
              <div class="sale-box sale-1">

                  <img src="images/sale-1.jpg">
                  
                  <a href="#">
                  <div class="sale-text">
                    <strong>Bag with rose pattern</strong>
                    <span>Sale off 25%</span>
                  </div></a>
              
                </div>

                 <!--sale-box-2-------------------->
              <div class="sale-box sale-1">

                <img src="images/sale-2.jpg">
                
                <a href="#"><div class="sale-text">
                  <strong>Hello Summer</strong>
                  <span>Sale off 20%</span>
                </div></a>
            
              </div>

               <!--sale-box-3-------------------->
               <div class="sale-box sale-1">

                <img src="images/sale-3.jpg">
                
                <a href="#">
                <div class="sale-text">
                  <strong>Let's Party Hard Pillow</strong>
                  <span>Sale off 25%</span>
                </div></a>
            
              </div>
           
          </section>

➤ Side Login and Registration Form CSS Code is have given below.


.sale{
    width:95%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px auto;
  
}
.sale-box{
    width:280px;
    border-radius: 20px;
    margin: 20px;
    position: relative;
    flex-grow: 0.5;
}
.sale-box img{
    width:100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}
.sale-text{
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translate(-20%,-50%);
    display: flex;
    flex-direction: column;
}
.sale-box a{
    color: #1b1919;
}
.sale-text strong{
    font-size: 1.2rem;
    font-weight: 500;
    width: 80%;
    line-height: 23px;
}

Product List-2

➤Product Box List-2 HTML Code have given below.


  <!--Feature-items-------------------------------->
        <section class="feature-item">
            
            <!--heading-------->
            <div class="feature-heading">
            <strong>Featured Items</strong>
            <p>We Provide You New Fasion Design Clothes</p>
                </div>

              <!--products----------------------->
              <div class="product-container">
                  
                <!--product-box-1---------->
                  <div class="product-box">

                      <!--product-img------------>
                      <div class="product-img">
                          <!--add-cart---->
                          <a href="#" class="add-cart"><i class="fas fa-shopping-cart"></i></a>
                          <!--img------>
                        <img src="images/p-1.png">
                      </div>

                      <!--product-details-------->
                      <div class="product-details">
                          <a href="#" class="p-name">Drawstring T-Shirt</a>
                          <span class="p-price">$22.00</span>
                      </div>

                  </div>

                    <!--product-box-2---------->
                    <div class="product-box">
                        <!--product-img------------>
                        <div class="product-img">
                            <!--add-cart---->
                          <a href="#" class="add-cart"><i class="fas fa-shopping-cart"></i></a>
                          <!--img------>
                          <img src="images/p-2.png">
                        </div>
                        <!--product-details-------->
                        <div class="product-details">
                            <a href="#" class="p-name">Drawstring T-Shirt</a>
                            <span class="p-price">$22.00</span>
                        </div>
                    </div>
                  <!--product-box-3---------->
                  <div class="product-box">
                    <!--product-img------------>
                    <div class="product-img">
                        <!--add-cart---->
                        <a href="#" class="add-cart"><i class="fas fa-shopping-cart"></i></a>
                        <!--img------>
                      <img src="images/p-3.png">
                    </div>
                    <!--product-details-------->
                    <div class="product-details">
                        <a href="#" class="p-name">Drawstring T-Shirt</a>
                        <span class="p-price">$22.00</span>
                    </div>
                </div>
                 <!--product-box-4---------->
                 <div class="product-box">
                    <!--product-img------------>
                    <div class="product-img">
                        <!--add-cart---->
                        <a href="#" class="add-cart"><i class="fas fa-shopping-cart"></i></a>
                        <!--img------>
                      <img src="images/p-4.png">
                    </div>
                    <!--product-details-------->
                    <div class="product-details">
                        <a href="#" class="p-name">Drawstring T-Shirt</a>
                        <span class="p-price">$22.00</span>
                    </div>
                </div>

                  
                    </div>
                    </section>

Sale Banner

➤Sale Banner HTML Code have given below.


  <!--banner-->
          <div class="banner-box f-slide-3">
        
        <div class="banner-text-container">
        <div class="banner-text">
            <span>Limited Offer</span>
            <strong>30% Off<br/> With <font>Promo Code</font></strong>
            <a href="#" class="banner-btn">Shop Now</a>
        </div>
        </div>
    
    </div>

➤Sale Banner CSS Code is have given below.



.banner-box{
    width:100%;
     height: 40vh;
    margin: 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../images/Slider_03.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.banner-text-container{
    width:80%;
    height: 90%;
    display: flex;
    align-items: center;
}

.banner-text{
    display: flex;
    flex-direction: column;
    margin-right: auto;
}

.banner-text strong{
    color: #333333;
    font-size: 3rem;
    line-height: 55px;
    margin-top: 10px;
    letter-spacing: 1px;
}

.banner-text span{
    text-transform: uppercase;
    letter-spacing: 6px;
    font-weight: 500;
    color: #666666;
    font-size: 1.2rem;
}

.banner-btn{
    width:170px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: #0b9d8a;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 14px;
}
.banner-text strong font{
    color: #0b9d8a;
}

Services Box and Footer

➤Services Box and Footer HTML Code have given below.


    <!--services------------------------->
    <section class="services">
        <!--services-box---------->
        <div class="services-box">
            <i class="fas fa-shipping-fast"></i>
            <span>Free Shipping</span>
            <p>Free Shipping for all US order</p>
        </div>
        <!--services-box---------->
        <div class="services-box">
            <i class="fas fa-headphones-alt"></i>
            <span>Support 24/7</span>
            <p>We support 24h a day</p>
        </div>
        <!--services-box---------->
        <div class="services-box">
            <i class="fas fa-sync"></i>
            <span>100% Money Back</span>
            <p>You have 30 days to Return</p>
        </div>
        

    </section>
    <!--footer---------------------------->
    <footer>
        <!--copyright-------------->
        <span class="copyright">
            Copyright 2020 - GoingToInternet
        </span>
        <!--subcribe---------------->
        <div class="subscribe">
            <form>
            <input type="email" placeholder="Example@gmail.com" required/>
            <input type="submit" value="Subscribe">
            </form>
        </div>
    </footer>

➤Services Box and Footer CSS Code is have given below.

.services{
    display: flex;
    width: 90%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;
}
.services-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.1);
    min-width: 250px;
    padding: 20px;
    margin: 15px;
    flex-grow: 0.7;
}
.services-box i{
    color: #0b9d8a;
    font-size: 2rem;
    margin: 15px;
}
.services-box span{
    color: #222222;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 1rem;
}
.services-box p{
    color: #878787;
    margin: 0px;
    font-size: 0.9rem;
}
footer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    border-top: 1px solid rgba(0,0,0,0.1);
    flex-wrap: wrap;
    margin-top: 20px;
}
.copyright{
    font-size: 0.9rem;
    color: #4e4e4e;
    letter-spacing: 1px;
}
.subscribe input{
    width:240px;
    height: 43px;
    padding: 0px 20px;
    border: 1px solid rgba(0,0,0,0.1);
    outline: none;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
}
.subscribe input[type="submit"]{
    width:120px;
    background-color: #0b9d8a;
    color: #ffffff;
    margin: 0px 5px;
}

Making Navigation Fix When Scroll

➤JavaScript Code For Fix Navigation

  /*--For-make-Menu-responsive------------*/
  $(document).ready(function(){
		$('.toggle').click(function(){
			$('.toggle').toggleClass('active')
			$('.navigation').toggleClass('active')
		})
	});

➤CSS Code For Fix Navigation

.fix-nav{
    width:100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #ffffff;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
    z-index: 102;
}

Making Website Responsive

➤ Side Login and Registration Form CSS Code is have given below.

.toggle{
    display: none;
}
@media(max-width:1010px){
    nav{
        position: relative;
    }
    .navigation{
        height: 80px;
    }
    .fix-nav{
        height: 80px;
    }
    .menu{
        position: absolute;
        top: 110px;
        left: 0px;
        background-color: #ffffff;
        border-bottom: 4px solid #0b9d8a;
        width: 100%;
        padding: 0px;
        margin: 0px;
        z-index: 102;
        flex-direction: column;
        display: none;

    }
    .fix-nav .menu{
        top: 80px;
    }
    .menu li{
        width:100%;
        margin: 0px;
        padding: 0px;
    }
    .navigation .menu li a{
        width:100%;
        height: 50px;
        display: flex;
        align-items: center;
        margin: 0px;
        padding: 25px;
        border: 1px solid rgba(0,0,0,0.03);
    }
    .sale-lable{
        display: none;
    }
    .toggle{
        display: block;
    }
    .toggle:before{
        content: '\f0c9';
        font-family: fontAwesome;
        line-height: 30px;
        z-index: 1;
        cursor: pointer;
    }
    .toggle.active:before{
        content: '\f00d';
    }
    .navigation.active .menu{
        display: block;
    }
    .full-slider-box,
    .banner-box{
        height: 45vh;
    }
    .f-slider-text span,
    .banner-text span{
        font-size: 0.9rem;
    }
    .f-slider-text strong,
    .banner-text strong{
        font-size: 2rem;
        line-height: 40px;
    }
    .search-input{
        height: 60px;
    }
    .search-input input,
    .search-cancel{
        font-size: 1.4rem;
    }
    .sale-box{
        height: 200px;
    }
}
@media(max-width:600px){
    .navigation{
        padding: 10px;
    }
    .f-slider-text strong,
    .banner-text strong{
        font-size: 1.2rem;
        line-height: 25px;
    }
    .full-slider-box,
    .banner-box{
        height: 30vh;
    }
    .f-slider-text span,
    .banner-text span{
        font-size: 0.8rem;
    }
    .f-slider-btn,
    .banner-btn{
        width:120px;
        height: 30px;
        font-size: 0.8rem;
    }
    .feature-heading h2{
        font-size: 1.2rem;
    }
    .feature-box{
        width:120px;
        height: 120px;
    }
    .new-arrival strong,
    .feature-heading strong{
        font-size: 1.2rem;
    }
    .new-arrival p,
    .feature-heading p{
        font-size: 0.8rem;
        text-align: center;
    }
    .sale-box{
        width:100%;
        height: 180px;
    }
    .sale{
        width: 100%;
    }
    .services{
        width:100%;
    }
    .services-box{
        width:100%;
    }
    .copyright{
        margin: 20px 0px;
        text-align: center;
    }
    .subscribe{
        width:100%;
    }
    .subscribe form{
        flex-wrap: nowrap;
        display: flex;
        width:100%;
    }
    .subscribe input{
        width:100%;
        flex-grow: 1;
    }
    .login-form,
    .sign-up-form{
        width:90%;
    }
}

Download Images Download LightSlider Files Download jQuery Download Source Code

How To Dowload Files

41 comments

Comments

DominoDecember 23, 2020 at 11:00 AM
Hello, sir
Slider doesn't work. How can I do?
ReplyDelete
Replies
UnknownJanuary 2, 2021 at 1:33 PM
Sir the nav bar is not responsive
ReplyDelete
Replies
etternally January 8, 2021 at 5:15 PM
Hello, sir
Slider doesn't work. How can I do?
ReplyDelete
Replies
AnonymousJanuary 21, 2021 at 7:59 PM
but in my website both are working
ReplyDelete
Replies
UnknownFebruary 2, 2021 at 3:18 PM
its little difficult to arrange the code and html and it must be in separate files. Its very good above but not arranged in well manner so that everybody can run it without any issue. So i request the admin to sort/arrange the files . Thanks
ReplyDelete
Replies
UnknownFebruary 24, 2021 at 12:39 AM
I've tried to open the files, but doesn't work...!! 😢
ReplyDelete
Replies
Nexus CodeMarch 14, 2021 at 9:32 PM
Slider doesn't work. How can I do?
ReplyDelete
Replies
UnknownMarch 14, 2021 at 10:10 PM
can you send me the whole document
ReplyDelete
Replies
RenonoMarch 17, 2021 at 1:58 PM
Thanks for sharing
ReplyDelete
Replies
UnknownApril 13, 2021 at 8:57 PM
kindly share the document
ReplyDelete
Replies
Aayush OO3May 12, 2021 at 2:54 PM
slider not working sir plz arrange all the code in one document and add it plz
ReplyDelete
Replies
Aayush OO3May 12, 2021 at 2:56 PM
if u not idiot arrange the code and send
ReplyDelete
Replies
james johnMay 19, 2021 at 4:28 AM
I am definitely enjoying your website. You definitely have some great insight and great stories.
jackets for women
ReplyDelete
Replies
PiseychanMay 27, 2021 at 10:59 AM
Can I download source code ?
ReplyDelete
Replies
IT StudentJuly 19, 2021 at 8:39 AM
Hello,
I can't download the image file. I think your google drive link is broken. Can you give me the link of the google drive plz?
Thanks.
ReplyDelete
Replies
eren yeagerJuly 24, 2021 at 12:17 PM
hello sir may i know how to make the search function to find something when we input it? it might be a pleasure if you could teach me
ReplyDelete
Replies
Abdus SalamAugust 21, 2021 at 9:43 PM
https://github.com/asalam345/Ecommerce_Shopping_Website
ReplyDelete
Replies
Simplileap DigitalSeptember 30, 2021 at 3:59 AM
Absolutely knowledgeable content. Thanks for sharing this kind of content. It is very helpful and very informative and I really learned a lot from it. Bangalore eCommerce website development
ReplyDelete
Replies
JennaAugust 18, 2022 at 6:18 PM
what ever you say but u all must consider that professional tow truck near me service from Rapid NYC towing is the best ever.
ReplyDelete
Replies
erryAugust 22, 2022 at 8:02 PM
https://nastyaperfumes.co/ is a refreshing, summery fragrance that captures the essence of Italy. It's perfect for anyone who loves the warmth and authenticity of Mediterranean hospitality.
ReplyDelete
Replies
Dina SalarSeptember 22, 2022 at 12:49 PM
One of the most popular types of kitchens these days is the smart kitchen. This type of kitchen combines traditional cooking with advanced technology, making it more efficient and easier to use, consider our fitness with dina.
ReplyDelete
Replies
hellatwinkleApril 18, 2023 at 12:11 AM
Learning how to create a shopping website using HTML, CSS, and jQuery can be a valuable skill for anyone interested in web development and e-commerce . For those looking for lighting solutions for their online store, Eglo Lighting abu dhabican be a great option to consider.
ReplyDelete
Replies
elitefenceAugust 3, 2023 at 6:27 AM
Exciting opportunity to master website development! In this tutorial, you'll build a shopping website with HTML, CSS, and jQuery. And forReliable Commercial Fencing Company in Edmontonn, trust our experienced company to safeguard your properties. Learn and protect, the perfect combination! 🛒💻🚧
ReplyDelete
Replies
hastenchemicalNovember 14, 2023 at 10:01 PM
Lime kiln dust Orlando, Florida serves as a valuable material for soil improvement, aiding in construction projects and agricultural applications, showcasing its versatility in promoting environmental sustainability in the region.
ReplyDelete
Replies
CharbonnelNovember 14, 2023 at 10:16 PM
Experience the exquisite taste of Charbonnel et Walker buy chocolate in makka. Treat yourself to the luxurious blend of finest ingredients, delivering a truly indulgent and memorable chocolate experience.
ReplyDelete
Replies
Anna ThomasNovember 15, 2023 at 8:54 PM
Diving into the crucial collaboration between fit-out contractors, designers, and commercial space renovations. Achieve excellence in your Dubai commercial space with the expertise of top-tier fit-out contractors for a harmonious blend of functionality and design.
ReplyDelete
Replies
new evolution inter decoDecember 6, 2023 at 6:09 PM
Fit-out contractors play a crucial role in revolutionizing commercial spaces, creating a perfect synergy of form and function. For exceptional transformations, consider the expert services for villa renovation in Dubai, where innovation meets luxury to redefine living spaces.
ReplyDelete
Replies
hastencateringDecember 6, 2023 at 8:23 PM
oil field catering services deliver essential sustenance to remote work sites, keeping energy levels high for hardworking crews. Specialized in catering to the unique demands of the oil and gas industry, they play a crucial role in supporting personnel during challenging operations.
ReplyDelete
Replies
cardetailingottawaDecember 6, 2023 at 8:45 PM

Mobile car wash services are at the forefront of transforming auto detailing, offering unparalleled convenience and a modern approach. Experience the evolution with Ottawa Car Wash services, where innovation meets exceptional care for your vehicle's ultimate pampering.
ReplyDelete
Replies
hastencleaseDecember 21, 2023 at 7:47 PM
Smart move incorporating Poppins font for wider accessibility in your HTML files! Just as you optimize design elements, ensure a clean and polished code foundation with tank cleaning in Houston for a seamless digital experience.
ReplyDelete
Replies
combinedpumpJanuary 8, 2024 at 7:33 PM
How To Create Shopping Website Using HTML CSS And jQuery" is a valuable guide for aspiring web developers. As you delve into the world of coding, ensure industrial processes run smoothly with reliable transfer pumps in Dammam Let the creativity of website creation align seamlessly with the efficiency of essential equipment, creating a perfect synergy between digital innovation and operational excellence
ReplyDelete
Replies
JulieJanuary 19, 2024 at 1:51 PM
Thank you for your excellent contribution. I think it's extremely interesting and well-thought-out. I'm looking forward to reading your work in the future. Are you searching for towing ? Call us at Motorcycle Towing Company. Towing services offer timely and skilled assistance! Available 24/7. Our expert staff is eager to assist. All Cheap Towing Near Me services are available 24/7. Call now.

ReplyDelete
Replies
CMOLDS Mobile App Development Company in DubaiApril 1, 2024 at 11:22 AM
To create a shopping website using HTML, CSS, and jQuery, start by designing the layout and structure using HTML for the content, CSS for styling, and jQuery for interactive elements like dropdown menus and sliders. Implement features such as product listings, cart functionality, and checkout processes using JavaScript and server-side technologies like PHP or Node.js for handling backend operations and database management. Incorporate responsive design principles to ensure the website works seamlessly across various devices, providing a user-friendly shopping experience.
Visit CMOLDS app development company in dubai. We are provide best mobile app and web development services in the state of Middle East and across the Globe.
ReplyDelete
Replies
Ramma Foundation RepairApril 26, 2024 at 11:03 PM
Ramma Foundation Repair is your trusted partner for Foundation Repair Edmonton. With years of expertise and a commitment to quality, we specialize in addressing foundation issues promptly and effectively. Count on Ramma Foundation Repair to restore stability and safety to your property, ensuring peace of mind for years to come.
ReplyDelete
Replies
Future StyleJune 4, 2024 at 4:23 PM
Blooming with femininity, Gucci Flora offers a fragrant escape. This floral perfume line captures the spirit of gardens with joyful scents, perfect for the romantic at heart.
ReplyDelete
Replies
cubsidecarSeptember 26, 2024 at 2:31 PM
Auto Detailing services in Ottawa offer expert interior and exterior cleaning, polishing, and protection for vehicles. From stain removal to paint correction, they ensure a pristine, well-maintained finish that enhances your car's appearance and longevity.
ReplyDelete
Replies