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. Hey you idiots, can't you arrange the files properly

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

    ReplyDelete
  9. can you send me the whole document

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

    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

Archive

Contact Form

Send