WEB DPDF
Uploaded by
salonisingh58494WEB DPDF
Uploaded by
salonisingh58494WEB DESIGNING PRACTICE
Q-1. Create a website regarding student management system with following web pages:
1. Login student
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Login Page</title>
<style>
*{
margin: 0; padding: 0;
}
.header{
background-color:rgb(164, 162, 165);text-align:center;
}
body{
background-image:url("https://img.freepik.com/free-photo/top-view-
notebooks-pens_179666-
47218.jpg?t=st=1721922939~exp=1721926539~hmac=0220e1e865fcca64e6918c834510426311ee63c
da136f2192c06113c665efca7");
background-size: cover; background-repeat: no-repeat;
font-family: 'Times New Roman', Times, serif;
}
.topnav{
background-color:#333;overflow: hidden;
}
.topnav a{
float:left; color:#f2f2f2;
text-align: center;
padding:14px 16px;
text-decoration: none; font-size:17px;
}
.topnav a:hover{
background-color: #fff;
color:slategray;
}
.contain{
width:400px; height:400px;
background-color:rgb(164, 162, 165);
margin-left:40%;
margin-top:7%; border-radius:25px;
text-align:center;color:black;
}
.contain h1{
font-size: 36px;
color:black;
}
.contain .text{
position:Relative;
top:7%;
}
.inp1{
border:none;
border-bottom:2px solid white;
width:250px; font-size: 20px;
margin-top:40px; outline:none; color:black;
}
.inp2{
border:none;
border-bottom:2px solid white;
width:250px; font-size: 20px;
margin-top:40px; outline:none; color:black;
}
.text button{
width:250px; height:44px; background-color:black;
color:white; border:none;
font-size:22px; border-radius:25px; margin-top: 20px;
cursor: pointer;
}
button:hover{
border:3px solid antiquewhite; color:white;
font-size: 20px; background-color: black;
}
p{
margin-top: 30px; font-size: 20px;
}
p span{
color:aqua; cursor: pointer;
}
</style>
</head>
<body><div class="header">
<h1>Welcome to Student Management System</h1>
</header></div>
<div class="topnav">
<a href="q-1 Registration.html">REGISTRATION<span class="icons"><ion-icon
name="person"></ion-icon></span></a>
<a href="q-1 course detail.html">VIEW COURSE DETAILS<span class="icons"><ion-
icon name="school"></ion-icon></span></a>
<a href="q-1 student detail.html">STUDENT DETAILS<span class="icons"><ion-
icon name="document"></ion-icon></span></a>
<a href="q-1 activity.html" class="split">VIEW ACTIVITY<span
class="icons"><ion-icon name="accessibility"></ion-icon></span></a>
</div>
<div class="contain">
<div class="text">
<h1>Login <span class="icon">⮯</span></h1>
<form action="/action_page.php"method="post"target="_blank">
<span class="icons"><ion-icon name="mail"></ion-icon></span> <input
class="inp1" type="text"placeholder="Enter UserName"><br>
<span class="icons"><ion-icon name="lock-closed"></ion-icon></span> <input
class="inp2" type="password"placeholder="Enter Password">
<br>
<a href="forgotten password.html">Forgot password?</a><br>
<button>Login</button>
<p>Not a Member?<a href="q-1 registration.html">Sign up</a></p>
</form>
</div>
</div>
<script type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
2. Registration Student
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SMS registration page</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class="topnav">
<a href="#Registration">REGISTRATION<span class="icons"><ion-icon
name="person"></ion-icon></span></a>
<a href="q-1 view c details.html">VIEW COURSE DETAILS<span
class="icons"><ion-icon name="school"></ion-icon></span></a>
<a href="#Student details">STUDENT DETAILS<span class="icons"><ion-icon
name="document"></ion-icon></span></a>
<a href="#View Activity" class="split">VIEW ACTIVITY<span class="icons"><ion-
icon name="accessibility"></ion-icon></span></a>
</div>
<div class="container">
<h2><B>Student Manangement System Registration Page</B></h2>
<div class="form-container">
<form>
<div class="input-name">
<span class="icons"><ion-icon name="person"></ion-icon></span>
<input type="text" placeholder="First Name" class="name"><br>
<span>
<span class="icons"><ion-icon name="person"></ion-icon></span>
<input type="text" placeholder="Last Name" class="name"><br>
</span>
</div>
<div class="input-name">
<span class="icons"><ion-icon name="mail"></ion-icon></span>
<input type="text" placeholder="E-mail" class="text-name"><br>
</div>
<div class="input-name">
<span class="icons"><ion-icon name="call"></ion-icon></span>
<input type="text" placeholder="phone number" class="phone
number"><br>
</div>
<div class="input-name">
<span class="icons"><ion-icon name="lock-open"></ion-icon></span>
<input type="password" placeholder="Password"
class="Password"><br>
</div>
<div class="input-name">
<span class="icons"><ion-icon name="lock-closed"></ion-
icon></span>
<input type="text" placeholder="Confirm-password" class="text-
name"><br>
</div>
<div class="input-name">
<input type="radio" class="radio-button" name="r1">
<label>Male</label>
<input type="radio" class="radio-button" name="r1">
<label>Female</label>
</div>
<div class="input-name">
<select class="country">
<option>Select a country:</option>
<option>India</option>
<option>Italy</option>
<option>Nepal</option>
<option>Bhutan</option>
<option>Japan</option>
</select>
</div>
<div class="input-name">
<input type="checkbox" class="check-button">
<label>I accept the terms and conditions</label>
</div>
<div class="input-name">
<input type="submit" class="button" value="Submit">
<div>
<input type="submit" class="button" value="Cancel"></div>
</div>
<p>Already have an account?<a href="q-1 login.html"> Login </a></p>
</form>
</div>
</div>
<div class="box"></div>
<script type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
External CSS:
*{
margin-top:10px; margin-left:0px; padding: 0;
box-sizing:border-box;
}
body{
font-size:14px;
background:white;
background-color:black;
background-repeat:no-repeat;
}
.topnav{
background-color:grey; overflow: hidden;
}
.topnav a{
float:left; color:white;
text-align: center;
padding:14px 5px;
text-decoration: none; font-size:17px;
}
.topnav a:hover{
background-color:white;
color:black;
}
.box{
width:900px; height:690px;
position: relative; left:560px; bottom:700px;
background-image:url("https://savvycomsoftware.com/wp-
content/uploads/2024/03/what-is-a-student-management-system-3.png");
background-repeat: no-repeat cover;
}
.container{
width:500px; line-height:1.0;height:700px;
padding:20px;background-color:rgb(164, 162, 165);
border-top:5px solid; border-radius:34px; position: relative; left:50px;
box-shadow: 0 0 7px 5px rgba(0,0,0,0.5);
font-style:bold;
}
.container h2{
font-size: 24px;
line-height:24px;
padding:30px;
text-align:center;
}
.input-name{
width:90%; position:relative;
margin:20px auto;
}
3. View Course Details
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Course Details</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navbar {
padding: 1rem;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: bold;
}
.navbar-nav {
margin-left: 2rem;
}
.nav-link {
color: #333;
transition: color 0.2s ease;
}
.nav-link:hover {
color: #666;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
h1 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 1rem;
}
h2 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
}
.table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 0.5rem;
text-align: left;
}
th {
background-color: #f0f0f0;
}
td {
background-color: #fff;
}
@media (max-width: 768px) {
.container {
padding: 1rem;
}
img {
height: 150px;
}
}
@media (max-width: 480px) {
.container {
padding: 0.5rem;
}
img {
height: 100px;
}
}</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Swami Vivekananad College of Computer
Science</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Student Detail</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Course Detail</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Activity</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<h1 class="text-center mb-5">Course Details</h1>
<div class="row">
<div class="col-md-4">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTMCm1j6Fz_HPOfcyuT0_pD5yv8j_5A24LP9A&s"
alt="Course Image" class="img-fluid rounded">
</div>
<div class="col-md-8">
<h2>Course Name: Bachelor of Science in Computer Science</h2>
<p class="text-muted">Duration: 4 Years</p>
<p class="text-muted">Eligibility: 10+2 with Physics, Mathematics,
and Computer Science</p>
<p class="text-justify">This course provides a comprehensive
education in computer science, including programming, algorithms, data structures,
computer networks, and database systems.</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-12">
<h2>Course Curriculum</h2>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Semester</th>
<th>Course Code</th>
<th>Course Name</th>
<th>Credits</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st Semester</td>
<td>CS101</td>
<td>Introduction to Computer Science</td>
<td>3</td>
</tr>
<tr>
<td>1st Semester</td>
<td>CS102</td>
<td>Programming Fundamentals</td>
<td>4</td>
</tr>
<tr>
<td>2nd Semester</td>
<td>CS201</td>
<td>Data Structures and Algorithms</td>
<td>4</td>
</tr>
<tr>
<td>2nd Semester</td>
<td>CS202</td>
<td>Computer Networks</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row mt-5">
<div class="col-md-12">
<h2>Course Fees</h2>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Category</th>
<th>Fees</th>
</tr>
</thead>
<tbody>
<tr>
<td>General Category</td>
<td>Rs. 1,00,000 per annum</td>
</tr>
<tr>
<td>SC/ST Category</td>
<td>Rs. 50,000 per annum</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="(link unavailable)"></script>
<script src="(link unavailable)"></script>
</body>
</html
4. Student detail Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Details</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
body {
font-family: Arial, sans-serif;
background-image:url("https://img.freepik.com/premium-photo/school-office-
colored-background-top-view-office-office-student-office_1257223-31022.jpg");
background-repeat: no-repeat; background-size: cover; color:black;
}
.container {
margin-top: 20px; background-color: thistle;
}
.card {
margin-top: 20px; background-color: snow;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f0f0f0; color:black;
}
.main--content{
position: relative;
width:100%;
padding:1rem;
}
.header--wrapper img{
width:50px;
height:50px;
cursor:pointer;
border-radius:50%;
}
.header--wrapper{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap:wrap;
background:#fff;
border-radius:10px;
padding:10px 2rem;
margin-bottom: 1rem;
}
.header--title{
color:rgba(113,99,186,255);
}
.user--info{
display: flex; align-items: center;
gap:1rem;
}
.search--box{
background: rgb(237,237,237);
border-radius: 15px;
color:rgba(113,99,186,255);
display: flex;
align-items: center;
gap:5px; padding:4px 12px;
}
.search--box input{
background: transparent;
padding:10px;
}
.search--box i{
font-size:1.2rem;
cursor:pointer;
transition:all 0.5s ease-out;
}
.search--box i:hover{
transform:scale(1.2);
}
</style>
</head>
<body>
<div class="main--content">
<div class="header--wrapper">
<div class="header--title">
<span>Your Academic History is Here..</span>
<h2>Hello, Nikunj !</h2>
</div>
<div class="user--info">
<div class="search--box">
<i class="fa-solid fa-search"></i>
<input type="text"placeholder="Search..">
</div>
<img
src="https://cdn.sanity.io/images/kts928pd/production/c2fcbae1ac2dcdbf24af1e394b95cde
0635cbc70-731x731.png" alt="boy">
</div>
</div>
<div class="container">
<div class="card">
<div class="card-body">
<h5 class="card-title">Student Name: Nikunj Rawal</h5>
<h6 class="card-subtitle mb-2 text-muted">Student ID: S12345</h6>
<p class="card-text">Email: [email protected]</p>
<p class="card-text">Phone: 123-456-7890</p>
<p class="card-text">Department: Computer Science</p>
<p class="card-text">Year: 2nd</p>
<p class="card-text">GPA: 5.5/10</p>
</div>
</div>
<h1 class="text-center">Academic History</h1>
<table class="table table-striped">
<thead>
<tr>
<th>Semester</th>
<th>Course</th>
<th>Credits</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Third Semester</td>
<td>Introduction to Computer Science</td>
<td>3</td>
<td>A-</td>
</tr>
<tr>
<td>Third Semester</td>
<td>Data Structures</td>
<td>4</td>
<td>D</td>
</tr>
<tr>
<td>Third Semester</td>
<td>Data Handling using Python</td>
<td>3</td>
<td>C+</td>
</tr>
<tr>
<td>Third Semester</td>
<td>Statistics</td>
<td>4</td>
<td>C+</td>
</tr>
<tr>
<td>Third Semester</td>
<td>Web Designing-1</td>
<td>4</td>
<td>B</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
5. View activity Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Activity</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
*{
margin: 0; padding: 0;
}
body{
font-family: 'Times New Roman', Times, serif;
background-color:rgb(1, 35, 56);
}
.h1{
font-size: 130px; color:white; text-align: center;
height:300px; width:auto; background-color: rgb(1, 35, 56);
}
.h2{
text-align: center; color:rgb(1, 35, 56);font-size:30px;
}
.h3{
position: relative; left:500px; height:300px; width:900px;
margin-bottom: -10px; display: block;
bottom:300px; color:rgb(51, 173, 248); align-content: end;
}
</style>
</head>
<body>
<div class="h1">Our Events</div>
<div class="h2">Our upcoming events</div>
<div class="container1">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTQcAvWCyXDaCLaSHI8hd3TByUGGmX5OoLiug&s" alt="god"
height="300"width="300">
<br> <div class="h3">
Ganesh Chaturthi: <p>The celebration began with a ceremonial puja
that was initiated by our respected Provost Sir. This marked the commencement of a
spiritually significant day. The puja was conducted with traditional rituals,
including the lighting of the lamp, Vedic chants, and offerings to Lord Ganesha's
idol.</p>
</div>
</div>
<div class="container2">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSsSZwVhH_LwbH4UGVrkivbrTvjwLC9k-Lwag&s"
alt="15aug" height="300"width="300">
<br> <div class="h3">
Independence Day: <p>A Celebration of Unity and Spirit! The air
buzzed with excitement as our school geared up to celebrate Republic Day! The spirit
of patriotism filled every corner, from the colorful decorations to the enthusiastic
faces of students and teachers. The day began with a solemn flag-hoisting
ceremony.</p>
</div>
</div>
<div class="container3">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1GHkY-
_9tH0iKpUB8Gn0Hm_qdUWoUcIRTkg&s" alt="garba" height="300"width="300">
<br> <div class="h3">Navratri:<p>Navratri, in Hinduism, major festival
held in honour of the divine feminine. Navratri occurs over 9 days during the month
of Ashvin, or Ashvina (in the Gregorian calendar, usually September–October). It
often ends with the Dussehra (also called Vijayadashami) celebration on the 10th
day.</p>
</div>
<div class="container4">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRi_WNq28kNoDa23aQoQrcOnWG0_cQ9NfQDzQ&s"
alt="func" height="300"width="300">
<br> <div class="h3">Annual Function:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi
neque assumenda totam harum iusto magni magnam est asperiores dicta deserunt
recusandae odio molestias suscipit eveniet beatae voluptatum veniam, sint
officia.</p>
</div>
</div>
<div class="container5">
<img
src="https://images.shiksha.com/mediadata/images/articles/1398182882phpVGC9y8.jpeg"
alt="fest" height="300"width="300">
<br> <div class="h3">College Fest:<p>Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Mollitia debitis, tempore laudantium saepe voluptate
minima cupiditate quaerat architecto neque deleniti exercitationem consequatur
aliquam facere illum omnis dolorum nostrum nihil sequi?</p>
</div>
<div class="container6">
<img
src="https://images.snapwi.re/7a42/5f1d5dabfc19a5563ce30ece.w800.jpg" alt="func"
height="300"width="300">
<br> <div class="h3">Friends Trip:<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit. Animi provident corporis assumenda quam odit
reprehenderit, praesentium ad doloribus, perspiciatis omnis incidunt mollitia id
dolor odio laborum. Unde ex deleniti perferendis?</p>
</div>
</div>
</body>
</html>
Q-2. Create a website regarding Online Banking System with following web pages:
a) Login Customer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banking Login page</title>
<style>
*{
margin:2px;
padding:5px;
}
.topnav{
background-color:#333;overflow: hidden;
}
.topnav a{
float:left; color:#f2f2f2;
text-align: center;
padding:5px 5px;
text-decoration: none; font-size:17px;
}
.topnav a:hover{
background-color: #fff;
color:black;
}
body{
background-image:url("https://framerusercontent.com/images/gO81aU6L7dN1jsCvwDhGo6noO4.jpg");
background-size:cover;
color:white;
}
.container{
text-align: center;
}
.main{
border-color: black;
border-width:3px;
border-width: 200px;
}
</style>
</head>
<div class="header">
<h1>Welcome to Online Banking Transaction System</h1>
</header></div>
<body>
<div class="topnav">
<a href="q-2 registration.html">REGISTRATION<span class="icons"><ion-icon name="person"></ion-
icon></span></a>
<a href="q-2 account details.html">ACCOUNT DETAILS<span class="icons"><ion-icon name="key"></ion-
icon></span></a>
<a href="q-2 account balance-history.html">ACCOUNT BALANCE<span class="icons"><ion-icon
name="stats-chart"></ion-icon></span></a>
<a href="q-2 account balance-history.html" class="split">TRANSACTION HISTORY<span
class="icons"><ion-icon name="trash"></ion-icon></span></a>
</div>
<div class="container">
<header>
<H1>Online Banking System</H1>
<H2>Login Here<span class="icon">⮯</span></H2>
</header>
</div>
<div class="main"> <p>Internet Banking is simple convienient,100% secure,and lets you carry out a wide range
of banking transactions and access numerous Net Banking features in just few clicks.
Now,say goodbyes to long queues and unwanted delays.With Bank, Net Banking instantly unlocks a better
lifestyle anytime and anywhere.</p>
<p>For opening a Bank Account online:</p>
<p><b>*Step 1:</b>Use the internet Banking User ID during the account opening process</p>
<p><b>*Step 2:</b>Visit the Bank's website and click on the 'New User' tab on the top left corner</p>
<p><b>*Step 3:</b>Click on the 'I want my password' button to generate your password</p>
<p><b>*Step 4:</b>Once generated, you can click on'Login' to enter your User ID and password.</p>
<form action="/action_page.php"method="post"target="_blank">
<label>Username: </label><br>
<span class="icons"><ion-icon name="mail"></ion-icon></span><input type="text"
name="username"><br><br>
<label>Password: </label><br>
<span class="icons"><ion-icon name="lock-closed"></ion-icon></span><input type="text"
name="password"><br><br>
<input type="checkbox"/>Remember me <br>
<input type="submit" value="submit">
<input type="Reset"value="Cancel"/><br>
<p>Click on the submit button, and the form will be submitted.</p>
</form>
<p>Not a Member?<a href="q-2 registration.html">Sign up</a></p>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
b) Registration Customer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Banking Registration page</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div class="header">
<h1>Welcome to Online Banking Transaction System</h1>
</header></div>
<div class="topnav">
<a href="q-2 registration.html">REGISTRATION <span class="icons"><ion-icon name="person"></ion-
icon></span></a>
<a href="q-2 account details.html">ACCOUNT DETAILS <span class="icons"><ion-icon
name="key"></ion-icon></span></a>
<a href="q-2 account balance-history.html">ACCOUNT BALANCE <span class="icons"><ion-icon
name="stats-chart"></ion-icon></span></a>
<a href="q-2 account balance-history.html" class="split">TRANSACTION HISTORY <span
class="icons"><ion-icon name="trash"></ion-icon></span></a>
</div>
<div class="container">
<h2><B>Online Banking Registration Page</B></h2>
<div class="form-container">
<form>
<div class="input-name">
<span class="icons"><ion-icon name="person"></ion-icon></span>
<input type="text" placeholder="First Name" class="name"><br>
<span>
<span class="icons"><ion-icon name="person"></ion-icon></span>
<input type="text" placeholder="Last Name" class="name"><br>
</span>
</div>
<div class="input-name">
<span class="icons"><ion-icon name="mail"></ion-icon></span>
<input type="text" placeholder="E-mail" class="text-name"><br>
</div>
<div class="input-name">
<span class="icons"><ion-icon name="lock-open"></ion-icon></span>
<input type="password" placeholder="Password" class="Password"><br>
</div>
<div class="input-name">
<span class="icons"><ion-icon name="lock-closed"></ion-icon></span>
<input type="text" placeholder="Confirm-password" class="text-name"><br>
</div>
<div class="input-name">
<input type="radio" class="radio-button" name="r1">
<label>Male</label>
<input type="radio" class="radio-button" name="r1">
<label>Female</label><br>
<span class="icons"><ion-icon name="calendar-number"></ion-icon></span><label for="start"> Date
of Birth:</label>
<input type="date" id="start" name="trip-start" value="2000-07-22" min="2000-01-01" /><br>
</div>
<div class="input-name">
<select class="account">
<option>Account Type:</option>
<option>Saving Account</option>
<option>Capital Account</option>
<option>Current Account</option>
</select>
</div>
<div class="input-name">
<input type="checkbox" class="check-button">
<label>I accept the terms and conditions</label>
</div>
<div class="input-name">
<input type="submit" class="button" value="Submit">
<div>
<input type="submit" class="button" value="Cancel"></div>
<p>Already have an account?<a href="q-2 login.html">Login</a></p>
</div>
</form>
</div>
</div>
<div class="box"></div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
External CSS:
*{
margin-top:10px; padding: 0;
box-sizing:border-box;
}
body{
font-size:14px;
color:white;
background-image:url("https://img.freepik.com/free-vector/gradient-abstract-background_23-2149131346.jpg");
background-repeat:no-repeat;
background-size:cover;
}
.header{
background-color:darkslateblue;text-align:center;
}
.topnav{
background-color:darkslateblue;overflow: hidden;
}
.topnav a{
float:left; color:white;
text-align: center;
padding:5px 10px;
text-decoration: none; font-size:17px;
}
.topnav a:hover{
background-color:white;
color:black;
}
.box{
width:900px; height:690px;
position: relative; left:560px; bottom:700px;
background-image:url("https://media.licdn.com/dms/image/D4D12AQEDyCjKlGVL1A/article-cover_image-
shrink_720_1280/0/1693251468802?e=2147483647&v=beta&t=46CBIcjGiHMv_KOGr7ZxzhvZPm5I3hHinzB7PYYBV8
0");
background-repeat: no-repeat cover;
}
.container{
width:500px; line-height:1.5;
padding:25px; font-size:100%;
border-top:5px solid;
box-shadow: 0 0 7px 5px rgba(0,0,0,0.5);
font-style:bold;
}
.container h2{
font-size:26px;
line-height:20px;
padding:30px;
text-align:center;
}
.input-name{
width:90%; position:relative;
margin:20px auto;
}
c) View Account Details
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>account details</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
body{
background-color: rgb(7, 7, 102);
font-family: 'Times New Roman', Times, serif;
color:rgb(7, 7, 102);
}
.container{
background-image:url("https://www.shutterstock.com/image-vector/business-candle-stick-graph-chart-600nw-
2169971673.jpg");
background-repeat: no-repeat; background-size: cover ;
height:800px; width:950px; color:white;
background-color:white;position: relative;
margin-top:50px; border: none; border-radius:7px;
}
.topnav{
background-color:white;overflow: hidden;
height:40px; width:auto;
}
.topnav a{
float:left; color:rgb(54, 54, 219);
text-align: center;
padding:5px 10px;
text-decoration: none; font-size:17px;
}
.topnav a:hover{
background-color:rgb(54, 54, 219);
color:white;
}
.nav{
background-color:white;overflow: hidden;
height:40px; width:auto;
}
.nav a{
float:left; color:rgb(54, 54, 219);
text-align: center;
padding:5px 10px;
text-decoration: none; font-size:17px;
}
.nav a:hover{
background-color:rgb(7, 7, 102);
color:white;
}
.container1{
background-image:url("https://www.db.com/contentAsset/image/7ac70bc5-49af-4ac3-ac5a-
afe17555305b/fileAsset/filter/Resize,Jpeg/resize_w/640/6e8c2e94-64e2-4b35-84e4-e1add2a9a7d1.jpg");
background-repeat: no-repeat; background-size: cover ;
height:700px; width:750px; background-color:rgb(54, 54, 219);
padding:5%; color:white;
position: relative; left:185px;top:14px;
}
.form-container{
position: relative; left:300px;
}
</style>
</head>
<body>
<div class="topnav">
<a href="q-2 registration.html">REGISTRATION <span class="icons"><ion-icon name="person"></ion-
icon></span></a>
<a href="q-2 account details.html">ACCOUNT DETAILS <span class="icons"><ion-icon
name="key"></ion-icon></span></a>
<a href="q-2 account balance-history.html">ACCOUNT BALANCE <span class="icons"><ion-icon
name="stats-chart"></ion-icon></span></a>
<a href="q-2 account balance-history.html" class="split">TRANSACTION HISTORY <span
class="icons"><ion-icon name="trash"></ion-icon></span></a>
</div>
<div class="container">
<div class="nav">
<a href="#">Account</a>
<a href="#">Investments</a>
<a href="#">History</a>
<a href="#">Loans</a>
<form class="example"action="action_page.php"><input
type="text"placeholder="Search.."name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form> <hr>
</div>
<h2>My Account</h2>
<div class="container1">
<h2><b>My details</b></h2> <br>
<p><b>Personal Information</b></p><hr>
<p>Assertively utilize adaptive customer<br>service for future-proof platforms. <br>Completely drive
optimal markets.</p>
<div class="form-container">
<form><label><b>Name:</b></label><span class="label succes"> SHAILI MISHRA</span><br>
<label><b>Country Code:</b></label><span class="label succes"> IND</span><br>
<label><b>Currency Code:</b></label><span class="label succes"> RS</span><br>
<label><b>Status:</b></label><span class="label succes"> Active</span><br>
<label><b>Bank Code:</b></label><span class="label succes"> 01506801</span><br>
<label><b>Account Type:</b></label><input type="radio" name="account" id="checking">
<label for="checking">Checking</label>
<input type="radio" name="account" id="saving">
<label for="Savings">Savings</label><br>
<label><b>Account Number:</b></label><span class="label succes">
XXXXXXXX6312</span><br>
<label><b>Phone Number:</b></label><span class="label succes"> 9852301467</span><br>
<label><b>Account Name:</b></label><span class="label succes"> STATE BANK OF
INDIA</span><br>
<label><b>Nickname:</b></label><span class="label succes"> SHAILU</span><br>
<label><b>E-MAIL ADDRESS:</b></label><span class="label succes">
[email protected]</span><br>
<label><b>IBAN:</b></label><span class="label succes"> XXXXXXX6312</span><br>
<label><b>IFSC Code:</b></label><span class="label succes"> ABNANL2AXXX</span><br>
<label><b>Last Updated On:</b></label><span class="label succes"> 06/07/2013
12:17:28AM</span><br>
</form>
</div>
</div>
</body>
</html>
d) View Account Balance/ View Transaction History
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>account balance</title>
<link rel="stylesheet" href="style3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="sidebar">
<div class="logo"></div>
<ul class="menu">
<li class="active">
<a href="#"><i class="fas fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#"><i class="fas fa-user"></i>
<span>Profile</span>
</a>
</li>
<li>
<a href="q-2 registration.html"><i class="fas fa-chart-bar"></i>
<span>Registration</span>
</a>
</li>
<li>
<a href="q-2 account details.html"><i class="fas fa-briefcase"></i>
<span>Account Details</span>
</a>
</li>
<li>
<a href="q-2 account balance-history.html"><i class="fas fa-question-circle"></i>
<span>Account Balance</span>
</a>
</li>
<li>
<a href="#"><i class="fas fa-cog"></i>
<span>Settings</span>
</a>
</li>
<li class="logout">
<a href="#"><i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</li>
</ul>
</div>
<div class="main--content">
<div class="header--wrapper">
<div class="header--title">
<span>Manage your balance</span>
<h2>Hello, Shaili !</h2>
</div>
<div class="user--info">
<div class="search--box">
<i class="fa-solid fa-search"></i>
<input type="text"placeholder="Search..">
</div>
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSwsyapq8xOW6p67xFc2GajFYpywtdkSg2cDTSIHjIFmk_HHBFaNKyfo
Wt2HpLam_aALe0&usqp=CAU" alt="bank">
</div>
</div>
<div class="card--container">
<h3 class="main--title">Today's Data</h3>
<div class="card--wrapper">
<div class="payment--card
light-red">
<div class="card--header">
<div class="amount">
<span class="title">Payment Amount</span>
<span class="amount-value">$500.00</span>
</div>
<i class="fas fa-dollar-sign icon"></i>
</div>
<span class="card--detail">**** **** **** 3484</span>
</div>
<div class="payment--card
light-purple">
<div class="card--header">
<div class="amount">
<span class="title">Payment Order</span>
<span class="amount-value">$200.00</span>
</div>
<i class="fas fa-list icon dark-purple"></i>
</div>
<span class="card--detail">**** **** **** 5542</span>
</div>
<div class="payment--card
light-blue">
<div class="card--header">
<div class="amount">
<span class="title">Payment proceed</span>
<span class="amount-value">$150.00</span>
</div>
<i class="fa-solid fa-check icon dark-blue"></i>
</div>
<span class="card--detail">**** **** **** 7745</span>
</div>
<div class="payment--card
light-green">
<div class="card--header">
<div class="amount">
<span class="title">Payment Customer</span>
<span class="amount-value">$350.00</span>
</div>
<i class="fas fa-users icon dark-green"></i>
</div>
<span class="card--detail">**** **** **** 9520</span>
</div>
</div>
</div>
<div class="tabular--wrapper">
<h3 class="main--title">Transaction History</h3>
<div class="table-container">
<table>
<th>
<tr>
<th>Date</th>
<th>Transaction Type</th>
<th>E-mail</th>
<th>Amount</th>
<th>Category</th>
<th>Status</th>
<th>Action</th>
</tr>
<tbody>
<tr>
<td>2023-05-01</td>
<td>Expense</td>
<td>[email protected]</td>
<td>$250</td>
<td>Office Expenses</td>
<td>Pending</td>
<td><button>Edit</button></td>
</tr>
<tr>
<td>2023-10-27</td>
<td>Income</td>
<td>[email protected]</td>
<td>$500</td>
<td>Sales</td>
<td>Completed</td>
<td><button>Edit</button></td>
</tr>
<tr>
<td>2024-04-11</td>
<td>Expense</td>
<td>[email protected]</td>
<td>$250</td>
<td>Travel</td>
<td>Processing</td>
<td><button>Edit</button></td>
</tr>
<tr>
<td>2023-08-10</td>
<td>Expense</td>
<td>[email protected]</td>
<td>$700</td>
<td>Travel</td>
<td>Complete</td>
<td><button>Edit</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td col-span="7">Total: $1,000</td>
</tr>
</tfoot>
</th>
</table>
</div>
</div>
</div>
</body>
</html>
External CSS:
@import
url("https://fonts.googleapis.com/css2?family=poppins:wght@400;600&display=swap")
;
*{
margin: 0;
padding: 0;
border: none;
outline: none;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body{
display: flex;
}
.sidebar{
position: sticky;
top: 0; left: 0; bottom: 0;
width:110px; height:100vh;
padding:0 1.7rem; color:#fff; overflow: hidden;
transition: all 0.5s linear;background: rgba(113,99,186,255);
}
.sidebar:hover{
width:300px; transition:1.0s;
}
.logo{
height:80px; padding:16px;
}
.menu{
height:88%;
position: relative;
list-style: none;
padding:0;
}
.menu li{
padding:1rem;
margin:8px 0;
border-radius: 8px;
transition:all 0.5s ease-in-out;
}
.menu li:hover,
.active{
background:#e0e0e058;
}
.menu a{
color: #fff;
font-size: 14px;
text-decoration:none;
display: flex;
align-items: center;
gap:1.5rem;
}
.menu a span{
overflow: hidden;
}
.menu a i{
font-size: 1.2rem;
}
.logout{
position:absolute;
bottom: 0; left: 0;
width:100%;
}
.main--content{
position: relative;
background:#ebe9e9;;
width:100%;
padding:1rem;
}
.header--wrapper img{
width:50px;
height:50px;
cursor:pointer;
border-radius:50%;
}
.header--wrapper{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap:wrap;
background:#fff;
border-radius:10px;
padding:10px 2rem;
margin-bottom: 1rem;
}
.header--title{
color:rgba(113,99,186,255);
}
.user--info{
display: flex; align-items: center;
gap:1rem;
}
.search--box{
background: rgb(237,237,237);
border-radius: 15px;
color:rgba(113,99,186,255);
display: flex;
align-items: center;
gap:5px; padding:4px 12px;
}
.search--box input{
background: transparent;
padding:10px;
}
.search--box i{
font-size:1.2rem;
cursor:pointer;
transition:all 0.5s ease-out;
}
.search--box i:hover{
transform:scale(1.2);
}
.card--container{
background: #fff;
padding:2rem;
border-radius:10px;
}
.card--wrapper{
display: flex;
flex-wrap:wrap;
gap:1rem;
}
.main--title{
color:rgba(113,99,186,255);
padding-bottom:10px;
font-size:15px;
}
.payment--card{
background:rgb(237,237,237);
border-radius: 10px;
padding:1.2rem;
width:290px; height: 150px;
display:flex;
flex-direction:column;
justify-content: space-between;
transition:all 0.5s ease-in-out;
}
.payment--card:hover{
transform: translateY(-5px);
}
.card--header{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom:20px;
}
.amount{
display: flex;
flex-direction:column;
}
.title{
font-size:12px;
font-weight:200;
}
.amount--value{
font-size: 24px;
font-family:'Courier New', Courier, monospace; font-weight: 600;
}
.icon{
color:#fff; padding:1rem;
height:50px; width:50px; text-align: center;
border-radius: 50%; font-size: 1.5rem;
background: red;
}
.card--detail{
font-size:18px;
color:#777777;
letter-spacing:2px;
font-family:'Courier New', Courier, monospace;
}
.light-red{
background:rgb(251,233,233);
}
.light-purple{
background:rgb(254,226,254);
}
.light-green{
background:rgb(235,254,235);
}
.light-blue{
background:rgb(236,236,254);
}.dark-red{
background:red;
}.dark-purple{
background:purple;
}.dark-green{
background:green;
}.dark-blue{
background:blue;
}
.tabular--wrapper{
background: #fff;
margin-top: 1rem;
border-radius: 10px;
padding: 2rem;
}
.table-container{
width:100%;
}
table{
width: 100%;
border-collapse: collapse;
}
thead{
background: rgba(113,99,186,255);
color: #fff;
}
th{
padding:15px;
text-align: left;
}
tbody{
background: #f2f2f2;
}
td{
padding:15px;
font-size: 14px;
color:#333;
}
tr:nth-child(even){
background:#fff;
}
/* tfont{
background:rgba(113,99,186,255);
font-weight: bold;
color: #fff;
} */
tfoot td{
padding:15px;
color:#fff;
}
.table-container button{
color:green;
background: none;
cursor:pointer;
}
Q-3. Design a website for a medical store with the following pages:
a) Home/index page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home page</title>
<style>
.header{
background-color:rgba(14, 82, 255, 0.745);
color:white;width:auto; height:25px;
}
.navbar{
height:40px; width:auto; margin-top:2px;
background-color:white; overflow:hidden;
}
.navbar a{
float:left; color:rgba(14, 82, 255, 0.745); text-align:center;
padding:14px 16px; text-decoration:none; font-size: 17px;
}
.navbar a:hover{
background-color:rgba(14, 82, 255, 0.745); color:white;
}
.header1{
background-color:rgba(66, 118, 249, 0.745);
width:auto; height:30px; margin-top:5px;
}
.container{
margin-top:40px; height:300px; width:auto;
}.container1{
margin:0; padding:0; height:150px; width:300px;
background-image:url("https://ascendpkg.com/wp-content/uploads/2022/04/April-1-tablet-Sizes-
and-Shapes.jpg");
background-repeat:no-repeat; background-size:cover;
} .container2{
margin:0; padding:0; height:150px; width:300px;
background-image:url("https://media.istockphoto.com/id/1188915726/photo/cropped-view-of-ill-
woman-with-grey-scarf-taking-cough-syrup.jpg?s=612x612&w=0&k=20&c=FUZ-
WtsZV5ER90GsnqmBYtvYfFZt0po2RMD8F4QIvMA=");
background-repeat:no-repeat; background-size:cover;
} .container3{
margin:0; padding:0; height:300px; width:950px;
position:relative; left:300px; bottom:300px; color:white; font-size:xx-large;
text-align:center; line-height:1.0;
background-image:url("https://akm-img-a-
in.tosshub.com/businesstoday/images/story/202210/64e01bf1f7dbd9099e249e9c3247fdbb9a46b4b1-
1280x720-sixteen_nine.jpg"); background-repeat:no-repeat;
background-size:cover;
} .container4{
margin:0; padding:0; height:300px; width:300px;
position:relative; left:1220px; bottom:600px;
background-image:url("https://media.istockphoto.com/id/1353657651/photo/syringes-injection-
bottles-and-tablets-lying-on-the-
table.jpg?s=612x612&w=0&k=20&c=tw_JX8mSuOsDOT_5vbdnrviZczVEjyRs9uO1PRYzP2I=");
background-repeat:no-repeat;
background-size:cover;
}
.bigcon{
height:300px; width:auto; color:white; font-family:Cambria, Cochin, Georgia, Times, 'Times New
Roman', serif;
font-size:larger; text-indent:10%; background-color:rgba(66, 118, 249, 0.745);
}
.bigcon1{
background-
image:url("https://cdn.sanity.io/images/0vv8moc6/pharmtech/3624538d130087cadcaeb2c157a0ed312897
4dcf-1280x720.jpg");
height:300px; width:800px;
position: relative;
left:702px; bottom:169px;
background-repeat: no-repeat; background-size:cover;
}
.bigcon2{
height:100px; width:20px; background-color:yellow;
position:relative; left:90px; bottom:410px;
}
.main{
height:800px; width:auto; background-color:white;
margin-top:50px; font-style: italic; font-family: Georgia, 'Times New Roman', Times, serif;
}
.main1{ height:300px; width:300px;
background-image:url("https://assets.sainsburys-groceries.co.uk/gol/8075006/1/640x640.jpg");
background-repeat:no-repeat; background-size:200px; align-content:end;
}
.main2{ height:300px; width:300px; position:relative; left:300px; bottom:300px;
background-image:url("https://5.imimg.com/data5/LV/WI/MY-40681581/medimix-soap.jpg");
background-repeat:no-repeat; background-size:200px; align-content:end;
}
.main3{ height:300px; width:300px;position:relative; left:600px; bottom:600px;
background-
image:url("https://www.ocado.com/productImages/741/74190011_0_640x640.jpg?identifier=60dc74ca80
e6b93eb1a3b6fc7847b096");
background-repeat:no-repeat; background-size:200px; align-content:end;
}
.main4{ height:300px; width:300px;position:relative; left:900px; bottom:900px;
background-
image:url("https://5.imimg.com/data5/SELLER/Default/2021/6/TB/WN/FD/14155441/moov-spray.jpg");
background-repeat:no-repeat; background-size:200px; align-content:end;
}
.main5{ height:300px; width:300px;position:relative; left:1200px; bottom:1200px;
background-image:url("https://www.savers.co.uk/medias/sys_master/front-zoom/front-
zoom/h36/h56/8991743180830/Galpharm-Hayfever-and-Allergy-Relief-Tablets-x-14-402303.jpg");
background-repeat:no-repeat; background-size:200px; align-content:end;
}
.main6{ height:300px; width:300px;position:relative; left:300px; bottom: 1000px;
background-image:url("https://m.media-
amazon.com/images/I/61f7gbseQoL._AC_UF1000,1000_QL80_.jpg");
background-repeat:no-repeat; background-size:180px; align-content:end;
}
.main7{ height:300px; width:300px;position:relative; left:600px; bottom:1300px;
background-image:url("https://m.media-
amazon.com/images/I/61OikCCacQL._AC_UF1000,1000_QL80_.jpg");
background-repeat:no-repeat; background-size:180px; align-content:end;
}
.main8{ height:300px; width:300px;position:relative; left:900px; bottom:1600px;
background-image:url("https://www.lotusherbals.com/cdn/shop/products/Lotus-herbals-anupam-
sir2167_1.jpg?v=1688801891");
background-repeat:no-repeat; background-size:210px; align-content:end;
}
.main9{ height:300px; width:300px;position:relative; left:1200px; bottom:1900px;
background-image:url("https://tiimg.tistatic.com/fp/1/007/768/paracetamol-tablets-i-p-crocin-650-
pack-of-30-tablets--912.jpg");
background-repeat:no-repeat; background-size:170px; align-content:end;
}
.main10{ height:300px; width:300px;position:relative; bottom:2200px;
background-image:url("https://m.media-
amazon.com/images/I/71SlxOk8DCL._AC_UF1000,1000_QL80_.jpg");
background-repeat:no-repeat; background-size:200px; align-content:end;
}
</style>
</head>
<body>
<div class="header">
<p>Save Up To 40% on First buy !!
<span class="icons"><ion-icon name="logo-youtube"></ion-icon></span>
<span class="icons"><ion-icon name="logo-whatsapp"></ion-icon></span>
<span class="icons"><ion-icon name="logo-facebook"></ion-icon></span>
<span class="icons"><ion-icon name="logo-instagram"></ion-icon></span>
<span class="icons"><ion-icon name="logo-twitter"></ion-icon></span></p>
</div>
<div class="navbar">
<a href="q-3 Registration.html">REGISTRATION<span class="icon"><ion-icon
name="person"></ion-icon></span></a>
<a href="q-3 home.html">HOME<span class="icon"><ion-icon name="home"></ion-
icon></span></a>
<a href="q-3 medicine stock.html">MEDICINE STOCK<span class="icon"><ion-icon name="bag-
handle"></ion-icon></span></a>
</div>
<div class="header1">
<span class="icons"><ion-icon name="search"></ion-icon></span>
<input type="text" placeholder="Search..." class="Search Bar"><br>
</div>
<div class="container">
<div class="container1"></div>
<div class="container2"></div>
<div class="container3">We Care for You and Your Health
<p>Medical Store</p>
<p><button> Book Now! </button></p>
</div>
<div class="container4"></div>
</div>
<div class="bigcon">
<p>Grab Latest Offers !</p>
<p>Contact us Anytime </p> <P><span class="icons"><ion-icon name="call"></ion-icon></span> Call
us 24*7 (9874023651)</P>
<p><button> VISIT STORE NOW </button></p>
<div class="bigcon1"></div>
<div class="bigcon2"></div>
</div>
<div class="main">
<div class="main1">
<p>Bell's Healthcare Paracetamol 500mg TabletsX16 <br> (MRP:Rs450.00/-)</p>
<form action="#">
<button type="submit"class="btn-primary">Buy now</button>
</form>
</div>
<div class="main2">
<p>Medimix Ayurvedic 18 Herbs Soap <br>(MRP:Rs200.00/-)</p>
<form action="#">
<button type="submit"class="btn-primary">Buy now</button></form>
</div>
<div class="main3">
<p>Speedy Nasal Inhaler <br> (MRP:Rs69.00/-)</p><form action="#">
<button type="submit"class="btn-primary">Buy now</button></form>
</div>
<div class="main4">
<p>Moov Pain Relief Spray, 35gm <br>(MRP:Rs186.00/-)</p><form action="#">
<button type="submit"class="btn-primary">Buy now</button></form>
</div>
<div class="main5">
<p>Galpharm Hayfever & Allergy Relief Tablets <br> (MRP:Rs30.00/-)</p><form action="#">
<button type="submit"class="btn-primary">Buy now</button></form>
</div>
<div class="main6">
<p>Himalaya Koflet Cough Syrup, 100ml <br>(MRP:Rs125.00/-)</p><form action="#">
<button type="submit"class="btn-primary">Buy now</button></form>
</div>
<div class="main7">
<p>Savlon Deep Clean Liquid <br>(MRP:Rs99.00/-)</p><form action="#">
<button type="submit"class="btn-primary">Buy now</button></form>
</div>
<div class="main8">
<p>Lotus Herbals Skin Whitening & Brightening Gel cream <br>(MRP:Rs249.00/-)</p><form
action="#">
<button type="submit"class="btn-primary">Buy now</button></form>
</div>
<div class="main9">
<p>Crocin 650 Advance Tablets <br> (MRP:Rs33.00/-)</p><form action="#">
<button type="submit"class="btn-primary">Buy now</button></form>
</div>
<div class="main10">
<p>Hansaplast Soft Cotton Pain Relief Crepe Bandage Pack <br>(MRP:Rs110.00/-)</p><form
action="#">
<button type="submit"class="btn-primary">Buy now</button></form>
</div>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
b) Registration page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration page</title>
<style>
*{
margin:0; padding: 0;
}
body{
background-image:url("https://image.slidesdocs.com/responsive-images/background/health-
hospital-medical-white-technology-dark-powerpoint-background_bd6000b40b__960_540.jpg");
color:white;
background-repeat:no-repeat;
background-size: cover;
}
.topnav{
background-color:#09294b;overflow: hidden;
}
.topnav a{
float:left; color:#f2f2f2;
text-align: center;
padding:14px 16px;
text-decoration: none; font-size:17px;
}
.topnav a:hover{
background-color: #fff;
color:black;
}
.registration-form{
width:500px; margin:100px auto ;
height:500px; line-height:2.0;
padding:20px; font-size:larger;
border:1px solid #ccc;
border-radius:15px;
background-
image:url("https://i.pinimg.com/736x/64/e0/02/64e002071b9df4830eb6b8395710d279.jpg");
background-repeat:no-repeat; background-size:cover;
color:white;
}
</style>
</head>
<body>
<div class="topnav">
<a href="#Registration">REGISTRATION<span class="icon"><ion-icon name="person-
remove"></ion-icon></span></a>
<a href="q-3 home.html">HOME<span class="icon"><ion-icon name="home"></ion-
icon></span></a>
<a href="#Service">MEDICINE STOCK<span class="icon"><ion-icon name="bag-handle"></ion-
icon></span></a>
</div>
<header>
<h1>Medical Store Registration page</h1>
</header>
<main>
<section class="registration-form">
<h2>Register here <span style='font-size:40px;'>👇</span></h2>
<form id="registration-form" action="registration-process.php" method="post">
<span class="icons"><ion-icon name="person"></ion-icon></span><label for="name"> Full
Name:</label>
<input type="text" id="name" name="name" required pattern="[A-Za-z\s]+" title="Name can
only contain letters and spaces."><br>
<span class="icons"><ion-icon name="lock-open"></ion-icon></span><label for="password">
Password:</label>
<input type="password" id="password" name="password" required><br>
<span class="icons"><ion-icon name="mail"></ion-icon></span><label for="email">
Email:</label>
<input type="email" id="email" name="email" required><br>
<span class="icons"><ion-icon name="airplane"></ion-icon></span><label for="city">
City:</label>
<input type="city" id="city" name="city" required><br>
<span class="icons"><ion-icon name="pin"></ion-icon></span><label for="pincode">
Pincode:</label>
<input type="text" id="pincode" name="pincode" required pattern="\d{6}" title="Pincode must
be exactly 6 digits."><br>
<span class="icons"><ion-icon name="calendar-number"></ion-icon></span><label
for="start"> Date of Birth:</label>
<input type="date" id="start" name="trip-start" value="2000-07-22" min="2000-01-01" /><br>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="Female">
<label for="Female">Female</label><br>
<button type="submit">Register</button>
</form>
<p>Already have an account? <a href="q-3 login.html">Login here</a></p>
</section>
</main>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
c) Login page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medical Login Page</title>
<style>
body{
background-
image:url("https://i.pinimg.com/1200x/31/c4/30/31c43095c69a166ba131aefdb5b4ac7d.jpg");
background-repeat: no-repeat;
background-size:cover;
color:white;
}
.header{
background-color:rgb(7, 58, 89);text-align:center;
}
.container{
text-align:center;
}
.topnav{
background-color:#09294b;overflow:hidden;
}
.topnav a{
float:left;
color:white; text-align:center; padding:14px 16px; text-decoration:none; font-size: 17px;
}
.topnav a:hover{
background-color: #ddd; color:black;
}
.container1{
max-width:600px;margin:50px auto; color:white;font-size:larger;
padding:20px;border:2px transparent white; position:relative;
right:230px;background-image:url("https://meditechinsights.com/wp-
content/uploads/2022/06/Clinical-Trial-Management-System-Market-Website-New-
e1654509738197.jpg");
background-repeat: no-repeat cover;
}
.form-group{
margin-bottom:20px;
}
.btn-primary{
background-color:#007bff;
border-color:black;
}
.btn-primary:hover{
background-color:#0056b3;
border-color:#0056b3;
}
</style>
</head>
<div class="header">
<h1>Welcome to Medical Store</h1>
</header></div>
<body>
<div class="topnav">
<a href="q-3 Registration.html">REGISTRATION<span class="icon"><ion-icon name="person-
remove"></ion-icon></span></a>
<a href="#Home">HOME<span class="icon"><ion-icon name="home"></ion-icon></span></a>
<a href="#Service">MEDICINE STOCK<span class="icon"><ion-icon name="bag-handle"></ion-
icon></span></a>
</div>
<div class="container">
</div>
<div class="container1"><h2 class="text-center">Login Here <span style='font-
size:40px;'>👇</span></h2>
<form id="loginform"><div class="form-group"><span class="icon"><ion-icon name="mail"></ion-
icon></span><label for="username"> Email:</label>
<input type="text"class="form-control"id="username"name="username"required>
</div>
<div class="form-group"><span class="icon"><ion-icon name="lock-closed"></ion-
icon></span><label for="password"> Password:</label>
<input type="text"class="form-control"id="password"name="password"required>
</div>
</form>
<input type="checkbox"/>Remember me.. <br><form
action="/action_page.php"method="post"target="s_blank">
<button type="submit"class="btn-primary">submit</button>
<button type="Reset"class="btn-primary">Reset</button><br><a href="forgotten
password.html">Forgot Password?</a>
<p>Not a member? <a href="q-3 registration.html">Login here</a></p>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
d) Medicine Stock Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>medicine stock</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
body{
margin: 0; padding: 0;
font-family: 'Times New Roman', Times, serif;
}
.header{
background-color:rgba(14, 82, 255, 0.745);
color:white; width:auto; height:70px;
}
.navbar{
height:50px; width:auto; margin-top:2px;
background-color:rgba(14, 82, 255, 0.745); overflow:hidden;
}
.navbar a{
float:left; color:white; text-align:center;
padding:14px 16px; text-decoration:none; font-size:17px;
}
.navbar a:hover{
background-color:white; color:rgba(14, 82, 255, 0.745);
}
.container{
margin-top:20px; color:blue;
height:600px; width:auto; background-color:rgba(14, 82, 255, 0.745); font-family: 'Times New
Roman', Times, serif;
}
.container1{
background-color:black; height:300px; width:500px; position:relative;
background-
image:url("https://t3.ftcdn.net/jpg/03/62/35/22/360_F_362352205_ZWanzMMllOWEWvD9WYNPkSHH
XYaZoaAD.jpg");
background-repeat:no-repeat; background-size: cover;
}
.container2{
background-color:green; height:300px; width:500px;
background-image:url("https://media.istockphoto.com/id/1202232039/vector/healthcare-trends-
and-innovative-
technologies.jpg?s=612x612&w=0&k=20&c=dedmpqLG6B0F2XSVIQoXgy7h8ynHPaqMrTtWSJtgM0
U=");
background-repeat:no-repeat; background-size:cover;
}
.container3{
background-color:green; height:300px; width:610px;
position: relative; left:500px; bottom:600px;
background-
image:url("https://as1.ftcdn.net/v2/jpg/03/90/83/76/1000_F_390837617_3LjjpSK3OvS20IeBjr2sXsd72jr
mul7n.jpg");
background-repeat:no-repeat; background-size: cover;
}
.container4{
background-color:black; height:300px; width:610px;
position: relative; left:500px; bottom:600px;
background-image:url("https://cdn.create.vista.com/api/media/small/143644741/stock-vector-a-
group-of-doctors-standing-side-by-side");
background-repeat:no-repeat; background-size:100%;
}
.cont{
background-color:white;
font-family: 'Times New Roman', Times, serif;
color:rgba(14, 82, 255, 0.745); width:auto; height:200px;
margin-top:15px;
}
.footer{
background-color: rgba(14, 82, 255, 0.745);
height:150px; width:auto; margin-top:30px;
color:white; text-align: center; font-size:xx-large;
background-
image:url("https://t4.ftcdn.net/jpg/05/12/05/07/360_F_512050720_raHVOBRGefjx7sprIA1yAh5dJonKlH
Rn.jpg");
background-repeat:no-repeat; background-size:cover;
}
.main{
background-
image:url("https://us.123rf.com/450wm/vectomart/vectomart1307/vectomart130700104/20922706-
illustration-of-heart-beats-on-healthcare-and-medical-background.jpg");
background-repeat:no-repeat; background-size:100%; color:white;
height:719px;
}
table{
width:100%; border-collapse:collapse;
margin:10px 0;
}
th,td{
border:1px solid white; padding:5px; text-align:left;
}
th{
background-color:blue; color:white;
}
tr:hover{
background-color:rgba(14, 82, 255, 0.745); color:white;
}
</style>
</head>
<body>
<div class="header">
<i><b>HEALTHCARE STOCKS</b></i> <p>The healthcare sector grows significantly faster than
the overall global economy.</p>
</div>
<div class="navbar">
<a href="q-3 Registration.html">REGISTRATION <span class="icon"><ion-icon
name="person"></ion-icon></span></a>
<a href="q-3 home.html">HOME <span class="icon"><ion-icon name="home"></ion-
icon></span></a>
<a href="q-3 medicine stock.html">MEDICINE STOCK <span class="icon"><ion-icon name="bag-
handle"></ion-icon></span></a>
</div>
<div class="container">
<div class="container1"><a href="#" class="btn btn-primary">Drug Stocks</a></div>
<div class="container2"><a href="#" class="btn btn-primary">Medical Device Stocks</a></div>
<div class="container3"><a href="#" class="btn btn-primary">Payer Stocks</a></div>
<div class="container4"><a href="#" class="btn btn-primary">Healthcare Provider
Stocks</a></div>
</div>
<div class="cont">
<p>Concord Biotech Ltd, founded in 2000, is a leading manufacturer of biopharmaceuticals and
active pharmaceutical ingredients. The company specialises in fermentation-based biopharmaceutical
products. Concord Biotech has expanded its production capacity for fermentation-based
biopharmaceuticals to meet increasing global demand.As of 18th June 2024, Concord Biotech Ltd had a
market capitalisation of Rs. 15,186.61 cr. and a stock price of Rs. 1,582.70. The PE ratio is 49.29, with a
1-year return of 67.87%. The 5-year average net profit margin is 29.67%, and the 5-year average return on
investment is 19.36%.</p>
<p><b>Regulatory Risks</b>: The pharma industry is subject to stringent regulations. However, the
pharma stocks in smallcase portfolios (such as Pharma Tracker) have a proven track record of compliance
that can mitigate this risk. <br>
<b>Patent Risks</b>: The expiration of patents for major drugs can lead to increased competition.
However, smallcase portfolios that invest in pharma company shares with a strong pipeline of drugs and a
focus on R&D can help mitigate this.<br>
<b>Currency Fluctuations</b>: The Indian pharma industry relies heavily on exports, which
currency fluctuations can impact. However, pharma smallcase portfolios have a strong presence in
domestic and international markets that can help mitigate risks.
<br>
<b>Competition From Generics</b>: The pharma industry is highly competitive, with many
established players having a strong brand reputation. However, if you invest in the listed pharma
companies in India with high-quality products, you can mitigate the risk of generic competition.</p>
</div>
<div class="footer"><b>MEDICATION INVENTORY</b></div>
<div class="main">
<form id="medicineForm">
<div class="form-group">
<label for="YourName">Your Name:</label>
<input type="text"class="form-control"id="YourName"placeholder="[YOUR
NAME]"required>
</div>
<div class="form-group">
<label for="Company">Company:</label>
<input type="text"class="form-control"id="Company"placeholder="[COMPANY]"required>
</div>
<div class="form-group">
<label for="Date">Date:</label>
<input type="date"class="from-control"id="Date"required>
</div>
<p>This comprehensive medication inventory is meticulously prepared to ensure accurate tracking
and manangemnet of our pharmacy's stock. It serves as an essential tool for optimizing inventory levels,
ensuring medication safety, and facilitating efficient healthcare delivery.</p>
</form>
<div id="message" class="mt-3"></div>
<table>
<thead>
<tr>
<th>Medication Name</th>
<th>Price (per pcs.)</th>
<th>Quantity</th>
<th>Expiration Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bell's Healthcare Paracetamol Tablets</td>
<td>450.00/-</td>
<td>30</td>
<td>2025-05-01</td>
</tr>
<tr>
<td>Medimix Ayurvedic 18 Herbs Soap</td>
<td>200.00/-</td>
<td>50</td>
<td>2024-12-19</td>
</tr>
<tr>
<td>Speedy Nasal Inhaler</td>
<td>69.00/-</td>
<td>25</td>
<td>2024-10-03</td>
</tr>
<tr>
<td>Moov Pain Relief Spray</td>
<td>186.00/-</td>
<td>36</td>
<td>2024-05-16</td>
</tr>
<tr>
<td>Hayfever & Allergy Relief Tablets</td>
<td>30.00/-</td>
<td>38</td>
<td>2026-05-13</td>
</tr>
<tr>
<td>Soft Cotton Pain Relief Creep Bandage</td>
<td>110.00/-</td>
<td>12</td>
<td>2024-12-08</td>
</tr>
<tr>
<td>Himalaya Koflet Cough Syrup</td>
<td>125.00/-</td>
<td>10</td>
<td>2024-12-30</td>
</tr>
<tr>
<td>Savlon Deep clean liquid</td>
<td>99.00/-</td>
<td>55</td>
<td>2025-05-01</td>
</tr>
<tr>
<td>Lotus skin whitening cream</td>
<td>249.00/-</td>
<td>25</td>
<td>2024-10-12</td>
</tr>
<tr>
<td>Crocin 650 Advance Tablets</td>
<td>33.00/-</td>
<td>20</td>
<td>2025-09-11</td>
</tr>
</tbody>
</table>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
e) About us Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MedCare - About Us</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navbar {
padding: 1rem;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: bold;
}
.navbar-nav {
margin-left: 2rem;
}
.nav-link {
color: #333;
transition: color 0.2s ease;
}
.nav-link:hover {
color: #666;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
h1 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 1rem;
text-align: center;
color: #333;
}
h2 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #444;
}
.card {
border: none;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.card-body {
padding: 1.5rem;
}
.card-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.card-text {
font-size: 1rem;
color: #666;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
margin-bottom: 10px;
}
ul li::before {
content: "\2022";
font-weight: bold;
font-size: 1.5rem;
color: #333;
margin-right: 10px;
}
@media (max-width: 768px) {
.container {
padding: 1rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0.5rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MedCare</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<h1 class="text-center mb-5">About Us</h1>
<div class="row">
<div class="col-md-6">
<img src="https://www.shutterstock.com/image-photo/medicine-
healthcare-people-concept-female-600nw-2188588635.jpg" alt="Medical Store"
class="img-fluid rounded">
</div>
<div class="col-md-6">
<h2>Welcome to MedCare</h2>
<p>MedCare is a leading medical store providing high-quality
healthcare products and services to our customers. Our mission is to improve
the health and well-being of our community.</p>
<p>We offer a wide range of products, including prescription
medications, over-the-counter medications, vitamins, and health
supplements.</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-12">
<h2>Our Team</h2>
<div class="row">
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Dr. John Doe</h5>
<p class="card-text">Pharmacist</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Ms. Jane Smith</h5>
<p class="card-text">Pharmacy Technician</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Mr. Bob Johnson</h5>
<p class="card-text">Customer Service
Representative</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-12">
<h2>Our Values</h2>
<ul>
<li>Quality</li>
<li>Integrity</li>
<li>Compassion</li>
<li>Excellence</li>
</ul>
</div>
</div>
</div>
<script src="(link unavailable)"></script>
<script src="(link unavailable)"></script>
</body>
</html>
Q-4. Create a website regarding electronics store with following web pages:
a) Home/index page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>electronic home</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
body{
margin:5px; color:rgb(241, 177, 67);
text-align:left;
font-family: 'Times New Roman', Times, serif;
}
.header{
height:40px; background-color:rgb(220, 141, 3);
color:white; word-spacing:10px;
}
.topnav{
background-color:rgb(112, 72, 3);overflow: hidden;
}
.topnav a{
float:left; color:#f2f2f2;
text-align: center;
padding:14px 16px;
text-decoration: none; font-size:17px;
}
.topnav a:hover{
background-color: #fff;
color:black;
}
.nav{
background-color:rgb(220, 141, 3);overflow: hidden;
height:40px;
}
.nav a{
float:left; color:#f2f2f2;
text-align: center;
padding:10px 8px;
text-decoration: none; font-size:17px;
}
.nav a:hover{
background-color:rgb(241, 177, 67);
color:black;
}
.container{
height:500px;
background-color: black;
animation-name:example; font-size: xx-large;
color:rgb(220, 141, 3); font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
animation-duration:30s; margin-top:10px;
background-image:url("https://cdn.mos.cms.futurecdn.net/qzJ4JtDjkfjdqqNebQS7kk-1200-80.jpg");
position:relative; background-size:cover;
}
@keyframes example{
0% {background-image:url("https://cdn.mos.cms.futurecdn.net/qzJ4JtDjkfjdqqNebQS7kk-1200-80.jpg");}
25%{background-
image:url("https://imgeng.jagran.com/images/2023/mar/best%20laptops1679305053832.jpg");}
50%{background-image:url("https://megafurniture.sg/cdn/shop/articles/best-front-load-washing-machine-
singapore-top-picks-for-clean-clothes-megafurniture_22abe9bc-227c-432a-894c-
48360bdbf906.jpg?v=1721303605");}
100%{background-
image:url("https://shop.panasonic.com/cdn/shop/collections/Headphones_Collection_banner_4e105135-bd3b-
4b8e-9186-d15b29fd97e0.jpg?v=1690484276&width=2048");}
}
.btn-group button{
background-color:rgb(220, 141, 3);
border:1px solid rgb(112, 72, 3); color:white;
padding:10px 24px;margin-left:160px;
cursor:pointer; float:left;
}
.btn-group button:not(:last-child){
border-right:none;
}
.btn-group:after{
content:""; clear:both; display:table;
}
.btn-group button:hover{
background-color:rgb(241, 177, 67);
}
.container1{
margin-top:15px; line-height:3.0;
background-image:url("https://imgix.bustle.com/uploads/image/2023/5/23/f5e67883-71ba-423b-9ced-
8915d660a544-
964e9a94aecdde2364f2478b36419aa2.jpeg?w=400&h=300&fit=crop&crop=faces&q=50&dpr=2");
position:relative; background-size:cover;
height:300px; width:500px; background-color:antiquewhite;
}
.container2{
margin-top:15px; line-height:2.0;
bottom:215px; left:510px;
position:relative; background-size:cover;font-size: larger; text-align: center;
height:200px; width:490px; background-color:rgb(112, 72, 3);
}
.container3{
margin-top:15px; line-height:3.0;
background-image:url("https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTMu7lLbY0exWPLIXp7KCof2MoKiJ98FlgjF3qhO7ezMLyjY8zGDYB
GjslOI6IUTPWq6n4&usqp=CAU");
position:relative; background-size:cover;
height:300px; width:500px; background-color:antiquewhite;
position: relative; bottom:529px; left:1010px;
}
.container4{
height:40px; width:auto; background-color:rgb(220, 141, 3);
bottom:30px; position: relative; color:white; font-size:x-large; font-family:Cambria, Cochin, Georgia,
Times, 'Times New Roman', serif;
}
.main1{ height:300px; width:300px;
background-image:url("https://mccoyindia.in/wp-content/uploads/2020/04/Saturn-iron.jpg");
background-repeat:no-repeat; background-size:200px; align-content:end;
}
.main2{ height:300px; width:300px; position:relative; left:300px; bottom:300px;
background-
image:url("https://5.imimg.com/data5/SELLER/Default/2024/4/409695142/DQ/TT/RC/5774620/blue-star-split-
air-conditioner.jpg");
background-repeat:no-repeat; background-size:200px; align-content:end;
}
.main3{ height:300px; width:300px;position:relative; left:600px; bottom:600px;
background-image:url("https://m.media-amazon.com/images/I/41WI0GW7B9L.jpg");
background-repeat:no-repeat; background-size:200px; align-content:end;
}
.main4{ height:300px; width:300px;position:relative; left:900px; bottom:900px;
background-image:url("https://5.imimg.com/data5/FH/SD/MY-32737608/single-bluetooth-headset-
500x500.jpg");
background-repeat:no-repeat; background-size:200px; align-content:end;
}
.main5{ height:300px; width:300px;position:relative; left:1200px; bottom:1200px;
background-
image:url("https://btech.com/media/catalog/product/0/5/05e817c6bc030f333642c4368fd1a7abfc38573abe825b45f
8e6c2ffdf308950.jpeg?width=800&store=en&image-type=image");
background-repeat:no-repeat; background-size:200px; align-content:end;
}
.main6{ height:300px; width:300px;position:relative; left:300px; bottom: 1000px;
background-image:url("https://consumer.huawei.com/content/dam/huawei-cbg-site/me-
africa/common/mkt/plp/phones-new/mate-series.jpg");
background-repeat:no-repeat; background-size:180px; align-content:end;
}
.main7{ height:300px; width:300px;position:relative; left:600px; bottom:1300px;
background-image:url("https://images.jdmagicbox.com/quickquotes/images_main/dell-inspiron-7391-13-
3-laptop-10th-gen-core-i7-10510u-16-gb-512-gb-ssd-windows-10-intel-hd-graphics-black-179316385-
44zaw.jpg");
background-repeat:no-repeat; background-size:180px; align-content:end;
}
.main8{ height:300px; width:300px;position:relative; left:900px; bottom:1600px;
background-
image:url("https://static.wixstatic.com/media/fd9026_2278803b508a4a38b4b8dc730540d246~mv2.jpg/v1/fill/w_
1000,h_1000,al_c,q_85/fd9026_2278803b508a4a38b4b8dc730540d246~mv2.jpg");
background-repeat:no-repeat; background-size:210px; align-content:end;
}
</style>
</head>
<body>
<div class="header"><p>Electro
<span class="icons"><ion-icon name="logo-youtube"></ion-icon></span>
<span class="icons"><ion-icon name="logo-whatsapp"></ion-icon></span>
<span class="icons"><ion-icon name="logo-facebook"></ion-icon></span>
<span class="icons"><ion-icon name="logo-instagram"></ion-icon></span>
<span class="icons"><ion-icon name="logo-twitter"></ion-icon></span></p></div>
<div class="topnav">
<a href="q-4 registration.html">REGISTRATION <span class="icons"><ion-icon name="person"></ion-
icon></span></a><a href="q-4 registration.html"></a>
<a href="q-4 home.html">HOME <span class="icons"><ion-icon name="home"></ion-
icon></span></a>
<a href="q-4 contact.html">SERVICE/CONTACT <span class="icons"><ion-icon name="call"></ion-
icon></span></a>
<a href="q-4 about.html" class="split">ABOUT US <span class="icons"><ion-icon
name="desktop"></ion-icon></span></a>
</div>
<div class="nav">
<a href="#">TV & Audio</a>
<a href="#">Computers</a>
<a href="#">Games & Consoles</a>
<a href="#"> Phones & Tablets</a>
<a href="#">GPS & Car Audio</a>
<a href="#">Accessories</a>
</div>
<div class="container">SHOP TO GET WHAT YOU LOVE <br>
<p>TIMEPIECES THAT MAKE A STATMENT <br> UP TO 40% OFF</p>
</div>
<div class="btn-group">
<button><b>Free Delivery</b></button>
<button><b>99% Positive Feedback</b></button>
<button><b>Payment Secure System</b></button>
<button><b>Only Best Brands</b></button>
</div>
<div class="container1"></div>
<div class="container2">FREE SHIPPING & <br> REFUND <br><b>GUARANTEE !</b>
<P><B>NEW</B>ARRIVALS</P></div>
<div class="container3"></div>
<div class="container4">Latest</div>
<div class="main1">
<p>McCoy Electric Iron-Saturn</p>
<form action="#">
<button type="submit"class="btn-primary">Buy now <span class="icons"><ion-icon name="bag"></ion-
icon></span></button>
<button type="submit"class="btn-primary">Add to Cart <span class="icons"><ion-icon
name="cart"></ion-icon></span>
</button>
</form>
</div>
<div class="main2">
<p>LG 3 Star (1.5), Split AC, AI Convertible, 100% Copper Tubes, 2024 Model</p>
<form action="#">
<button type="submit"class="btn-primary">Buy now <span class="icons"><ion-icon name="bag"></ion-
icon></span></button>
<button type="submit"class="btn-primary">Add to Cart<span class="icons"><ion-icon
name="cart"></ion-icon></span></button></form>
</div>
<div class="main3">
<p>10 Quart Portable Car Fridge 12 Volt Mini Handy Freezer Refrigerator for Vehicle,
Home,Outdoor-12/24V DC</p><form action="#">
<button type="submit"class="btn-primary">Buy now <span class="icons"><ion-icon name="bag"></ion-
icon></span></button>
<button type="submit"class="btn-primary">Add to Cart<span class="icons"><ion-icon
name="cart"></ion-icon></span></button></form>
</div>
<div class="main4">
<p>Black Single Bluetooth Headset</p><form action="#">
<button type="submit"class="btn-primary">Buy now <span class="icons"><ion-icon name="bag"></ion-
icon></span></button>
<button type="submit"class="btn-primary">Add to Cart<span class="icons"><ion-icon
name="cart"></ion-icon></span></button></form>
</div>
<div class="main5">
<p>Fresh 42 Inch FHD Smart LED TV- 42MF435</p><form action="#">
<button type="submit"class="btn-primary">Buy now <span class="icons"><ion-icon name="bag"></ion-
icon></span></button>
<button type="submit"class="btn-primary">Add to Cart<span class="icons"><ion-icon
name="cart"></ion-icon></span></button></form>
</div>
<div class="main6">
<p>HUAWEI Phone - HUAWEI Qatar</p><form action="#">
<button type="submit"class="btn-primary">Buy now <span class="icons"><ion-icon name="bag"></ion-
icon></span></button>
<button type="submit"class="btn-primary">Add to Cart<span class="icons"><ion-icon
name="cart"></ion-icon></span></button></form>
</div>
<div class="main7">
<p>Dell Inspiron 15 3520 Intel Core i3 Laptop With 32GB RAM & 1TB SSD
</p><form action="#">
<button type="submit"class="btn-primary">Buy now <span class="icons"><ion-icon name="bag"></ion-
icon></span></button>
<button type="submit"class="btn-primary">Add to Cart<span class="icons"><ion-icon
name="cart"></ion-icon></span></button></form>
</div>
<div class="main8">
<p>HIZLJJ Electric multi-function oven with top grate and grill grate, microwave and toaster, convection
</p><form action="#">
<button type="submit"class="btn-primary">Buy now <span class="icons"><ion-icon name="bag"></ion-
icon></span></button>
<button type="submit"class="btn-primary">Add to Cart<span class="icons"><ion-icon
name="cart"></ion-icon></span></button></form>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
b) Registration page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electronic Store page</title>
<style>
*{
margin:0; padding: 0;
}
body{
background-image:url("https://img.freepik.com/premium-vector/new-home-appliance-products-
electronics-store-big-sale-black-friday-shopping-concept-horizontal_48369-46025.jpg");
color:white;
background-repeat:no-repeat;
background-size: cover;
}
.topnav{
background-color:#09294b;overflow: hidden;
}
.topnav a{
float:left; color:#f2f2f2;
text-align: center;
padding:14px 16px;
text-decoration: none; font-size:17px;
}
.topnav a:hover{
background-color: #fff;
color:black;
}
.registration-form{
width:500px; margin:100px auto ;
height:500px; line-height:2.0;
padding:20px; font-size:larger;
border:1px solid #ccc;
border-radius:15px;
background-color:#09294b;
color:white;
}
</style>
</head>
<body>
<div class="topnav">
<a href="q-4 registration.html">REGISTRATION <span class="icons"><ion-icon name="person"></ion-
icon></span></a><a href="q-4 registration.html"></a>
<a href="q-4 home.html">HOME <span class="icons"><ion-icon name="home"></ion-icon></span></a>
<a href="q-4 contact.html">SERVICE/CONTACT <span class="icons"><ion-icon name="call"></ion-
icon></span></a>
<a href="q-4 about.html" class="split">ABOUT US <span class="icons"><ion-icon
name="desktop"></ion-icon></span></a>
</div>
<header>
<h1>Electrogluton</h1>
</header>
<main>
<section class="registration-form">
<h2>Register here <span class="icon">⮯</span></h2>
<form id="registration-form" action="registration-process.php" method="post">
<span class="icons"><ion-icon name="person"></ion-icon></span><label for="name"> Full
Name:</label>
<input type="text" id="name" name="name" required pattern="[A-Za-z\s]+" title="Name can only
contain letters and spaces."><br>
<span class="icons"><ion-icon name="lock-open"></ion-icon></span><label for="password">
Password:</label>
<input type="password" id="password" name="password" required><br>
<span class="icons"><ion-icon name="lock-closed"></ion-icon></span><label for="confirm-
password"> Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password" required><br>
<span class="icons"><ion-icon name="mail"></ion-icon></span><label for="email"> Email:</label>
<input type="email" id="email" name="email" required><br>
<span class="icons"><ion-icon name="airplane"></ion-icon></span><label for="city"> City:</label>
<input type="city" id="city" name="city" required><br>
<span class="icons"><ion-icon name="pin"></ion-icon></span><label for="pincode">
Pincode:</label>
<input type="text" id="pincode" name="pincode" required pattern="\d{6}" title="Pincode must be
exactly 6 digits."><br>
<span class="icons"><ion-icon name="calendar-number"></ion-icon></span><label for="start"> Date
of Birth:</label>
<input type="date" id="start" name="trip-start" value="2000-07-22" min="2000-01-01" /><br>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="Female">
<label for="Female">Female</label><br>
<button type="submit">Register</button>
</form>
<p>Already have an account? <a href="q-4 login.html">Login here</a></p>
</section>
</main>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
c) Login page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electronic store login page</title>
<style>
body{
background-image:url("https://www.shutterstock.com/image-vector/abstract-speed-technology-concept-
vector-260nw-566390986.jpg");
background-color:white;
background-repeat: no-repeat;
background-size:cover;
color: white;
}
.header{
background-color:rgb(7, 58, 89);text-align:center;
}
.topnav{
background-color:#09294b;overflow: hidden;
}
.topnav a{
float:left; color:white;
text-align: center;
padding:14px 16px;
text-decoration: none; font-size:17px;
}
.topnav a:hover{
background-color:white;
color:black;
}
.container{
max-width:600px; margin:100px auto;
padding:20px; font-size:larger;
border:1px solid white;
border-radius:15px;
background-color:#09294b;
color:white; line-height:1.5;
}
.form-group{
margin-bottom:20px;
}
.btn-primary{
background-color:#007bff;
border-color:#007bff;
}
.btn-primary:hover{
background-color:#0056b3;
border-color:#0056b3;
}
</style>
</head>
<div class="header">
<h1>Welcome to Electronic Store</h1>
</header></div>
<body>
<div class="topnav">
<a href="q-4 registration.html">REGISTRATION <span class="icons"><ion-icon name="person"></ion-
icon></span></a><a href="q-4 registration.html"></a>
<a href="q-4 home.html">HOME <span class="icons"><ion-icon name="home"></ion-icon></span></a>
<a href="q-4 contact.html">SERVICE/CONTACT <span class="icons"><ion-icon name="call"></ion-
icon></span></a>
<a href="q-4 about.html" class="split">ABOUT US <span class="icons"><ion-icon
name="desktop"></ion-icon></span></a>
</div>
<div class="container">
<h2 class="text-center">Login here <span class="icon">⮯</span></h2><form
action="/action_page.php"method="post"target="_blank">
<form id="loginform">
<div class="form-group">
<span class="icons"><ion-icon name="person"></ion-icon></span><label for="username">
Username:</label>
<input type="text"class="form-control"id="username" name="username"required>
</div>
<div class="form-group">
<span class="icons"><ion-icon name="lock-closed"></ion-icon></span><label for="password">
Password:</label>
<input type="password"class="form-control"id="password" name="password"required> <br>
<input type="checkbox"/>Remember me <br>
<button>Login</button>
<input type="Reset"value="Cancel"/><br>
</div>
<a href="forgotten password.html">Forgot password?</a>
<p>Not a Member?<a href="q-4 registration.html">Sign up</a></p>
</form>
</form>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
d) Product/Services page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>service</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
body{
font-family: 'Times New Roman', Times, serif;
}
.navbar{
background-color:purple;overflow: hidden;
height:60px; width:auto;
}
.navbar a{
float:left; color:white;
text-align: center;
padding:14px 16px;
text-decoration: none; font-size:17px;
}
.navbar a:hover{
background-color:black;
color:white;
}
.container{
height:600px; width:400%; background-color:yellowgreen;
animation-name:electro; animation-duration:30s;
background-image:url("https://www.isearchsolution.com/blog/wp-content/uploads/2018/05/Email-
Marketing.jpg");
position:relative; background-size:cover;
}
@keyframes electro {
0% {background-image:url("https://www.isearchsolution.com/blog/wp-content/uploads/2018/05/Email-
Marketing.jpg");}
25%{background-
image:url("https://static.vecteezy.com/system/resources/previews/023/660/423/non_2x/phone-call-concept-tiny-
people-receive-incoming-call-online-accept-button-decline-button-video-call-communication-device-retro-phone-
modern-flat-cartoon-style-illustration-vector.jpg");}
50%{background-image:url("https://img.freepik.com/free-vector/real-estate-searching-concept_23-
2148657458.jpg");}
100%{background-image:url("https://www.godigital.com.bd/Content/img/services/GraphicsDesign/social-
media-post-design-intro.jpg");}
}
.container1{
height:600px; width:auto; background-
image:url("https://t3.ftcdn.net/jpg/07/54/19/78/360_F_754197872_unporGU8j58hWuveKGwTsl4Lf8pSNBkj.jpg"
);
position:relative; background-size:cover;
margin-top:15px; text-align: center; color:white; font-size: large;
}
.container4{
height:500px; width:800px; background-image:url("https://img.freepik.com/premium-vector/smiling-
business-woman-pointing-up-isolated-vector-illustration_126609-501.jpg");
position:relative; background-size:cover;
padding:20px; font-size:small;
}
</style>
</head>
<body>
<div class="navbar">
<a href="q-4 registration.html">REGISTRATION <span class="icons"><ion-icon name="person"></ion-
icon></span></a>
<a href="q-4 home.html">HOME <span class="icons"><ion-icon name="home"></ion-icon></span></a>
<a href="q-4 service.html">SERVICE/CONTACT <span class="icons"><ion-icon name="call"></ion-
icon></span></a>
<a href="q-4 about.html">ABOUT US <span class="icons"><ion-icon name="desktop"></ion-
icon></span></a>
</div>
<div class="container"></div>
<div class="container1"><p>Let's Make something awesome together.</p>
<p>Drop us a line, or give us a heads up if you're interested is visiting us.</p>
<div class="container2"><span class="icons"><ion-icon name="call"></ion-icon></span>
<p>PHONE</p><br><p>
<b>Weifield Group Contracting </b><br>
877.WEIFIELD phone
<b> Weifield 24/7 Service Department
877.WEIFIELD</b>
(Then press 0 for emergency calls) <br>
<b>Northern Colorado Office</b>
877.WEIFIELD phone <br>
<b>Wyoming Office</b>
877.WEIFIELD phone <br>
<b>Texas Office</b>
877.WEIFIELD phone <br>
<b>Tennessee Office</b>
877.WEIFIELD phone</p></div>
<div class="container3"><span class="icons"><ion-icon name="home"></ion-icon></span>
<p>ADDRESS</p><br>
<p><b>Weifield Group Contracting</b>
6950 S. Jordan Road
Centennial, CO 80112 <br>
<b>Northern Colorado Office</b>
6775 Sherman Street,
Loveland, CO 80538 <br>
<b>Southern Colorado Office</b>
4474 Barnes Road
Colorado Springs, CO 80917 <br>
<b>Wyoming Office</b>
308 Southwest Dr Unit E
Cheyenne, WY 82007 <br>
<b>Texas Office</b>
1421 Wells Branch Pkwy. Ste 100
Pflugerville, TX 78660</p>
</div>
</div>
<div class="container4">
<p>Get in Touch !
Let's talk about your project</p>
<form id="registration-form" action="registration-process.php" method="post">
<span class="icons"><ion-icon name="person"></ion-icon></span><label for="name"> Full
Name:</label>
<input type="text" id="name" name="name" required pattern="[A-Za-z\s]+" title="Name can only contain
letters and spaces."><br>
<span class="icons"><ion-icon name="call"></ion-icon></span><label for="password"> Phone
number:</label>
<input type="number" id="password" name="password" required><br>
<span class="icons"><ion-icon name="mail"></ion-icon></span><label for="email"> Email:</label>
<input type="email" id="email" name="email" required><br
<span class="icons"><ion-icon name="chatbubble-ellipses"></ion-icon></span><label for="message">
Your message:</label>
<input type="text" id="password" name="password" required><br>
<form action="#">
<button type="submit"class="btn-primary"> Submit </button></form>
</form>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
e) About us page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>about us page</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
.navbar{
background-color:bisque;overflow: hidden;
height:50px; width:auto;
}
.navbar a{
float:left; color:black;
text-align: center;
padding:14px 16px;
text-decoration: none; font-size:17px;
}
.navbar a:hover{
background-color:black;
color:white;
}
.container{
height:600px; width:auto;
}
.container1{
margin-top:20px;
height:500px; width:auto; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size:large; padding:20px;
background-color:rosybrown; color:white;
}
.container2{
height:500px; width:700px; background-color: orange;
position: relative; left:410px; bottom:500px;
background-image:url("https://mybigplunge.com/wp-content/uploads/2021/05/online_shopping.jpeg");
background-size: cover; background-repeat: no-repeat;
}
.container3{
background-color:rosybrown;
height:700px; width:auto;
}
.media{
padding:20px; color:white;
}
</style>
</head>
<body><div class="navbar">
<a href="q-4 registration.html">REGISTRATION <span class="icons"><ion-icon name="person"></ion-
icon></span></a>
<a href="q-4 home.html">HOME <span class="icons"><ion-icon name="home"></ion-icon></span></a>
<a href="q-4 service.html">SERVICE/CONTACT <span class="icons"><ion-icon name="call"></ion-
icon></span></a>
<a href="q-4 about.html">ABOUT US <span class="icons"><ion-icon name="desktop"></ion-
icon></span></a>
</div>
<div class="container">
<div class="container1"><p>ABOUT US</p><br>
<p><b>Electrofy powers <br>millions of businesses worldwide</b></p><br>
<p>The all-in-one commerce<br>platform to start, run, and grow a business.</p>
<p>They're crafted, not cobbled, for a delightful <br> experience.</p>
<form action="#"></form>
<button type="submit"class="btn-primary">Get started </button></form>
</div>
<div class="container2"></div>
</div>
<div class="container3">
<div class="media">
<a class="pull-left"href='#'>
<img class="media-
object"src="https://t3.ftcdn.net/jpg/04/72/06/02/360_F_472060214_77I24PaMf83HD5LLX7EZfm1l47u44mMP.
webp"height="300px" width="500px"alt="media object">
</a>
<div class="media-body">
<h4 class="media heading"><b>Our Mission: Helping Millions of Oraginisations Grow
Better</b></h4>
We believe not just in growing, but in growing better, And growing better maens aligning the success of
your own business with the success of your customer. Win-Win!
</div>
</div>
<div class="media">
<a class="pull-left"href='#'>
<img class="media-object"src="https://img.freepik.com/premium-photo/finalizing-business-deal-
businessman-signing-contract-corporate-meeting-concept-business-deals-signing-contracts-corporate-meetings-
professionalism-business-transactions_864588-59553.jpg"height="300px" width="500px"alt="media object">
</a>
<div class="media-body">
<h4 class="media heading"><b>Our Story</b></h4>
In 2004, fellow MIT graduate students Brain Halligan and Dharmesh Shah noticed a major shift in tne
way people shop and purcase products. Buyets didn't want to be interrupted by ads, they wanted helpful
information, In2006, they founded Hubspot to help companies use that shift to grow better with inbound
marketing. <br>
<p>Along the way,Hubspot expanded beyond marketing into a crafted, not cobbled suite of products
that create the frictionless customer experience that buyers expect today. Expertly led by CEO Yamini Rngan,
hubspot uses its customer platfrom built on an AI-powered smart CRM to help millions of scaling organizations
grow better.</p>
</div>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
Q-5. Design a website for a car service system with the following pages:
1. Home/Index Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home page</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
body{
background-image:
url("https://www.chromethemer.com/wallpapers/chromebook-wallpapers/images/960/dawn-
mountain-chromebook-wallpaper.jpg");
background-size:cover; background-repeat: no-repeat; color:white;
font-size:52px;
text-align: center; font-family: 'Times New Roman', Times, serif;
}
.topnav{
background-color:brown;overflow: hidden;
height:50px; width:auto;
}
.topnav a{
float:left; color:#f2f2f2;
text-align: center;
padding:14px 16px;
text-decoration: none; font-size:17px;
}
.topnav a:hover{
background-color: #fff;
color:black;
}
.container{
height:500px; width:1200px;
}
.container1{
background-image: url("https://5.imimg.com/data5/VV/CD/GLADMIN-
61241423/car-service-and-maintainence-500x500.png");
width:350px; height:250px; background-size:cover; background-repeat: no-
repeat;
}
.container2{
background-color:white;
position: relative; bottom:250px; color:black;
width:390px; height:250px; left:350px; font-size: large;
}
.container3{
background-image: url("https://qualitycarservice.co.uk/wp-
content/uploads/sites/43/2022/09/car-service.jpg");
background-size:cover; background-repeat: no-repeat;
position: relative; left:740px; bottom:500px;
width:370px; height:250px;
}
.container4{
background-color: white;
position: relative; bottom:500px; color:black;
width:350px; height:250px; font-size: large;
}
.container5{
background-image: url("https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRrwGiKyztgnNKog8G4Vo8HUxnNZA6vBRcE9w&s");
background-size:cover; background-repeat: no-repeat;
position: relative;left:350px; bottom:750px;
width:390px; height:250px;
}
.container6{
background-color:white;
position: relative;left:740px; bottom:1000px;
width:370px; height:250px; color:black; font-size: large;
}
</style>
</head>
<body>
<div class="topnav">
<a href="#Home"> HOME <span class="icon"><ion-icon name="home"></ion-
icon></span></a>
<a href="#service booking"> SERVICE BOOKING <span class="icon"><ion-icon
name="call"></ion-icon></span></a>
<a href="#customer feedback"> CUSTOMER FEEDBACK <span class="icon"><ion-icon
name="chatbox-ellipses"></ion-icon></span></a>
</div>
<p>Car Repair and Services</p><br>
<div class="container">
<div class="container1"></div>
<div class="container2"><p><b>Body Repair</b></p><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor animi
illum iusto non temporibus praesentium consequatur voluptatem nihil ratione eius
laudantium, facilis soluta vero debitis?</p>
</div>
<div class="container3"></div>
<div class="container4"><p><b>Car Care</b></p><br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem amet
debitis quas laborum, sunt quae?</p>
</div>
<div class="container5"></div>
<div class="container6"><p><b>Quality</b></p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit
accusantium eligendi exercitationem aliquid cupiditate dolore?</p>
</div>
</div>
</body>
</html>
2. Service Booking Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vehicle Service Booking</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
body {
font-family: Arial, sans-serif;
background-image: url("https://img.freepik.com/free-photo/sports-car-driving-
asphalt-road-night-generative-ai_188544-8052.jpg");
background-repeat: no-repeat; background-size: cover;
}
.container {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
.form-row {
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Vehicle Service Booking</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="q-5 home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="q-5 service booking.html">Service
Booking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="q-5 feedback.html">Customer
feedback</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1 class="text-center mt-5 mb-5">Book Your Vehicle Service</h1>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="vehicleType">Vehicle Type</label>
<select id="vehicleType" class="form-control">
<option selected>Choose...</option>
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="scooter">Scooter</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="serviceType">Service Type</label>
<select id="serviceType" class="form-control">
<option selected>Choose...</option>
<option value="oilChange">Oil Change</option>
<option value="tireRotation">Tire Rotation</option>
<option value="brakeService">Brake Service</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="date">Date</label>
<input type="date" class="form-control" id="date">
</div>
<div class="form-group col-md-6">
<label for="time">Time</label>
<input type="time" class="form-control" id="time">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="additionalServices">Additional Services</label>
<div class="form-check">
<input class="form-check-input" type="checkbox"
value="carWash" id="carWash">
<label class="form-check-label" for="carWash">Car
Wash</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox"
value="interiorCleaning" id="interiorCleaning">
<label class="form-check-label"
for="interiorCleaning">Interior Cleaning</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Book Service</button>
</form>
</div>
</body>
</html>
3. Customer Feedback Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback Page</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="styles.css">
<style>
body {
font-family: Arial, sans-serif;
background-image:
url("https://t3.ftcdn.net/jpg/03/18/63/10/360_F_318631015_lZicQQlJLdOamv55gQVVTtRXqz
7ENyBz.jpg");
background-repeat: no-repeat; background-size: cover;
}
.container {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
.form-row {
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
font-weight: bold;
}
.btn-primary {
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Feedback Page</a>
</nav>
<div class="container">
<h1 class="text-center mt-5 mb-5">Provide Your Valuable Feedback</h1>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
</div>
<div class="form-group">
<label for="feedback">Feedback</label>
<textarea class="form-control" id="feedback" rows="5"
required></textarea>
</div>
<div class="form-group">
<label for="rating">Rating</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="rating"
id="rating1" value="1">
<label class="form-check-label" for="rating1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="rating"
id="rating2" value="2">
<label class="form-check-label" for="rating2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="rating"
id="rating3" value="3">
<label class="form-check-label" for="rating3">3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="rating"
id="rating4" value="4">
<label class="form-check-label" for="rating4">4</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="rating"
id="rating5" value="5">
<label class="form-check-label" for="rating5">5</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit Feedback</button>
</form>
</div>
</body>
</html>
You might also like
- 20-CP-09 FB and Gmail Sign Up and Sign inNo ratings yet20-CP-09 FB and Gmail Sign Up and Sign in19 pages
- 01 135211 106 10550588212 05062023 113209pmNo ratings yet01 135211 106 10550588212 05062023 113209pm55 pages
- Materi Workshop Laravel Stmik Widuri by WCC (Front End)No ratings yetMateri Workshop Laravel Stmik Widuri by WCC (Front End)19 pages
- Design A Responsive Sliding Login & Registration Form Using HTML CSS & JavaScript - GeeksforGeeksNo ratings yetDesign A Responsive Sliding Login & Registration Form Using HTML CSS & JavaScript - GeeksforGeeks16 pages
- How To Make A Website With Modern Login and Register Form Using HTML, CSS & JavaScriptNo ratings yetHow To Make A Website With Modern Login and Register Form Using HTML, CSS & JavaScript15 pages
- Showing How To Make Navigation Bar in HTMLNo ratings yetShowing How To Make Navigation Bar in HTML2 pages
- React Portfolio App Development: Increase your online presence and create your personal brandFrom EverandReact Portfolio App Development: Increase your online presence and create your personal brandNo ratings yet
- The Pseudohistorical Foundation Myth of of LondonNo ratings yetThe Pseudohistorical Foundation Myth of of London4 pages
- Cases On Wills (Roman Numeral V of SyllabusNo ratings yetCases On Wills (Roman Numeral V of Syllabus32 pages
- Daniel Rinchuse - Orthodontics Justified As A ProfessionNo ratings yetDaniel Rinchuse - Orthodontics Justified As A Profession4 pages
- CHAPTER: Legislative Department Astorga Vs Villegas TOPIC: Journal Entry Rule Vs Enrolled Bill Theory FactsNo ratings yetCHAPTER: Legislative Department Astorga Vs Villegas TOPIC: Journal Entry Rule Vs Enrolled Bill Theory Facts3 pages
- ESL Business English Self-IntroductionsNo ratings yetESL Business English Self-Introductions16 pages
- Review in Michelangelo - Selected Scholarship in EnglishNo ratings yetReview in Michelangelo - Selected Scholarship in English4 pages
- Legal Rights - Definition, Theories, Characteristics and KindsNo ratings yetLegal Rights - Definition, Theories, Characteristics and Kinds12 pages
- Roehm v. Wal-Mart Stores, Incorporated - Document No. 22No ratings yetRoehm v. Wal-Mart Stores, Incorporated - Document No. 227 pages
- Using The Jigsaw Cooperative Learning Technique: Strategy GuideNo ratings yetUsing The Jigsaw Cooperative Learning Technique: Strategy Guide2 pages
- Apa Referencing: A Brief Guide: All APA Examples SearchNo ratings yetApa Referencing: A Brief Guide: All APA Examples Search10 pages
