In this post, I’m going to design small ecommerce website using css framework bootstrap. You can use this source code in your project. Source code is given below:
index.html file
<!-- HTML CSS Bootstrap Tutorial
This is ecommerce website source code Which is designed by Madu Web Tech (YouTube Channel). All right reserved by Madu Web Tech 2021.
Fore more Tutorials Visit Madu Web Tech YouTube Channel-->
<!DOCTYPE html>
<html>
<head>
<title>Shop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#product-div">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-div">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slider/slide3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<button class="btn btn-primary">Shop</button>
</div>
</div>
<div class="carousel-item">
<img src="images/slider/slide2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<button class="btn btn-success">Shop</button>
</div>
</div>
<div class="carousel-item">
<img src="images/slider/slide1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<button class="btn btn-warning">Shop</button>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container pb-5" id="product-div">
<div class="row justify-content-center">
<h4 class="text-center title-div">
<span class="bg-warning div-title" id="contact-div">Products</span>
</h4>
<div class="col-md-4 col-sm-6 mb-3 mt-3">
<div class="card">
<div class="card-header">
<img src="images/slider/slide3.jpg" class="card-img-top" alt="...">
</div>
<div class="card-body">
<p class="text-center m-0">Product Title</p>
<p class="text-center fw-bold m-0">
<span style="color:orange">Price</span>
<span style="font-family: Arial;color:red">28$</span></p>
<div class="d-flex"><button class="btn btn-primary btn-sm m-auto" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Quick View</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-3 mt-3">
<div class="card">
<div class="card-header">
<img src="images/slider/slide3.jpg" class="card-img-top" alt="...">
</div>
<div class="card-body">
<p class="text-center m-0">Product Title</p>
<p class="text-center fw-bold m-0">
<span style="color:orange">Price</span>
<span style="font-family: Arial;color:red">28$</span></p>
<div class="d-flex"><button class="btn btn-primary btn-sm m-auto" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Quick View</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-3 mt-3">
<div class="card">
<div class="card-header">
<img src="images/slider/slide3.jpg" class="card-img-top" alt="...">
</div>
<div class="card-body">
<p class="text-center m-0">Product Title</p>
<p class="text-center fw-bold m-0">
<span style="color:orange">Price</span>
<span style="font-family: Arial;color:red">28$</span></p>
<div class="d-flex"><button class="btn btn-primary btn-sm m-auto" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Quick View</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-3 mt-3">
<div class="card">
<div class="card-header">
<img src="images/slider/slide3.jpg" class="card-img-top" alt="...">
</div>
<div class="card-body">
<p class="text-center m-0">Product Title</p>
<p class="text-center fw-bold m-0">
<span style="color:orange">Price</span>
<span style="font-family: Arial;color:red">28$</span></p>
<div class="d-flex"><button class="btn btn-primary btn-sm m-auto" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Quick View</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-3 mt-3">
<div class="card">
<div class="card-header">
<img src="images/slider/slide3.jpg" class="card-img-top" alt="...">
</div>
<div class="card-body">
<p class="text-center m-0">Product Title</p>
<p class="text-center fw-bold m-0">
<span style="color:orange">Price</span>
<span style="font-family: Arial;color:red">28$</span></p>
<div class="d-flex"><button class="btn btn-primary btn-sm m-auto" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Quick View</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-3 mt-3">
<div class="card">
<div class="card-header">
<img src="images/slider/slide3.jpg" class="card-img-top" alt="...">
</div>
<div class="card-body">
<p class="text-center m-0">Product Title</p>
<p class="text-center fw-bold m-0">
<span style="color:orange">Price</span>
<span style="font-family: Arial;color:red">28$</span></p>
<div class="d-flex"><button class="btn btn-primary btn-sm m-auto" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Quick View</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">
Product title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!--Section: Block Content-->
<div class="row">
<div class="col-6">
<div class="pop-img" data-bs-toggle="modal" data-bs-target="#staticBackdropimg">
<img src="images/slider/slide3.jpg">
</div>
<div class="pop-gallery">
<div><img src="images/slider/slide3.jpg"></div>
<div><img src="images/slider/slide3.jpg"></div>
<div><img src="images/slider/slide3.jpg"></div>
<div><img src="images/slider/slide3.jpg"></div>
</div>
</div>
<div class="col-6">
<h6 class="text-muted">Name</h6>
<p>
<span class="text-center fw-bold m-0">
<span style="color:orange">Price</span>
<span style="font-family: Arial;color:red">28$</span></span>
<br>
<small>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</small>
</p>
</div>
</div>
<!--Section: Block Content-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add to Cart</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade imgModal" id="staticBackdropimg" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" id="md">
<div class="modal-content" id="staticBackdropLabel">
<button type="button" class="btn-close d-flex m-auto" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div id="big-img">
<img src="images/slider/slide3.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid pt-5 pb-5 about" id="about-div">
<div class="row">
<h4 class="text-center title-div">
<span class="bg-warning div-title" id="contact-div">About</span>
</h4>
<div class="col-md-8 m-auto">
<p id="about-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="container-fluid contact pb-5 pt-5" id="contact">
<div class="row">
<div class="col-md-8 m-auto">
<h4 class="text-center title-div">
<span class="bg-warning div-title" id="contact-div">Contact</span>
</h4>
</div>
</div>
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-8 col-md-12 m-auto form-box">
<div>
<h4 class="text-center pt-4">
Get in Touch with Us
</h4>
</div>
<form class="p-5" id="contact-form">
<div id="email-field">
<input required="" autocomplete="off" class="form-control" type="email" name="" placeholder="Email"
id="email_value" onkeyup="email()">
<span id="icons">
<i class="fa fa-check-circle"></i>
<i class="fa fa-exclamation-circle"></i>
</span>
</div>
<div id="user-field">
<input required="" autocomplete="off" class="form-control" type="text" name="" placeholder="Subject"
id="user_value" onkeyup="username()">
<span id="icons">
<i class="fa fa-check-circle"></i>
<i class="fa fa-exclamation-circle"></i>
</span>
</div>
<div id="pass-field">
<textarea required="" rows="5" class="form-control" name=""id="pass_value" onkeyup="msg()" placeholder="Type Message"></textarea>
<span id="icons">
<i class="fa fa-check-circle"></i>
<i class="fa fa-exclamation-circle"></i>
</span>
</div>
<div>
<button class="btn btn-success btn-sm">Send Message</button>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="validation.js"></script>
</div>
<div class="container-fluid ml-0 mr-0 p-0 mb-0">
<p class="bg-dark text-light text-center p-3 m-0">
Copyright © 2021 | Designed by MaduWebTech
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
</html>style.css file
*{margin: 0;padding: 0;box-sizing: border-box;}
body{
font-family: 'Poppins', sans-serif !important;
}
.nav-link{
color: #fff !important;
}
.bg-light{
background-color: #fff !important;
}
.navbar-brand {
color: #fff !important;
font-weight: bolder !important;
}
.navbar-brand:hover{
color:gold !important;
}
.bg-warning{
background-color: #e40e88 !important;
color:#fff !important;
}
.navbar{
padding-top: .7rem !important;
padding-bottom: .7rem !important;
border-bottom: 3px solid pink;
}
.navbar ul li a:hover{
color: gold !important;
}
.mx-auto {
margin-right: unset !important;
}
.carousel-item img{
width: 100%;
height: 100%;
object-fit: cover;
}
.card-header{
height: 14rem;
padding: 0 !important;
}
.card-header img{
height: 100%;
width: 100%;
object-fit: fill;
cursor: pointer;
}
.card-header img:hover{
transition: 0.3s;
transform: scale(1.1);
}
.title-div{
margin-top: 50px;
margin-bottom: 20px;
}
.div-title{
padding: 5px 50px 5px 50px;
border-radius: 10px;
}
.pop-img{
height: 12rem;
cursor: pointer;
}
.pop-img img{
cursor: pointer;
border-radius: 5px;
height: 100%;width: 100%;object-fit: fill;
}
.pop-gallery{
background-color: #eee;
margin-top: 10px;
padding: 10px;
}
.pop-gallery div{
width: 25%;
margin: 5px;
}
.pop-gallery div img{
height: 100%;width: 100%;object-fit: fill;
cursor: pointer;
}
.pop-gallery div img:hover{
transition: 0.3s;
transform: scale(1.5);
}
.pop-gallery{
display: flex;
justify-content: space-around;
}
#big-img{
width: 100%;
padding: 0 10px 20px 20px;
}
#big-img img{
height: 100%;
width: 100%;
object-fit: fill;
}
#staticBackdropimg .container-fluid{
padding-left: 0 !important;
margin-left: 0 !important;
margin-right: 20px;
}
#md{
padding: 2px;
background-color: hotpink;
}
#about-text{
text-align: justify;
}
.success input,.success textarea,.success textarea:focus, .success input:focus{
outline: none;
border:1px solid #292;
box-shadow: none;
}
.fail input,.fail textarea,.fail textarea:focus,.fail input:focus{
outline: none;
border:1px solid red;
box-shadow: none;
}
.success #icons i.fa-check-circle{
color:#292;
visibility: visible;
}
.fail #icons i.fa-exclamation-circle{
color:red;
visibility: visible;
}
.success,.fail{
position: relative;
}
#icons i{
position: absolute;
right: 5px;
top: 10px;
visibility: hidden;
}
#user-field,#email-field,#pass-field,#cpass-field{
margin-bottom: 10px;
}
.form-box{
box-shadow: 0 0 2px 0 #222;
border-radius: 5px;
background-color: #11b0e9;
}
.contact{
background: url(images/contact.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.about{
height: 400px;
height: 100%;width: 100%;
background: url(images/about.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
@media (max-width: 767px)
{
#contact-form{
padding: 10px 2px 10px 2px !important;
}
.carousel-inner,.carousel-item{
height: 55vh;
}
}
@media (min-width: 768px)
{
.carousel-inner,.carousel-item{
height: 70vh;
}
}
@media (min-width: 992px)
{
.carousel-inner,.carousel-item{
height: 80vh;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
}validation.js file
function username(){
var a=document.getElementById('user_value').value;
var b=/^[A-Za-z ]{3,30}$/;
if (b.test(a)) {
document.querySelector("#user-field").classList="success";
}
else
{
document.querySelector("#user-field").classList="fail";
}
}
function email(){
var a=document.getElementById('email_value').value;
var b=/^[A-Za-z._]{2,}@[A-Za-z]{3,}[.]{1}[A-Za-z.]{2,8}$/;
if (b.test(a)) {
document.querySelector("#email-field").classList="success";
}
else
{
document.querySelector("#email-field").classList="fail";
}
}
function msg(){
var a=document.getElementById('pass_value').value;
var b=/^[A-Za-z ]{2,300}$/;
if (b.test(a)) {
document.querySelector("#pass-field").classList="success";
}
else
{
document.querySelector("#pass-field").classList="fail";
}
}Media: Download
Download Complete Project: