Ecommerce Website Using HTML CSS And Bootstrap

    Last updated on 04 Jun 2023

    Preview Link
    Quick Info
    Youtube : https://youtu.be/oVytzcReiVU
    Views : 21369
    Skills : HTML, CSS, JavaScript, Bootstrap 5
    Category : Web Design
    Tag : Ecommerce Website

    In This Tutorial, We Are going to Learning How To design Ecommerce Website Using HTML CSS And Bootstrap. This website is going to be design using bootstrap 5.

    Section We Are Going To Design In Ecommerce Website Using Bootstrap

    In our ecommerce website, we are going to design three main section using bootstrap 5 : Header section, Main Body And Footer section

    Header Section

    • Logo
    • Navbar

    Main Body Section

    • Banner Section
    • ADV Section
    • Category Section
    • Product List
    • Adv Delivery
    • Shipping Information
    • Testimonial

    Footer Section

    • Social media link
    • Copyright information

    Video Tutorial

    Watch full coding video on how to create ecommerce website with bootstrap to understand easily. This website is going to be fully responsive ecommerce website using html and css

    Let's Start The Coding

    Firstly, Create the folder on dekstop, folder name is : ecommerce website Inside ecommerce website folder, create two sub folder : - 1) css and 2) images

    Inside ecommerce website folder, I am creating HTML file file name - index.html

    Inside ecommerce website folder, I am creating CSS file - file name - style.css

    Let's start with basic HTML 5 code in index.html, and add boostrap 5 css and js link including style.css file to index.html file

    Meta html code. Copy And paste the code in index.html

    index.html
      <!-----META SECTION----->
      <!DOCTYPE html>
      <head>
      <title>Project</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
      <link rel="stylesheet" href="css/style.css">
    </head>
    <body>

    Common CSS. Copy And Paste The Code in style.css

    style.css
    /*****COMMON CSS SECTION*****/
    @import url('https://fonts.googleapis.com/css2?family=Norican&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800;900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&display=swap');
    html,
    body {
    	font-size: 14px;
    	color: white;
    	background: #f7f1e8;
    	font-family Poppins, sans-serif;
    }
    a {
    	text-decoration: none;
    }
    .top-header {
    	height: 100vh;
    	background-size: cover;
    	overflow: hidden;
    	color: black;
    	z-index: 2;
    	width: 100%;
    	background: #b80818
    }
    .bg-color {
    	background: #b80818;
    }
    .main-section {
    	padding-top: 120px;
    	padding-bottom: 120px;
    }

    2) Now, we will design Logo And Navbar Section.

    In our Logo And Navbar section of ecommerce website using html css and bootstrap, we are having logo in img tag in responsive navbar in ul li tags.

    Please copy and paste the below code to design Logo And responsive navbar section.

    Logo And navbar HTML code. Copy & paste in index.html file

    index.html
    <div class="container-fluid top-header">
      <nav class="navbar-expand-lg navbar-dark fixed-top">
        <div class="container">
          <div class="row">
            <div class="col-lg-3 col-md-3 col-4">
              <a class="navbar-brand" href="#">
                <img src="image/logo.png">
              </a>
            </div>
            <div class="col-lg-6 col-md-6 col-2">
              <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
                <ul class="navbar-nav ml-auto">
                  <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Category</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Menu List</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Our Services</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Testimonial</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="col-lg-3 col-md-3 col-6 social-media">
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
              </button>
              <a href="#">
                <i class="fa fa-search"></i>
              </a>
              <a href="#">
                <i class="fa fa-cart-plus"></i>
              </a>
            </div>
          </div>
        </div>
      </nav>

    Logo And navbar CSS Code. Copy & Paste in Style.Css

    style.css
    /******* NAVBAR SECTION NAVBAR SECTION*******/
    .navbar-brand img {
    	width: auto;
    	height: 70px;
    }
    .collapse {
    	position: relative;
    	top: -4px;
    }
    .navbar-nav {
    	margin-top: 10px;
    }
    .navbar-nav .nav-item {
    	margin-right: 15px;
    }
    .navbar-nav .nav-link {
    	font-weight: 500;
    	color: white;
    	font-size: 16px;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
    	margin-left: 32px;
    	margin-top: 12px;
    }
    .nav-link {
    	margin-left: 10px !important;
    }
    .navbar-expand-lg .navbar-collapse {
    	justify-content: left;
    }
    .fixed-top {
    	background: #b80818;
    }
    nav .social-media a {
    	color: #fff;
    	font-size: 25px;
    	top: 15px;
    	position: relative;
    	margin-right: 30px;
    	float: right;
    }
    @media screen and (max-width:768px) {
    	.navbar-collapse {
    		position: absolute;
    		background: #b80818;
    		width: 100%;
    		left: 0px;
    		top: 65px;
    		padding-left: 20px;
    		padding-bottom: 40px;
    	}
    	.navbar-toggler {
    		float: right;
    		position: relative;
    		top: 15px;
    		font-size: 20px;
    	}
    	nav .social-media a {
    		color: #fff;
    		font-size: 25px;
    		top: 12px;
    		position: relative;
    		margin-right: 20px;
    	}
    }

    Output Of My Logo And Navbar Section

    logo and navbar section Ecommerce Website Using HTML CSS And Bootstrap

    3) Now, we will design Banner section.

    In Banner section of ecommerce website using html css and bootstrap free, we are having content and image.

    Banner Section HTML Code. Copy & Paste in index.html file

    index.html
      !---------BANNER Section BANNER Section------->
      <div class="container-fluid">
      <div class="banner-section">
        <div class="row">
          <div class="col-lg-1 col-12"></div>
          <div class="col-lg-5 col-md-7 col-12">
            <div class="banner-detail">
              <h5>Best Choice</h5>
              <h1>ITALIAN PIZZA</h1>
              <div class="col-md-12">
                <button class="btn button-1">Order Now</button>
                <button class="btn button-2">Full Menu</button>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-5 col-12">
            <div class="banner-img">
              <img src="image/banner.png">
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>

    Banner Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /******** BANNER SECTION BANNER SECTION*******/
    .banner-section {
    	margin-top: 80px;
    	padding-bottom: 80px;
    }
    .banner-detail {
    	margin-top: 15%;
    }
    .banner-detail h5 {
    	font-size: 70px;
    	margin-bottom: 15px;
    	color: #ffda86;
    	font-weight: 400;
    	font-family Norican, sans-serif;
    	/* text-shadow: 0 0 2px black; */
    }
    .banner-detail h1 {
    	margin-bottom: 30px;
    	font-family Poppins, sans-serif;
    	font-size: 180px;
    	color: white;
    	font-weight: bolder;
    	line-height: 170px;
    }
    .banner-detail .button-1 {
    	padding: 11px 35px;
    	font-size: 16px;
    	background: white;
    	border: none;
    	border-radius: 50px;
    	margin-top: 15px;
    	color: black;
    	font-family 'Raleway', sans-serif;
    	font-weight: 500
    }
    .banner-detail .button-2 {
    	padding: 11px 35px;
    	font-size: 16px;
    	border-radius: 50px;
    	margin-top: 15px;
    	color: black;
    	background-color: #ffda86;
    	border: 1px solid #ffda86;
    	margin-left: 10px;
    	font-family 'Raleway', sans-serif;
    	font-weight: 500
    }
    .banner-img img {
    	margin-top: 30px;
    	width: 100%;
    	height: auto;
    	float: right;
    }
    @media screen and (max-width: 768px) {
    	.top-header {
    		height: auto;
    	}
    	.banner-detail h5 {
    		font-size: 55px;
    		margin-bottom: 10px;
    	}
    	.banner-detail h1 {
    		font-size: 75px;
    		line-height: 90px;
    		margin-bottom: 10px;
    	}
    	.banner-img img {
    		height: auto;
    		width: 100%;
    	}
    }
    
    @media screen and (max-width: 500px) {
    	.top-header {
    		height: auto;
    	}
    	.banner-detail {
    		margin-top: 15%;
    	}
    	.banner-detail h5 {
    		font-size: 55px;
    		margin-bottom: 10px;
    	}
    	.banner-detail h1 {
    		font-size: 75px;
    		line-height: 90px;
    		margin-bottom: 10px;
    	}
    	.banner-img img {
    		margin-top: 60px;
    		height: auto;
    		width: 100%;
    	}
    }

    Output Of My Banner Section

    Banner Section of Ecommerce Website Using HTML CSS And Bootstrap

    4) Now, we will design ADV section.

    In Our ADV section, we are having content and button. For Creating we have img tag and for anchor tag we are using order now button tag.

    Please copy and paste the below code to design ADV section

    ADV Section HTML code. Copy & Paste In index.html file

    index.html
    <!---------ADV Section ADV Section-------->
    <div class="container-fluid  main-section">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-md-6">
            <div class="top-banner">
              <div class="row">
                <div class="col-md-7">
                  <h2>SAVE 30%</h2>
                  <h3>HamBurger"S Combo</h3>
                  <p>Web design refers to the design refers</p>
                </div>
                <div class="col-md-5">
                  <div>
                    <img src="image/banner-1.png">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="top-banner">
              <div class="row">
                <div class="col-md-7">
                  <h2>SAVE 30%</h2>
                  <h3>Burg"S Combo</h3>
                  <p>Web design refers to the design refers</p>
                </div>
                <div class="col-md-5">
                  <div>
                    <img src="image/banner-2.png">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-12">
            <div class="top-banner">
              <div class="row">
                <div class="col-md-7">
                  <h2>SAVE 30%</h2>
                  <h3>Pizza"S Combo</h3>
                  <p>Web design refers to the design refers</p>
                </div>
                <div class="col-md-5">
                  <div>
                    <img src="image/banner-3.png">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="top-banner">
              <div class="row">
                <div class="col-lg-7">
                  <h2>SAVE 30%</h2>
                  <h3>We Make The Best Restaurant!</h3>
                  <p>Lorem Ipsum is simply dummy text  how to make ecommerce website industry. Web design refers to the design refers</p>
                </div>
                <div class="col-lg-5">
                  <div>
                    <img src="image/banner-4.png">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="top-banner">
              <div class="row">
                <div class="col-lg-7">
                  <h2>SAVE 30%</h2>
                  <h3>Why Taste Our Best Pizza Now?</h3>
                  <p>Lorem Ipsum is simply of how to build an ecommerce website from scratch. Web design refers to the design refers</p>
                </div>
                <div class="col-lg-5">
                  <div>
                    <img src="image/banner-5.png">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    ADV Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /********ADV ADV ADV *******/
    .top-banner {
    	border: 1px solid #00000024;
    	padding: 30px 5px 30px 20px;
    	background: #fff;
    	margin-bottom: 20px;
    	border-radius: 5px;
    }
    .top-banner img {
    	width: 100%;
    	margin-top: 10px;
    }
    .top-banner h2 {
    	font-size: 18px;
    	color: red;
    	font-family Norican, sans-serif;
    }
    .top-banner h3 {
    	font-size: 30px;
    	font-weight: 600;
    	line-height: 30px;
    	color: #484848;
    }
    .top-banner p {
    	margin: 0px;
    	font-size: 15px;
    	color: black;
    }

    Output Of Adv Section

    Adv Section of Ecommerce Website Using HTML CSS And Bootstrap

    5) Now, we will design Category List section.

    Now we are going to create category list section. In this section, image and category name

    Category List Section HTML Code. Copy & Paste in index.html file

    index.html
    <!---------Category List Category List Category List--------->
    <div class="container-fluid main-section bg-color">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 col-md-3 col-6">
            <div class="category-list">
              <img src="image/c-1.png">
              <h2>Burger</h2>
              <p>19 Restaurants Products</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-6">
            <div class="category-list">
              <img src="image/c-2.png">
              <h2>Burger</h2>
              <p>19 Restaurants Products</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-6">
            <div class="category-list">
              <img src="image/c-3.png">
              <h2>Shakes</h2>
              <p>9 Restaurants Products</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-6">
            <div class="category-list">
              <img src="image/c-4.png">
              <h2>Burger</h2>
              <p>24 Restaurants Products</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-6">
            <div class="category-list">
              <img src="image/c-5.png">
              <h2>Pasta</h2>
              <p>44 Restaurants Products</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-6">
            <div class="category-list">
              <img src="image/c-6.png">
              <h2>Pizza</h2>
              <p>14 Restaurants Products</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-6">
            <div class="category-list">
              <img src="image/c-7.png">
              <h2>Pizza</h2>
              <p>14 Restaurants Products</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-6">
            <div class="category-list">
              <img src="image/c-8.png">
              <h2>Pizza</h2>
              <p>14 Restaurants Products</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    Category List Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*******Category List Category List Category List*******/
    .category-list {
    	text-align: center;
    	margin-bottom: 30px;
    	padding-top: 20px;
    	padding-bottom: 20px;
    	border: 1px dotted #ffda86;
    	border: 1px dashed #ffda86;
    }
    .category-list img {
    	width: 50%;
    }
    .category-list h2 {
    	font-weight: 500;
    	margin: 0px;
    	font-size: 30px;
    	font-family Norican, sans-serif;
    }
    .category-list p {
    	font-size: 14px;
    	color: #ffda86;
    	margin: 0px;
    }

    Output Of My Category List Section

    Category List Section of Ecommerce Website Using HTML CSS And Bootstrap

    6) Now, we will design product list section.

    Now we are going to create product list section. In product list section we have product name, product image with price and add to cart button.

    Product List Section HTML Code. Copy & Paste in index.html file

    index.html
    <!---------PRODUCT LIST PRODUCT LIST-------->
    <div class="container-fluid  main-section">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="heading-section">
              <h3>Our Top Sell</h3>
              <h2>Checkout Our Top Sell Burger</h2>
              <div class="heading-borders">
                <span class="selected"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3 col-md-6">
            <div class="famous-product">
              <h2>BEEF</h2>
              <h3>Bacon Cheese Burger</h3>
              <img src="image/p-1.png">
              <div class="price">
                <h4>$6.00 </h4>
                <p>220gr/600cal</p>
                <span>
                  <i class="fa fa-plus"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="famous-product">
              <h2>BEEF</h2>
              <h3>Bacon Cheese Burger</h3>
              <img src="image/p-2.png">
              <div class="price">
                <h4>$6.00 </h4>
                <p>220gr/600cal</p>
                <span>
                  <i class="fa fa-plus"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="famous-product">
              <h2>BEEF</h2>
              <h3>Bacon Cheese Burger</h3>
              <img src="image/p-3.png">
              <div class="price">
                <h4>$6.00 </h4>
                <p>220gr/600cal</p>
                <span>
                  <i class="fa fa-plus"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="famous-product">
              <h2>BEEF</h2>
              <h3>Bacon Cheese Burger</h3>
              <img src="image/p-4.png">
              <div class="price">
                <h4>$6.00 </h4>
                <p>220gr/600cal</p>
                <span>
                  <i class="fa fa-plus"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="famous-product">
              <h2>BEEF</h2>
              <h3>Bacon Cheese Burger</h3>
              <img src="image/p-5.png">
              <div class="price">
                <h4>$6.00 </h4>
                <p>220gr/600cal</p>
                <span>
                  <i class="fa fa-plus"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="famous-product">
              <h2>BEEF</h2>
              <h3>Bacon Cheese Burger</h3>
              <img src="image/p-6.png">
              <div class="price">
                <h4>$6.00 </h4>
                <p>220gr/600cal</p>
                <span>
                  <i class="fa fa-plus"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="famous-product">
              <h2>BEEF</h2>
              <h3>Bacon Cheese Burger</h3>
              <img src="image/p-7.png">
              <div class="price">
                <h4>$6.00 </h4>
                <p>220gr/600cal</p>
                <span>
                  <i class="fa fa-plus"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="famous-product">
              <h2>BEEF</h2>
              <h3>Bacon Cheese Burger</h3>
              <img src="image/p-8.png">
              <div class="price">
                <h4>$6.00 </h4>
                <p>220gr/600cal</p>
                <span>
                  <i class="fa fa-plus"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    Product List Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*********HEADING SECTION HEADING*********/
    .heading-section {
    	padding-bottom: 100px;
    }
    .heading-section h3 {
    	font-size: 30px;
    	text-align: center;
    	color: #b80818;
    	font-family Norican, sans-serif;
    	margin: 0px;
    }
    .heading-section h2 {
    	text-align: center;
    	color: black;
    	font-size: 44px;
    	margin-bottom: 0px;
    	font-weight: bold;
    	font-family 'Raleway', sans-serif;
    	letter-spacing: 0.5px;
    	word-spacing: 1px;
    }
    .heading-borders {
    	text-align: center;
    	justify-content: center;
    	display: flex;
    }
    .heading-borders span {
    	border: 1px solid red;
    	width: 5%;
    	margin-bottom: 20px;
    }
    @media screen and (max-width:768px) {
    	.heading-section h2 {
    		font-size: 30px;
    		margin-bottom: 5px;
    	}
    	.heading-borders span {
    		width: 8%;
    	}
    }
    @media screen and (max-width:500px) {
    	.heading-borders span {
    		width: 25%;
    	}
    	.heading-section h2 {
    		font-size: 30px;
    	}
    }
    /*******PRODUCT LIST PRODUCT LIST********/
    .famous-product {
    	border: 1px solid lightgrey;
    	padding: 20px;
    	border-radius: 30px;
    	background: #fff;
    	color: black;
    	margin-bottom: 30px;
    }
    .famous-product img {
    	width: 100%;
    }
    .famous-product h2 {
    	font-size: 18px;
    	color: #F44336;
    }
    .famous-product h3 {
    	margin-bottom: 20px;
    	font-size: 26px;
    	font-weight: 600;
    	color: #4e4e4e;
    }
    .famous-product .price {
    	position: relative;
    }
    .famous-product .price h4 {
    	margin: 0px;
    }
    .famous-product .price span {
    	position: absolute;
    	top: 5px;
    	right: 0px;
    }
    .famous-product .price i {
    	width: 50px;
    	height: 50px;
    	border: 1px solid;
    	font-size: 22px;
    	padding: 14px;
    	text-align: center;
    	border-radius: 50px;
    	color: tomato;
    }

    Output Of My Product List Section

    product list section of Ecommerce Website Using HTML CSS And Bootstrap

    7) Now, we will design Shipping Information Section.

    Now we are going to create Shipping Information section. In this section we have banner image and heading with short description

    Shipping Information Section HTML Code. Copy & Paste in index.html file

    index.html
    <!---------ADV Section ADV Section ADV Section --------->
    <div class="container-fluid main-section bg-color">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <div class="adv-left">
              <img src="image/scooter.png">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="adv-right">
              <h2>Fastest Delivery</h2>
              <h3>Your Favorite Pizza, <br> on the Way! </h3>
              <p>Web design refers to the design of websites that Delivery in are displayed on the internet.</p>
              <div class="row">
                <div class="col-lg-4 col-md-4">
                  <div class="about-div">
                    <i class="fa fa-home"></i>
                    <p>Delivery in 30 minutes.</p>
                  </div>
                </div>
                <div class="col-lg-4 col-md-4">
                  <div class="about-div">
                    <i class="fa fa-hourglass"></i>
                    <p>Delivery in 30 minutes.</p>
                  </div>
                </div>
                <div class="col-lg-4 col-md-4">
                  <div class="about-div">
                    <i class="fa fa-birthday-cake"></i>
                    <p>Delivery in 30 minutes.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    Shipping Information Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /********ADV Section ADV Section ADV Section*********/
    .adv-left img {
    	width: 100%;
    	margin-bottom: 20px;
    }
    .adv-right h2 {
    	color: #ffda86;
    	font-size: 32px;
    	font-family Norican, sans-serif;
    }
    .adv-right h3 {
    	color: #fff;
    	font-size: 40px;
    	font-weight: bolder;
    }
    .adv-right p {
    	font-size: 16px;
    	margin-top: 20px;
    	font-family Poppins, sans-serif;
    }
    .about-div {
    	border: 2px dotted #ffda86;
    	padding: 15px 20px;
    	font-size: 22px;
    	border-radius: 10px 0px;
    	text-align: center;
    	margin-bottom: 20px;
    }
    .about-div i {
    	color: #ffda86;
    	font-size: 34px;
    }
    .about-div p {
    	margin-top: 5px;
    	font-size: 17px;
    }

    Output Of Shipping Information Section

    Shipping Info section of Ecommerce Website Using HTML CSS And Bootstrap

    8) Now, we will design Testimonial section.

    In our testimonial section, we are having content and images that are moving from right to left. We are using owl carousel slider for testimonial section.

    Testimonial Section HTML Code. Copy & Paste in index.html file

    index.html
    <!---------Testimoinial Section Testimoinial Section--------->
    <div class="container-fluid  main-section">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="heading-section">
              <h3>Our Testimonials</h3>
              <h2>What Our Client Say's</h2>
              <div class="heading-borders">
                <span class="selected"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="demo-5 owl-carousel owl-theme">
              <div class="item">
                <div class="testimonial">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ecommerce website using html css and javascript source code.</p>
                  <div class="testimonial-img">
                    <img src="image/testimonial-1.png">
                  </div>
                  <div class="testimonial-user">
                    <h5>Nancy Bayers</h5>
                    <h6> Founder & CEO At Dezven</h6>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="testimonial">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ecommerce website using html css and javascript source code github.</p>
                  <div class="testimonial-img">
                    <img src="image/testimonial-2.png">
                  </div>
                  <div class="testimonial-user">
                    <h5>Nancy Bayers</h5>
                    <h6> Founder & CEO At Dezven</h6>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="testimonial">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt online shopping website using html and css source code.</p>
                  <div class="testimonial-img">
                    <img src="image/testimonial-3.png">
                  </div>
                  <div class="testimonial-user">
                    <h5>Nancy Bayers</h5>
                    <h6> Founder & CEO At Dezven</h6>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="testimonial">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et simple shopping website using html and css.</p>
                  <div class="testimonial-img">
                    <img src="image/testimonial-4.png">
                  </div>
                  <div class="testimonial-user">
                    <h5>Nancy Bayers</h5>
                    <h6> Founder & CEO At Dezven</h6>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="testimonial">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut lab how to create a ecommerce website using html and css.</p>
                  <div class="testimonial-img">
                    <img src="image/testimonial-1.png">
                  </div>
                  <div class="testimonial-user">
                    <h5>Nancy Bayers</h5>
                    <h6> Founder & CEO At Dezven</h6>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="testimonial">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                  <div class="testimonial-img">
                    <img src="image/testimonial-1.jpg">
                  </div>
                  <div class="testimonial-user">
                    <h5>Nancy Bayers</h5>
                    <h6> Founder & CEO At Dezven</h6>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="testimonial">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                  <div class="testimonial-img">
                    <img src="image/testimonial-1.jpg">
                  </div>
                  <div class="testimonial-user">
                    <h5>Nancy Bayers</h5>
                    <h6> Founder & CEO At Dezven</h6>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="testimonial">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore e how to build an ecommerce website step by step.</p>
                  <div class="testimonial-img">
                    <img src="image/testimonial-1.jpg">
                  </div>
                  <div class="testimonial-user">
                    <h5>Nancy Bayers</h5>
                    <h6> Founder & CEO At Dezven</h6>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    Testimonial Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*******TESTIMONIAL SECTION TESTIMONIAL SECTION*******/
    .testimonial {
    	padding: 50px 30px;
    	background-color: #fffcf6;
    	/* box-shadow: 0 0.375rem 1.5rem 0 rgba(140, 152, 164, 0.125); */
    	width: 100%;
    	float: left;
    	border: 1px solid #b80818;
    	border-radius: 20px;
    }
    .testimonial p {
    	font-size: 16px;
    	letter-spacing: 0.5px;
    	word-spacing: 1px;
    	line-height: 30px;
    	margin-bottom: 20px;
    	text-align: center;
    	color: black;
    }
    .testimonial .testimonial-img {
    	width: 80px;
    	float: left;
    }
    .testimonial img {
    	width: 70px !important;
    	height: 70px !important;
    	border-radius: 50px;
    }
    .testimonial .testimonial-user {
    	width: calc(100% - 100px);
    	float: left;
    	margin-top: 5px;
    }
    .testimonial h5 {
    	font-size: 32px;
    	font-family Norican, sans-serif;
    	color: #000000;
    	margin: 0px;
    }
    .testimonial h6 {
    	font-size: 16px;
    	font-weight: 400;
    	color: #ea4020;
    }
    .owl-dots {
    	text-align: center;
    	margin-top: 30px;
    }
    .owl-dot {
    	width: 12px;
    	height: 12px;
    	border-radius: 50%;
    	border: 1px solid #343434 !important;
    	margin-right: 10px;
    }
    .owl-carousel .owl-dots .active {
    	border: 1px solid #ea4020 !important;
    	background: #ea4020;
    }
    .owl-nav {
    	position: absolute;
    	top: 35%;
    	width: 100%;
    	float: left;
    }
    .owl-nav .owl-prev {
    	background: #00000059 !important;
    	height: 40px;
    	width: 40px;
    	color: white !important;
    	border-radius: 50%;
    	font-size: 36px !important;
    	line-height: 40px !important;
    }
    .owl-nav .owl-next {
    	float: right;
    	background: #00000059 !important;
    	height: 40px;
    	width: 40px;
    	color: white !important;
    	border-radius: 50%;
    	font-size: 36px !important;
    	line-height: 40px !important;
    }

    Output Of My Testimonial Section

    Testimonial Section of Ecommerce Website Using HTML CSS And Bootstrap

    9) Now, we will design Footer section.

    In our footer section, we are having background image with contact info and quick link. We are also giving social media link in footer section of ecommerce website using html css and bootstrap

    Footer Section HTML code. Copy & paste in index.html file

    index.html
    <!--------FOOTER Section FOOTER Section FOOTER Section------->
    <div class="container-fluid footer-section" style="">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <div class="footer-top">
              <h2>A Moments Of Delivered <br> On Right Time & Place </h2>
              <h3>90-9893-304-801</h3>
              <span class="border-bottoms"></span>
            </div>
          </div>
          <div class="col-md-4">
            <h2>
              <img src="image/logo.png">
            </h2>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <h4>Our Company</h4>
            <div class="row">
              <div class="col-6">
                <div class="footer-menu">
                  <ul>
                    <li>Home</li>
                    <li>Menu</li>
                    <li>About us</li>
                    <li>restaurant</li>
                  </ul>
                </div>
              </div>
              <div class="col-6">
                <div class="footer-menu">
                  <ul>
                    <li>Quick Order</li>
                    <li>Fast Food</li>
                    <li>Blogging</li>
                    <li>Contact Us</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <h4>Our Company</h4>
            <table>
              <tr>
                <td>Mon-Fri...................</td>
                <td>8:00 am-12:00 pm</td>
              </tr>
              <tr>
                <td>Saturday.................</td>
                <td>8:00 am-12:00 pm</td>
              </tr>
              <tr>
                <td>Sunday....................</td>
                <td>Closed</td>
              </tr>
            </table>
          </div>
          <div class="col-md-4">
            <h4>Contact Us</h4>
            <div class="contact-info">
              <p>
                <span>
                  <i class="fa fa-map-marker"></i>
                </span> 89, Ring Road, New Delhi , India
              </p>
              <p>
                <span>
                  <i class="fa fa-phone"></i>
                </span> +91 9893 304 801
              </p>
              <ul>
                <li>
                  <i class="fa fa-instagram"></i>
                </li>
                <li>
                  <i class="fa fa-whatsapp"></i>
                </li>
                <li>
                  <i class="fa fa-youtube"></i>
                </li>
                <li>
                  <i class="fa fa-twitter"></i>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!------------COPYRIGHT Section COPYRIGHT Section ----------->
      <div class="container ">
        <div class="row copyright">
          <div class="col-md-6">
            <p>@ All Copy Right By Dezven Company</p>
          </div>
          <div class="col-md-6">
            <ul>
              <li>
                <a href="#">Service</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
              <li>
                <a href="#">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    Footer Section CSS Code. Copy The Code And Paste in style.css

    style.css
    /*******FOOTER Section FOOTER Section********/
    .footer-section {
    	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 16%) 0%, rgba(0, 0, 0, 0.7) 100%), url(../image/footer.jpg);
    	background-repeat: no-repeat;
    	padding: 100px 0px 0px 0px;
    	font-family 'Raleway';
    	background-size: cover;
    }
    .footer-section h2 {
    	margin-top: 20px;
    	margin-bottom: 20px;
    }
    .footer-section h4 {
    	font-size: 30px;
    	margin-top: 30px;
    	margin-bottom: 30px;
    	font-family Norican, sans-serif;
    }
    .border-bottoms {
    	background: #fff;
    	height: 2px;
    	width: 157px;
    	position: absolute;
    	margin: auto;
    	margin-top: 0px;
    }
    .footer-menu ul {
    	padding: 0px;
    }
    .footer-menu li {
    	width: 100%;
    	float: left;
    	list-style: none;
    }
    .footer-menu li a {
    	text-decoration: none;
    	border-right: 1px solid lightgrey;
    	padding: 2px 20px;
    	color: #111;
    }
    .contact-info ul {
    	list-style: none;
    	padding: 0px;
    	width: 100%;
    	float: left;
    }
    .contact-info ul li {
    	float: left;
    	padding-right: 20px;
    	font-size: 22px;
    }
    /*******COPYRIGHT Section COPYRIGHT  Section*********/
    .copyright {
    	border-top: 1px solid lightgrey;
    	margin: 0px;
    	padding: 0px;
    	margin-top: 50px;
    	padding-top: 20px;
    	padding-bottom: 30px;
    }
    .copyright p {
    	margin-top: 10px;
    }
    .copyright ul {
    	list-style: none;
    	float: right;
    	margin-top: 10px;
    }
    .copyright ul li {
    	float: left;
    }
    .copyright ul li a {
    	border-right: 1px solid lightgrey;
    	padding: 0px 10px;
    	text-decoration: none;
    	color: #fff;
    }
    .copyright ul li:last-child a {
    	border-right: none;
    }
    @media screen and (max-width:500px) {
    	.footer-section {
    		text-align: center
    	}
    	.footer-section table {
    		flex-direction: column;
    		align-items: center;
    		display: flex;
    		justify-content: center;
    	}
    	.contact-info {
    		flex-direction: column;
    		align-items: center;
    		display: flex;
    		justify-content: center;
    	}
    	.contact-info ul {
    		width: auto;
    	}
    }

    Output Of My Footer Section

    Footer Section of Ecommerce Website Using HTML CSS And Bootstrap

    You can completely copy the ecommerce website using html css and javascript source code from our website. You can use it for personal use only. This is premium level Ecommerce website using html css and bootstrap example free.

    Post your comment

    For any query, information or suggestion, post your comment below. We love to hear from your.

    • George

      great tutorial

    • Ralph

      thank yo so much...

    • arpit

      very nice tutorial

    • Amit rai

      very professional responsive ecommerce website using html and css

    • Joe Logan

      Easy to understand, appreciate, highly recommended

    • Nicholas Eric

      Great Work ... Very Nice Website

    • Michael

      perfect ecommerce website using bootstrap