How To Create Shopping Website Using HTML And CSS

Preview Link
Quick Info
Youtube : https://youtu.be/tAA5nkksTqg
Views : 101504
Skills : HTML, CSS
Category : Web Design
Tag : Shopping Website, Ecommerce Website, Online Shopping Website

In This Tutorial We Are going to Learning How To Create Shopping Website Using HTML And CSS. In this Shopping website we are not going to use javascript, we will design website using only HTML and CSS only.

Section We Are Going To Design In Our Shopping Website using HTML and CSS

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

In this tutorial we are going to design these three section with the help of their subsections. Subsections are created as per the website content.

Header

  • Top header
  • Logo And Search Panel
  • Main menu

Main Body

  • Slider section
  • Adv Banner
  • Product Section
  • Featured Section

Footer

  • Quick link
  • Contact information
  • Social media link
  • Copyright information

Video Tutorial

You see full coding video of designing Shopping Website Using HTML And CSS to understand easily. You can also watch the video tutorial below.

Let's Start Coding

Firstly, we will create the folder on dekstop, my folder name is ecommerce. Inside ecommerce folder, we will create two sub folder : - 1) css and 2) images

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

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

Now, Let's start coding with writing basic meta code under head section in index.html, and link the style.css file to index.html file

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

index.html
<!---------- Meta HTML Starts --------->
<html>
   <head>
      <title>Website Site</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
<!---------- Meta HTML Ends --------->

Common CSS. Copy and paste the code in style.css

style.css
/********** Common CSS Starts **********/  
html, body {
     font-family Roboto, sans-serif, arial;
     font-size: 14px;
     color: #242424;
     font-weight: 400;
}
 html {
     -webkit-text-size-adjust:100%;
     -ms-text-size-adjust:100%;
     font-size:10px;
     -webkit-tap-highlight-color:transparent 
}
 * {
     margin:0px;
     padding:0px;
     -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
     margin:0;
     padding:0;
     outline:0 
}
 .container {
     width:1150px;
     margin:0px auto;
     display:table;
}
 .width-100 {
     width:100%;
     float:left;
}
 .width-50 {
     width:50%;
     float:left;
}
 .width-25 {
     width:25%;
     float:left;
}
 .width-75 {
     width:75%;
     float:left;
}
 .width-80 {
     width:80%;
     float:left;
}
 .width-60 {
     width:60%;
     float:left;
}
 .width-40 {
     width:40%;
     float:left;
}
 .width-33 {
     width:33%;
     float:left;
}
 .width-30 {
     width:30%;
     float:left;
}
 .width-20 {
     width:20%;
     float:left;
}
 .main-section {
     width:100%;
     float:left;
     padding-top:80px;
     padding-bottom:80px;
}
 .bg-grey {
     background:#f0f3fa;
}
 .heading-section {
     font-size: 25px;
     text-align: center;
}
 .heading-section span {
     color: #787eff;
}
 .subhead-section {
     font-size: 16px;
     text-align: center;
     margin-bottom: 40px;
}
/********** Common CSS Ends **********/

2) Now, we will design Top Header Section.

In our top header section, we are having content. we are using content are written in paragraph tag.

Please copy and paste the below code to design Top header section

Top Header Section HTML code. Copy this code and paste in index.html file

index.html
<!---------- Top Header HTML Code Starts --------->
<div class="width-100 top-header">
  <div class="container">
    <div class="width-50">
      <p class="head1p1 headquote">Dezven: India's Fastest Online Shopping Destination </p>
    </div>
    <div class="width-50">
      <ul class="head1ul cashback-sect">
        <li>
          <i class="fa fa-users" aria-hidden="true"></i>
          <a class="head1mr" href="#">Refer Your Friend And Earn Rs. 500 Cashback</a>
        </li>
        <li>
          <i class="fa fa-mobile" aria-hidden="true"></i>
          <a href="#"> Download App</a>
        </li>
      </ul>
      </p>
    </div>
  </div>
</div>
<!---------- Top Header HTML Code Ends --------->

Top Header section CSS code. Copy the code and paste in style.css

style.css
/********** Top Header CSS Code Starts  **********/
.top-header {
  background: #f13f31;
  padding: 8px 0px;
  border-bottom: 1px solid #3131315e;
}
.head1p1 {
  font-size: 12px;
  color: #ffffff;
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.head1ul {
  list-style: none;
  float: right;
}
.head1ul li {
  float: left;
  padding-left: 10px;
}
.head1ul li a {
  font-size: 12px;
  color: #ffffff;
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.head1ul li i {
  font-size: 15px;
  color: #ffffff;
}
/********** Top Header CSS Code Ends  **********/

Output Of Top Header Section

ecommerce website top header section

3) Now, we will design Logo And Search Panel section.

In our logo and search panel section, we are having logo and search button. For Creating logo we have img tag and for search button we are using button tag.

Please copy and paste the below code to design Logo and Search Panel section

Logo and Search Panel section HTML code. Copy this code and paste in index.html file

index.html

<!---------- Logo and Search Panel HTML Code Starts --------->
<div class="width-100 search-panel">
  <div class="container">
    <div class="width-20">
      <img src="images/logo.png" class="logo">
    </div>
    <div class="width-50">
      <input class="search-textbox" type="text" Placeholder="Search for products, brand and more">
      <button class="search-button">
        <i class="fa fa-search" aria-hidden="true"></i>
      </button>
    </div>
    <div class="width-30">
      <ul class="cart-sect">
        <li>
          <i class="fa fa-heart-o" aria-hidden="true"></i>
          <a class="head1mr" href="#">Whislist</a>
        </li>
        <li>
          <i class="fa fa-user-circle-o" aria-hidden="true"></i>
          <a href="#">Login & Signup</a>
        </li>
        <li>
          <i class="fa fa-shopping-cart" aria-hidden="true"></i>
          <a href="#">Cart (0)</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!---------- Logo and Search Panel HTML Code Ends --------->

Logo and Search Panel section CSS code. Copy the code and paste in style.css

style.css
/**********  Logo and Search Panel CSS Code Starts  **********/
.search-panel {
  background: #f13f31;
  padding: 12px 0px;
}
.search-textbox {
  padding-left: 16px;
  height: 40px;
  width: 80%;
  border: 1px solid #fff;
  float: left;
}
.search-button {
  height: 42px;
  width: 55px;
  border: none;
  background: white;
  float: left;
}
.search-button i {
  color: #f13f31;
}
.cart-sect {
  list-style: none;
  float: right;
  margin-top: 8px;
}
.cart-sect li {
  float: left;
  padding: 0px 6px;
}
.cart-sect li a {
  font-size: 14px;
  color: #ffffff;
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.cart-sect li i {
  font-size: 14px;
  color: #ffffff;
}
/**********  Logo and Search Panel CSS Code Ends  **********/

Output Of Logo And Search Panel Section

ecommerce website logo and search panel section

4) Now, we will design Main Menu of ecommerce website in html and css.

In our ecommerce website, Main Menu Section we are having content which we are going to design using ul tag. For Creating nav bar, we have ul tag.

Please copy and paste the below code to design Main Menu Section

Main Menu Section HTML code. Copy this code and paste in index.html file

index.html

<!---------- Main Menu HTML Code Starts --------->
<div class="width-100">
  <div class="container">
    <ul class="main-menu">
      <li>
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">iPhone</a>
      </li>
      <li>
        <a href="#">Samsung</a>
      </li>
      <li>
        <a href="#">Nokia</a>
      </li>
      <li>
        <a href="#">Motorola</a>
      </li>
      <li>
        <a href="#">iPad</a>
      </li>
      <li>
        <a href="#">Accessories</a>
      </li>
    </ul>
  </div>
</div>
<!---------- Main Menu HTML Code Ends --------->

Main Menu section CSS code. Copy the code and paste in style.css

style.css
/**********  Main Menu CSS Code Starts  **********/
.main-menu {
  list-style: none;
}
.main-menu a {
  font-weight: 500;
  color: #2b304a;
  font-size: 17px;
  font-family Roboto, sans-serif, arial;
  text-decoration: none;
}
.main-menu li {
  float: left;
  padding: 12px 20px;
}
/**********  Main Menu CSS Code Ends  **********/

Output Of Main Menu Section of ecommerce website using html and css

ecommerce website main menu section

5) Now, we will design slider section of website using html and css.

Now we are going to create slider. In this section we have image at a particular width. For creating image we are using img tag

Please copy and paste the below code to design Slider section

Slider section HTML code. Copy this code and paste in index.html file

index.html
<!---------- Slider HTML Code Starts --------->
<div class="width-100">
  <img class="wimg100 slider" src="images/slider-1.jpg">
</div>
<!---------- Slider HTML Code Ends --------->

Slider section CSS code. Copy the code and paste in style.css

style.css

This is no requirement CSS

Output Of Slider Section

ecommerce website slider section

6) Now, we will design Banner section.

In Banner section shopping website, we are having image at a particular width. For Creating Banner that we are using img tag.

Please copy and paste the below code to design Banner section

Banner section HTML code. Copy this code and paste in index.html file

index.html
<!---------- Banner HTML Code Starts --------->
<div class="width-100 margin-top-50">
  <div class="container">
    <div class="width-33">
      <div class="banner-list">
        <a href="#">
          <img class="wimg100" src="images/banner-1.jpg">
        </a>
      </div>
    </div>
    <div class="width-33">
      <div class="banner-list">
        <a href="#">
          <img class="wimg100" src="images/banner-2.jpg">
        </a>
      </div>
    </div>
    <div class="width-33">
      <div class="banner-list">
        <a href="#">
          <img class="wimg100" src="images/banner-3.jpg">
        </a>
      </div>
    </div>
  </div>
</div>
<!---------- Banner HTML Code Ends --------->

Banner section CSS code. Copy the code and paste in style.css

style.css

This is no requirement CSS

Output Of Banner Section Of shopping website

ecommerce website banner section

In our Product section, we are having images, icons, border and content. For Creating images we have img tag and for icons we have font awesome icons.

Please copy and paste the below code to design Product section

Product Section HTML code. Copy this code and paste in index.html file

index.html
<!-- Product-Section HTML Code STARTS -->
<div class="width-100 margin-top-50">
  <div class="container">
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-1.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-2.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-3.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-4.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-5.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-6.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-7.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-8.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-8.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-10.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-11.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-12.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-1.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-2.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-3.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
    <div class="width-25">
      <div class="product-section">
        <div class="product-border">
          <div class="product-img-center">
            <a href="#">
              <img class="product-img" src="images/product-4.png">
            </a>
          </div>
          <div>
            <p class="product-name">
              <a href="#">New iphone 11 Max Pro 64 GB</a>
            </p>
            <p class="product-rating">
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <i class="fa fa-star" aria-hidden="true"></i>
              <span>(5)</span>
            </p>
            <p class="product-price">
              <span class="product-discounted-price">Rs.549.00</span>
              <span class="product-original-price">Rs.554</span>
              <span class="product-discount">90%OFF</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!---------- Product-Section HTML Code Ends --------->

Product Section CSS code. Copy the code and paste in style.css

style.css
/**********  Product-Section CSS Code Starts  **********/
.product-section {
	padding-left:15px;
	padding-right:15px;
	margin-bottom:20px;
}
.product-img {
	width:auto;
	height:270px;
}
.product-img-center {
	text-align:center;
}
.product-border {
	border: 1px solid #d1d1d1;
	padding:20px;
}
.product-name a {
	color: #232b33;
	text-decoration: none;
	font-size: 17px;
	font-family Roboto, sans-serif, arial;
}
.product-rating {
	color: #FFC315;
	font-size: 14px;
	padding-top: 6px;
}
.product-rating span {
	font-weight: 600;
	color: #3c3b3b8c;
	font-size: 12px;
	font-family Roboto, sans-serif, arial;
}
.product-discounted-price {
	color: #333;
	font-size: 18px;
	letter-spacing: 0.1px;
	font-weight: 600;
	font-family Roboto, sans-serif, arial;
}
.product-original-price {
	color: #6f6f6f;
	text-decoration: line-through;
	font-size:14px;
	font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.product-discount {
	border: 1px solid #ccc;
	background: #fff;
	display: inline-block;
	font-size: 10px;
	color: #999;
	padding: 5px;
	border-radius: 1px;
	float:right;
}
.product-price {
	margin-top:15px;
}
/**********   Product-Section CSS Code Ends  **********/

Output Of Product Section

ecommerce website product section

8) Now, we will design Featured section.

In our Featured section, we are having content, icons and border. For Creating icons, we are using font awesome icons and for content we are using paragraph tag.

Please copy and paste the below code to design featured section

Featured Section HTML code. Copy this code and paste in index.html file

index.html
<!-- Featured-Section HTML Code STARTS -->
<div class="width-100 margin-top-50 feature-sect">
  <div class="container">
    <div class="width-20 featured-padding">
      <div class="featured-border">
        <div class="width-20 featured-content">
          <i class="fa fa-truck" aria-hidden="true"></i>
        </div>
        <div class="width-80 featured-content margin-top-8">
          <h4>Instant Delivery</h4>
          <p>One day shipping on all order</p>
        </div>
      </div>
    </div>
    <div class="width-20">
      <div class="featured-border">
        <div class="featured-bord">
          <div class="width-20 featured-content">
            <i class="fa fa-circle-o" aria-hidden="true"></i>
          </div>
          <div class="width-80 featured-content margin-top-8">
            <h4>ONLINE SUPPORT 24/7</h4>
            <p>Support online 24 hours a day</p>
          </div>
        </div>
      </div>
    </div>
    <div class="width-20">
      <div class="featured-border">
        <div class="width-20 featured-content">
          <i class="fa fa-life-ring" aria-hidden="true"></i>
        </div>
        <div class="width-80 featured-content margin-top-8">
          <h4>TRY AND BUY</h4>
          <p>Try Product, If you like it then buy it</p>
        </div>
      </div>
    </div>
    <div class="width-20">
      <div class="featured-border">
        <div class="width-20 featured-content">
          <i class="fa fa-gift" aria-hidden="true"></i>
        </div>
        <div class="width-80 featured-content margin-top-8">
          <h4>INSTANT DISCOUNT</h4>
          <p>Upto 50% instant discount on all product</p>
        </div>
      </div>
    </div>
    <div class="width-20">
      <div class="featured-border">
        <div class="width-20 featured-content">
          <i class="fa fa-credit-card" aria-hidden="true"></i>
        </div>
        <div class="width-80 featured-content margin-top-8">
          <h4>SECURE PAYMENT</h4>
          <p>All cards accepted</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!---------- Featured-Section HTML Code Ends --------->

Featured Section CSS code. Copy the code and paste in style.css

style.css
/**********  Feature-Section CSS Code Starts  **********/
.featured-content i {
	font-size: 37px;
	padding: 7px 0 0 10px;
	color: #eb372a;
}
.featured-content h4 {
	color: #666;
	font-size: 14px;
	margin: 0 0 5px;
	text-transform: uppercase;
	font-weight:500;
	font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.featured-content p {
	font-size: 13px;
	color:#333333;
	font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.margin-top-8 {
	margin-top:8px;
}
.featured-border {
	border: 1px solid #ebebeb;
	width:100%;
	float:left;
	padding:15px 0px;
}
/**********   Feature-Section CSS Code Ends  **********/

Output Of Feature Section

ecommerce website feature section

9) Now, we will design Footer section of Shopping Website Using HTML And CSS.

In our footer section, we are having our Account, quick links, social media icons section. For Creating footer section we have ul, a(anchor) tag ..

Please copy and paste the below code to design Footer section

Footer Section HTML code. Copy this code and paste in index.html file

index.html
<!-- Footer-Section HTML Code STARTS -->
<div class="width-100 margin-top-50 footer">
  <div class="container">
    <div class="width-25">
      <h2 class="quicklink-heading">Account Detail</h2>
      <ul class="quicklink-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Search</a></li>
        <li><a href="#">Cart</a></li>
        <li><a href="#">Checkout</a></li>
      </ul>
    </div>
    <div class="width-25">
      <h2 class="quicklink-heading">Quick Link</h2>
      <ul class="quicklink-menu">
        <li><a href="#">My Profile</a></li>
        <li><a href="#">Change Password</a></li>
        <li><a href="#">Order History</a></li>
        <li><a href="#">My Whislist</a></li>
        <li><a href="#">My Cashback</a></li>
      </ul>
    </div>
    <div class="width-25">
      <h2 class="quicklink-heading">Quick Link</h2>
      <ul class="quicklink-menu">
        <li><a href="#">Login</a></li>
        <li><a href="#">Faq</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Download App</a></li>
        <li><a href="#">Refer & Earn Cashback</a></li>
      </ul>
    </div>
    <div class="width-25">
      <h2 class="quicklink-heading">GET IN TOUCH</h2>
      <ul class="get-in-touch">
        <li><i class="fa fa-envelope-o" aria-hidden="true"></i> E-MAIL:<a href="#" class="footer-e-mail"> info@dezven.com</a></li>
        <li><i class="fa fa-headphones" aria-hidden="true"></i> WHATS-APP: +91 -123 456 789</li>
        <li><i class="fa fa-fax" aria-hidden="true"></i> CONTACT NO.: +91 -(123)-4567890</li>
        <li><i class="fa fa-globe" aria-hidden="true"></i> WEBSITE:<a href="#" class="footer-website"> https://www.dezven.com</a></li>
      </ul>
      <ul class="social-media">
        <li><a href="#"><img src="images/icon-facebook.png"></a></li>
        <li><a href="#"><img src="images/icon-twitter.png"></a></li>
        <li><a href="#"><img src="images/icon-linkedin.png"></a></li>
        <li><a href="#"><img src="images/icon-instagram.png"></a></li>
      </ul>
    </div>
  </div>
</div>
<!---------- Footer-Section HTML Code Ends --------->

Footer Section CSS code. Copy the code and paste in style.css

style.css
/**********  Footer-Section CSS Code Starts  **********/
.footer {
  background: #232f3e;
  padding: 50px 0px;
}
.quicklink-menu {
  list-style: none;
  padding-left: 10px;
}
.quicklink-menu li a {
  color: #fff;
  line-height: 2.5;
  font-size: 15px;
  text-decoration: none;
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.social-media {
  list-style: none;
  margin-top: 10px;
}
.social-media li a img {
  width: 30px;
}
.social-media li {
  float: left;
  padding: 0px 8px;
}
.quicklink-heading {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 10px;
}
.get-in-touch {
  list-style: none;
  padding-left: 10px;
}
.get-in-touch li i {
  color: #ed372c;
  font-size: 20px;
}
.get-in-touch li {
  color: #fff;
  line-height: 2.5;
  font-size: 15px;
  text-decoration: none;
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.footer-e-mail {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.footer-website {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.footer2-bacbor {
  background: #232f3e;
  padding: 10px 0px;
  border-top: 1px solid #898989;
}
.footer2-content {
  font-size: 14px;
  color: #fff;
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}
/**********   Footer-Section CSS Code Ends  **********/

Output Of Footer Section

ecommerce website footer section

10) Now, we will design Footer Copyright section.

In our Footer bottom section, we are having content. For Creating content we have p tag and paragraph.

Please copy and paste the below code to design Footer bottom section

Footer Copyright section HTML code. Copy this code and paste in index.html file

index.html
<!-- Footer-bottom Section HTML Code STARTS -->
<div class="width-100 footer2-bacbor">
  <p class="footer2-content">Copyright © 2023, dezven.com. All Rights Reserved</p>
</div>
<!---------- Footer-bottom Section HTML Code Ends --------->

Footer Copyright section CSS code. Copy the code and paste in style.css

style.css
/**********  Footer-bottom Section CSS Code Starts  **********/
.footer2-bacbor {
  background: #232f3e;
  padding: 10px 0px;
  border-top: 1px solid #898989;
}
.footer2-content {
  font-size: 14px;
  color: #fff;
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}
/**********   Footer-bottom Section CSS Code Ends  **********/

Output Of Footer Bottom Section

ecommerce website footer bottom section
Post your comment
For any query, information or suggestion, post your comment below. We love to hear from your.
  • These codes are very interesting suitable to know them. Just keep it well and give us pdf notes of all the codes if is possible

  • This is very nice, wonderful and helpful

  • Thank you so much, this code made it easy to make my web project.

  • thank you

  • Thank you so much bro you made my work very simple,

  • Thank you so much!

  • I was SOOO IMPRESED with this code, keep it up!!!

  • post the code file

  • thank you this helped so much!

  • Thanks a lot it helped me with my web project. Thank you so much.

  • easy to understand. thank you

  • very easy tutorial to design shopping website using html and css

Subscribe Us On Youtube