E-Commerce Shopping Website 2
How To Make E-Commerce Shopping Website Using HTML
E-Commerce Shopping Website
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
<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="#">© Copyright 2020. Shop Site By Going To Internet</a>
</body>
</html>
/* 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;
}
}
Download Image
Comments