Ecommerce Website Using HTML CSS And Bootstrap
Preview Link
Quick Info
| Youtube : | https://youtu.be/oVytzcReiVU |
| Views : | 30064 |
| 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.
Table of contents
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----->
<>
<>
<>Project<>
<>
<>
<>
<>
<>
<>
<>
<>
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
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Home<>
<>
<>
<>Category<>
<>
<>
<>Menu List<>
<>
<>
<>Our Services<>
<>
<>
<>Testimonial<>
<>
<>
<>Contact Us<>
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<><>
<>
<>
<><>
<>
<>
<>
<>
<>
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
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------->
<>
<>
<>
<><>
<>
<>
<>Best Choice<>
<>ITALIAN PIZZA<>
<>
<>Order Now<>
<>Full Menu<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
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
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-------->
<>
<>
<>
<>
<>
<>
<>
<>SAVE 30%<>
<>HamBurger"S Combo<>
<>Web design refers to the design refers<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>SAVE 30%<>
<>Burg"S Combo<>
<>Web design refers to the design refers<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>SAVE 30%<>
<>Pizza"S Combo<>
<>Web design refers to the design refers<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>SAVE 30%<>
<>We Make The Best Restaurant!<>
<>Lorem Ipsum is simply dummy text how to make ecommerce website industry. Web design refers to the design refers<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>SAVE 30%<>
<>Why Taste Our Best Pizza Now?<>
<>Lorem Ipsum is simply of how to build an ecommerce website from scratch. Web design refers to the design refers<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
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
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--------->
<>
<>
<>
<>
<>
<>
<>Burger<>
<>19 Restaurants Products<>
<>
<>
<>
<>
<>
<>Burger<>
<>19 Restaurants Products<>
<>
<>
<>
<>
<>
<>Shakes<>
<>9 Restaurants Products<>
<>
<>
<>
<>
<>
<>Burger<>
<>24 Restaurants Products<>
<>
<>
<>
<>
<>
<>Pasta<>
<>44 Restaurants Products<>
<>
<>
<>
<>
<>
<>Pizza<>
<>14 Restaurants Products<>
<>
<>
<>
<>
<>
<>Pizza<>
<>14 Restaurants Products<>
<>
<>
<>
<>
<>
<>Pizza<>
<>14 Restaurants Products<>
<>
<>
<>
<>
<>
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
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-------->
<>
<>
<>
<>
<>
<>Our Top Sell<>
<>Checkout Our Top Sell Burger<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>
<>BEEF<>
<>Bacon Cheese Burger<>
<>
<>
<>$6.00 <>
<>220gr/600cal<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>BEEF<>
<>Bacon Cheese Burger<>
<>
<>
<>$6.00 <>
<>220gr/600cal<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>BEEF<>
<>Bacon Cheese Burger<>
<>
<>
<>$6.00 <>
<>220gr/600cal<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>BEEF<>
<>Bacon Cheese Burger<>
<>
<>
<>$6.00 <>
<>220gr/600cal<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>BEEF<>
<>Bacon Cheese Burger<>
<>
<>
<>$6.00 <>
<>220gr/600cal<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>BEEF<>
<>Bacon Cheese Burger<>
<>
<>
<>$6.00 <>
<>220gr/600cal<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>BEEF<>
<>Bacon Cheese Burger<>
<>
<>
<>$6.00 <>
<>220gr/600cal<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>BEEF<>
<>Bacon Cheese Burger<>
<>
<>
<>$6.00 <>
<>220gr/600cal<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>
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
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 --------->
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Fastest Delivery<>
<>Your Favorite Pizza, <> on the Way! <>
<>Web design refers to the design of websites that Delivery in are displayed on the internet.<>
<>
<>
<>
<><>
<>Delivery in 30 minutes.<>
<>
<>
<>
<>
<><>
<>Delivery in 30 minutes.<>
<>
<>
<>
<>
<><>
<>Delivery in 30 minutes.<>
<>
<>
<>
<>
<>
<>
<>
<>
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
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--------->
<>
<>
<>
<>
<>
<>Our Testimonials<>
<>What Our Client Say's<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ecommerce website using html css and javascript source code.<>
<>
<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ecommerce website using html css and javascript source code github.<>
<>
<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt online shopping website using html and css source code.<>
<>
<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et simple shopping website using html and css.<>
<>
<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>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.<>
<>
<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<>
<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<>
<>
<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>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.<>
<>
<>
<>
<>
<>Nancy Bayers<>
<> Founder & CEO At Dezven<>
<>
<>
<>
<>
<>
<>
<>
<>
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
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------->
<>
<>
<>
<>
<>
<>A Moments Of Delivered <> On Right Time & Place <>
<>90-9893-304-801<>
<><>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Our Company<>
<>
<>
<>
<>
<>Home<>
<>Menu<>
<>About us<>
<>restaurant<>
<>
<>
<>
<>
<>
<>
<>Quick Order<>
<>Fast Food<>
<>Blogging<>
<>Contact Us<>
<>
<>
<>
<>
<>
<>
<>Our Company<>
<>
<>
<>Mon-Fri...................<>
<>8:00 am-12:00 pm<>
<>
<>
<>Saturday.................<>
<>8:00 am-12:00 pm<>
<>
<>
<>Sunday....................<>
<>Closed<>
<>
<>
<>
<>
<>Contact Us<>
<>
<>
<>
<><>
<> 89, Ring Road, New Delhi , India
<>
<>
<>
<><>
<> +91 9893 304 801
<>
<>
<>
<><>
<>
<>
<><>
<>
<>
<><>
<>
<>
<><>
<>
<>
<>
<>
<>
<>
<!------------COPYRIGHT Section COPYRIGHT Section ----------->
<>
<>
<>
<>@ All Copy Right By Dezven Company<>
<>
<>
<>
<>
<>Service<>
<>
<>
<>Blog<>
<>
<>
<>Contact<>
<>
<>
<>
<>
<>
<>
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
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.
Nice one
great tutorial
thank yo so much...
very nice tutorial
very professional responsive ecommerce website using html and css
Easy to understand, appreciate, highly recommended
Great Work ... Very Nice Website
perfect ecommerce website using bootstrap