Scribd
Upload
3 views5 pages

News

The document outlines the design of a responsive cab booking website using Bootstrap. It includes HTML code for the home page, navigation bar, about section, and services section, detailing features like flat rate systems and easy mobile booking. The project aims to enhance user experience and accessibility for cab booking services.

Uploaded by

SAKTHIVISHNU
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
3 views5 pages

News

The document outlines the design of a responsive cab booking website using Bootstrap. It includes HTML code for the home page, navigation bar, about section, and services section, detailing features like flat rate systems and easy mobile booking. The project aims to enhance user experience and accessibility for cab booking services.

Uploaded by

SAKTHIVISHNU
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/ 5

EX NO-3 TO DESIGN A RESPONSIVE WEBSITE FOR CAB BOOKING USING

BOOTSTRAP

AIM:
To design a responsive website for cab booking using bootstrap

CODE:
----HOME PAGE----
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="frontpage.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">

<title>FLYWHEEL</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">FLYWHEEL</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">PACKAGES</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">CONTACT US</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
OTHERS
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="restable.html">TARIFF</a></li>
<li><a class="dropdown-item" href="features.html">FEATURES</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

<!--HOME-->
<section id="home">
<h1 class="text-center">Book a City Taxi to your destination in town</h1>
<h6 class="text-center">Service safety with sophistication are our speciality</h6>
<div class="center m-4">
<a href="newform.html" class="express-btn">BOOK NOW</a>
</div>
</section>

<!--about us-->
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-12">
<img src="car.jpg" class="img-fluid">
</div>
<div class="col-lg-6 col-md-6 col-12 p-lg-5 p-2 my-5">
<h1>ABOUT US</h1>
<p> Our Team Investors 2017 has been a great year for Team flywheel. We witnessed
some important milestones including - completing 12 years of service, extending our footprint to 98
cities and covering over 265 million kilometers of road travel across India!

In 2018, our focus will remain on continuously creating differentaited value for the inter-city
traveler. We have several exciting offerings lined up, the most prominent being 'Package Offers' to
key tourist and buisness destinations. With your support, these initiatives will transform road travel
into even more memorable and exciting journeys</p>
</div>
</div>
</div>
</section>

<!--packages-->
<section class="services" id="services">
<div class="container">
<h1 class="title">PACKAGES</h1>
<div class="row">
<div class="col-md-4">
<div class="service-box">
<img src="star.png">
<h6>Flat Rate Systems</h6>
<p>Flywheel taxi offers the best flat rates to its valuable customers, from virtually
every zone</p>
</div>
</div>
<div class="col-md-4">
<div class="service-box">
<img src="rupees.png">
<h6>Lower Rates</h6>
<p>So far Flywheel has been always a cost-effective mode of transportation for its
customers and will continue to do so.</p>
</div>
</div>
<div class="col-md-4">
<div class="service-box">
<img src="booking.png">
<h6>Easy Mobile Booking</h6>
<p>The all new cab booking app from flywheel will make your travel customizations
easier than ever before.</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Output:

RESULT:
The implementation of design a responsive website for cab booking using Bootstrap has been
executed successfully

You might also like