How To Create Shopping Website Using HTML CSS And jQuery

How To Create Shopping Website Using HTML CSS And jQuery

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

  1. 0.0 - 2.40 min : Intro
  2. 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 CSS

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

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
Login and Sign Up Form HTML

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
Create Full Page Slider HTML and JS

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
Create Featured Categories Slider HTML CSS

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
Create E-Commerce Product HTML CSS

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
Create Sale Offer Boxes HTML

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
Create Product Boxes HTML CSS

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
Create Banner HTML CSS

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
Create Services Box and Footer using HTML CSS

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
Make Website Responsive CSS

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




How To Dowload Files

Comments

  1. Hello, sir
    Slider doesn't work. How can I do?

    ReplyDelete
  2. Sir the nav bar is not responsive

    ReplyDelete
  3. Hello, sir
    Slider doesn't work. How can I do?

    ReplyDelete
  4. but in my website both are working

    ReplyDelete
  5. 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
  6. I've tried to open the files, but doesn't work...!! 😢

    ReplyDelete
  7. Slider doesn't work. How can I do?

    ReplyDelete
  8. can you send me the whole document

    ReplyDelete
  9. slider not working sir plz arrange all the code in one document and add it plz

    ReplyDelete
  10. if u not idiot arrange the code and send

    ReplyDelete
  11. I am definitely enjoying your website. You definitely have some great insight and great stories.
    jackets for women

    ReplyDelete
  12. 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
  13. 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
  14. https://github.com/asalam345/Ecommerce_Shopping_Website

    ReplyDelete
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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

  26. 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
  27. 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
  28. 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
  29. 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

Archive

Contact Form

Send