Prectical 11 To Prectical 22 RWPD

Practical-11
AIM: Use different bootstrap input groups components to create responsive

webpage for job application or any other kind of application.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practical 11</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstr
ap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min
.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/poppe
r.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap
.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Student Admission Form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="name">Student Full Name:</label>
<input type="name" class="form-control" id="name"
placeholder="Enter Student Full name" name="name">
</div>
<label for="name">Father Full Name:</label>
placeholder="Enter Father Full name" name="name">
</div>
<label for="name">Mother Full Name:</label>
placeholder="Enter Mother Full name" name="name">
</div>
<label for="name">Student Gender:</label>
<div class="form-check">
<input class="form-check-input" type="radio"
name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label"
for="flexRadioDefault1">Male</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label"
for="flexRadioDefault2">Female</label>
</div>
<label for="bdate">Birth Date:</label>
<input type="date" class="form-control" id="bdate"
placeholder="Enter Birthdate" name="bdate">
</div>
<label for="phn">Phone Number:</label>
<input type="number" class="form-control" id="phn"
placeholder="Enter Phone number" name="phone">
</div>
<label for="phn">Alternet Phone Number:</label>
placeholder="Enter Another Phone number" name="phone">
</div>
<label for="email">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter Email address" name="email">
</div>
<label for="phn">Permanent Address:</label>
<textarea type="number" class="form-control" id="phn"
placeholder="Enter Permanent Address"
name="address"></textarea>
</div>
<label for="phn">Communication Address:</label>
<textarea type="number" class="form-control" id="phn"
placeholder="Enter Communication Address"
name="address"></textarea>
</div>
<label for="resume">Student Passport Size Photo:</label>
<input type="file" class="form-control" id="resume">
</div>
<label for="resume">Enter Adhar Card:</label>
<input type="file" class="form-control" id="resume">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Output:
Practical-13
AIM : Use Nav bar component to create responsive fixed to top
menu design includes logo, menu, drop down menu, form input
elements such as sign-up button, search mechanism etc. And fixed to
bottom menu design contains footer information.
<!DOCTYPE html>
<html lang="en">
<head>
scale=1">
<title>Bootstrap Navbar with Dropdown</title>
<link
ap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
[email protected]/font/bootstrap-icons.css">
<script
.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<img src="D:\RWPD\vima.JPG" height=150 width=150>
<a href="#" class="navbar-brand">cricket</a>
<button type="button" class="navbar-toggler" data-bs-
toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between"
id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-
toggle="dropdown">Messages</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">virat kohli</a>
<a href="#" class="dropdown-item">MS Dhoni</a>
<a href="#" class="dropdown-item">Rohit Sharma</a>
</div>
</div>
</div>
<form class="d-flex">
<div class="input-group">
<input type="text" class="form-control"
placeholder="Search">
<button type="button" class="btn btn-secondary"><i
class="bi-search"></i></button>
</div>
</form>
<div class="navbar-nav">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
Output :
Practical 14
AIM: Create responsive web page of education website using
bootstrap breadcrumb, pagination, labels/badge, Jumbotron/page
header, thumbnail components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
scale=1.0">
<title>Document</title>
<style>
body{
background-image: url(' D:\ \7 45 18. webp ');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>


<link
ap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/
T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar bg-light">
<a class="navbar-brand" href="#">
</a>
</div>
</nav>
<div class="container text-white">
<h1 class="display-4">cricket</h1>
<hr class="my-4">
<p> cricket, England’s national summer sport, which is now played
throughout the world, particularly in Australia, India, Pakistan, the
West Indies, and the British Isles and dhoni,virat and rohit are Indian
players </p>
<hr class="my-4">
<p> M.S. Dhoni, in full Mahendra Singh Dhoni, (born July 7, 1981,
Ranchi, Bihar [now Jharkhand] state, India), Indian cricketer whose
rise to prominence in the early 21st century culminated in his
captaincy of the Indian national team that won the one-day Cricket
World Cup in 2011.
Dhoni made his international debut in 2004. His talent with the bat
came to the fore in an innings of 148 runs against Pakistan in his fifth
international match. Within a year he joined the India Test team,
where he quickly established himself with a century (100 or more runs
in a single innings) against Pakistan. </p>
<hr class="my-4">
<p> Virat Kohli (born 5 November 1988) is an Indian cricketer who
currently captains the India national team. A right-handed top-order
batsman, Kohli is regarded as one of the best batsmen in the world.
He plays for Royal Challengers Bangalore in the Indian Premier League
(IPL), and has been the team's captain since 2013. Since October 2017,
he has been the top-ranked ODI batsman in the world and is currently
2nd in Test rankings with 886 points. Among Indian batsmen, Kohli
has the best ever Test rating (937 points), ODI rating (911 points) and
T20I rating (897 points).
Kohli captained India Under-19s to victory at the 2008 Under-19

World Cup in Malaysia. After a few months later, he made his ODI
debut for India against Sri Lanka at the age of 19. Initially having
played as a reserve batsman in the Indian team, he soon established
himself as a regular in the ODI middle-order and was part of the squad
that won the 2011 World Cup. He made his Test debut in 2011 and
shrugged off the tag of "ODI specialist" by 2013 with Test hundreds in
Australia and South Africa. Having reached the number one spot in
the ICC rankings for ODI batsmen for the first time in 2013, Kohli also
found success in the Twenty20 format, winning the Man of the
Tournament twice at the ICC World Twenty20 (in 2014 and 2016).
</p>
<hr class="my-4">
<a class="btn btn-warning" href="#" role="button">Learn more</a>
</div>
<button type="button" class="btn btn-warning">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge
rounded-pill bg-secondary">+50
<span class="visually-hidden">unread messages</span>
</button>
<nav class="mx-4">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous Page</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link"
href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>

<script
.bundle.min.js"
integrity="sha384-
u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOO
mMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
Output :
Practical 15
AIM:Following tasks to be performed using bootstrap progress
bars component. A) Creating progress bars B) Adding label to
progress bars C) Creating multi-color, stripped and animated
progress bars D) Changing value of progress bar dynamically using
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Progress Bar</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/
bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/
popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/
bootstrap.min.js">
</script>
</head>
<style>
body{
background-image: url('D:\\7 45 18.webp');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
<body style="text-align:center;">
<h1 style="color:green;">
INDIAN CRICKETER CENTURY CHART
</h1>
<div class="progress">
<div class="progress-bar progress-bar-stripped
progress-bar-animated"
style="width:100%;">
SACHIN 100 [100%}
</div>
</div><br>
<div class="progress-bar bg-success progress-bar-stripped
style="width:90%;">
VIRAT 74 [90%]
</div>
</div><br>
<div class="progress-bar bg-warning progress-bar-stripped
style="width:45%;">
ROHIT 41 [45%]
</div>
</div><br>
<div class="progress-bar bg-danger progress-bar-stripped
style="width:39%;">
DHONI 16 [39%]
</div>
</div><br>
<div class="progress-bar bg-info progress-bar-stripped
style="width:29%;">
KL RAHUL 14 [29%]
</div>
</div><br>
</div>
</body>
</html>
Output :
Practical-16
AIM : Use media, rounded media, Nested media object to create
responsive web page for all family members in hierarchical order.
<!DOCTYPE html>
<html lang="en">
<head>
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/
bootstrap.min.css"
integrity=
"sha384-
GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZW
KYbI706tWS"

<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/
popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/
bootstrap.min.js">
</script>
<title>CRICKET</title>
</head>
<body>
<h2>Media Object</h2>

<div class="media">
<div class="media-left">
<img src=
"D:\RWPD\Virat-Kohli-4-2.JPG"height=200 wight=120>
</div>
<div class="media-body">
<h4 class="media-heading">
VIRAT KOHLI
</h4>
<p> Kohli trained in West Delhi Cricket Academy; started his youth
career with Delhi Under-15 team. Kohli made his international debut
in 2008 and quickly became a key player in the ODI team. He made his
Test debut in 2011.
</p>
</div>
</div>
<hr>
<div class="media">
<div class="media-body">
<h4 class="media-heading">
mahendra singh dhoni
</h4>
<p>
Dhoni is a right-handed wicket-keeper batsman known for
his aggressive captaincy and his ability to finish matches in tight
situations. He scored over 10,000 runs in One Day Internationals and
is considered one of the best finishers in the game. He is also one of
the greatest wicket-keepers and captains in the history of cricket.
</p>
</div>
<div class="media-right">
<img src="C:\Users\Kushal Trivedi\OneDrive\Pictures\
Screenshots\458455.gif"height=200 wight=120
>
</div>
</div>
</div>
</body>
</html>
Output :
Practical-17
AIM: Create responsive webpage of various service provider

information using bootstrap panel component, List group
component, various alert messages and show message after
bootstrap alert has been closed.
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
content="width=device-width,
initial-scale=1" />
<link
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-BmbxuPwQa2lc/
FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
href="style.css" />
<link rel="preconnect"
href="https://fonts.gstatic.com" />
<link
href=
"https://fonts.googleapis.com/css2?
family=Roboto+Condensed&display=swap"
rel="stylesheet"
/>
<title>GFG</title>
</head>
<body>
<section id="navbar">
<nav class="navbar navbar-expand-lg navbar-light">
Geeks for Geeks
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link active"
aria-current="page"
href="#">Home</a>
</li>
<a class="nav-link"
href="#service">Services</a>
</li>
<a class="nav-link"
href="#about">About Us</a>
</li>
<a class="nav-link"
href="#product">Products</a>
</li>
<a class="nav-link"
href="#social">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</section>


<section id="banner">
<div class="container-fluid" id="banner-container">
<div class="row" id="banner-row">
<div class="col-md-6" id="banner-col">
<h3>
BEST PROFESSIONAL WEBSITE DESIGN
SOFTWARE DEVELOPMENT COMPANY
</h3>
<p>
The fastest way to grow your business with the leader in
Technology
</p>
<div class="d-grid gap-2 d-md-flex justify-content-center">

<a class="btn btn-primary"
href="#"
role="button">Contact Us</a>
</div>
</div>
<div class="col-md-6" id="banner-col2">
/>
</div>
</div>
</div>
</section>


<section id="service">
<h1 class="text-center">SERVICES</h1>
<div class="container-fluid" id="service-container">
<div class="col-md-4" id="service-col1">
<h3>Website Design</h3>
<p>
User Experience Design.
Website Content Strategy.
Cross Browser
and Platform Testing.
</p>
</div>
<h3>Bulk SMS</h3>
<p>
1.Toll Free Number
2. IVR
3. Virtual Number
4. Political or any
Voice Broadcasting
</p>
</div>
<h3>Payment Gateways</h3>
<p>
PayU India is the flagship company of
Naspers group which is a $25
Billion internet and media conglomerate
listed on London and
Johannesburg stock exchanges respectively.
</p>
</div>
</div>
</div>
</section>
<hr />


<section id="about">
<h1 class="text-center">About Us</h1>
<div class="container-fluid" id="about-container">
<div class="col-md-6" id="about-col">
<h3>Why Us</h3>
<ul>
<li>
Probuz is all about Delivering High
Quality web design and development
services, Cost effective and
reliable solutions.
</li>
<li>SCHOOL/COLLEGE MANAGEMENT SOFTWARE
(CAMPUS PRO)</li>
<li>
Let us take care of your Business needs.
Customer Productivity is our Priority.
</li>
<li>Our expertise in Business includes</li>
</ul>
</div>
<div class="col-md-6" id="banner-col2">
/>
</div>
</div>
</div>
</section>
<hr />

<section id="product">
<h1 class="text-center">Our Products</h1>
<div class="container-fluid" id="product-container">
<div class="col-md-6" id="about-col">
</div>
<div class="col-md-6" id="product-col2">
<h3>Product List</h3>
<ul>
<li>CLINIC MANAGMENT SYSTEM</li>
<li>SCHOOL/COLLEGE MANAGEMENT
SOFTWARE (CAMPUS PRO)</li>
<li>SERVICE MANAGEMENT SOFTWARE</li>
<li>E-COMMERCE WEBSITE</li>
</ul>
</div>
</div>
</div>
</section>
<hr />

<section id="social">
<h1 class="text-center">Get In Touch</h1>
<div class="d-grid gap-2 d-md-flex justify-content-center">
<div class="row align-items-center" id="social-row">
<div class="col-md-4 social-col">
<a href=""
><img
class="img-responsive rounded mx-auto d-block"
src="images/gfg.png"
alt=""
/></a>
</div>
<a href=""
><img
src="images/icons8-instagram-64.png"
alt=""
/></a>
</div>
<a href=""
><img
src="images/icons8-twitter-64.png"
alt=""
/></a>
</div>
</div>
</div>
</section>


<section id="footer">
<section id="banner">
<div class="container-fluid" id="banner-container">
<div class="col-md-4" id="footer-col1">
<h3>My Website</h3>
<p>
At XYZ we believe that customers should
always get easy-to-use, best in the kind
and fast services.xyz has achieved
standards which helps customer to
achieve satisfaction and realize
value for their hard earned money.
</p>
</div>
<h3>Contact Us</h3>
<p>Call Us- 1800-121-6532</p>

<p>Email Us- [email protected]</p>
</div>

<h3>Subscribe To Newsletter</h3>
<form>
<div class="mb-3">
<input
type="email"
placeholder="Enter Your Email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
<div id="emailHelp"
class="form-text">
We'll never share your email with anyone else.
</div>
</div>
<button type="submit"
class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</section>
</section>



<script
src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/
bootstrap.bundle.min.js"
integrity=
"sha384-b5kHyXgcpbZJO/
tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ
0"
crossorigin="anonymous"
></script>
</body>
</html>
Output :
Practical-18
AIM : Design a smooth page transition between homepage, about
and contact us page using bootstrap transition plugin.
<!doctype html>
<html lang="en">
<head>
<body bgcolor="black">
<meta name="viewport" content=
"width=device-width, initial-scale=1, shrink-to-fit=no">
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/
bootstrap.min.css"


<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/
jquery.slim.min.js"
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/
popper.min.js"
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/
bootstrap.min.js"
</script>
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 style="color:GREEN">CRICKET</h1>
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
</body>
</html>
Output :
Practical-20
AIM: Design news story page to demonstrate usage of Scrollspy
for multiple section, Tooltip for different photos, Collapsible and
popover plugins of bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practical 20</title>
scale=1">
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css"
>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/
jquery.slim.min.js"></scri
pt>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/
popper.min.js"></s
cript>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/
bootstrap.bundle.min
.js"></script>
<style>
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-8 div {
height: 500px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-
offset="1">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy"
style="backgroundcolor:lightgray;">
<ul class="nav nav-pills flex-column">
<a class="nav-link active" href="#home">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" datatoggle="dropdown"
href="#">About</a>
<div class="dropdown-menu" style="backgroundcolor:lightgray;">
<a class="dropdown-item" href="#vandm">Vision and
Mission</a>
<a class="dropdown-item"
href="#contactinfo">Contact Info</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" datatoggle="dropdown"
href="#">Departments</a>
<div class="dropdown-menu" style="backgroundcolor:lightgray;">
<a class="dropdown-item" href="#comp">COMPUTER
ENGG.</a>
href="#appmechnics">APPLIED MECHANICS</a>
href="#architecture">ARCHITECTURE</a>
href="#biomedical">BIOMEDICAL ENGINEERING</a>
</div>
</li>
</ul>
</nav>
<div class="col-sm-9 col-8">
<div id="section1" class="bg-danger">
<h1>Government Polytechnic,Ahmedabad</h1><br>
<ul>
<li>
<h4>Government Polytechnic - Ahmedabad is one of
the Pioneer Institute in Diploma Technical
Education side since 1954.</h4>
</li>
<li>
<h4>Institute is running various 10 different
diploma courses under CTE and affiliated with
Gujarat Technological University.</h4>
</li>
<li>
<h4>Institute is located in the heart of the city
and first choice among student for their
admission.</h4>
</li>
</ul>
</div>
<div id="vandm" class="bg-success">
<h1>Vision</h1>
<ul>
<li>
<h4>To be a leading technical institute that
provides transformative education to learners
for achieving competency as per the needs of
industry and society, thus contributing to
nation building.</h4>
</li><br>
</ul>
<h1>Mission</h1>
<ul>
<li>
<h4> To provide a conducive learning environment
to nurture learners.</h4>
</li>
</li>
<li>
<h4> To act as a catalyst for achieving academic
excellence by bringing stake holders on
same platform.</h4>
</li>
<li>
<h4> To be committed towards continuous
improvement and enrichment of learners by a holistic
approach to education so as to enable them to
be successful individuals and responsible
citizens of India.</h4>
</li>
</ul>
</div>
<div id="contactinfo" class="bg-primary">
<h1>Address</h1>
<ul>
<li>
<h4>Ambawadi, Ahmedabad, Pincode: 380015</h4>
</li>
</ul><br>
<h1>Conatact No.</h1>
<ul>
<li>
<h4>7926301285</h4>
</li>
</ul><br>
<h1>Email</h1>
<ul>
<li>
<h4>[email protected]</h4>
</li>
</ul><br>
</div>
<div id="comp" class="bg-dark text-white">
<h1>COMPUTER ENGINEERING</h1><br>
<ul>
<li>
<h4>Institute is running Diploma in Computer
Program with 120 intake of students in first
shift and 60 students in second shift.</h4>
</li>
<li>
<h4>Department has two mordern classrooms with
audio-visual and air-conditioning facilities.
</h4>
</li>
<li>
<h4>Mr.Bipinkumar Kantevala, Head of the Computer
Department, leads the department with 13
experienced teaching faculties for teaching
learning Activities.</h4>
</li>
<li>
<h4>Department has various kinds of Laboratories
as per curriculum maintained by Laboratory
Assistant.</h4>
</li>
</ul>
</div>
<div id="appmechnics" class="bg-info">
<h1>APPLIED MECHANICS</h1><br>
<ul>
<li>
<h4>Institute is running Diploma in Applied
Mechnics with 120 intake of students in first
shift and 60 students in second shift.</h4>
</li>
<li>
<h4>Department has two mordern classrooms with
</h4>
</li>
<li>
<h4>Mr.A.T.Parmar, Head of the Applied Mechnics
</li>
<li>
Assistant.</h4>
</li>
</ul>
</div>
<div id="architecture" class="bg-danger">
<h1>ARCHITECTURE</h1><br>
<ul>
<li>
<h4>Institute is running Diploma in Architecture
with 120 intake of students in first shift
and 60 students in second shift.</h4>
</li>
<li>
<h4>Department has one mordern classrooms with
</h4>
</li>
<li>
<h4>Mr.M.R.Yadav, Head of the Applied Mechnics
</li>
<li>
Assistant.</h4>
</li>
</ul>
</div>
<div id="biomedical" class="bg-secondary text-white">
<h1>BIOMEDICAL ENGINEERING</h1><br>
<ul>
<li>
<h4>Institute is running diploma in Biomedical
with 60 intake which is started in 2009.</h4>
</li>
<li>
<h4>Department has 1 computer lab, 2 class room,
and well planed laborataries.</h4>
</li>
<li>
<h4>Mr. j t patankar, I/C Head of Department with
6 Exp.</h4>
</li>
<li>
<h4>Teaching staff and 1 laboratory
assistant.</h4>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Output :
Practical-21
AIM: Design animated photo gallery page using Carousel

bootstrap plugin with minimum seven photos.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap | Carousel</title>
content="width=device-width, initial-scale=1">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/
bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/
bootstrap.min.js">
</script>
</head>
<body>
<center>
<div id="myCarousel" class="carousel slide"
data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel"
data-slide-to="0" class="active"></li>
<li data-target="#myCarousel"
data-slide-to="1"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/
20190603152813/ml_gaming.png">
<div class="carousel-caption">
<b>
<h1 class="text-success">
technical knowledge</h1>
</b>
</div>
</div>
<div class="item">
<img
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/
20190507183137/Embedded-System-Programming-
Languages.png">
<div class="carousel-caption">
<b>
<h1 class="text-primary">
</h1>
<p>Join Geeks Classes</p>
</b>
</div>
</div>
</div>

<a class="left carousel-control"
href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control"
href="#myCarousel" data-slide="next">
<span class="glyphicon
glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</center>
</body>
</html>
Output :
Practical-22
AIM : Develop advanced responsive website with minimum

Five to seven pages on any of following domains (Tourism,
Hospitality, Airline reservation, Medical, E commerce etc.)
<html><head>
<style>
@import
url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstra
p.min.css);
@import
url(https://fonts.googleapis.com/css?family=Lato:400,300,900);
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
font-family:'Lato', sans-serif !important;
font-size: 13pt !important;
font-weight: 300 !important;
}
.container-fluid {
padding-right: 0px !important;
padding-left: 0px !important;
}
#myPageContent, section {
height:130% !important;
width:100% !important;
}
#home { background-color: #00b29e; }
#about { background-color: skyblue;}
#overview { background-color: yellow;}
#details { background-color: lightpink;}
#service { background-color: skyblue;}
#checkin { background-color: skyblue;}
#Facilities { background-color: #00b29e ; }
#prices { background-color: orange;}
#booking { background-color: skyblue;}
#contact { background-color: #ccffc0;}
#tc { background-color: yellow;}
footer {
background-color: #31353A;
color: #FFF;
text-align: right;
padding: 30px;
}
.myLogo {
max-height: 20px;
height: 100%;
width: 300px;
font-family: 'Lato', sans-serif;
color: #FFF;
}
.myLogo span { color: #F05557; font-weight:normal; }
.navbar {
opacity: 0.9;
filter: Alpha(opacity=90); /* IE8 and earlier */
}
.navbar ul li {
color: #FFF !important;
}
.navbar .active a, .nav a:focus {
color:#F05557 !important;
background-color: transparent !important;
}
/* Menu - Animação */
.navbar-nav a::before, .navbar-nav a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.navbar-nav a::before {
margin-right: 10px;
content: '[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.navbar-nav a::after {
margin-left: 10px;
content: ']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.navbar-nav a:hover, .navbar-nav a:hover::before, .navbar-nav
a:hover::after, .navbar-nav a:focus::before, .navbar-nav a:focus::after
{
color:#F05557 !important;
background-color: transparent !important;
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}
</style>
</head>
<body data-spy="scroll" data-offset="0" datatarget="#myNavbar">

<nav id="myNavbar" class="navbar navbar-default navbar-inverse
navbar-fixed-top" role="navigation">

<img src="23-1.jpeg" alt="Logo" width="40" class="d-inline-block
align-text-top">
</a>
<button class="navbar-toggler" type="button" data-bstoggle="collapse" data-bs-
target="#navbarScroll" ariacontrols="navbarScroll" aria-expanded="false" aria-
label="Toggle
navigation">
</button>

<div class="navbar-header">
<button type="button" class="navbar-toggle" datatoggle="collapse" data-
target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><span class="iconbar"></span><span
class="icon-bar"></span>
</button>

<a class="navbar-brand myLogo" href="#"><span>Bus Reservation
Service</span></a>
</div>

<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#overview">overview</a></li>
<li><a href="#details">Details</a></li>
<li><a href="#service">service</a></li>
<li><a href="#Facilities">Facilities</a></li>
<li><a href="#prices">prices</a></li>
<li><a href="#booking">book tickets</a></li>
<li><a href="#tc">terms and condition</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>
</div>
</nav>

<div id="myPageContent" class="container-fluid">
<section id="home">
<br><br><center><div><br><br><h3>Welcome to Bus
reservation</h3></div></center>
<b><u></u></b><img src="C:\Users\Kushal Trivedi\OneDrive\Pictures\
22prectical.jpg" height="300" width="300">
<b><u></u></b><img src= "C:\Users\Kushal Trivedi\OneDrive\Pictures\
</section></div>
<section
id="about"><br><div><br><br><h1><center><b>About<br>Bu
s Service</b></center></h1>
<h3><p>Get Rest Stop Details, Boarding Point Images, Wake-Up
Alarm & More With Every Bus Travel. The Perfect
Balance Of Luxury & Affordability. Enjoy Your Ride To The Fullest
With Primo. Know Your Rest Stops. Live Bus Tracking. ₹500 Off
Code RED500. Track Your Bus.
</p>
</h3><center><b></b><img src="23-6.jpeg" height="270"
width="300"></center></div></section>
<div id="overview" class="container-fluid">
<section
id="overview"><br><center><div><br><br><h3>overview</h3>
</div></center>
<b><p>Introduction</p></b><p>• buses are a full running rute to
all in India. The passengers traveling national route
with buses will get free checked baggage allowance of 25 kg. Online
check in is possible for bus service with the Ahmedabad on Delhi.
It can be processed 1 day for confirming the ticket.</p>
<b><p>How to Book</p></b><p>1. Go to busservice.com, or
access busservice websites (Android/iOS) on your handphone.<br>
2. Fill in the details in the bus search box.<br>
3. Choose your preferred bus.<br>
4. Fill in the passenger and contact information on the booking
page.<br>
5. Complete your payment through the selected payment
method.<br>
6. Receive your bus ticket and collect your confirming e-ticket in
the My Booking page, or in your registered email.<br>
</p>
<b><p>How to Pay</p></b><p>• The payment for your bus
service on any websites can be made via bank credit card, PayPal,
bank transfer, and over the counter methods. For a complete
information, visit the websites Payment Guide page.About</p>
<center><img src="C:\Users\Kushal Trivedi\OneDrive\Pictures\22prectical.jpg"
height="180"
width="300"></center>
</section></div>
<section
id="details"><br><div><br><br><h1><b><center>vision</cente
r></b></h1>
<h3>• Bus services are shall provide safe, efficient, affordable,
customer- focussed and environmentally sustainable integrated
transportation solutions. It shall be a modern vehicle of inclusive
growth, connecting regions, communities, ports and centres
of industry, commerce, tourism and pilgrimage across the
country.</h3>
<h1><b><center>mission</center></b></h1><h3>• Protect and
safeguard passengers, passenger area and bus property.
Ensure the safety, security and boost the confidence of the traveling
public in the buses.</h3>
<center><b><u></u></b><img src="C:\Users\Kushal Trivedi\OneDrive\Pictures\
22prectical.jpg" height="270"
width="300"></center></div></section>
<div id="service" class="container-fluid">
<section
id="service"><br><center><div><br><br><h3>service</h3></di
v></center>
<p>• buses Personnel Service is a unique service as it is the only
service amongst the Central Group 'A' Civil
Services catering exclusively to the Human Resources & Personnel
Management discipline in the Central Government.
It is under the administrative control of Member (Staff) at bus
service organazation level.</p>
<center><img src="C:\Users\Kushal Trivedi\OneDrive\Pictures\22prectical.jpg"
height="300"
<div id="Facilities" class="container-fluid">
<section
id="Facilities"><br><center><div><br><br><h3>Facilities</h3><
/div></center>
<p>• Wi-Fi at Bus Stations</p>
<p>• Water ATM’s on bus station</p>
<p>• Special Buses</p>
<p>• Digitization of bus service</p>
<p>• Digital Apps</p>
<p>• Food Facilities in bus</p>
<p>• First Aid Facility</p>
<p>• GRP/RPF</p>
<p>• Facilities for Handicapped Travelers</p>
<p>• Ladies Special Facilities</p>
<p>• Bus station Maintenance Service</p>
</section></div>
<div id="prices" class="container-fluid">
<section
id="prices"><br><center><div><br><br><h1>Prices</h1></div>
<h3>from ahmedabad</h3>
<table border="5" style="background-color:pink" >
<tr>
<th colpadding="2">from</th>
<th>to</th>
<th>price in indian ruppy</th>
</tr>
<tr>
<td>ahmedabad</td>
<td>mumbai</td>
<td>200</td>
</tr>
<tr>
<td>ahmedabad</td>
<td>dilhi</td>
<td>480</td>
</tr>
<tr>
<td>ahmedabad</td>
<td>bangalore</td>
<td>5000</td>
</tr>
<tr>
<td>ahmedabad</td>
<td>Mount Abu</td>
<td>1500</td>
</tr>
<tr>
<td>ahmedabad</td>
<td>Jaipur</td>
<td>1600</td>
</tr>
<tr>
<td>ahmedabad</td>
<td>Pune</td>
<td>1800</td>
</tr>
</table><br><br>
<img src=" C:\Users\Kushal Trivedi\OneDrive\Pictures\22prectical.jpg "
height="300" width="300"></center>
</section></div>
<section
id="booking"><br><div><br><br><h1><center>Booking</cente
r></h1><hr>
<form action="/action_page.php">
<label for="name">First Name:</label>
<input type="name" class="form-control" id="fname"
placeholder="Enter First name" name="pwd">
</div>
<label for="name">Last Name:</label>
<input type="name" class="form-control" id="lname"
placeholder="Enter Last name" name="LastName">
</div>
<label for="email">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter email" name="email">
</div>
<label for="phn">Phone Number:</label>
placeholder="Enter Phone number" name="phoneNo">
</div>
<label for="per">person:</label>
<input type="number" class="form-control" id="per"
placeholder="Enter how many persons you." name="p">
</div>
<label for="enroll">Gender:</label>
<input type="radio" id="Gender" name="Gender"
value="Male">Male
<input type="radio" id="Gender" name="Gender"
value="Female">Female
</div>
<label for="name">from:</label>
placeholder="from" name="from">
</div>
<label for="name">to:</label>
placeholder="to" name="to">
</div>
<div>
<label for="birthday">date:</label>
<input type="date" id="birthday" name="birthday"></div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<div id="tc" class="container-fluid">
<section id="tc"><br><center><div><br><br><h1>Terms and
Conditions</h1></div></center>
• Services NOT Offered
• Terms and Conditions of Service
• Rules & Policies
• General
• E-Tickets
• Premium Special Buses
• Complaints Procedure
• Your Obligations
• Liability
• Termination
• Use of Tickets
• Governing Law
• Disclaimer
• Privacy Policy<b><p>Our Bus service Partners</p></b><p>•
Rajdhani Express
• Duronto Express
• Mahasagar
• Luxury buses
• redbus service
• gsrtc
• Intercity-Express
• Eagle Express
• Gujarat travels
• Somnath Express
• Shivshakti Express
</p>
</section>
</div>
<section
id="contact"><br><div><br><br><h1><center><b>Contact
Us</b></center></h1>
<center><b><h2>call center</b></h2>
<h3>If you have inquiries for the buses or are facing issues in the
bus Stations such as lost baggage
or cancelled buses, you can contact the bus service
<br>The bus service contact support can be contacted on one of
the following numbers :
<br><br><table border="5" style="background-color:skyblue" >
<tr>
<th colpadding="2">Bus Stations</th>
<th>Phone</th>
</tr>
<tr>
<td> Customer Care ( TICKET BOOKING )</td>
<td> 0755-6610661</td>
</tr>
<tr>
<td> Customer Care ( TICKET BOOKING )</td>
<td>0755-4090600</td>
</tr>
<tr>
<td> TOURISM CONTACT NUMBERS AND DETAILS</td>
<td>1800 110 139</td>
</tr>
<tr>
<td>0755 - 6698100</td>
</tr>
<tr>
<td>0755 - 4090400</td>
</tr>
<tr>
<td>GENERAL ENQUIRY</td>
<td>139</td>
</tr>
<tr>
<td>TOLL FREE NUMBER ( ENQUIRY )</td>
<td>1800-111-139</td>
</tr>
<tr>
<td>GENERAL COMPLAIN</td>
<td>138</td>
</tr>
<tr>
<td>ACCIDENTS AND SAFETY</td>
<td>1072</td>
</tr>
</table><br>
22prectical.jpg" height="300"
<script src="bootstrap-4.3.1-dist/js/jquery.min.js"></script>
<script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
Output:

Prectical 11 To Prectical 22 RWPD

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Prectical 11 To Prectical 22 RWPD

Uploaded by

Copyright:

Available Formats

Practical-11

AIM: Use different bootstrap input groups components to create responsive

Kohli captained India Under-19s to victory at the 2008 Under-19

AIM: Create responsive webpage of various service provider

<div class="d-grid gap-2 d-md-flex justify-content-center">

<p>Call Us- 1800-121-6532</p>

<div class="col-md-4" id="footer-col2">

AIM: Design animated photo gallery page using Carousel

<p>Join Geeks Classes</p>

AIM : Develop advanced responsive website with minimum

You might also like