Scribd
Upload
31 views23 pages

Day-12, Project-3 Momondo Bootstrap, Part-4

The document is an HTML template for a travel booking website featuring a navigation bar, a search form for flights, hotels, and cars, and a fun section showcasing statistics. It includes Bootstrap and Font Awesome for styling and icons. The layout is designed to be responsive and user-friendly, allowing users to search for travel options easily.

Uploaded by

Diya Solanki
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
31 views23 pages

Day-12, Project-3 Momondo Bootstrap, Part-4

The document is an HTML template for a travel booking website featuring a navigation bar, a search form for flights, hotels, and cars, and a fun section showcasing statistics. It includes Bootstrap and Font Awesome for styling and icons. The layout is designed to be responsive and user-friendly, allowing users to search for travel options easily.

Uploaded by

Diya Solanki
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/ 23

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/c
ss/bootstrap.min.css
">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome
/6.6.0/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
<!-- header section start -->
<header>
<nav class="navbar navbar-expand-lg ">
<div class="container-lg">
<a class="navbar-brand"
href="index.html">
<img src="./assets/img/momondo
logo.png" height="30px" alt="">
</a>
<button class="navbar-toggler bg-white"
type="button" data-bs-toggle="collapse"
data-bs-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 mx-auto mb-2
mb-lg-0 nav-underline">
<li class="nav-item ">
<a class="nav-link "
id="home" href="javascript:void()">Home</a>
</li>
<li class="nav-item">
<a class="nav-link "
href="javascript:void()">Car</a>
</li>
<li class="nav-item">
<a class="nav-link "
href="javascript:void()">Flight </a>
</li>
<li class="nav-item">
<a class="nav-link "
href="javascript:void()">Car</a>
</li>
<li class="nav-item">
<a class="nav-link "
href="javascript:void()">Contact
</a>
</li>

</ul>
<form class="d-lg-flex"
role="search">
<ul class="nav">
<li class="nav-item
dropdown">
<a href="#"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown">
<img
src="./assets/img/cheap2.png" class="me-1 mb-1" alt="">
English
</a>
<div
class="dropdown-menu">
<a
href="javascript:void()" class="dropdown-item">
<img
src="./assets/img/cheap1.png" class="me-1 mb-1" alt="">
Hindi
</a>
<a
href="javascript:void()" class="dropdown-item">
<img
src="./assets/img/cheap1.png" class="me-1 mb-1" alt="">
Hindi
</a>
</div>
</li>
</ul>
<button class="btn fw-semibold"
type="submit">Log In</button>
</form>
</div>
</div>
</nav>
</header>
<!-- header section end -->
<!-- banner section start -->
<main>
<div class="container-lg px-5">
<div class="row ">
<div class="col py-5">
<h1>"The best place to find <br> the
cheapest airfarse"</h1>
<h3 class="fw-bold mt-4">- every
single time</h3>
</div>
</div>
<div class="row bg-purple mt-lg-5 mb-2 px-2
text-white pb-2">
<ul class="nav nav-pills mb-3"
id="pills-tab" role="tablist">
<li class="nav-item"
role="presentation">
<button class="nav-link active"
id="pills-home-tab" data-bs-toggle="pill"
data-bs-target="#pills-home"
type="button" role="tab" aria-controls="pills-home"
aria-selected="true">
<i class="bi
bi-airplane-engines-fill"></i>
Flights
</button>
</li>
<li class="nav-item"
role="presentation">
<button class="nav-link"
id="pills-profile-tab" data-bs-toggle="pill"

data-bs-target="#pills-profile" type="button" role="tab"


aria-controls="pills-profile"
aria-selected="false">
<i class="bi
bi-building"></i>
Hotels
</button>
</li>
<li class="nav-item"
role="presentation">
<button class="nav-link"
id="pills-contact-tab" data-bs-toggle="pill"

data-bs-target="#pills-contact" type="button" role="tab"


aria-controls="pills-contact"
aria-selected="false">
<i class="bi bi-bicycle"></i>
Cars
</button>
</li>
</ul>
<div class="tab-content"
id="pills-tabContent">
<div class="tab-pane fade show
active" id="pills-home" role="tabpanel"
aria-labelledby="pills-home-tab"
tabindex="0">

<div class="row g-2


align-items-center">
<div class="col-md-3 d-flex
col-5">
<input type="text"
name="location" id="" placeholder="Enter origin city"
class="form-control">

<i class="fa-solid
fa-arrow-right-arrow-left ps-3 pt-3"></i>
</div>
<div class="col-md-3 col-6">
<input type="text"
name="destination" id="" placeholder="Enter destination
city"
class="form-control">
</div>
<div class=" col-md">
<input type="date"
name="date" id="" class="form-control">
</div>
<div class=" col-md">
<input type="date"
name="date" id="" class="form-control">
</div>
<div class="col-md">
<select name="passenger"
id="" class="form-select">
<option
value="passenger">Passenger</option>
</select>
</div>
<div class="col-md my-4 ">
<a
href="javascript:void()"

class="text-decoration-none bg-pink rounded-circle


text-center p-4 text-white">Search</a>
</div>
</div>
<div class="row">
<div class="col-6 col-lg-3">
<div class="dropdown">
<a class=" text-white
fw-semibold dropdown-toggle p-1" type="button"

data-bs-toggle="dropdown" aria-expanded="false">
<i
class="fa-solid fa-ticket"></i>Trip type : Return trip
</button>
<ul
class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Action</a></li>
<li><a
class="dropdown-item" href="#">Another action</a></li>
<li><a
class="dropdown-item" href="#">Something else
here</a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="dropdown">
<a class=" text-white
fw-semibold dropdown-toggle p-1" type="button"

data-bs-toggle="dropdown" aria-expanded="false">
<i
class="fa-solid fa-suitcase-rolling"></i> Ticket class :
Economy
</button>
<ul
class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Action</a></li>
<li><a
class="dropdown-item" href="#">Another action</a></li>
<li><a
class="dropdown-item" href="#">Something else
here</a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="form-check">
<input
class="form-check-input" type="checkbox" value=""
id="flexCheckDefault">
<label
class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="form-check">
<input
class="form-check-input" type="checkbox" value=""
id="flexCheckDefault1">
<label
class="form-check-label" for="flexCheckDefault1">Include
nearby airports

</label>
</div>
</div>
</div>
</div>
<div class="tab-pane fade"
id="pills-profile" role="tabpanel"
aria-labelledby="pills-profile-tab"
tabindex="0">

<div class="row g-2


align-items-center">
<div class="col-md-3 d-flex
col-5">
<input type="text"
name="location" id="" placeholder="Enter origin city"
class="form-control">

<i class="fa-solid
fa-arrow-right-arrow-left ps-3 pt-3"></i>
</div>
<div class="col-md-3 col-6">
<input type="text"
name="destination" id="" placeholder="Enter destination
city"
class="form-control">
</div>
<div class=" col-md">
<input type="date"
name="date" id="" class="form-control">
</div>
<div class=" col-md">
<input type="date"
name="date" id="" class="form-control">
</div>
<div class="col-md">
<select name="passenger"
id="" class="form-select">
<option
value="passenger">Passenger</option>
</select>
</div>
<div class="col-md my-4 ">
<a
href="javascript:void()"
class="text-decoration-none bg-pink rounded-circle
text-center p-4 text-white">Search</a>
</div>
</div>
<div class="row">
<div class="col-6 col-lg-3">
<div class="dropdown">
<a class=" text-white
fw-semibold dropdown-toggle p-1" type="button"

data-bs-toggle="dropdown" aria-expanded="false">
<i
class="fa-solid fa-ticket"></i>Trip type : Return trip
</button>
<ul
class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Action</a></li>
<li><a
class="dropdown-item" href="#">Another action</a></li>
<li><a
class="dropdown-item" href="#">Something else
here</a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="dropdown">
<a class=" text-white
fw-semibold dropdown-toggle p-1" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i
class="fa-solid fa-suitcase-rolling"></i> Ticket class :
Economy
</button>
<ul
class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Action</a></li>
<li><a
class="dropdown-item" href="#">Another action</a></li>
<li><a
class="dropdown-item" href="#">Something else
here</a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="form-check">
<input
class="form-check-input" type="checkbox" value=""
id="flexCheckDefault">
<label
class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="form-check">
<input
class="form-check-input" type="checkbox" value=""
id="flexCheckDefault1">
<label
class="form-check-label" for="flexCheckDefault1">Include
nearby airports

</label>
</div>
</div>
</div>
</div>
<div class="tab-pane fade"
id="pills-contact" role="tabpanel"
aria-labelledby="pills-contact-tab"
tabindex="0">

<div class="row g-2


align-items-center">
<div class="col-md-3 d-flex
col-5">
<input type="text"
name="location" id="" placeholder="Enter origin city"
class="form-control">

<i class="fa-solid
fa-arrow-right-arrow-left ps-3 pt-3"></i>
</div>
<div class="col-lg-2 col-md-3
col-6">
<input type="text"
name="destination" id="" placeholder="Enter destination
city"
class="form-control">
</div>
<div class=" col-md">
<input type="date"
name="date" id="" class="form-control">
</div>
<div class=" col-md">
<input type="date"
name="date" id="" class="form-control">
</div>
<div class="col-md">
<select name="passenger"
id="" class="form-select">
<option
value="passenger">Passenger</option>
</select>
</div>
<div class="col-md my-4 ">
<a
href="javascript:void()"

class="text-decoration-none bg-pink rounded-circle


text-center p-4 text-white">Search</a>
</div>
</div>
<div class="row">
<div class="col-6 col-lg-3">
<div class="dropdown">
<a class=" text-white
fw-semibold dropdown-toggle p-1" type="button"

data-bs-toggle="dropdown" aria-expanded="false">
<i
class="fa-solid fa-ticket"></i>Trip type : Return trip
</button>
<ul
class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Action</a></li>
<li><a
class="dropdown-item" href="#">Another action</a></li>
<li><a
class="dropdown-item" href="#">Something else
here</a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="dropdown">
<a class=" text-white
fw-semibold dropdown-toggle p-1" type="button"

data-bs-toggle="dropdown" aria-expanded="false">
<i
class="fa-solid fa-suitcase-rolling"></i> Ticket class :
Economy
</button>
<ul
class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Action</a></li>
<li><a
class="dropdown-item" href="#">Another action</a></li>
<li><a
class="dropdown-item" href="#">Something else
here</a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="form-check">
<input
class="form-check-input" type="checkbox" value=""
id="flexCheckDefault">
<label
class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="form-check">
<input
class="form-check-input" type="checkbox" value=""
id="flexCheckDefault1">
<label
class="form-check-label" for="flexCheckDefault1">Include
nearby airports

</label>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</main>
<!-- banner section end -->
<!-- fun section start -->
<section id="fun">
<div class="container">
<div class="row py-5 text-center text-white
">
<h2 class="fw-bold mb-5">SOME FUN WE
CONVERED</h2>
<div class="col">
<div class="box">
<i class="fa-solid
fa-person-biking fs-1 mb-3"></i>
<h4 >5678 M </h4>
<h4
class="text-secondary">Cycling </h4>
</div>
</div>
<div class="col">
<div class="box">

<i class="fa-solid fa-location-dot


fs-1 mb-3"></i>
<h4>5678 M </h4>
<h4 class="text-secondary">Cycling
</h4>
</div>
</div>
<div class="col">
<div class="box">
<i class="fa-solid
fa-person-biking fs-1 mb-3"></i>
<h4>5678 M </h4>
<h4
class="text-secondary">Cycling </h4>
</div>
</div>
<div class="col">
<div class="box">

<i class="fa-solid fa-location-dot


fs-1 mb-3"></i>
<h4>5678 M </h4>
<h4 class="text-secondary">Cycling
</h4>
</div>
</div>
<div class="col">
<div class="box">
<i class="fa-solid
fa-person-biking fs-1 mb-3"></i>
<h4>5678 M </h4>
<h4
class="text-secondary">Cycling </h4>
</div>
</div>
<div class="col">
<div class="box">

<i class="fa-solid fa-location-dot


fs-1 mb-3"></i>
<h4>5678 M </h4>
<h4 class="text-secondary">Cycling
</h4>
</div>
</div>
</div>
</div>
</section>
<!-- fun section end -->

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js
/bootstrap.bundle.min.js
"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/
6.6.0/js/all.min.js"></script>
</body>

</html>

* {
padding: 0;
margin: 0px;
box-sizing: border-box;

.bg-purple {
background-color: #5D327A;
}

.bg-pink {
background-color: #FE586F;
}

/* header section start */


header {
background-color: #101C3A;

header #home {
color: #FE586F;
}

header ul li .nav-link {
color: white;
font-weight: 500;
font-size: 18px;
}

header ul li .nav-link:hover {
color: #FE586F;
}
header .btn {
color: #47c907;
}

header .btn:hover {
color: #4ba31f;
}

/* header section end */


/* banner section start */
main {
background: url('../img/background\ heart.jpg')
no-repeat scroll;
background-size: cover;
background-position: center;
height: 470px;
}

main .row h1 {
font-size: 57px;
font-weight: 400;
}

main .row .nav-pills .nav-link {


background-color: #513271;
margin: 0px 5px;
padding: 7px 15px;
color: white;
}

main .row .nav-pills .nav-link.active {


background-color: #e40a27;
border-radius: 0px;
}

/* banner section end */


/* fun section start */
#fun{

background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5
)), url(../img/back.jpg) no-repeat ;
background-size: cover;
height: 400px;
margin-top: 50px;
background-position: center;
}
#fun .row .box{
background:rgba(0, 0, 0,0.5) ;
padding: 20px;
}
/* fun section end */

/* max-width 767px start */


@media screen and (max-width:767px) {
main .row h1{
font-size: 40px;
}
}
/* max-width 767px end */
/* max-width 575px start */
@media screen and (max-width:575px) {
main .row h1{
font-size: 30px;
}
}
/* max-width 575px end */

You might also like