Experiment 1:
Build a responsive web application for shopping cart with registration, login, catalog and cart
pages using CSS3 features, flex and grid.
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Online Bookstore</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<br>
<div class="main">
<img src="[Link]" alt="Bookstore" width="500" height="345">
<h2>Welcome to Online Bookstore</h2>
<form action="[Link]" method="post">
<div class="wrap">
<button type="submit">SignUp</button>
</div>
</form>
</div>
</body>
</html>
[Link]
/*[Link]*/
body {
display: flex;
align-items: center;
justify-content:
center; font-family:
sans-serif; line-height:
1.5;
min-height: 100vh;
background: #f3f3f3;
flex-direction: column;
margin: 0;
.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 10px 20px;
transition: transform 0.2s;
width: 500px;
text-align: center;
h2 {
color: #4CAF50;
}
label {
display: block;
width: 100%;
margin-top:
10px;
margin-bottom: 5px;
text-align: left;
color: #555;
font-weight: bold;
input {
display: block;
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid
#ddd; border-radius:
5px;
button {
padding:
15px;
border-radius: 10px;
margin-top: 15px;
margin-bottom: 15px;
border: none;
color: white;
cursor: pointer;
background-color: #4CAF50;
width: 100%;
font-size: 16px;
.wrap {
display: flex;
justify-content:
center; align-items:
center;
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Online Bookstore</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="main">
<h2>Online Bookstore</h2>
<h3>Enter your login credentials</h3>
<form action="[Link]" method="post">
<label for="first">Username:</label>
<input type="text" id="first" name="first" placeholder="Enter your Username"
required>
<label for="password"> Password: </label>
<input type="password" id="password" name="password" placeholder="Enter your
Password" required>
<div class="wrap">
<button type="submit">Submit</button>
</div>
</form>
<p>Not registered?
<a href="[Link]" style="text-decoration: none; ">Create an account
</a>
</p>
</div>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-
serif; background-color:
#f3f3f3; margin: 0;
padding: 0;
display: flex;
justify-content:
center; align-items:
center; height: 100vh;
.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px
rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
.main h2 {
color: #4caf50;
margin-bottom: 20px;
label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: bold;
input[type="text"],
input[type="email"],
input[type="password"],
select {
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid
#ddd; border-radius:
5px;
button[type="submit"] {
padding: 15px;
border-radius:
10px; border: none;
background-color: #4caf50;
color: white;
cursor:
pointer; width:
100%; font-
size: 16px;
</style>
</head>
<body>
<div class="main">
<h2>Registration Form</h2>
<form action="[Link]">
<label for="first">First Name:</label>
<input type="text" id="first" name="first" required/>
<label for="last">Last Name:</label>
<input type="text" id="last" name="last" 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"
pattern="^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$"
title="Password must contain at least one number,
one alphabet, one symbol, and be at
least 8 characters long" required/>
<label for="repassword" >Re-type Password:</label>
<input type="password" id="repassword" name="repassword" required
/>
<label for="mobile">Contact:</label>
<input type="text" id="mobile" name="mobile" maxlength="10"
required/>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<button type="submit">Submit </button>
</form>
</div>
</body>
</html>
[Link]
<html>
<head>
<title>shopping cart</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="main">
<center><h2>Shopping Cart</h2></center>
<table align="center">
<tr>
<td><h2>Books</h2></td>
<td>
<input type="checkbox" value="Python">
<label >Python</label><br>
<input type="checkbox" value="PowerBI">
<label >PowerBI</label><br>
<input type="checkbox" value="Java">
<label >Java</label><br>
----------------------
<input type="checkbox" value="MachineLearning">
<label >Machine Learning</label><br>
<input type="checkbox" value="Devops">
<label >Devops</label><br>
<input type="checkbox" value="DBMS">
<label >DBMS</label><br>
</td></tr>
<tr>
<td><h2>Quantity</h2></td>
<td>
<input type="number">
</td></tr>
<tr>
<td>
<form method=post action="[Link]">
<input style="background-color: #4CAF50" type="submit" value=ok />
</form>
</td></tr>
</table>
</div>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>payment</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="main">
<center><h2>Online Bookstore</h2>
<h3>Payment Portal</h3></center>
<form method=post action="[Link]">
<br><br>
<table align="center">
<tr>
<td>
<h4>Total Amount</h4>
</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td><h4>Card Number</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td>
<input style="background-color: #4CAF50" type="submit" value=OK>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
[Link]
<html>
<head>
<title>order confirmation</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="main">
<center>
<pre><strong>
<b>Your order Is Confirmed
</strong></pre>
<h2><b>THANK YOU</h2>
</center>
</div>
</body>
</html>