Welcome to this step-by-step tutorial where we'll guide you through the process of creating your very own e-commerce website using HTML and CSS. Whether you're a complete beginner in web development or a seasoned coder looking to expand your skill set, this video is designed to meet your needs and take you from concept to completion.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/562fae65df.js" crossorigin="anonymous"></script>
<title>E-Commerce Web Site</title>
</head>
<body>
<!--header section start-->
<section id="header">
<a href=""><img src="Image/logo.png" alt="logo" class="logo" width="100px"></a>
<div>
<ul id="navbar">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href=""><i class="fa-solid fa-cart-shopping"></i></a></li>
</ul>
</div>
</section>
<!--header section end-->
<!--banner section start-->
<section id="banner">
<h4>Shopping With Nexus</h4>
<h1>Discover Your Favorite Place.</h1>
<p>Save Your Money & Time</p>
<button>Shop Now</button>
</section>
<!--banner section start-->
<!--category section start-->
<section id="category" class="section-p1">
<div class="card">
<img src="Image/categories/category01.png" alt="category" width="300px">
<h3>Electronics</h3>
</div>
<div class="card">
<img src="Image/categories/category02.png" alt="category" width="250px">
<h3>Juwellary</h3>
</div>
<div class="card">
<img src="Image/categories/category04.png" alt="category" width="250px">
<h3>Kitchen Items</h3>
</div>
<div class="card">
<img src="Image/categories/category05.png" alt="category" width="250px">
<h3>Cosmetics</h3>
</div>
</section>
<!--category section end-->
<!--featured section start-->
<section id="featured" class="section-p1">
<h2>Featured Product</h2>
<div class="container">
<div class="pro">
<img src="Image/featured product/bag.png" alt="bag" width="250px">
<div class="description">
<h5>Hand Bag</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<h4>$95</h4>
</div>
<a href=""><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="pro">
<img src="Image/featured product/mobile.png" alt="mobile" width="250px">
<div class="description">
<h5>Mobile Phone</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<h4>$150</h4>
</div>
<a href=""><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="pro">
<img src="Image/featured product/shoe.webp" alt="shoe" width="250px">
<div class="description">
<h5>Shoe</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<h4>$100</h4>
</div>
<a href=""><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="pro">
<img src="Image/featured product/watch.png" alt="watch" width="250px">
<div class="description">
<h5>Watch</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<h4>$95</h4>
</div>
<a href=""><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
</section>
<!--featured section end-->
<!--hotdeal banner section start-->
<section id="hot" class="section-m1">
<h4>Up to 80% off - All Game Accessories</h4>
<h2>HOT DEAL</h2>
<button class="hotbtn">Visit More</button>
</section>
<!--hotdeal banner section end-->
<!--brand section start-->
<section id="brand" class="section-p1">
<div class="row">
<img src="Image/Brands/Adidas-logo.png" alt="Addidas" width="125px">
<img src="Image/Brands/Chanel-logo.png" alt="chanel" width="125px">
<img src="Image/Brands/H&M-Logo.svg.png" alt="H&M" width="125px">
<img src="Image/Brands/Nike-Logo.png" alt="nike" width="125px">
<img src="Image/Brands/Rolex.png" alt="rolex" width="125px">
</div>
</section>
<!--brand section end-->
<!--footer section start-->
<footer class="section-p1">
<div class="col"><img src="Image/logo.png" alt="logo" width="75px">
<h4>Contact</h4>
<p><strong>Address:</strong> 369 , ABC Tower , Park Land</p>
<p><strong>Phone:</strong>+940 158 458</p>
<p><strong>Email:</strong>ecommerce@gmail.com</p>
<div class="follow">
<h4>Follow</h4>
<div class="icon">
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-whatsapp"></i>
</div>
</div>
</div>
<div class="col">
<h4>About Us</h4>
<a href="#">About Us</a>
<a href="#">Privacy Policies</a>
<a href="#">Terms & Conditions</a>
</div>
<div class="col">
<h4>My Account</h4>
<a href="#">Sign-In</a>
<a href="#">View Cart</a>
<a href="#">Help</a>
</div>
<div class="col">
<h4>Payment Gateways</h4>
<img src="Image/footer/visa.png" alt="visa" width="50px">
<img src="Image/footer/master.png" alt="master" width="50px">
</div>
</footer>
<p class="footerp">@Coding With Nexus - 2023 </p>
<!--footer section end-->
<script src="https://kit.fontawesome.com/b186863b7d.js" crossorigin="anonymous"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
font-family: 'Poppins',sans-serif;
box-sizing: border-box;
}
h1{
font-size: 50px;
line-height: 64px;
}
h2{
font-size: 46px;
line-height: 54px;
}
h4{
font-size: 20px;
}
h6{
font-weight: 700;
font-size: 12px;
}
p{
font-size: 16px;
margin: 15px 0 20px 0;
}
.section-p1{
padding: 40px 80px;
}
.section-m1{
margin: 40px 40px;
}
body{
width: 100%;
}
/*header style*/
#header{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 50px;
background-color:#bacdd9 ;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
z-index: 900;
position: sticky;
top: 0;
left: 0;
}
/*navbar style*/
#navbar{
display: flex;
align-items: center;
justify-content: center;
}
#navbar li{
list-style: none;
padding: 0 8px;
}
#navbar li a{
text-decoration: none;
font-size: 16px;
font-weight: 500;
color: black;
transition: 0.3s ease;
}
#navbar li a:hover, #navbar li a.active{
color: blue;
}
/*banner style*/
#banner{
background-image: url(Image/banner.jpg);
height: 100vh;
width: 100%;
background-size: cover;
background-position: top 25% right 0;
padding: 0 90px;
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
color: white;
}
#banner h4{
padding-bottom: 15px;
}
#banner button{
border: 0;
margin: 0;
padding: 20px 35px ;
margin-left: 125px;
margin-top: 100px;
background-color: blue;
cursor: pointer;
border-radius: 15px;
font-size: 20px;
}
#banner button:hover{
color: black;
background-color: white;
}
/*category style*/
#category{
text-align: center;
}
#category .card{
width: 290px;
text-align: center;
padding: 20px 10px ;
box-shadow: 20px 20px 35px rgba(0,0,0,0.5);
border: 1px solid black;
border-radius: 25px;
margin: 10px;
display: inline-block;
}
#category .card:hover{
background-color: rgb(121, 200, 200);
}
/*featured product style*/
#featured{
text-align: center;
}
#featured .pro{
width: 25%;
max-width: 250px;
padding: 10px 15px;
border: 2px solid black;
display: inline-block;
background-color: rgb(84, 127, 127);
margin: 30px;
}
#featured .pro:hover{
border-radius: 25px;
background-color: white;
box-shadow:20px 10px 15px rgba(0,0,0,0.5) ;
transition: 0.2 ease;
}
#featured .pro .fas{
color: gold;
}
#featured .pro .fa-solid{
color: black;
}
/*hot style */
#hot{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-image: url(Image/hot-banner.jpg);
color: white;
width: 90%;
height: 30vh;
background-size: cover;
background-position: center;
}
#hot h2{
color: orangered;
font-size: 40px;
}
#hot h4{
color: white;
}
.hotbtn{
font-size: 30px;
color: black;
background-color: white;
border: 0;
margin: 0;
border-radius: 5px;
padding: 10px 5px;
cursor: pointer;
}
.hotbtn:hover{
background-color: orangered;
color: white;
}
/*brand style*/
.row{
margin:15px 10px 15px 10px;
padding: 5px;
justify-content: space-between;
display: flex;
}
/*footer style*/
footer{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: antiquewhite;
}
footer .col{
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
.footerp{
text-align: center;
background-color: black;
color: white;
height: 125px;
line-height: 80px;
}
footer h4{
font-size: 15px;
padding-bottom: 15px;
}
footer a{
font-size: 20px;
margin-bottom: 8px;
text-decoration: none;
}
Comments
Post a Comment