EXPERIMENT-1
Develop static pages (using HTML and CSS) of an online book
store. The pages should resemble: www.flipkart.com The website
should consist the following pages.
a) Home page
b) Registration and user Login
c) User Profile Page
d) Books catalog
e) Shopping Cart
f) Payment by credit card
g) Order Conformations
a) Home Page:
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
background-image: url(bgg.jpeg);
}
header {
background-image: url(bgg.jpeg);
background-color:white;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
background-color: #444;
text-align:left;
}
nav a {
text-decoration: none;
color: #fff;
margin: 10px;
padding: 10px 20px;
display: inline-block;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color:darkorange;
}
.container {
height: auto;
max-width: 800px;
margin: 2px auto;
padding: 20px;
color: #f4f4f4;
border-radius: 5px;
}
h1 {
text-align: center;
color:sandybrown;
background-color: black;
max-width: 25%;
p{
text-align: center;
color:#fff;
background-color:darkblue;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
h2 {
background-color: black;
max-width: 40%;
color: red;
font-family:'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<header>
<CENTER> <h1>ONLINE BOOK STORE</h1></CENTER>
</header>
<nav>
<a href="index.html">Home</a>
<a href="bookscatalog.html">Books catalog</a>
<a href="bookstore.html">Book Store</a>
<a href="detailsform.html"> Registration Form</a>
<a href="signuporlogin.html">Sign Up/Login</a>
<a href="contactus.html">Contact Us</a>
</nav>
<div class="container">
<center><h2>Welcome to Book Haven</h2></center>
<p>Your Source for Great Reads</p>
<center><h2>About Us</h2></center>
<p>Welcome to Book Haven, your one-stop destination for
discovering and exploring the world of literature. We are passionate
about books and are dedicated to bringing you the best literary
experiences.</p>
</div>
<footer>
<div>*****|NAME : P.Y.N.D.V.KISHORE | |
REGD NO: 22A21F00A4|*****</div>
</footer>
</body>
</html>
Output:
b)User Login Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title> meta.codes - Animated Login and Registration Form
</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#2196f3, #e91e63);
overflow: hidden;
}
h2 {
font-size: 30px;
color: #555;
text-align: center;
}
.input-group {
position: relative;
width: 320px;
margin: 30px 0;
}
.input-group label {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
font-size: 16px;
color: #333;
padding: 0 5px;
pointer-events: none;
transition: .5s;
}
.input-group input {
width: 100%;
height: 40px;
font-size: 16px;
color: #333;
padding: 0 10px;
background: transparent;
border: 1px solid #333;
outline: none;
border-radius: 5px;
}
.input-group input:focus~label,
.input-group input:valid~label {
top: 0;
font-size: 12px;
background: #fff;
}
.forgot-pass {
margin: -15px 0 15px;
}
.forgot-pass a {
color: #333;
font-size: 14px;
text-decoration: none;
}
.forgot-pass a:hover {
text-decoration: underline;
}
.btn {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(to right, #2196f3, #e91e63);
box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
font-size: 16px;
color: #fff;
font-weight: 500;
cursor: pointer;
border-radius: 5px;
border: none;
outline: none;
}
</style>
</head>
<body>
<div class="form-wrapper sign-in">
<form action="">
<h2>Login</h2>
<div class="input-group">
<input type="text" required>
<label for="">Username</label>
</div>
<div class="input-group">
<input type="password" required>
<label for="">Password</label>
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a>
</div>
<button type="submit" class="btn">Login</button>
<div class="sign-link">
<p>Don't have an account? <a href="#" class="signUp-
link">Sign Up</a></p>
</div>
</form>
</div>
</div>
</body>
</html>
Output:
Registration Form
<!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: #f2f2f2;
background-image: url(bgg.jpeg);
margin: 0;
padding: 0;
}
header {
background-color:white;
background-image: url(bgg.jpeg);
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
background-color: #444;
text-align:left;
}
nav a {
text-decoration: none;
color: #fff;
margin: 10px;
padding: 10px 20px;
display: inline-block;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color:darkorange;
}
.container {
max-width: 700px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
}
h1 {
text-align: center;
color:sandybrown;
background-color: black;
max-width: 25%;
}
.styled-form {
margin-top: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.checkbox-group {
margin-top: 5px;
margin-bottom: 10px;
}
.checkbox-group label {
display: inline-block;
margin-right: 10px;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}
input[type="Register"] {
background-color: #333;
color: #fff;
padding:10px 5px;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
input[type="Register"]:hover {
background-color: #555;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
h2 {
background-color: black;
color:white;
max-width: 35%;
}
</style>
</head>
<body>
<header>
<CENTER> <h1>ONLINE BOOK STORE</h1></CENTER>
</header>
<nav>
<a href="index.html">Home</a>
<a href="bookscatalog.html">Books catalog</a>
<a href="bookstore.html">Book Store</a>
<a href="detailsform.html"> Registration Form</a>
<a href="signuporlogin.html">Sign Up/Login</a>
<a href="contactus.html">Contact Us</a>
</nav>
<div class="container">
<center><h2>Registration Form</h2></center>
<form action="Register" method="post" class="styled-form">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required>
</div>
<div class="form-group">
<label for="confirm password">Confirm Password:</label>
<input type="confirm password" id="confirm password"
name="confirm password" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"
cols="50" required></textarea>
</div>
<div class="form-group">
<label>Gender:</label>
<label for="male">Male</label>
<input type="radio" id="male" name="gender"
value="male">
<label for="female">Female</label>
<input type="radio" id="female" name="gender"
value="female">
<label for="other">Other</label>
<input type="radio" id="other" name="gender"
value="other">
</div>
<div>--------------------------------------------------------------------
---------------------------------------------------------------</div>
<div class="form-group">
<label>User Type :</label>
<label for="Student">Student</label> <input type="radio"
id="regular" name="type" value="student">
<label for="Random People">Random People</label>
<input type="radio" id="irregular" name="type" value="random
people">
<div>-----------------------------------------------------------------------------
------------------------------------------------------</div>
<div class="form-group">
<label>Books You Want :</label>
<div class="checkbox-group">
<input type="checkbox" id="sem 1" name="Books You
Want" value="sem 1">
<label for="coding">sem 1</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="sem 2" name="Books You
Want" value="sem 2">
<label for="coding">sem 2</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="sem 3" name="Books You
Want" value="sem 3">
<label for="coding">sem 3</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="sem 4" name="Books You
Want" value="sem 4">
<label for="coding">sem 4</label>
</div>
</div>
<div class="form-group">
<label for="college">College :</label>
<select id="college" name="college">
<option value="select">---select---</option>
<option value="scet">SCET</option>
<option value="siet">SIET</option>
<option value="srkr">SRKR</option>
<option value="bvrice">BVRICE</option>
</select>
</div>
<div class="form-group">
<label for="file">Upload a File:</label>
<input type="file" id="file" name="file">
</div>
<div class="form-group">
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate">
</div>
<div class="form-group">
<center> <input type="submit" value="Register"></center>
</div>
</form>
</div>
<footer>
<div>*****|NAME : P.Y.N.D.V.KISHORE | |
REGD NO: 22A21F00A4|*****</div>
</footer>
<script>
function validateForm() {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var confirmPassword =
document.getElementById('confirmPassword').value;
var message = document.getElementById('message').value;
var gender =
document.querySelector('input[name="gender"]:checked');
var userType =
document.querySelector('input[name="type"]:checked');
var booksYouWant =
document.querySelectorAll('input[name="Books You
Want"]:checked');
var college = document.getElementById('college').value;
var file = document.getElementById('file').value;
var birthdate = document.getElementById('birthdate').value;
// Perform individual field validations here
if (name === '' || email === '' || password === '' ||
confirmPassword === '' || message === '' || !gender || !userType ||
booksYouWant.length === 0 || college === 'select' || file === '' ||
birthdate === '') {
alert('Please fill in all fields');
return false;
}
if (password !== confirmPassword) {
alert('Passwords do not match');
return false;
}
// Add more validations as needed
return true;
}
</script>
</body>
</html>
Output:
c)User Profile Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Contact Us</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
background-image: url(bgg.jpeg);
}
header {
background-color:white;
background-image: url(bgg.jpeg);
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
background-color: #444;
text-align:left;
}
nav a {
text-decoration: none;
color: #fff;
margin: 10px;
padding: 10px 20px;
display: inline-block;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color:darkorange;
}
.container {
height: auto;
max-width: 800px;
margin: 2px auto;
padding: 20px;
color: #f4f4f4;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
h1 {
text-align: center;
color:sandybrown;
background-color: black;
max-width: 25%;
}
h2 {
background-color: black;
color: red;
}
p{
text-align: center;
color: #777;
font-family: system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
p{
color: seashell;
}
</style>
</head>
<body>
<header>
<CENTER> <h1>ONLINE BOOK STORE</h1></CENTER>
</header>
<nav>
<a href="index.html">Home</a>
<a href="bookscatalog.html">Books catalog</a>
<a href="bookstore.html">Book Store</a>
<a href="detailsform.html"> Registration Form</a>
<a href="signuporlogin.html">Sign Up/Login</a>
<a href="contactus.html">Contact Us</a>
</nav>
<div class="container">
<center><h2>Contact Us</h2></center>
<p>Customer Support</p>
<p> Email: [email protected] <br>
Phone:6303585210 <br>
</p>
<p>
Mailing Address : <br>
ONLINE BOOK STORE <br>
[BANGLORE,KARNATAKA,560001] <br>
[INDIA] <br>
</p>
<div>.</div>
<div>.</div>
<center><h2> Social Media</h2></center>
<p>Facebook: @bookstoreonline <br>
Twitter: @bookstoreonline9 <br>
Instagram:onine_book_stores <br></p>
<div>.</div>
<div>.</div>
<center><h2>Feedback and Inquiries :</h2> </center> <br>
<p> Have any questions, feedback, or inquiries? Fill out the form
below, and we'll get back to you as soon as possible.
</p> </div>
<div>.</div>
<footer>
<div>*****|NAME : P.Y.N.D.V.KISHORE | |
REGD NO: 22A21F00A4|*****</div>
</footer>
</body>
</html>
Output:
d) Books CatLog
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Faculty Details Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
background-image: url(bgg.jpeg);
margin: 0;
padding: 0;
}
header {
background-color:white;
background-image: url(bgg.jpeg);
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
background-color: #444;
text-align:left;
}
nav a {
text-decoration: none;
color: #fff;
margin: 10px;
padding: 10px 20px;
display: inline-block;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color:darkorange;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
h1 {
text-align: center;
color:sandybrown;
background-color: black;
max-width: 25%;
}
h2 {
background-color: black;
color: red;
max-width: 27%;
}
h3 {
background-color: black;
color: white;
max-width: 20%;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
</style>
</head>
<body>
<header>
<CENTER> <h1>ONLINE BOOK STORE</h1></CENTER>
</header>
<nav>
<a href="index.html">Home</a>
<a href="bookscatalog.html">Books catalog</a>
<a href="bookstore.html">Book Store</a>
<a href="detailsform.html"> Registration Form</a>
<a href="signuporlogin.html">Sign Up/Login</a>
<a href="contactus.html">Contact Us</a>
</nav>
<div class="container">
<h2>Book Catalog</h2>
<h3>MCA BOOKS</h3>
<table border="1px">
<tr>
<th>Title</th>
<th>Author</th>
<th>Description</th>
<th>Price</th>
<th>Rating</th>
</tr>
<tr>
<td><center> Advanced Python programming</center></td>
<td>[Author Name]</td>
<td>the book which will provide the complete info about the
python programming</td>
<td>399/-</td>
<td>★★★★☆</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<th>Title</th>
<th>Author</th>
<th>Description</th>
<th>Price</th>
<th>Rating</th>
</tr>
<tr>
<td><center>Java</center></td>
<td>[Author Name]</td>
<td>the book which will provide the complete info about the
java programming</td>
<td>300/-</td>
<td>★★★★☆</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<th>Title</th>
<th>Author</th>
<th>Description</th>
<th>Price</th>
<th>Rating</th>
</tr>
<tr>
<td><center>DBMS</center></td>
<td>[Author Name]</td>
<td>the book which will provide the complete info about the
databases</td>
<td>299/-</td>
<td>★★★★☆</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<th>Title</th>
<th>Author</th>
<th>Description</th>
<th>Price</th>
<th>Rating</th>
</tr>
<tr>
<td><center>probability and statistics</center></td>
<td>[Author Name]</td>
<td>the book which will provide the complete info about the
statistics</td>
<td>349/-</td>
<td>★★★★☆</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<th>Title</th>
<th>Author</th>
<th>Description</th>
<th>Price</th>
<th>Rating</th>
</tr>
<tr>
<td><center>Cryptography and Network
securities</center></td>
<td>[Author Name]</td>
<td>the book which will provide the complete info about the
CNS</td>
<td>399/-</td>
<td>★★★★☆</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<th>Title</th>
<th>Author</th>
<th>Description</th>
<th>Price</th>
<th>Rating</th>
</tr>
<tr>
<td><center>machine learning with python</center></td>
<td>[Author Name]</td>
<td>the book which will provide the complete info about the
machine learning</td>
<td>399/-</td>
<td>★★★★☆</td>
</tr>
<tr></tr>
<tr></tr>
</table>
<footer>
<div>*****|NAME : P.Y.N.D.V.KISHORE | |
REGD NO: 22A21F00A4|*****</div>
</footer>
</body>
</html>
Output:
e) Shopping Cart
<!DOCTYPE html>
<html>
<head>
<title>Book Store</title>
<style>
body {
font-family: Arial, sans-serif;
background-image: url(bgg.jpeg);
margin: 0;
padding: 0;
}
header {
background-color: #333;
color:white;
font-size: large;
font-family: 'Times New Roman', Times, serif;
text-align: center;
padding: 1em;
max-width: 65%;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 1em;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.book {
border: 1px solid #ddd;
padding: 1em;
margin: 1em;
display: inline-block;
border-radius: 15px;
width: calc(25% - 2em);
text-align: center;
}
.book img {
max-width: 100%;
}
.book h2 {
margin: 0;
}
.book p {
margin: 0;
}
.book button {
margin-top: 1em;
background-color: #333;
color: white;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.book input[type="button"] {
background-color: #333;
color: white;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
.ecommerce-logos {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1em;
}
.ecommerce-logo {
margin: 0 10px;
width: 60px;
}
@media (max-width: 700px) {
.container {
flex-direction: column;
align-items: center;
}
.book {
width: 100%;
margin: 0;
}
}
header :hover {
color: crimson;
font-family: 'Times New Roman', Times, serif;
}
h2{
background-color: #ddd;
}
p{
background-color: #ddd;
max-width: 100%;
}
h1 {
color: tan;
}
</style>
</head>
<body> <center><header>
<marquee behavior="flex-direction" direction="flex-
direction"><h1>Welcome to our Book Store | Welcome to our
Book Store | Welcome to our Book Store</h1></marquee>
</header></center>
<div class="container">
<div class="book">
<img src="shopping.jpeg" alt="error while loading"
height="200px" width="200px">
<h2>Web Technologies</h2>
<p>Author: Author Name</p>
<p>Price: 399/-</p>
<center><button onclick="redirectToAnotherPage()">BUY
NOW</button></center>
<center><input type="button" value="ADD TO
CART"></center>
<script>
function redirectToAnotherPage() {
window.location.href="creditcard.html";
}
</script>
</div>
<div class="book">
<img src="java.jpg" alt="error while loading" height="200px"
width="200px">
<h2>Java</h2>
<p>Author: Author Name</p>
<p>Price: 300/-</p>
<center><button onclick="redirectToAnotherPage()">BUY
NOW</button></center>
<center><input type="button" value="ADD TO
CART"></center>
<script>
function redirectToAnotherPage() {
window.location.href="creditcard.html";
}
</script>
</div>
<div class="book">
<img src="dbms.jpg" alt="error while loading" height="200px"
width="200px">
<h2>DBMS</h2>
<p>Author: Author Name</p>
<p>Price: $299/-</p>
<center><button onclick="redirectToAnotherPage()">BUY
NOW</button></center>
<center><input type="button" value="ADD TO
CART"></center>
<script>
function redirectToAnotherPage() {
window.location.href="creditcard.html";
}
</script>
</div>
<div class="book">
<img src="stats.jpg" alt="error while loading" height="200px"
width="200px">
<h2>statistics</h2>
<p>Author: Author Name</p>
<p>Price: 349/-</p>
<center><button onclick="redirectToAnotherPage()">BUY
NOW</button></center>
<center><input type="button" value="ADD TO
CART"></center>
<script>
function redirectToAnotherPage() {
window.location.href="creditcard.html";
}
</script>
</div>
<div class="book">
<img src="cns.jpeg" alt="error while loading" height="200px"
width="200px">
<h2>Cryptography</h2>
<p>Author: Author Name</p>
<p>Price: 399/-</p>
<center><button onclick="redirectToAnotherPage()">BUY
NOW</button></center>
<center><input type="button" value="ADD TO
CART"></center>
<script>
function redirectToAnotherPage() {
window.location.href="creditcard.html";
}
</script>
</div>
<div class="book">
<img src="mlp.jpeg" alt="error while loading" height="200px"
width="200px">
<h2>M L P</h2>
<p>Author: Author Name</p>
<p>Price: 399/-</p>
<center><button onclick="redirectToAnotherPage()">BUY
NOW</button></center>
<center><input type="button" value="ADD TO
CART"></center>
<script>
function redirectToAnotherPage() {
window.location.href="creditcard.html";
}
</script>
</div>
<div class="book">
<img src="stats.jpg" alt="error while loading" height="200px"
width="200px">
<h2>statistics</h2>
<p>Author: Author Name</p>
<p>Price: 349/-</p>
<center><button onclick="redirectToAnotherPage()">BUY
NOW</button></center>
<center><input type="button" value="ADD TO
CART"></center>
<script>
function redirectToAnotherPage() {
window.location.href="creditcard.html";
}
</script>
</div>
<div class="book">
<img src="cns.jpeg" alt="error while loading" height="200px"
width="200px">
<h2>Cryptography</h2>
<p>Author: Author Name</p>
<p>Price: 399/-</p>
<center><button onclick="redirectToAnotherPage()">BUY
NOW</button></center>
<center><input type="button" value="ADD TO
CART"></center>
<script>
function redirectToAnotherPage() {
window.location.href="creditcard.html";
}
</script>
</div>
<div class="book">
<img src="mlp.jpeg" alt="error while loading" height="200px"
width="200px">
<h2>M L P</h2>
<p>Author: Author Name</p>
<p>Price: 399/-</p>
<center><button onclick="redirectToAnotherPage()">BUY
NOW</button></center>
<center><input type="button" value="ADD TO
CART"></center>
<script>
function redirectToAnotherPage() {
window.location.href="creditcard.html";
}
</script>
</div>
</div>
<footer>
<div>contact us through</div>
<div class="ecommerce-logos">
<img class="ecommerce-logo" src="whatsapp.jpg" alt="E-
commerce Logo 1">
<img class="ecommerce-logo" src="insta.jpg" alt="E-commerce
Logo 2">
</div>
<div>NAME : P.Y.N.D.V.KISHORE <br> REGD NO:
22A21F00A4</div>
</footer>
</body>
</html>
Output:
f) Payment by Credit Card
<!DOCTYPE html>
<html>
<head>
<title>Credit Card Payment</title>
<style>
h1 {
background-color: #007bff;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f;
}
.payment-container {
max-width: 400px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.payment-form label {
display: block;
margin-bottom: 5px;
}
.payment-form input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 8px;
}
.payment-form button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.payment-form button:hover {
background-color: #0056b3;
}
footer {
text-align: center;
font-size: medium;
background-color: oldlace;
color: black;
font-style: oblique;
}
</style>
</head>
<body>
<div class="payment-container">
<h1>Enter Credit Card Information</h1>
<form class="payment-form" action="process_payment.php"
method="post">
<label for="card-number">Card Number:</label>
<input type="text" id="card-number" name="card-number"
required>
<label for="expiry">Expiration Date:</label>
<input type="text" id="expiry" name="expiry"
placeholder="MM/YY" required>
<label for="cvv">CVV:</label>
<input type="text" id="cvv" name="cvv" required>
<center><button
onclick="redirectToAnotherPage()">submit</button></center>
<script>
function redirectToAnotherPage() {
window.location.href="orderconfirm.html";
}
</script>
</form>
</div>
</body>
<footer>
.......thank you for shopping with us....... <br> NAME :
P.Y.N.D.V.KISHORE <br> REGD NO: 22A21F00A4
</footer>
</html>
Output:
g) Order Confirmation
<!DOCTYPE html>
<html>
<head>
<title>Order Confirmation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.confirmation-container {
max-width: 500px;
margin: 100px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
h1 {
color: #007bff;
}
p{
margin: 10px 0;
}
.btn-home {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
button {
background-color: #007bff;
}
</style>
</head>
<body>
<div class="confirmation-container">
<h1>Order Confirmation</h1>
<p>Thank you for your order!</p>
<p>Your order has been successfully placed and will be processed
shortly.</p>
<p>Order Number: <strong>#12345</strong></p>
<p>Total Amount: <strong>***/-</strong></p>
<center><button onclick="redirectToAnotherPage()">back to
home</button></center>
<script>
function redirectToAnotherPage() {
window.location.href="index.html";
}
</script>
</div>
</body>
</html>
Output:
