How To Make E-Commerce Shopping Website Using HTML

byPosted at
Ecommerce Shopping Website HTML

E-Commerce Shopping Website

Learn How To Make E-Commerce Shopping Website Using HTML And CSS. Make Online Store Shopping website Template Using HTML.
I will Create an eCommerce Website Just Using HTML And CSS. This is A Single Home Page Of an Ecommerce Shopping Website. You Create This Ecommerce Website By Following This Steps Which Is Given Blow.



How To Make E-Commerce Shopping Website Using HTML.

  1. 0.0 - 3.0 min : Intro
  2. 3.0 - 57.0 min: How To Make Shopping Website HTML


About This Tutorial

This Tutorial i will teach you how to create an eCommerce online store shopping website design using HTML. In this tutorial first, I will show you the design which I create in this tutorial Just using HTML and CSS. This Is Very Easy To Create this Shopping Website Design using HTML. After Creating the File I MAke the website Structure Using HTML And Design The Site Using cascading style sheets "CSS". I Make Five Sections, the first section is the main section, the second and 4th is the product section, 3rd is a brand section and 5th is the footer section. After Making Structure And Designing, I Make This Site Responsive in different screen sizes Using @media Query. I Hope You Like This Tutorial.

Follow These Steps:-

1) First You make two files, one is the "HTML" File And the second is the "CSS" File. Make "CSS" File In The "CSS" Folder.
2) After Make This Two File You will Link CSS File with Using "Link Tag" In HTML File.
3) Copy The HTML Code Which I Give Below, And Past This Code In Your HTML File.

HTML 

<html>
<head>
<meta charset="utf-8"/>
<meta content="IE-edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Shopping Site</title>
<!--web-icon------------------->
<link href="images/logo.png" rel="shortcut icon"/>
<!--stylesheet-------------------->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<!--FontAwesome-------->
<script crossorigin="anonymous" src="https://kit.fontawesome.com/70a642cd7c.js"></script>
</head>

<body>
	<!--main-section--------------->
	<section class="main">
	<!--logo------------->
		<div class="logo">
			<a href="#"><font>LO</font>GO</a>
		</div>
	<!--side-menu------------->
			<div class="side-box">
		<!--search------------->
		<div class="search">
		<!--icon----------->
		<i class="fas fa-search"></i>
		<input placeholder="Search" type="text" />
		</div>
	
		</div>
    <!--img--------->
    <div class="m-img">
    <img alt="" src="images/undraw_online_shopping_ga73.svg" />    
    </div>
	<!--text------------>
		<div class="m-text">
	<h1>Su<font>mm</font>er</h1>
	<h2>Collect<font>ion</font></h2>
	<!--btn------------>
	<a class="m-btn" href="#">Details</a>
	</div>
	<!--social-------->
		<div class="social">
	<a href="#"><i class="fab fa-facebook-f"></i></a>
	<a href="#"><i class="fab fa-twitter"></i></a>
	<a href="#"><i class="fab fa-instagram"></i></a>
	<a href="#"><i class="fab fa-youtube"></i></a>
	
	</div>
	
	</section>
	<section class="product">
		<!--heading------------>
	<div class="p-heading">
		<h3>Trendy <font>Arri</font>vals</h3>
	</div>
	<!--product-container----------------->
	<div class="product-container">
	<!--box-1------------>
	<div class="p-box">
	<img alt="1" src="images/b1.png" />
	<!--details--------->
	<p>Black Genuine Leather Bags.</p>
	<!--price--->
	<a class="price" href="#">$23.3</a>
	<!--buy-btn-->
	<a class="buy-btn" href="#">Add To Cart</a>
	</div>
	<!--box-2------------>
	<div class="p-box">
		<img alt="2" src="images/b2.png" />
		<!--details--------->
		<p>Black Genuine Leather Bags.</p>
		<!--price--->
		<a class="price" href="#">$30.3</a>
		<!--buy-btn-->
		<a class="buy-btn" href="#">Add To Cart</a>
		</div>
	<!--box-3------------>
	<div class="p-box">
		<img alt="3" src="images/b3.png" />
		<!--details--------->
		<p>Black Genuine Leather Bags.</p>
		<!--price--->
		<a class="price" href="#">$13.3</a>
		<!--buy-btn-->
		<a class="buy-btn" href="#">Add To Cart</a>
		</div>
	<!--box-4------------>
	<div class="p-box">
		<img alt="4" src="images/b4.png" />
		<!--details--------->
		<p>Black Genuine Leather Bags.</p>
		<!--price--->
		<a class="price" href="#">$33.3</a>
		<!--buy-btn-->
		<a class="buy-btn" href="#">Add To Cart</a>
		</div>
	<!--box-5------------>
	<div class="p-box">
		<img alt="5" src="images/b5.png" />
		<!--details--------->
		<p>Black Genuine Leather Bags.</p>
		<!--price--->
		<a class="price" href="#">$11.3</a>
		<!--buy-btn-->
		<a class="buy-btn" href="#">Add To Cart</a>
		</div>
	<!--box-6------------>
	<div class="p-box">
		<img alt="6" src="images/b6.png" />
		<!--details--------->
		<p>Black Genuine Leather Bags.</p>
		<!--price--->
		<a class="price" href="#">$43.3</a>
		<!--buy-btn-->
		<a class="buy-btn" href="#">Add To Cart</a>
		</div>
	</div>
	
	</section>
	<!--our-brand-section----------------->
	<section class="our-brand">
	<!--text-->
	<div class="brand-text">
		<!--heading-->
		<h3>Our Brand</h3>
		<h4>Small Shoes 2020 New Arrivals Mini Messenger <font>Classic Shoes</font> </h4>
		<!--details-->
		<p>In porttitor elit ac mi placerat hendrerit. Morbi accumsan, erat in ullamcorper consectetur, nisi erat efficitur eros, sagittis tristique odio turpis vitae dui. Vestibulum gravida est ut erat pretium, non pretium diam feugiat. Integer egestas suscipit lorem ac fermentum. Integer at mauris vitae justo sagittis dapibus. Pellentesque sit amet nisl vitae orci vehicula faucibus. Fusce et lat, feugiat est.</p>
	</div>
	<!--img-->
	<div class="brand-img"><img src="images/mobile.png" /></div>
	</section>
	<!--watches------------------->
	<section class="product">
		<!--heading------------>
	<div class="p-heading">
		<h3>Watch<font>es Show</font>case</h3>
	</div>

	<!--product-container----------------->
	<div class="product-container">
		<!--box-1------------>
		<div class="p-box">
		<img alt="1" src="images/w1.png" />
		<!--details--------->
		<p>Fashion Silver Chain Watch</p>
		<!--price--->
		<a class="price" href="#">$23.3</a>
		<!--buy-btn-->
		<a class="buy-btn" href="#">Add To Cart</a>
		</div>
		<!--box-2------------>
		<div class="p-box">
			<img alt="2" src="images/w2.png" />
			<!--details--------->
			<p>Fashion Genuine Chain Watch</p>
			<!--price--->
			<a class="price" href="#">$30.3</a>
			<!--buy-btn-->
			<a class="buy-btn" href="#">Add To Cart</a>
			</div>
		<!--box-3------------>
		<div class="p-box">
			<img alt="3" src="images/w3.png" />
			<!--details--------->
			<p>Fashion Chain Watch.</p>
			<!--price--->
			<a class="price" href="#">$13.3</a>
			<!--buy-btn-->
			<a class="buy-btn" href="#">Add To Cart</a>
			</div>
		<!--box-4------------>
		<div class="p-box">
			<img alt="4" src="images/w4.png" />
			<!--details--------->
			<p>Fashion Black Chain Watch</p>
			<!--price--->
			<a class="price" href="#">$33.3</a>
			<!--buy-btn-->
			<a class="buy-btn" href="#">Add To Cart</a>
			</div>
		<!--box-5------------>
		<div class="p-box">
			<img alt="5" src="images/w5.png" />
			<!--details--------->
			<p>Fashion Lether  Watch</p>
			<!--price--->
			<a class="price" href="#">$11.3</a>
			<!--buy-btn-->
			<a class="buy-btn" href="#">Add To Cart</a>
			</div>
		<!--box-6------------>
		<div class="p-box">
			<img alt="6" src="images/w6.png" />
			<!--details--------->
			<p>Fashion Forign Watch</p>
			<!--price--->
			<a class="price" href="#">$43.3</a>
			<!--buy-btn-->
			<a class="buy-btn" href="#">Add To Cart</a>
			</div>
		</div>
		
	</section>
	<!--subscribe------------------------->
	<section class="subcribe-container">
		<!--heading-->
		<h3>Subcribe For New Product Notification</h3>
		<!--Input-------->
		<div class="subcribe-input">
			<input placeholder="Eample@gmail.com" type="email" />
			<a class="subcribe-btn" href="#">Send</a>
		</div>
	</section>
	<!--footer--------------------->
	<footer>
		<h3>LOGO</h3>
		<!--footer-menu---------------->
		<ul class="footer-menu">
			<li><a href="#">Man</a></li>
			<li><a href="#">Women</a></li>
			<li><a href="#">Kids</a></li>
			<li><a href="#">Bags</a></li>
			<li><a href="#">Watchs</a></li>
		</ul>
	</footer>
<!--copyright--------------->
<a class="copyright" href="#">&#169; Copyright 2020. Shop Site By Going To Internet</a>
</body>
</html>
4) Copy The CSS Code Which I Give Below, And Past This Code In Your CSS File.


YOUR EXISTING AD GOES HERE

CSS 
@charset "utf-8";
/* CSS Document */
body{
	margin:0px;
	padding: 0px;
}
*{
	box-sizing: border-box;
	font-family: myriad pro;

}
a{
	text-decoration:none;
}
ul{
	list-style:none;
}
.main{
	width:100%;
	height: 100vh;
	background-image: url("../images/poduct%20bg.png");
	background-size:800px;
	background-position: center;
	position: relative;
}
.logo{
	position: absolute;
	left: 90px;
	top: 50px;
}
.logo a{
	font-family:poppins;
	font-weight: bold;
	color: #2f2e41;
	font-size:2rem;
	text-shadow: 2px 2px 30px rgba(0,0,0,0.2);
	letter-spacing: 1px;
}
.logo font{
    color:#7A72FF;
}
.side-box{
	position: fixed;
	right: 90px;
	top: 50px;
	width:170px;
	height: 45px;
	background-color: #FFFFFF;
	display: flex;
	justify-content:center;
	align-items: center;
	border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
	box-shadow: 2px 2px 30px rgba(167, 158, 245, 0.2);
	box-sizing: border-box;
	z-index: 1;
	border:1px solid rgba(167, 158, 245, 0.1);
}
.search input{
	width: 90px;
	height: 20px;
	border: none;
	outline: none;
	background-color: transparent;
	color: #1F1F1F;
	font-family: calibri;
	font-size: 1rem;
	padding: 0px 10px;
	
}

.search input::placeholder{
	color: #1D1D1D;
	font-weight:400;
	letter-spacing: 2px;
	font-size: 0.8rem;
	font-family: poppins;
	
}
.search i{
	margin: 0px auto;
}
.m-img{
    position:absolute;
    left:15%;
    top: 50%;
    transform: translate(-15%,-50%);
}
.m-img img{
    height:450px;
}
.m-text{
	position: absolute;
	top: 50%;
	left:90%;
	transform: translate(-90%,-50%);
}
.m-text h1,h2{
	font-family:Roboto;
	font-weight: bold;
	margin: 0px;
    line-height: 60px;
	font-size: 4rem;
	text-shadow: 2px 2px 10px rgba(0,0,0,0.08);
	letter-spacing: 3px;
    color:#3D3D4A;
    text-transform: uppercase;
}.m-text h1{
    letter-spacing:28px;
}
.m-text h1 font,
.m-text h2 font{
    color:#7A72FF;
}
.m-btn{
	width:150px;
	height: 40px;
	background-color: #2f2e41;
	box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
	margin-top: 20px;
	color:#fff;
	font-family: calibri;
	font-weight: 600;
	letter-spacing: 0.5px;
	font-size: 1rem;
}
.m-btn:hover{
	color:#FFFFFF;
	background-color: #6e64ff;
	transition: all ease 0.5s;
}
.social a{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 15px;
}
.social{
	position:fixed;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 20px;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
	padding: 5px 0px;
	z-index: 1;
}
.social a i{
	color:rgba(39,39,39,0.80);
}

.social a:hover .fa-facebook-f{
	color: #3b5998;
}
.social a:hover .fa-twitter{
	color: #00acee ;
}
.social a:hover .fa-instagram{
	color:  #3f729b ;
}
.social a:hover .fa-youtube{

	color: 	#FF0000;}

.product{
	width: 85%;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 30px rgba(167, 158, 245, 0.2);
	display: flex;
	margin:30px auto;
	flex-direction: column;
	align-items: center;
	padding:40px 20px;
	margin-top: -60px;
	position: relative;
	background-image: url("../images/poduct bg.png");
	background-size:1000px;
	background-position: center;
	border-radius: 10px;

}


.p-heading{
	margin:20px;
	text-shadow: 2px 2px 10px rgba(0,0,0,0.05);
}
.p-heading h3{
	font-family: myriad pro;
	font-weight: 700;
	letter-spacing: 2px;
	text-align: center;
	font-size:2rem;
	color:#323543;

}
.p-heading h3 font{
	color:#8c84f9;
}
.product-container{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 10px 0px;
	width:100%;
}
.p-box{
	width:250px;
	height: 330px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 4px;
	position: relative;
	margin: 10px 30px;
}
.p-box img{
	height:180px;
}
.p-box p{
	color:#4d4d4d70;
	font-family: myriad pro;
	font-size: 0.9rem;
	letter-spacing: 0.5;
}
.price{
	color:#2c2c2c;
	font-family: poppins;
	font-size: 1rem;;
}
.buy-btn{
	position: absolute;
	width:140px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family:calibri;
	left: 50%;
	bottom: -20px;
	transform: translateX(-50%);
	border-radius: 15% 15% 15% 15% / 50% 50% 50% 50%;
	background:linear-gradient(120deg,#6b60ec 20%,#a166f4);
	color:#FFFFFF;
	display: none;
	animation: fade 0.2s;
}
.p-box:hover .buy-btn{
	display: flex;
}
.p-box:hover{
	box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
	background-color:#FFFFFF;
}
.p-box:hover .price{
	color:#6b60ec;
	transition: all ease 0.2s;
}

@keyframes fade{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.our-brand{
	display: flex;
	width: 85%;
	margin:30px auto;
	justify-content: space-around;
	align-items: center;
	padding:30px;
}
.brand-text{
	width:40%;
	font-family:myriad pro;}
.brand-img{
	height: 500px;
	width: 50%;
	box-sizing: border-box;
}
.brand-img img{
	width:100%;
	height: 100%;
	object-fit:contain;
}
.brand-text h3{
	color:#333333;
	font-weight: 700;
	font-size:3rem;
	margin:0px;
}
.brand-text h4{
	color: #333333;
	font-weight: 400;
	font-size:2rem;
	margin:0px;
}
.brand-text font{
	color:#8d83f9;
}
.brand-text p{
	font-size: 1rem;
	color:#bdbdbd;
	letter-spacing: 0.5px;
}
.subcribe-container{
width:100%;	
height:250px;
margin-bottom:30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 2px solid rgba(0,0,0,0.03);
}
.subcribe-container h3{
font-size: 2rem;
color: rgb(56, 56, 56);
}
.subcribe-input{
	width:500px;
	background-color: #fff;
	border-radius: 7% 7% 7% 7% / 50% 50% 50% 50%;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:20px;
	box-shadow: 2px 5px 30px rgba(0,0,0,0.1);
}
.subcribe-input input{
	width:100%;
	height: 40px;
	border: none;
	outline: none;
	background-color: transparent;
}
.subcribe-btn{
	width:120px;
	height: 40px;
	background-color: #202020;
	border-radius: 20px;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	font-weight: bold;
	box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
	font-size: 1rem;
}
.subcribe-btn:hover{
	background-color:#6b60ec;
	transition: all  ease 0.5s;
}
footer{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40px;
	background-image: url("../images/poduct bg.png");
	background-size:400px;
	background-position: center;
	border-radius: 10px;
}
footer h3{
	font-size: 2.5rem;
	color: #202020;
	margin:0px;
}
.footer-menu{
	display: flex;
	box-shadow: 2px 5px 30px rgba(0,0,0,0.1);
	background-color: #fff;
	border-radius: 7% 7% 7% 7% / 50% 50% 50% 50%;
	justify-content: center;
	align-items: center;
	padding:5px 40px;
}
.footer-menu li a{
	padding:5px 20px;
	margin: 10px;
	display: flex;
	color:#202020;
}
.footer-menu li a:hover{
	color:#6b60ec;
}
.copyright{
	color:#e7e7e7;
	background-color: #141414;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15px;
}
@media(max-width:1230px){
	.m-img img{
		height: 350px;
	}
	.m-text h1,h2{
		font-size:3.5rem;
	}
}
@media(max-width:1045px){
	.main{
		background-size: 600px;
	}
	.m-img{
		display:none;
	}
	.m-text{
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		

	}
.our-brand{
	flex-direction:column-reverse;
}
.brand-text,.brand-img{
	width:100%;
}
.brand-img{
	height:300px;
	margin:20px;
}
}
@media(max-width:600px){
	.social{
		display: none;
	}
	.logo{
	left: 30px;
	top:30px;
	}
	.logo a{
		font-size: 1.4rem;;
	}
	.side-box{
		right:30px;
		top:30px;
	}
	.m-text{
		overflow-wrap: break-word;
		display: flex;
		flex-direction: column;
		margin:auto;
	}
	.m-text h1,h2{
		font-size: 2.5rem;
		line-height:40px;
		margin:0px 20px;
		letter-spacing: 10px;
	 }
	 .m-text h2{
		font-size: 1.2rem;
	 }
	 .m-btn{
		 margin:0px 20px;
	 }
	 .product{
		 width:88%;
	 }
	 .p-box{
		margin:20px 10px;
		padding:10px 20px;
		 width:100%;
		 text-align: center;
	 }
	 .subcribe-input{
		width:95%;
	}
	.subcribe-container h3{
		font-size:1.4rem;
		text-align: center;
	}
	 .footer-menu{
		 width:100%;
		 margin:20px;
		 flex-wrap: wrap;
		 background-color:none;
		 box-shadow: none;
	 }
	 .footer-menu li a{
		 background-color:#fff;
		 border-radius: 20px;
		 box-shadow:2px 2px 30px rgba(0, 0, 0, 0.1) ;
		 padding:10px 30px !important;
	 }
	.copyright {
		 text-align: center;
	 }
	

}

5) Download The Images Files (Link is Given Below), Create The Images Folder With Name "img" And Past This Download Images Here.
6) After Doing This Steps Enjoy This Shopping Website Design.


How To Dowload Files

Share
7 comments Labels, ,

Comments

  1. BrothrsmangoJanuary 8, 2021 at 7:13 AM

    good really :) please give me your number :)i will call you:)👍👍👍👍👍

    ReplyDelete
  2. UnknownApril 19, 2021 at 11:15 AM

    How to add checkout and payment add please fast asap

    ReplyDelete
    Replies
    1. KPM NINJADecember 15, 2021 at 7:03 AM

      just use 'payu website'. it is used for online transaction for e-commerce site etc.....

      Delete
  3. UnknownMay 26, 2021 at 4:25 PM

    Thanks for the tutorial sir

    ReplyDelete
  4. JHK InfotechMay 16, 2022 at 3:43 PM

    Probably one of the most concise blogs I was looking for to get accurate and relevant knowledge.
    Thanks
    Jhkinfotech

    ReplyDelete
  5. Nextbrain TechnologiesSeptember 6, 2022 at 2:25 PM

    "Good info", Thank, for your post.

    ReplyDelete
  6. Milestone IT HUBFebruary 10, 2023 at 12:15 PM

    Your article is really awesome I would like to visit your blog again. Thanks for sharing it. Visit my link as well. Custom Web Design Melbourne

    ReplyDelete

Archive

Contact Form

Send