Professional Documents
Culture Documents
Web Application
Project File
Signature of Signature of
Internal Examiner External Examiner
Acknowledgement
I am extremely thankful to our Web Application
teacher Mrs. Sayanti Roy for her continuous
guidance, encouragement and support
throughout the duration of the project.
Without her motivation and help, the
successful completion of this project would not
have been possible. I would also like to extend
my gratitude to our Principal, Mrs. Anindita
Banerjee of Apeejay School Saltlake for
providing constant support and the golden
opportunity to do this informative project
which helped me learn alot of new things about
programming in Python and using SQL in
general.
TOPIC PAGE NO.
Certificate 2
Declaration 3
Aim of the Project 4
Case Study 1 5 - 24
Case Study 2 25 - 39
Bibliography 40
Acknowledgment 41
HOME PAGE :
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Shopping Site</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f8f0;;
}
header {
background-color:#388e3c;
color: white;
text-align: left;
padding: 1em;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
width: 100px;
margin-right: 10px;
}
.title {
margin: 0;
}
.cart-logo {
margin-right: 20px;
cursor: pointer;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 2em;
min-height: 100vh; /* Ensure the section takes at least the full viewport height */
}
.product {
border: 1px solid #ddd;
border-radius: 8px;
padding: 1em;
margin: 1em;
width: 200px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.product img {
width: 100%;
height: auto;
}
.add-to-cart-button {
background-color: #4caf50;
color: white;
border: none;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-top: 10px;
cursor: pointer;
border-radius: 4px;
}
.advertisement {
text-align: center;
padding: 1em;
background-color: #ddd;
margin: 1em;
width: 30%; /* Adjusted width for the offers */
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 0.5em;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="C:\Users\Raju\Desktop\C.jpg" alt="Logo">
</div>
<h1 class="title">Welcome to My Shopping Site</h1>
<a href="cart-page.html" class="cart-logo">
<img src="C:\Users\Raju\Desktop\cart.jpg" alt="Cart Logo" width="30">
</a>
</header>
<section>
<div class="product">
<img src="C:\Users\Raju\Desktop\Tanjore.jpg" alt="Product 1">
<h2>Product 1</h2>
<p>Description of Product 1.</p>
<p>Rs.5999.00</p>
<button class="add-to-cart-button">Add to Cart</button>
</div>
<div class="product">
<img src="C:\Users\Raju\Desktop\Textile.jpg" alt="Product 2">
<h2>Product 2</h2>
<p>Description of Product 2.</p>
<p>$4999.00</p>
<button class="add-to-cart-button">Add to Cart</button>
</div>
<div class="product">
<img src="C:\Users\Raju\Desktop\Pots.jpg" alt="Product 3">
<h2>Product 3</h2>
<p>Description of Product 3.</p>
<p>$559.00</p>
<button class="add-to-cart-button">Add to Cart</button>
</div>
<div class="advertisement">
<p>Special Offer: Buy one, get one free!</p>
<p>Flash Sale: 50% off on selected items!</p>
<iframe src="https://www.youtube.com/embed/your-video-id" allowfullscreen></iframe>
</div>
</section>
<footer>
<p>© 2023 My Shopping Site</p>
</footer>
</body>
</html>
Shopping Cart:
< html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f0f8f0; /* Light Green */
color: #333;
}
header {
background-color: #388e3c; /* Green */
color: #fff;
text-align: center;
padding: 1em;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}
.cart-item {
border: 1px solid #a5d6a7; /* Light Green */
border-radius: 8px;
overflow: hidden;
margin: 10px;
width: 200px;
text-align: center;
padding: 10px;
background-color: #e0f2e9; /* Pale Green */
}
.cart-item img {
width: 100%;
height: auto;
margin-bottom: 10px;
}
footer {
background-color: #388e3c; /* Green */
color: #fff;
text-align: center;
padding: 1em;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Shopping Cart</h1>
</header>
<main>
<div class="cart-item">
<img src="C:\Users\Raju\Desktop\Tanjore.jpg" alt="Item 1">
<p>Rs.5999.00</p>
</div>
<div class="cart-item">
<img src="C:\Users\Raju\Desktop\Textile.jpg" alt="Item 2">
<p>Rs4999.00</p>
</div>.
</body>
</html>
Output:
Terms and Conditions Page:
< html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terms and Conditions</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
line-height: 1.6;
background: linear-gradient(to right, #a1ff84, #1c9951);
color: #fff;
}
h1 {
text-align: center;
}
h2 {
margin-top: 20px;
}
p{
margin-bottom: 15px;
}
</style>
</head>
<body>
<div>
<h2>1. Introduction</h2>
<p>Welcome to our shopping site. These terms and conditions govern your use of this website; by using
our website, you accept these terms and conditions in full.</p>
</body>
</html>
Output :
Contact Us Page :
< html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 20px;
padding: 20px;
line-height: 1.6;
h1, h2, h3 {
text-align: center;
}
h2 {
margin-top: 20px;
p{
margin-bottom: 15px;
form {
max-width: 600px;
padding: 20px;
border-radius: 8px;
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
input,
textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border-radius: 4px;
box-sizing: border-box;
button {
border: none;
border-radius: 4px;
cursor: pointer;
}
.faq-section {
margin-top: 40px;
padding: 20px;
border-radius: 8px;
</style>
</head>
<body>
<p>If you need assistance or have any questions, our customer support team is here to help.</p>
<p>Email: Email@example.com</p>
<form>
<h2>Contact Form</h2>
<button type="submit">Submit</button>
</form>
<div class="faq-section">
<p>A: You can track your order by logging into your account and navigating to the order history section.</p>
<p>A: Our return policy allows you to return items within 30 days of purchase. Please refer to our Returns and Refunds
page for detailed information.</p>
</div>
</body>
</html>
Output:
Bibliography
www.wikipedia.org
www.eyeonasia.gov.sg
Web application book NCERT for classes 11 and 12
DECLARATION
I, SAGNIK BISWAS, the undersigned a student of APEEJAY SCHOOL, SALT
LAKE, KOLKATA do hereby declare that this investigatory project is my own
work and has been carried out under the supervision of our Web Application
Teacher Mrs. Sayanti Roy. This project has not been submitted to any other
institution/university for the reward of degree, diploma anywhere before.