-
Notifications
You must be signed in to change notification settings - Fork 1
/
booking-page.html
87 lines (69 loc) · 3.74 KB
/
booking-page.html
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
<!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">
<title>Safari Retreat</title>
<!--meta tags for search engines results-->
<meta name="description" content="Safari Retreat, Safari, Retreat, Resort in Africa, Safari in Africa" />
<meta name="keywords" content="safari, resort, retreat, africa, savannah, adventures, relax, food, animals" />
<!-- link to favicon.io -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon.ico/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon.ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon.ico/favicon-16x16.png">
<link rel="manifest" href="assets/favicon.ico/site.webmanifest">
<!-- link to css file -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- link to kit from Font Awesome -->
<script src="https://kit.fontawesome.com/114b037aa4.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- header -->
<header id="header">
<h1 id="header-text"><a href="index.html">safari retreat</a></h1>
<!--makes the navmenu toggle-->
<input type="checkbox" id="checkbox-navmenu" name="checkbox-navmenu">
<!--bars icon for the checkbox-->
<label for="checkbox-navmenu" id="label-checkbox"><i class="fa-solid fa-bars" style="color:white;"></i></label>
<nav class="hidden-navmenu">
<ul id="nav-menu">
<li><a href="index.html">Home</a></li>
<li><a href="safari-gallery.html">Safari gallery</a></li>
<li><a href="booking-page.html" class="active">Booking page</a></li>
<li><a href="contact-us.html">Contact us</a></li>
</ul>
</nav>
</header>
<!-- main content -->
<!-- booking section -->
<section id="bookingpage">
<div id="bookingpage-bg">
<h3>book your stay here</h3>
<div id="bookingpage-text-and-form-768px">
<p> Remember that in order to book a safari tour you need to speak to the reception at the day of your arrival.
If you only want to book the safari and no room at the resort, contact us and we will help you with your booking.</p>
<form action="https://kimskogfelter.github.io/Safari-Retreat/thankyou-booking-page.html" method="get">
<label for="firstname"><strong>First Name:</strong></label>
<input type="text" name="firstname" id="firstname" required>
<br>
<label for="lastname"> <strong>Last Name:</strong></label>
<input type="text" name="lastname" id="lastname" required>
<br>
<label for="emailaddress"><strong>Email Address:</strong></label>
<input type="email" name="emailaddress" id="emailaddress" required>
<br>
<label for="arrival-date"><strong>Day of arrival:</strong></label>
<input type="date" name="arrival-date" id="arrival-date" required>
<br>
<label for="return-home"><strong>Return home:</strong></label>
<input type="date" name="return-home" id="return-home" required>
<br>
<button type="submit" value="submit">Reserve</button>
<br>
</form>
</div>
</div>
</section>
</body>
</html>