Scribd
Upload
19 views35 pages

Web Designing Problemsheet-1

The document contains a series of HTML coding exercises, including creating a simple webpage, a leave application, a calculator, and a class timetable. Each exercise includes the complete HTML source code along with styling and structure details. The exercises are designed to help learners practice web design and development skills.

Uploaded by

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

Web Designing Problemsheet-1

The document contains a series of HTML coding exercises, including creating a simple webpage, a leave application, a calculator, and a class timetable. Each exercise includes the complete HTML source code along with styling and structure details. The exercises are designed to help learners practice web design and development skills.

Uploaded by

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

Web Designing Problemsheet-1

Q-1 Write a simple Source code for following HTML Webpage?

•Code: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web-Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
#Header { background-color: rgb(226, 224, 224); }
#profile {
margin-left: 17px;
height: 200px;
width: 200px;
}
.img { width: 100%; }
.form {
padding: 30px;
border-radius: 7px;
box-shadow: 0 0 2px;
background-color: rgb(255, 255, 255);
width: fit-content;
text-align: center;
}
.textarea { height: 70px; }
.input {
padding: 5px;
border-radius: 7px;
outline: none;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="Header" class="container-fluid text-black p-3 ">
<div class="nav row justify-content-between w-100 align-middle">
<div class="col-md-2 fs-4 fw-bold" style="font-family: 'Pacifico',cursive;">Mr. Alvin</div>
<div class="col-md-2 text-end p-1">
<i class="fa-brands fs-4 fa-facebook me-2"></i>
<i class="fa-brands fs-4 fa-instagram me-2"></i>
<i class="fa-brands fs-4 fa-twitter"></i>
</div>
</div>
</div>
<div class="container-fluid p-3 bg-body-tertiary">
<div class="row">

-Jay Prajapati Page 1 of 35


Web Designing Problemsheet-1

<div class="col-md-2 border-end border-blac">


<img src="Admin_Logo.png" id="profile" alt="Admin_Logo" class="img">
<div class="pt-3 mt-2 w-100">
<nav>
<ul class="main_menu">
<li class="pt-2 mt-4 bg-primary w-100 ">
<a class="text-white text-decoration-none p-2 d-block">Home</a>
</li>
<li class="pt-2 mt-4 ">
<a class="text-dark text-decoration-none p-2 d-block">Career</a>
</li>
<li class="pt-2 mt-4 ">
<a class="text-dark text-decoration-none p-2 d-block">Contact</a>
</li>
<li class="pt-2 mt-4 ">
<a class="text-dark text-decoration-none p-2 d-block">About</a>
</li>
</ul>
</nav>
</div>
<div class="quotes mt-5 ">
<p >“Never give up on a dream just because of the time it will take to accomplish it. The time will pass anyway.”<br>
-Mr. Alvin</p>
</div>
</div>
<div class="col-md-9 p-2 ms-4">
<div class="h2">About me</div>
<p>My self Mr. Alvin. I am a developer. I work in Multi National Company.</p>
<div class="h2">My Career</div>
<p>I worked as a web developer for a company that makes websites for car businesses.</p>
<hr>
<div class="tables">
<div class="table-heading">
<div class="h2 mt-5 mb-4">How Can I Help You?</div>
<table class="table table-bordered">
<thead>
<td class="text-center bg-primary text-white">HTML5</td>
<td class="text-center bg-primary text-white">CSS3</td>
<td class="text-center bg-primary text-white">Java Script</td>
</thead>
<tbody>
<tr>
<td class="text-center fs-3"><img src="html_logo.png" alt="html"></td>
<td class="text-center fs-3"><img src="css_logo.png" alt="css"></td>
<td class="text-center fs-3"><img src="js_logo.png" alt="js"></td>
</tr>
<tr>
<td>I can make very effective structure of website</td>
<td>I can design your website very well</td>
<td>I can make your website responsive</td>
</tr>
</tbody>
</table>
</div>
</div>

-Jay Prajapati Page 2 of 35


Web Designing Problemsheet-1

<div class="forms">
<form class="form">
<label for="E-mail">Email:-</label>
<input class="mb-3 fs-6 input" placeholder="Enter Your E-mail" type="email"> <br>
<label for="Contact">Mobile:-</label>
<input class="mb-3 fs-6 input" placeholder="Enter Your Number" type="number"> <br>
<textarea placeholder="Enter Your Message" class="mb-3 fs-6 textarea input" cols="30" rows="10"></textarea>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="container-fluid p-3 bg-dark text-white">
<footer>
<div class="footer w-100 text-center p-3">
© Copyright 2023
</div>
</footer>
</div>
<script src="https://kit.fontawesome.com/79ca8024e7.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
crossorigin="anonymous"></script>
</body>
</html>

-Jay Prajapati Page 3 of 35


Web Designing Problemsheet-1

-Jay Prajapati Page 4 of 35


Web Designing Problemsheet-1

Q-2 Design and write Leave Application Using HTML code?

•Code: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leave Application</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<style>
.yellow{
color: rgb(255, 128, 0);
font-weight: 700;
font-size: 15px;
letter-spacing: 1px;
}
.green{
color: green !important;
}
.blue{
color: blue !important;
}
.paragraph {
margin-left: 20px;
}
.red {
color: red !important;
}
.purple {
color: purple !important;
}
.grey {
color: grey !important;
}
</style>
</head>
<body>
<div class="conteaier-fluid">
<div class="row w-100 justify-content-center">
<div class="article shadow w-50 p-4">
<div class="yellow pb-2">
<div class="d-flex justify-content-between">
<address>
To <br>
The Manager, <br>
Varun Motors Pvt LTD. <br>
Hyderabad.
</address>

-Jay Prajapati Page 5 of 35


Web Designing Problemsheet-1

<div class="date">Date:10/11/2021</div>
</div>
</div>
<div class="green yellow mt-2">
<address>
From <br>
Rajesh Shukla. <br>
Ernployee ID: 1254. <br>
Marketing Executive, <br>
Marketing Department.
</address>
</div>
<div class="text-center yellow blue">Sub: Leave application</div>
<div class="yellow">Dear sir/Madam,</div>
<p class="paragraph yellow red">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;I am writing this letter to inform and to get
permission to take a 5 days of leave starting form
<span class="grey">11/05/2021</span> to <span class="grey">15/05/2021</span> because of some
personal reasons.
<br> <br>
I hope you will understand my situation and grant me leave for 5 days. I will return to the work
immediately to leave i.e. on <span class="grey">16/05/2021</span>
<br> <br>
In case of any emergency, I will be available on my mobile.
<br><br>
I shall be obliged to you in this matter.
<div class="text-center yellow text-dark">
<div class="grey">Thanking you</div>
</div>
</p>
<div class="text-end purple yellow">Sincerely. <br>Rajesh Shukla. <br>9123XXX456.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
crossorigin="anonymous"></script>
</body>
</html>

-Jay Prajapati Page 6 of 35


Web Designing Problemsheet-1

-Jay Prajapati Page 7 of 35


Web Designing Problemsheet-1

Q-3 Write a code for Calculator and perform Basic arithmetic Operation like (+, -, *, /, =) Using CSS and JavaScript.

•Code: index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Calculator Yagnik</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#Heading {
text-align: center;
margin-bottom: 10px;
}
#calculator {
width: 200px;
background: rgb(238, 237, 237);
border-radius: 7px;
padding: 10px;
margin: 0 auto;
margin-top: 40px;
text-align: center;
box-shadow: 5px 5px 20px lightgray;
}
input[type="text"] {
width: 90%;
height: 25px;
margin-bottom: 10px;
border-radius: 4px;
}
input[type="button"] {
width: 40px;
height: 50px;
font-size: 18px;
margin: 2px;
border-radius: 4px;
box-shadow: 4px 4px 14px lightgray;
}
#btn {
width: 183px;
}
input[type="button"]:hover {
background-color: lightgray;
}
</style>
</head>
<body>
<h2 id="Heading">Simple Hand Calculator</h2>
<div id="calculator">
<input type="text" class="display-box" id="result" read only>
<br>
<input type="button" value="1">

-Jay Prajapati Page 8 of 35


Web Designing Problemsheet-1

<input type="button" value="2">


<input type="button" value="3">
<input type="button" value="+">
<br>
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="-">
<br>
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="*">
<br>
<input type="button" value="/">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<br>
<input type="button" id="btn" value="Clear All">
</div>
</body>
</html>

•Output:

-Jay Prajapati Page 9 of 35


Web Designing Problemsheet-1

Q-4 Write a HTML code for Create Relevant Class Time Table?

•Code: index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Time Table</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>]
h1 {
text-align: center;
}
table {
border-radius: 0;
width: 100%;
}
th,td {
border: 1px solid black;
padding: 8px;
height: 50px;
font-size: 25px;
}
</style>
</head>
<body>

<h1><strong>Time Table</strong></h1>
<div class="main">
<table>
<tr>
<th>Day/Period</th>
<th>I<br>9:30- <br>10:20</th>
<th>II<br>10:20- <br>11:10</th>
<th>III<br>12:00- <br>12:40</th>
<th>12:00- <br>12:40</th>
<th>IV<br>12:40- <br>1:30</th>
<th>V<br>1:30- <br>2:20</th>
<th>VI<br>2:20- <br>3:10</th>
<th>VII<br>3:10- <br>4:00</th>
</tr>
<tr>
<td>Monday</td>
<td>Eng</td>
<td>Mat</td>
<td>Che</td>
<td rowspan="5">LUNCH</td>
<td colspan = "3">LAB</td>
<td>Phy</td>
</tr>
<tr>
<td>Tuesday</td>

-Jay Prajapati Page 10 of 35


Web Designing Problemsheet-1

<td colspan = "3">LAB</td>


<td>Eng</td>
<td>Che</td>
<td>Mat</td>
<td>SPORTS</td>
</tr>
<tr>
<td>Wednsday</td>
<td>Mat</td>
<td>Phy</td>
<td>Eng</td>
<td>Che</td>
<td colspan = "3">Library</td>
</tr>
<tr>
<td>Thursday</td>
<td>Phy</td>
<td>Eng</td>
<td>Che</td>
<td colspan = "3">LAB</td>
<td>Mat</td>
</tr>
<tr>
<td>Friday</td>
<td>Phy</td>
<td>Eng</td>
<td>Che</td>
<td colspan = "3">LAB</td>
<td>Mat</td>
</tr>
</table>
</div>
</body>
</html>

-Jay Prajapati Page 11 of 35


Web Designing Problemsheet-1

-Jay Prajapati Page 12 of 35


Web Designing Problemsheet-1

Q-5 Write a HTML Code for Application Form?

•Code: index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Application Form</title>
<style>
*{
margin-top: 3px;
font-size: 13px;
font-weight:600;
}
#Heading {
text-align: center;
}
</style>
</head>
<body>
<form>
<h3 id="Heading">APPLICATION FORM</h3>
<fieldset>
<legend>Personal Details</legend>
<table width="100%">
<tr>
<td>Applicant's Full Name</td>
<td><select>
<option>--select--</option>
<option>Mr.</option>
<option>Mrs.</option>
<option>Miss</option>
</select>
<input type="text" required>
</td>
<td>Care Of</td>
<td>Parents<input type="radio" name="Care">Guardian<input type="radio" name="Care"></td>
</tr>
<tr>
<td>Father's Name</td>
<td>
<select disabled>
<option>Mr.</option>
</select>
<input type="text" required>
</td>
<td>Mother's Name</td>
<td>
<select disabled>
<option>Mrs.</option>
</select>
<input type="text">
</td>

-Jay Prajapati Page 13 of 35


Web Designing Problemsheet-1

</tr>
<tr>
<td>Gender</td>
<td>Male<input type="radio" name="Gender">Female<input type="radio" name="Gender">Others<input
type="radio" name="Gender"></td>
<td>Date of birth</td>
<td><input type="date"></td>
</tr>
<tr>
<td>Marital Status</td>
<td><select>
<option>--select--</option>
<option>Married</option>
<option>Unmarried</option>
<option>Divorced</option>
</select>
</td>
<td>Category</td>
<td>
<select>
<option>--select--</option>
<option>GEN</option>
<option>OBC</option>
<option>SC</option>
<option>ST</option>
<option>Other</option>
</select>
</td>
</tr>
<tr>
<td>Handicapped</td>
<td>No<input type="radio" name="Handicapped">Yes<input type="radio" name="Handicapped"></td>
<td>Ex-Serviceman</td>
<td>No<input type="radio" name="Ex-Serviceman">Yes<input type="radio" name="Ex-Serviceman"></td>
</tr>
<tr>
<td>EWS</td>
<td>No<input type="radio" name="EWS">Yes<input type="radio" name="EWS"></td>
<td>Religion</td>
<td>
<select>
<option>--select--</option>
<option>Hindu</option>
<option>Sikh</option>
<option>Christian</option>
</select>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Contact Details</legend>
<table width="100%">
<tr>
<td>Mobile Number</td>

-Jay Prajapati Page 14 of 35


Web Designing Problemsheet-1

<td><input type="text" maxlength="10"></td>


<td>Email ID</td>
<td><input type="email">
</td>
</tr>
<td>Address Line 1</td>
<td><input type="text"></td>
<td>Address Line 2</td>
<td><input type="text"></td>
<tr>
<td>City</td>
<td><input type="text"></td>
<td>State</td>
<td>
<select>
<option>--select--</option>
<option>UP</option>
<option>MP</option>
<option>Gujarat</option>
<option>Delhi</option>
<option>Punjab</option>
<option>Tamilnadu</option>
<option>Kerala</option>
</select>
</td>
</tr>
<tr>
<td>Pin Code</td>
<td><input type="text" maxlength="6"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Qualification Details</legend>
<table width="100%" cellspacing="10px">
<tr>
<th>Sr. No.</th>
<th>Qualification</th>
<th>Board/University</th>
<th>Passing Year</th>
<th>Max Marks</th>
<th>Marks Obtain</th>
<th>Percentage</th>
</tr>
<tr>
<td>1</td>
<td>
<select>
<option>--select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduation</option>
<option>Post Graduation</option>
</select>
</td>

-Jay Prajapati Page 15 of 35


Web Designing Problemsheet-1

<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>2</td>
<td>
<select>
<option>--select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduation</option>
<option>Post Graduation</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>3</td>
<td>
<select>
<option>--select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduation</option>
<option>Post Graduation</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<td>4</td>
<td>
<select>
<option>--select--</option>
<option>10th</option>
<option>12th</option>
<option>Graduation</option>
<option>Post graduation</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>

-Jay Prajapati Page 16 of 35


Web Designing Problemsheet-1

</table>
</fieldset>
<fieldset>
<legend>Language knowledge</legend>
<table width="100%">
<tr>
<td>Language</td>
<td>Reading</td>
<td>Writing</td>
</tr>
<tr>
<td>Hindi</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>English</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Urdu</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Identification Details</legend>
<table width="100%">
<tr>
<td>Aadhar Card Number</td>
<td><input type="text"></td>
<td>Pan Card Number</td>
<td><input type="text"></td>
</tr>
<tr>
<td>Upload Photo</td>
<td><input type="file" value="choose file"></td>
<td>Upload Signature</td>
<td><input type="file" value="choose file"></td>
</tr>
</table>
</fieldset>
<tr>
<td colspan="2">
<center>
<input type="submit" value="submit">
<input type="reset" value="back">
</center>
</td>
</tr>
</form>
</body>
</html>

-Jay Prajapati Page 17 of 35


Web Designing Problemsheet-1

-Jay Prajapati Page 18 of 35


Web Designing Problemsheet-1

Q-6 Create a Demo Website using HTML Code?


Webpage Contains below given Page: -
1.) Home Page
2.) Login Page
3.) Registration Page
4.) About us
5.) Contact us
6.) Logout

•Code: Homepage.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vibe Mart</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container-fluid text-white bg-light p-3 ">
<div class="d-flex justify-content-between w-100 navbars">
<div class="col-md-2 fs-4 fw-bold">
<img src="no-bg-logo.png" alt="Vibe_Mart_Logo" class="logo w-100">
</div>
<div class="col-md-2 text-end p-1">
<div class="d-flex align-items-center">
<div class="col-md-6 ms-4">
<a href="#"><i class="fa-brands text-dark fs-4 fa-facebook me-3"></i></a>
<a href="#"><i class="fa-brands text-dark fs-4 fa-instagram me-3"></i></a>
<a href="#"><i class="fa-brands text-dark fs-4 fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="container-fluid">
<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Aboutus.html">About Us</a>
</li>

-Jay Prajapati Page 19 of 35


Web Designing Problemsheet-1

<li class="nav-item">
<a class="nav-link" href="Contactus.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Registration.html">Registration</a>
</li>
<li class="nav-item">
<button class="btn btn-dark w-100">
<a style="text-decoration: none; color: white;" href="Login.html">Log Out</a>
</button>
</li>
</ul>
</div>
</nav>

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">


<div class="d-flex mt-5 ms-3">
<div class="card mb-3 me-3 p-3" style="max-width: 540px;">
<div class="row g-0 align-items-center">
<div class="col-md-4">
<img src="first.jpg" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">BOAT <span class="badge text-bg-danger">NEW</span></h5>
<p class="card-text"> boAt Airdopes 190 True Wireless in Ear Earbuds with Beast
Mode(50ms) for Gaming, 40H Playtime, Breathing LEDs, Signature Sound, Quad Mics
Enx Tech, ASAP Charge and BT v5.3(Black Sabre)</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
<div class="card mb-3 p-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="second.jpg" class="img-fluid rounded-start" alt="Product">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title ">ONE PLUS <span class="badge text-bg-danger">NEW</span></h5>
<p class="card-text">OnePlus Bullets Wireless Z2 ANC Bluetooth in Ear Earphones with
Mic, 45dB Hybrid ANC, Bombastic Bass - 12.4 mm Drivers, 10 Mins Charge - 20 Hrs
Music, 28 Hrs Battery Life (Grand Green)</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="d-flex main_div_Card mt-5">
<div class="card me-3 main_card" style="width: 18rem;">

-Jay Prajapati Page 20 of 35


Web Designing Problemsheet-1

<img src="first-seller.jpg" class="card-img-top" alt="...">


<div class="card-body">
<h5 class="card-title">CHKOKKO</h5>
<p class="card-text">CANTIBONA New Finger Grip Strengthener - Adjustable Finger Exerciser
and Finger Stretcher - Grip Strength Trainer for Hand Therapy, Rock Climbing - Relieve
</p>
<a href="#" class="btn btn-primary">See Product</a>
</div>
</div>
<div class="card me-3 main_card" style="width: 18rem;">
<img src="second-seller.webp" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">ANTEC NX200M</h5>
<p class="card-text">CANTIBONA New Finger Grip Strengthener - Adjustable Finger Exerciser
and Finger Stretcher - Grip Strength Trainer for Hand Therapy, Rock Climbing - Relievek
</p>
<a href="#" class="btn btn-primary">See Product</a>
</div>
</div>
<div class="card me-3 main_card" style="width: 18rem;">
<img src="third.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">GOSIRIKI </h5>
<p class="card-text">CANTIBONA New Finger Grip Strengthener - Adjustable Finger Exerciser
and Finger Stretcher - Grip Strength Trainer for Hand Therapy, Rock Climbing - Relieve
</p>
<a href="#" class="btn btn-primary">See Product</a>
</div>
</div>
<div class="card me-3 main_card" style="width: 18rem;">
<img src="fourth-seller.webp" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">CANTIBONA</h5>
<p class="card-text">CANTIBONA New Finger Grip Strengthener - Adjustable Finger Exerciser
and Finger Stretcher - Grip Strength Trainer for Hand Therapy, Rock Climbing - Relieve
</p>
<a href="#" class="btn btn-primary">See Product</a>
</div>
</div>
</div>
</main>

<div class="container-fluid w-100 bg-dark p-3 mt-5">


<div class="footer">
<footer class=" text-white text-center">
© All rights reserved
</footer>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
crossorigin="anonymous"></script>
</body>

-Jay Prajapati Page 21 of 35


Web Designing Problemsheet-1

</html>

•Code: Login.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log In</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="registration.css">
</head>
<body>
<div class="container-fluid text-white bg-light p-3 ">
<div class="d-flex justify-content-between w-100 navbars">
<div class="col-md-2 fs-4 fw-bold">
<img src="no-bg-logo.png" alt="" class="logo w-100">
</div>
<div class="col-md-2 text-end p-1">
<div class="d-flex align-items-center">
<div class="col-md-6 ms-4">
<a href="#"><i class="fa-brands text-dark fs-4 fa-facebook me-3"></i></a>
<a href="#"><i class="fa-brands text-dark fs-4 fa-instagram me-3"></i></a>
<a href="#"><i class="fa-brands text-dark fs-4 fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="container-fluid">
<div class="row main_div">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link " href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Aboutus.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contactus.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="">Registration</a>
</li>
<li class="nav-item">
-Jay Prajapati Page 22 of 35
Web Designing Problemsheet-1

<button class="btn btn-dark w-100">


<a style="text-decoration: none; color: white;" href="Login.html">Log Out</a>
</button>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="form-box">
<h2>Login</h2>
<form>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email"
placeholder="Enter your email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
placeholder="Enter your password">
</div>
<button type="submit" class="btn btn-primary">Log In</button>
</form>
<p class="signup-link">Don't have an account? <a href="registration.html">Sign up</a>
</p>
</div>
</div>
</div>
</div>
</main>
` <div class="container-fluid w-100 bg-dark p-3 ">
<div class="footer">
<footer class=" text-white text-center">
© All rights reserved
</footer>
</div>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/79ca8024e7.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
crossorigin="anonymous"></script>
</body>
</html>

•Code: Registration.html

<!DOCTYPE html>
-Jay Prajapati Page 23 of 35
Web Designing Problemsheet-1

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="registration.css">
</head>

<body>
<div class="container-fluid text-white bg-light p-3 ">
<div class="d-flex justify-content-between w-100 navbars">
<div class="col-md-2 fs-4 fw-bold">
<img src="no-bg-logo.png" alt="" class="logo w-100">
</div>
<div class="col-md-2 text-end p-1">
<div class="d-flex align-items-center">
<div class="col-md-6 ms-4">
<a href="#"><i class="fa-brands text-dark fs-4 fa-facebook me-3"></i></a>
<a href="#"><i class="fa-brands text-dark fs-4 fa-instagram me-3"></i></a>
<a href="#"><i class="fa-brands text-dark fs-4 fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="container-fluid">
<div class="row main_div">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link " href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Aboutus.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contactus.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="">Registration</a>
</li>
<li class="nav-item">
<button class="btn btn-dark w-100">
<a style="text-decoration: none; color: white;" href="Login.html">Log Out</a>
</button>

-Jay Prajapati Page 24 of 35


Web Designing Problemsheet-1

</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h2>User Registration</h2>
<form>
<div class="form-group">
<label for="fullName">Name</label>
<input type="text" class="form-control" id="fullName"
placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
placeholder="Enter a password">
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword"
placeholder="Confirm your password">
</div>
<button type="submit" class="btn btn-primary btn-block">Register</button>
</form>
<p class="mt-3">Already have an account? <a href="login.html">Log in</a></p>
</div>
</div>
</div>
</main>
<div class="container-fluid w-100 bg-dark p-3 ">
<div class="footer">
<footer class=" text-white text-center">
© All rights reserved
</footer>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
crossorigin="anonymous"></script>
</body>
</html>

•Code: Aboutus.html

<!DOCTYPE html>
<html lang="en">
-Jay Prajapati Page 25 of 35
Web Designing Problemsheet-1

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About US</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="slider.css">
</head>

<body>
<div class="container-fluid text-white bg-light p-3 ">
<div class="d-flex justify-content-between w-100 navbars">
<div class="col-md-2 fs-4 fw-bold">
<img src="no-bg-logo.png" alt="" class="logo w-100">
</div>
<div class="col-md-2 text-end p-1">
<div class="d-flex align-items-center">
<div class="col-md-6 ms-4">
<a href="#"><i class="fa-brands text-dark fs-4 fa-facebook me-3"></i></a>
<a href="#"><i class="fa-brands text-dark fs-4 fa-instagram me-3"></i></a>
<a href="#"><i class="fa-brands text-dark fs-4 fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="container-fluid">
<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link " href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contactus.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Registration.html">Registration</a>
</li>
<li class="nav-item">
<button class="btn btn-dark w-100">
<a style="text-decoration: none; color: white;" href="Login.html">Log Out</a>
</button>
</li>
</ul>

-Jay Prajapati Page 26 of 35


Web Designing Problemsheet-1

</div>
</nav>

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">

<div class="container mt-5">


<div class="row">
<div class="col-md-6">
<h2>About Us</h2>
<p>Welcome to Your E-Commerce Store! We are a dedicated team of professionals who are
passionate about bringing you the best shopping experience online.</p>
<p>With a wide range of products, exceptional customer service, and convenient shopping
options, we strive to make your online shopping journey smooth and enjoyable.</p>
<p>Our commitment to quality, reliability, and innovation sets us apart in the e-commerce
industry. We believe in offering products that not only meet but exceed your
expectations.</p>
</div>
<div class="col-md-6">
<img src="about.webp" alt="About Us Image" class="img-fluid about_image">
</div>
</div>
</div>

<div class="container mt-5">


<div class="row">
<div class="col-md-6">
<h3>Our Mission</h3>
<p>Our mission is to provide you with a diverse selection of high-quality products that
cater to your needs and preferences. We aim to create a seamless shopping experience
that saves you time and offers great value.</p>
</div>
<div class="col-md-6">
<h3>Our Vision</h3>
<p>Our vision is to become your go-to destination for all your online shopping needs. We
aspire to build strong, lasting relationships with our customers by consistently
exceeding their expectations.</p>
</div>
</div>
</div>

<div class="bg-light py-5">


<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2>Why Choose Us?</h2>
<p>We take pride in what sets us apart from the rest:</p>
</div>
</div>
<div class="row mt-4">
<div class="col-md-4 text-center">
<div class="feature-icon">
<i class="fa fa-heart fa-3x"></i>
</div>
<h4>Quality Products</h4>
<p>We offer only the highest quality products to ensure your satisfaction.</p>

-Jay Prajapati Page 27 of 35


Web Designing Problemsheet-1

</div>
<div class="col-md-4 text-center">
<div class="feature-icon">
<i class="fa fa-truck fa-3x"></i>
</div>
<h4>Fast Shipping</h4>
<p>Your orders are shipped quickly and reliably to your doorstep.</p>
</div>
<div class="col-md-4 text-center">
<div class="feature-icon">
<i class="fa fa-users fa-3x"></i>
</div>
<h4>Exceptional Support</h4>
<p>Our dedicated support team is always ready to assist you.</p>
</div>
</div>
</div>
</div>
</main>

<div class="container-fluid w-100 bg-dark mt-5 p-3">


<div class="footer">
<footer class=" text-white text-center">
© All rights reserved
</footer>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
</body>
</html>

•Code: Contactus.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact US</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>

-Jay Prajapati Page 28 of 35


Web Designing Problemsheet-1

<body>
<div class="container-fluid text-white bg-light p-3 ">
<div class="d-flex justify-content-between w-100 navbars">
<div class="col-md-2 fs-4 fw-bold">
<img src="no-bg-logo.png" alt="" class="logo w-100">
</div>
<div class="col-md-2 text-end p-1">
<div class="d-flex align-items-center">
<div class="col-md-6 ms-4">
<a href="#"><i class="fa-brands text-dark fs-4 fa-facebook me-3"></i></a>
<a href="#"><i class="fa-brands text-dark fs-4 fa-instagram me-3"></i></a>
<a href="#"><i class="fa-brands text-dark fs-4 fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="container-fluid">
<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link " href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="Aboutus.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Registration.html">Registration</a>
</li>
<li class="nav-item">
<button class="btn btn-dark w-100">
<a style="text-decoration: none; color: white;" href="Login.html">Log Out</a>
</button>
</li>
</ul>
</div>
</nav>

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 p-4">


<section class="contact-section">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="contact-info">
<h2 class="contact-heading">Get In Touch</h2>
<p>If you have any questions, feedback, or concerns, please feel free to reach out
to us. Our dedicated support team is here to assist you.</p>
<p><i class="fa fa-envelope"></i> Email: [email protected]</p>
<p><i class="fa fa-phone"></i> Phone: +9123XXXXX90</p>

-Jay Prajapati Page 29 of 35


Web Designing Problemsheet-1

<p><i class="fa fa-map-marker-alt"></i> Address: A-202, Royal Villa, Surat, India</p>


</div>
</div>
<div class="col-md-6">
<div class="contact-form">
<h2 class="contact-heading">Send Us a Message</h2>
<form>
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" class="form-control" id="name"
placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email"
placeholder="Enter your email">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" rows="4"
placeholder="Enter your message"></textarea>
</div>
<button type="submit" class="btn btn-submit btn-primary mt-2 btn-block">Send Message</button>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="faq-section">
<div class="container">
<h2 class="faq-heading">Frequently Asked Questions</h2>
<div class="faq-item">
<p class="faq-question">How can I track my order?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget libero vel leo suscipit
porttitor.</p>
</div>
<div class="faq-item">
<p class="faq-question">What is your return policy?</p>
<p>Nam vehicula, turpis nec aliquam tempor, ante magna cursus dolor, nec volutpat ex ligula
non nulla.</p>
</div>
<div class="faq-item">
<p class="faq-question">Do you offer international shipping?</p>
<p>Donec luctus tincidunt metus, sit amet viverra nisl venenatis nec. Fusce cursus risus non
lectus viverra tristique.</p>
</div>
</div>
</section>
</main>

<div class="container-fluid w-100 bg-dark p-3 mt-5">


<div class="footer">
<footer class=" text-white text-center">
© All rights reserved

-Jay Prajapati Page 30 of 35


Web Designing Problemsheet-1

</footer>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
crossorigin="anonymous"></script>
</div>
</div>
</body>
</html>

• style.css

.navbars{
align-items: center;
}
.logo{
width: 191px !important;
height: 64px;
}
.main_div_Card{
height: 500px;
}
.main_card{
height: 100%;
}
.main_card img{
height:250px;
box-sizing: border-box;
object-fit: contain;
width: 250px;
}
.nav-item{
padding: 10px !important;
}
.nav-item a{
color: black;
}
.nav-item .active{
background-color: black;
color: white;
}
.about_image {
width: 578px;
height: 320px;
}

• registration.css

body { overflow: hidden; }


#sidebar { height: 81vh; }
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
-Jay Prajapati Page 31 of 35
Web Designing Problemsheet-1

.container { margin-top: 100px; }


.form-box {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
}
.form-box h2 {
font-size: 24px;
margin-bottom: 20px;
}
.form-group label { font-weight: bold; }
.form-control {
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
width: 100%;
margin-bottom: 20px;
transition: border-color 0.3s ease;
}
.form-control:focus { border-color: #3498db; }
.btn-primary {
background-color: #3498db;
border: none;
width: 100%;
padding: 10px;
font-size: 18px;
border-radius: 4px;
color: #ffffff;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-primary:hover { background-color: #2980b9; }
.login-link {
text-align: center;
margin-top: 15px;
}
.login-link a {
color: #3498db;
text-decoration: none;
}
.login-link a:hover {
text-decoration: underline;
}

-Jay Prajapati Page 32 of 35


Web Designing Problemsheet-1

• Output:Home Page

-Jay Prajapati Page 33 of 35


Web Designing Problemsheet-1

• Output:About us

• Output:Contact Us

-Jay Prajapati Page 34 of 35


Web Designing Problemsheet-1

• Output:Registration

• Output:Log in/Log out

-Jay Prajapati Page 35 of 35

You might also like