E-COMMERCE WEBSITE
A PROJECT REPORT
Submited by
Name of Students
YUVRAJ YADAV
in partial fulfillment for the award of the degree
of
BACHELOR OF COMPUTER APPLICATION
Lovely Professional University, Punjab
October 2024
APPENDIX II
(A typical specimen of Bonafide Certificate)
<Font Style Times New Roman>
Lovely Professional University, Punjab
<Font Style Times New Roman – size -18>
BONAFIDE CERTIFICATE
<Font Style Times New Roman – size -16>
<Font Style Times New Roman – size -14>
Certified that this project report “E-COMMERCE”is the bonafide work of
“YUVRAJ YADAV”who carried out the project work under my supervision.
SIGNATURE SIGNATURE
DR. PUSHPENDER SUPERVISOR
SIGNATURE
HEAD OF THE DEPARTMENT
APPENDIX III
(A typical specimen of table of contents)
<Font Style Times New Roman>
TABLE OF CONTENTS
CHAPTER CHAPTER NAME PAGE NO.
NO.
1 Title Page i
2 Bonafide Certificate ii
3 Introduction iii
4 Font page iv
5 Index page v
6 Work flow chart vi
7 code vii
8 Screenshots viii
9 Conclusion ix
INTRODUCTION
In today'digital age, e-commerce has revolutionized the way consumers shop and businesses
operate. With the growing reliance on online transactions, we developed an e-commerce website to
provide a seamless shopping experience for users. Our platform allows customers to browse a wide
range of products, compare prices, and make purchases from the comfort of their homes.
This e-commerce website is designed with user experience in mind, featuring an intuitive interface
that simplifies navigation and enhances customer engagement. Key functionalities include product
listings with detailed descriptions, a secure shopping cart, and streamlined checkout processes.
By leveraging modern technologies, our website not only facilitates efficient transactions but also
provides valuable insights into consumer behavior, enabling businesses to tailor their offerings and
marketing strategies. Ultimately, this project aims to create a robust online shopping platform that
meets the evolving needs of today’s consumers while driving growth for businesses.
Front Page
1. *Hero Section*: Eye-catching image or slider with a call to-action (CTA).
2. *Navigation Bar*: Links to categories, search bar, user account, and cart.
3. *Featured Products*: Highlight bestsellers or new arrivals.
4. *Promotions*: Display current discounts or seasonal offers.
5. *Customer Reviews*: Showcase testimonials for social proof
HTML CODES
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-commerce Website</title>
<link rel="stylesheet" href="ankit.css">
</head>
<body>
<!-- Header Section -->
<header>
<div class="container">
<!-- Logo -->
<div class="shop.jpg">
<img src="shop.jpg" width="200px" alt="Product 1">
</div>
<!-- Navigation Links -->
<nav>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Search Bar -->
<div class="search-bar">
<input type="text" placeholder="Search products...">
<button class="search-icon">🔍</button>
</div>
<!-- Cart Icon -->
<div class="cart-icon">
🛒<span class="cart-count">3</span>
</div>
</div>
</header>
<section id="products" class="products">
<h2>Our Bestsellers</h2>
<div class="product-grid">
<!-- Product Cards 1-10 -->
<!-- Product 1 -->
<div class="product-card">
<img src="jacket.jpg" width="200px" alt="Product 1">
<h3>Stylish Jacket</h3>
<p>$29.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="shirtt.avif" height="200px" alt="Product 2">
<h3>Stylish Shirt</h3>
<p>$10.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="shoe.avif" alt="Product 3">
<h3>Stylish Shoes</h3>
<p>$35.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="picture4.avif" height="50px" alt="Product 4">
<h3>Stylish Outfit</h3>
<p>$11.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="picture5.avif" alt="Product 1">
<h3>Stylish wear</h3>
<p>$9.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="jeans.avif" alt="Product 1">
<h3>Stylish Jeans</h3>
<p>$27.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="watch.avif" alt="Product 1">
<h3>Premium Watch</h3>
<p>$50.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="bag.avif" alt="Product 1">
<h3>Stylish Bag</h3>
<p>$45.99</p>
<button>Add to Cart</button>
</div>
<!-- Add remaining product cards (Product 2-10) with appropriate image
sources, names, and prices -->
<div class="product-card">
<img src="top.avif" alt="Product 10">
<h3>Classic Top</h3>
<p>$12.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="kurti.avif" alt="Product 1">
<h3>Stylish Kurti</h3>
<p>$11.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="blazer.avif" alt="Product 1">
<h3>Stylish Blazer</h3>
<p>$31.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="perfume.avif" alt="Product 1">
<h3>Classic Perfume</h3>
<p>$14.99</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="hoddie.avif" alt="Product 1">
<h3>Stylish Hoddie</h3>
<p>$25.99</p>
<button>Add to Cart</button>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-content">
<!-- About Section -->
<div class="footer-section about">
<h3>Your Brand</h3>
<p>Stay trendy with our latest collections and exclusive offers. Join our
community!</p>
</div>
<!-- Quick Links Section -->
<div class="footer-section links">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">New Arrivals</a></li>
<li><a href="#">Best Sellers</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- Customer Service Links -->
<div class="footer-section links">
<h3>Customer Service</h3>
<ul>
<li><a href="#">FAQs</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Shipping Info</a></li>
<li><a href="#">Order Tracking</a></li>
</ul>
</div>
<!-- Newsletter Section -->
<div class="footer-section newsletter">
<h3>Newsletter</h3>
<p>Subscribe to get updates on new arrivals and special offers.</p>
<form action="#">
<input type="email" placeholder="Your email address" required>
<button type="submit">Subscribe</button>
</form>
</div>
<!-- Social Media Section -->
<div class="footer-section social">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="#"><img src="face.png" alt="Facebook"></a>
<a href="#"><img src="Instagram.png" alt="Instagram"></a>
<a href="#"><img src="Twitter.jpeg" alt="Twitter"></a>
<a href="#"><img src="link.png" alt="LinkedIn"></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Your Brand. All rights reserved.</p>
</div>
</footer>
</body>
</html>
CSS STYLE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Header Styling */
header {
background: linear-gradient(90deg, #ff7e5f, #af618d);
padding: 20px 0;
color: black;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.container {
display: flex;
align-items: center;
justify-content: space-between;
color: black;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Logo Styling */
.logo {
font-size: 24px;
color: white;
font-weight: bold;
}
/* Navigation Links */
.nav-links {
list-style: none;
display: flex;
gap: 20px;
}
.nav-links a {
color: white;
text-decoration: none;
font-size: 18px;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #ffebcc;
}
/* Search Bar Styling */
.search-bar {
display: flex;
align-items: center;
background: white;
border-radius: 20px;
overflow: hidden;
padding: 5px;
}
.search-bar input {
border: none;
padding: 8px 12px;
outline: none;
font-size: 16px;
width: 200px;
}
.search-bar .search-icon {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
padding: 0 10px;
}
/* Cart Icon Styling */
.cart-icon {
position: relative;
font-size: 24px;
color: white;
cursor: pointer;
}
.cart-count {
position: absolute;
top: -5px;
right: -10px;
background: red;
color: white;
border-radius: 50%;
padding: 4px 8px;
font-size: 12px;
}
/* Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #f72585, #4361ee);
color: white;
text-align: center;
padding: 3rem 1rem;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.cta-button {
background-color: #ffbe0b;
color: #000;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
.cta-button:hover {
background-color: #faa307;
}
/* Products Section */
/* Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #f72585, #4361ee);
color: white;
text-align: center;
padding: 3rem 1rem;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.cta-button {
background-color: #ffbe0b;
color: #000;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
.cta-button:hover {
background-color: #faa307;
}
/* Products Section */
.products {
padding: 2rem 1rem;
text-align: center;
background-color: #f1f7ff;
height: auto;
}
.products h2 {
font-size: 2rem;
color: #3a0ca3;
margin-bottom: 2rem;
}
.product-grid {
display: flex;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
}
/* Product Card */
.product-card {
background: linear-gradient(145deg, #e0f7fa, #ffebee);
border-radius: 12px;
width: 450px;
height: 320px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
text-align: center;
color: #090000;
}
.product-card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.product-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.product-card h3 {
font-size: 1.2rem;
margin: 0.5rem 0;
color: #3a0ca3;
}
.product-card p {
color: #ff6d00;
font-size: 1.1rem;
margin-bottom: 1rem;
font-weight: bold;
}
/* Button Styling */
.product-card button {
background-color: #ff6d00;
color: white;
padding: 0.5rem 1.5rem;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 0.9rem;
transition: background 0.3s ease;
margin-bottom: 1rem;
}
.product-card button:hover {
background-color: #3a0ca3;
}
/* Footer */
.footer {
background-color: #3a0ca3;
color: white;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}
/* Footer */
.footer {
background-color: #3a0ca3;
color: #fff;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}
/* Footer Section */
.footer {
background: linear-gradient(135deg, #3a0ca3, #f72585);
color: white;
padding: 3rem 1rem;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 2rem;
padding-bottom: 2rem;
text-align: center;
}
.footer-section {
max-width: 220px;
}
.footer h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #ffbe0b;
}
.footer p, .footer ul {
font-size: 0.9rem;
line-height: 1.5;
}
.footer-section.links ul {
list-style: none;
padding: 0;
}
.footer-section.links ul li {
margin: 0.5rem 0;
}
.footer-section.links ul li a {
color: #ffbe0b;
text-decoration: none;
transition: color 0.3s;
}
.footer-section.links ul li a:hover {
color: #faa307;
}
/* Newsletter Form */
.footer-section.newsletter form {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-section.newsletter input {
padding: 0.5rem;
border-radius: 5px;
border: none;
font-size: 0.9rem;
}
.footer-section.newsletter button {
padding: 0.5rem;
background-color: #ff6d00;
color: white;
border: none;
border-radius: 5px;
font-size: 0.9rem;
cursor: pointer;
transition: background 0.3s ease;
}
.footer-section.newsletter button:hover {
background-color: #faa307;
}
/* Social Icons */
.social-icons {
display: flex;
gap: 0.5rem;
}
.social-icons a {
display: inline-block;
width: 30px;
height: 30px;
overflow: hidden;
}
.social-icons img {
width: 100%;
transition: transform 0.3s;
}
.social-icons a:hover img {
transform: scale(1.1);
}
/* Footer Bottom */
.footer-bottom {
background: #ff6d00;
padding: 1rem;
color: white;
font-size: 0.85rem;
margin-top: 2rem;
text-align: center;
}
