| Youtube : | https://youtu.be/oVytzcReiVU |
| Views : | 17077 |
| 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.
In our ecommerce website, we are going to design three main section using bootstrap 5 : Header section, Main Body And Footer section
Header Section
Main Body Section
Footer Section
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
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 SECTION----->
<>
<>
<>Project<>
<>
<>
<>
<>
<>
<>
<>
<>
/*****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;
}
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.
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Home<>
<>
<>
<>Category<>
<>
<>
<>Menu List<>
<>
<>
<>Our Services<>
<>
<>
<>Testimonial<>
<>
<>
<>Contact Us<>
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<><>
<>
<>
<><>
<>
<>
<>
<>
<>
/******* 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;
}
}
In Banner section of ecommerce website using html css and bootstrap free, we are having content and image.
!---------BANNER Section BANNER Section------->
<>
<>
<>
<><>
<>
<>
<>Best Choice<>
<>ITALIAN PIZZA<>
<>
<>Order Now<>
<>Full Menu<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
/******** 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%;
}
}
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 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 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;
}
Now we are going to create category list section. In this section, image and category name
<!---------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 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;
}
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 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<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>
/*********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;
}
Now we are going to create Shipping Information section. In this section we have banner image and heading with short description
<!---------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.<>
<>
<>
<>
<>
<>
<>
<>
<>
/********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;
}
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.
<!---------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 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;
}
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 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 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;
}
}
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.
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