Scribd
Upload
7 views14 pages

Source Code1

The document outlines the development of a responsive web application for a shopping cart, featuring registration, login, catalog, and cart pages. It includes HTML and CSS code for each page, ensuring a user-friendly interface with navigation and product listings. The design utilizes CSS3 features such as flexbox and grid for layout and responsiveness.

Uploaded by

alekya.anthanagari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views14 pages

Source Code1

The document outlines the development of a responsive web application for a shopping cart, featuring registration, login, catalog, and cart pages. It includes HTML and CSS code for each page, ensuring a user-friendly interface with navigation and product listings. The design utilizes CSS3 features such as flexbox and grid for layout and responsiveness.

Uploaded by

alekya.anthanagari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Experiment1: Build a responsive web application for shopping cart with registration, login, catalog

and cart pages using CSS3 features flex and grid

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="styles.css">
<title>Shopping Cart</title>
</head>

<body>
<header>
<h1>Shopping Cart</h1>
<nav>
<ul>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="catalog.html">Catalog</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
</header>

<br>
<footer>
<p>&copy; 2024 Shopping Cart App</p>
</footer>

</body>

</html>
Styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
/* display: flex; */
align-items: center;
justify-content: center;
height: 100vh;
}

header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
}

nav a {
text-decoration: none;
color: #fff;
padding: 1em;
}

h1{
color: tomato;
}

h2, h3{
color: #3498de;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
}
Register.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration</title>
<link rel="stylesheet" href="register.css">
</head>

<body>

<header>
<h1>Shopping Cart</h1>
<h2>Registration Page</h2>
</header>
<br><br>

<form method="post">
<h3>User Registration</h3>

<label for="fname">First Name:</label>


<input type="text" id="fname" name="fname" required>

<label for="lname">Last Name:</label>


<input type="text" id="lname" name="lname" required>

<label for="mobile">Mobile Number:</label>


<input type="text" id="mobile" name="mobile" required>

<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<button type="submit">Register</button>
</form>
<br><br>
<footer>
&copy; 2023 Registration Page
</footer>

</body>

</html>
Register.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
/* display: flex; */
align-items: center;
justify-content: center;
height: 100vh;
}

header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}

form {
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}
h1{
color: tomato;
}

h2, h3{
color: #3498de;
}

label {
display: block;
margin-bottom: 8px;
text-align: left;
}

input {
width: 100%;
padding: 10px;
margin-bottom: 16px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4caf50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
bottom: 0;
width: 100%;
}
Login.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Login</title>
<link rel="stylesheet" href="login.css">
</head>

<body>
<header>
<h1>Shopping Cart</h1>
<h2>Login Page</h2>
</header>
<br><br>

<div class="form-container">
<form method="post">
<h3>User Login</h3>

<label for="username">Username or Email:</label>


<input type="text" id="username" name="username" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<button type="submit">Login</button>
</form>
</div>

<br><br>
<footer>
&copy; 2023 Login Page
</footer>

</body>

</html>
Login.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
/* display: flex; */
align-items: center;
justify-content: center;
height: 100vh;
}

header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}

h1{
color: tomato;
}

h2, h3{
color: #3498de;
}

.form-container{
text-align: center;
}

form {
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
text-align: center;
}

form h2{
color: #3498de;
}

label {
display: block;
margin-bottom: 8px;
text-align: left;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 16px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
background-color: #3498db;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
bottom: 0;
width: 100%;
}
Catalog.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalog Page</title>
<link rel="stylesheet" href="catalog.css">
</head>

<body>

<header>
<h1>Shopping Cart</h1>
<h2>Catalog Page</h2>
</header>

<section>
<div class="product">
<img src="Images/eye.jpeg" alt="Product 1">
<h2>Product 1</h2>
<p>Description of Product 1.</p>
<p>Price: $19.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="Images/nature with butterfly.jpg" alt="Product 2">
<h2>Product 2</h2>
<p>Description of Product 2.</p>
<p>Price: $29.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="Images/Nature with Sun light.jpg" alt="Product 3">
<h2>Product 3</h2>
<p>Description of Product 3.</p>
<p>Price: $49.99</p>
<button>Add to Cart</button>
</div>

<div class="product">
<img src="Images/cameralens.jpg" alt="Product 4">
<h2>Product 4</h2>
<p>Description of Product 4.</p>
<p>Price: $59.99</p>
<button>Add to Cart</button>
</div>
<!-- Add more product entries as needed -->
</section>
<footer>
&copy; 2023 Catalog Page
</footer>

</body>

</html>

Catalog.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}

h1{
color: tomato;
}

h2, h3{
color: #3498de;
}

section {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.product {
border: 1px solid #ddd;
margin: 10px;
padding: 10px;
width: 250px;
background-color: #fff;
}

.product img {
width: 100%;
height: auto;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
Cart.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<link rel="stylesheet" href="cart.css">
</head>

<body>
<header>
<h1>Shopping Cart</h1>
<h2>Cart Page</h2>
</header>
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>2</td>
<td>$19.99</td>
<td>$39.98</td>
</tr>
<tr>
<td>Product 2</td>
<td>1</td>
<td>$29.99</td>
<td>$29.99</td>
</tr>
<tr>
<td>Product 3</td>
<td>3</td>
<td>$49.99</td>
<td>$149.97</td>
</tr>
<tr>
<td>Product 4</td>
<td>1</td>
<td>$59.99</td>
<td>$59.99</td>
</tr>
</tbody>
</table>
<div class="total">Total: $279.93</div>
<div class="container">
<button type="button" class="btn btn-success">Proceed to Checkout</button>
</div>
<br><br>
<footer>
&copy; 2023 Cart Page
</footer>

</body>

</html>

Cart.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
/* display: grid; */
align-items: center;
justify-content: center;
height: 100vh;
}

header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}

h1{
color: tomato;
}

h2, h3{
color: #3498de;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}

th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4caf50;
color: white;
}

td {
background-color: #fff;
}

.total {
text-align: right;
font-weight: bold;
}

button {
background-color: #3498db;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}

.container{
text-align: center;
}

.center-button {
background-color: #b125ed;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
bottom: 0;
width: 100%;
}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy