Scribd
Upload
4 views

as

The document outlines the design of a cab booking web page using HTML and CSS. It includes a detailed booking form with fields for personal information, departure details, vehicle type, and journey type. The implementation has been successfully executed, resulting in an attractive and functional web page.

Uploaded by

SAKTHIVISHNU
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

as

The document outlines the design of a cab booking web page using HTML and CSS. It includes a detailed booking form with fields for personal information, departure details, vehicle type, and journey type. The implementation has been successfully executed, resulting in an attractive and functional web page.

Uploaded by

SAKTHIVISHNU
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

EX NO:2 DESIGN AN ATTRACTIVE WEB PAG FOR CAB BOOKING USING

STYLESHEET

AIM:

To design an attractive web page for cab booking using stylesheet

CODE:

--BOOKING FORM--

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="newform.css">

<title>FLYWHEEL</title>

</head>

<body>

<div class="container">

<div class="myform">

<form class="" id="" name="" method="post" action="">

<div class="row">

<div class="form-group col-6">

<label>First Name</label>

<input type="text" name="fname" class="form-control" placeholder="first Name"


autocomplete="off" pattern="[a-z,A-Z]*" required>

</div>

<div class="form-group col-6">

<label>Last Name</label>

<input type="text" name="lname" class="form-control" placeholder="second Name"


autocomplete="off" pattern="[a-z,A-Z]*" required><br>

</div>
</div>

<div class="row">

<div class="form-group col-6">

<label>Mobile</label>

<input type="tel" name="number" class="form-control" placeholder="number"


autocomplete="off" pattern="[0-9]{10}" required>

</div>

<div class="form-group col-6">

<label>Email</label>

<input type="email" name="email" class="form-control"


placeholder="[email protected]" autocomplete="off" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-
z]{2,}$" required><br>

</div>

</div>

<div class="row">

<div class="form-group col-6">

<label>DEPARTURE DATE</label>

<input type="date" name="datef" class="form-control" required>

</div>

</div>

<div class="row">

<div class="form-group col-6">

<label>DEPARTURE TIME</label>

<input type="time" name="timef" class="form-control" required>

</div>

<div class="row">

<div class="form-group col-6">

<label>DROP LOCATION</label><br>

<textarea rows="7" cols="69" name="addrs" tabindex="3" wrap="on"


required></textarea>

</div>

</div>
<div class="row">

<div class="form-group col-6">

<label>VECHICLE TYPE</label><br>

<select name ="vechicle type:" size="1" required>

<option value="ciaz">CIAZ</option>

</select><br><br>

</div>

<div class="form-group col-6">

<label>JOURNEY TYPE:</label><br>

<input type="radio" id="one" name="member" value="m" checked required>

<label>ONE</label>

</div>

</div>

<div class="row">

<div class="form-group col-6">

<button class="subt" type="submit" formaction="booked.html">Submit</button>

<button class="rst">Reset</button>

</div>

</div>

</form>

</div>

</div>

</body>

</html>

-----CSS----

---- newform.css-----

*{

margin:0;

padding: 0;

box-sizing: border-box;
font-family: 'Poppins', sans-serif;

section{

width: 100;

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

body{

background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.4)),url(781965.jpg);

background-attachment: fixed;

background-size: cover;

.myform{

background: white;

width: 100%;

height: 100%;

padding: 25px 25px 25px 25px;

border-radius: 10px;

margin: auto;

button.subt{

margin-right: 3%;

background: #f7941d;

button.rst {

background: #000;

color: #fff;

}
OUTPUT:

RESULT:

Implementation of design an attractive web page for cab booking using stylesheet has been
executed successfully

You might also like