FlightBooking/index.html at main · elmuby/FlightBooking · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />

    <!-- link external font family -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&family=Roboto+Condensed:wght@300;400;700&display=swap"
      rel="stylesheet"
    />

    <!-- link external icon hosted on a live server -->
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <!-- font awesome cdn -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <!-- link bootstrap css -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    />

    <!-- Link personal css -->
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./heading.css" />
    <link rel="stylesheet" href="./mediaQuery.css" />
  </head>
  <body>
    <!-- The navabar -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img
            src="./images/logo-removebg-preview.png"
            alt="Logo"
            width="100"
            height="100"
            style="padding-left: 50px"
            class="d-inline-block align-text-top imglogo"
          />
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse listnav" id="navbarNav">
          <ul class="nav_links navbar-nav">
            <li class="link nav-item">
              <a class="nav-link active" href="#"
              style="border-bottom: 2px solid rgb(162, 162, 226);"
              >Home</a>
            </li>
            <li class="link nav-item">
              <a class="nav-link" href="./about.html">About</a>
            </li>
            <li class="link nav-item">
              <a class="nav-link" href="#class">Booking</a>
            </li>
            <li class="link nav-item">
              <a class="nav-link" href="./contact.html">Contact</a>
            </li>
            <li class="link nav-item sign_up">
              <a class="nav-link" href="./signup.html">Sign Up</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <header class="section_container header_container">
      <h1 class="section_header">
        Find And Book <br />
        A Great Experience
      </h1>
      <img id="welcomeimg" src="./images/header.jpg" alt="" />
    </header>

    <section class="section_container booking_container">
      <div class="booking_nav">
        <div class="form_group">
          <label for="">Fare:</label>
          <select name="fare" id="tfare">
            <option value="default">Default</option>
            <option value="one_way">One Way</option>
            <option value="return">Return</option>
          </select>
        </div>

        <div class="form_group">
          <label for="">class</label>
          <select name="class" id="class" required>
            <option value="default">Default</option>
            <option value="economy">Economy class</option>
            <option value="business">Business class</option>
            <option value="first_class">First class</option>
          </select>
        </div>

        <div class="form_group">
          <label for="">From:</label>
          <select name="from" id="from">
            <option value="default">Default</option>
            <option value="Lagos">Lagos</option>
            <option value="Abuja">Abuja</option>
            <option value="Kaduna">Kaduna</option>
            <option value="Enugu">Enugu</option>
            <option value="Port">Rivers</option>
            <option value="Kano">Kano</option>
            <option value="Benue">Benue</option>
            <option value="Ondo">Ondo</option>
            <option value="kwara">Kwara</option>
            <option value="Akwa Ibom">Akwa Ibom</option>
            <option value="Ibadan">Ibadan</option>
            <option value="Edo">Edo</option>
          </select>
        </div>

        <div class="form_group">
          <label for="">To:</label>
          <select name="to" id="to">
            <option value="default">Default</option>
            <option value="Paris, France">Paris, France</option>
            <option value="New York, USA">New York, USA</option>
            <option value="Nairobi, Kenya">Nairobi, Kenya</option>
            <option value="Capetown, SouthAfrica">Capetown, SouthAfrica</option>
            <option value="Lisbon, Portugal">Lisbon, Portugal</option>
            <option value="Ontario, Canada">Ontario, Canada</option>
            <option value="London, United Kingdom">London, United Kingdom</option>
            <option value="Beijing, China">Beijing, China</option>
            <option value="Singapore">Singapore, Singapore</option>
            <option value="Berlin, Germany">Berlin, Germany</option>
            <option value="Moscow, Russia">Moscow, Russia</option>
            <option value="Madrid">Madrid, Spain</option>
            <option value="Mexico">Mexico City, Mexico</option>
            <option value="Buenos Aires, Argentina">Buenos Aires, Argentina</option>
            <option value="Rome, Italy">Rome, Italy</option>
          </select>
        </div>
      </div>

      <form id="form">
        <!--Departure  -->
        <div class="form_group">
          <span><i class="ri-calendar-line"></i> </span>
          <div class="input_content">
            <div class="input_group">
              <input type="date" id="depatureDate" required/>
            </div>
            <p>Departure Date</p>
            <div id="dateError"></div>
          </div>
        </div>

        <!-- Return -->
        <div class="form_group" id="return">
          <span><i class="ri-calendar-line"></i> </span>
          <div class="input_content">
            <div class="input_group">
              <input type="date" id="returnDate" required/>
            </div>
            <p>Return Date</p>
            <div id="returnError"></div>
          </div>

        </div>

        <!-- Travellers div -->
        <div class="form_group">
          <span><i class="ri-user-3-line"></i> </span>
          <div class="input_content">
            <div class="input_group">
              <input type="number" id="travellers" required min="1" max="10" />
              <!-- <label for="">Travellers</label> -->
            </div>
            <p>Travellers</p>
            <div id="travellerError"></div>
          </div>
        </div>
        <br>
        <div class="btn-viv">
          <button class="btn" id="search_button">Search</button>
        </div>
      </form>

    </section>

    <section class="fleets_container">
      <h2 class="fleets_header">Safety Tips and Guidelines</h2>
      <div class="safety-items">
        <p>
          Here are some tips to follow to keep you and your fellow travelers safe
          when you fly. Most importantly, pay attention to your flight and cabin
          crews. They are there to keep you as safe as possible.
        </p>
        <ul>
          <li>
            Pay attention to the flight attendant safety briefing at the beginning
          of your flight and read the safety briefing card.
        </li>
        <li>
          Buckle up. Keep you and your family safe by wearing a seat belt at all
          times while seated
        </li>
        <li>
          Use an approved child safety seat or device if your child weighs less
          than 40 pounds.
        </li>
        <li>
          Prevent in-flight injuries by following your airline's carry-on
          restrictions.
        </li>
        <li>
          Check your airline's Portable Electronic Device (PED) policy.
          <a href="">Learn more on our PED website.</a>
        </li>
      </ul>
    </div>
    </section>

    <div class="fleets_container">
      <h2 class="fleets_header">Airplane Fleets</h2>
      <div class="fleets">
        <div class="fleets_content">
          <img src="./images/fleets/boeing-747-400.jpg" alt="airplane" />
          <h4>Boeing 747-400</h4>
          <p>
            This model is capable of seating a maximum of 568 passengers in a
            two-class configuration or 660 passengers in a single-class
            configuration.
          </p>
        </div>
        <div class="fleets_content">
          <img src="./images/fleets/airbus.jpg" alt="airplane" />
          <h4>Airbus a380</h4>
          <p>
            The full-length double-deck aircraft has a typical seating for 525
            passengers, with a maximum certified capacity for 853 passengers.
          </p>
        </div>

        <div class="fleets_content">
          <img src="./images/fleets/private jet.jpg" alt="airplane" />
          <h4>Business Jet</h4>
          <p>
            Similar to commercial planes, large private jets can hold more
            people and typically seat up to 20 passengers. Mid-size charter
            flights can seat between 8 and 12 passengers and small flights seat
            closer to 6.
          </p>
        </div>

        <div class="fleets_content">
          <img src="./images/fleets/cargo.jpg" alt="airplane" />
          <h4>Boeing Dreamlifter</h4>
          <p>
            The 747 LCF main cargo compartment has a volume of 65,000 cubic feet
            (1,840 m3) and the maximum payload capacity is 250,000 pounds
            (113,400 kg).
          </p>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer class="text-center text-white" style="background-color: #3f51b5">
      <!-- Grid container -->
      <div class="container">
        <!-- Section: Links -->
        <section class="mt-5">
          <!-- Grid row-->
          <div class="row text-center d-flex justify-content-center pt-5">
            <!-- Grid column -->
            <div class="col-md-2">
              <h6 class="text-uppercase font-weight-bold">
                <a href="#!" class="text-white">About us</a>
              </h6>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-2">
              <h6 class="text-uppercase font-weight-bold">
                <a href="#!" class="text-white">Travel Guides</a>
              </h6>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <!-- <div class="col-md-2">
              <h6 class="text-uppercase font-weight-bold">
                <a href="#!" class="text-white">Customer Support</a>
              </h6>
            </div> -->
            <!-- Grid column -->

            <!-- Grid column -->
            <!-- <div class="col-md-2">
              <h6 class="text-uppercase font-weight-bold">
                <a href="#!" class="text-white">Help</a>
              </h6>
            </div> -->
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-2">
              <h6 class="text-uppercase font-weight-bold">
                <a href="#!" class="text-white">Contact</a>
              </h6>
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grid row-->
        </section>
        <!-- Section: Links -->

        <hr class="my-5" />

        <!-- Section: Text -->
        <section class="mb-5">
          <div class="row d-flex justify-content-center">
            <div class="col-lg-8">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
                distinctio earum repellat quaerat voluptatibus placeat nam,
                commodi optio pariatur est quia magnam eum harum corrupti dicta,
                aliquam sequi voluptate quas.
              </p>
            </div>
          </div>
        </section>
        <!-- Section: Text -->

        <!-- Section: Social -->
        <section class="text-center mb-5">
          <a href="https://www.facebook.com/" class="text-white me-4" target="_blank">
            <i class="fa-2xl fab fa-facebook-f"></i>
          </a>
          <a href="https://www.twitter.com/" class="text-white me-4" target="_blank">
            <i class="fa-2xl fab fa-twitter"></i>
          </a>
          <a href="https://www.google.com/" class="text-white me-4" target="_blank">
            <i class="fa-2xl fab fa-google"></i>
          </a>
          <a href="https://www.instagram.com/" class="text-white me-4" target="_blank">
            <i class="fa-2xl fab fa-instagram"></i>
          </a>
          <a href="https://www.linkedin.com/feed/" class="text-white me-4" target="_blank">
            <i class="fa-2xl fab fa-linkedin"></i>
          </a>
          <a href="https://github.com/" class="text-white me-4" target="_blank">
            <i class="fa-2xl fab fa-github"></i>
          </a>
        </section>
        <!-- Section: Social -->
      </div>
      <!-- Grid container -->

      <!-- Copyright -->
      <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
        © 2023 Copyright:
        <a class="text-white" href=""
          >Lorem Ipsun</a
        >
      </div>
      <!-- Copyright -->
    </footer>
    <!-- Footer -->

    <!-- link bootstrap javascript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./script.js"></script>
  </body>
</html>