generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
contact.html
126 lines (126 loc) · 7.9 KB
/
contact.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
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
<!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">
<meta name="description" content="Caribbean holiday planning service">
<meta name="keywords" content="Holiday, vacation, caribbean, travel, adventure">
<link rel="shortcut icon" type="image/x-icon" href="assets/logos/Palmtree.png">
<script src="https://kit.fontawesome.com/f73762c6c0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/style.css">
<title>Travel Caribbean</title>
</head>
<body>
<!-- Header containing website title, nav bar (including hamburger menu for smaller screen sizes) and logo image -->
<header id="sub-page-header">
<!-- Credit to Mark Caron - see readme -->
<nav id="main-menu" class="main-menu" aria-label="Main menu">
<a href="#main-menu-toggle" id="main-menu-close" class="menu-close" aria-label="Close main menu">
<span class="sr-only">Close main menu</span>
<span class="fa fa-close" aria-hidden="true"></span>
</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="islands.html">Islands</a></li>
<li><a href="types.html">Types</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="list-active"><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<a href="#main-menu-toggle" class="backdrop" tabindex="-1" hidden>
</a>
<a href="#main-menu" id="main-menu-toggle" class="menu-toggle" aria-label="Open main menu">
<span class="fa fa-bars" aria-hidden="true"></span>
</a>
<!-- End of credit -->
<span class="logo">Travel Caribbean</span>
<img src="assets/logos/homemade.png" alt="Travel Caribbean Logo" id="logo-homemade">
<nav id="big-screen-nav">
<a href="index.html"><span>Home</span></a>
<a href="islands.html"><span>Islands</span></a>
<a href="types.html"><span>Types</span></a>
<a href="gallery.html"><span>Gallery</span></a>
<a href="contact.html" class="active"><span>Contact Us</span></a>
</nav>
</header>
<!-- Main page area containing brochure mock-up with download link and contact form -->
<section id="contact-page-section">
<div class="contact-brochure-page" id="contact-brochure-top-page">
<br><br><h1>Travel Caribbean</h1>
<img src="assets/backgrounds/index-backgrounds/bvi3.jpg" alt="beachpic" id="contact-brochure-image">
<br><br><br><br><p>Top 5 holidays we think you'll love!</p>
<h2>May 2021</h2>
<a href="assets/brochure.pdf" target="_blank"><div class="styled-button" id="contact-brochure-button">Get your FREE May 2021 brochure here!</div></a>
<div id="contact-brochure-footer">Great deals inside!</div>
</div>
<!-- Cannot use method="POST" however would usually with php code for sending pre-programmed e-mail to customer -->
<form id="signup-form" action="thanks.html">
<h1>Contact us... <i class="fas fa-glass-cheers"></i></h1>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="first_name" class="form-text" required><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="last_name" class="form-text" required><br>
<label for="email">Email Address:</label><br>
<input type="email" id="email" name="email_address" class="form-text" required><br><br>
<h3 class="form-white-text">Budget:</h3>
<label for="gbp-budget">£</label>
<input type="number" id="gbp-budget" name="budget_price" class="form-text">
<label for="eur-budget">or €</label>
<input type="number" id="eur-budget" name="budget_price" class="form-text"><br><br>
<h3 class="form-white-text">Island Group...</h3>
<input type="checkbox" id="lucayan-archipelago" name="lucayan-archipelago">
<label for="lucayan-archipelago" class="form-white-text"><strong>Lucayan Archipelago</strong></label><br>
<input type="checkbox" id="cuba" name="cuba">
<label for="cuba" class="form-white-text"><strong>Cuba</strong></label><br>
<input type="checkbox" id="cayman-islands-jamaica" name="cayman-islands-jamaica">
<label for="cayman-islands-jamaica" class="form-white-text"><strong>Cayman Islands & Jamaica</strong></label><br>
<input type="checkbox" id="hispaniola-puerto-rico" name="hispaniola-puerto-rico">
<label for="hispaniola-puerto-rico" class="form-white-text"><strong>Hispaniola & Puerto Rico</strong></label><br>
<input type="checkbox" id="leeward-antilles" name="leeward-antilles">
<label for="leeward-antilles" class="form-white-text"><strong>Leeward Islands</strong></label><br>
<input type="checkbox" id="windward-islands" name="windward-islands">
<label for="windward-islands" class="form-white-text"><strong>Windward Islands</strong></label><br>
<input type="checkbox" id="trinidad-barbados" name="trinidad-barbados">
<label for="trinidad-barbados" class="form-white-text"><strong>Trinidad and Tobago & Barbados</strong></label><br>
<input type="checkbox" id="abc-islands" name="abc-islands">
<label for="abc-islands" class="form-white-text"><strong>Aruba, Bonaire & Curacao</strong></label><br>
<input type="submit" value="Submit" id="contact-form-button" class="styled-button">
</form>
</section>
<!-- Footer containing social media links and holiday protection agencies -->
<footer>
<ul class="find-us">
<li>Find us on:</li>
<li>
<a href="https://facebook.com" target="_blank" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
</li>
<li>
<a href="https://twitter.com/?lang=en-gb" target="_blank" aria-label="Twitter"><i class="fab fa-twitter-square"></i></a>
</li>
<li>
<a href="https://youtube.com" target="_blank" aria-label="YouTube"><i class="fab fa-youtube-square"></i></a>
</li>
<li>
<a href="https://instagram.com" target="_blank" aria-label="Instagram"><i class="fab fa-instagram-square"></i></a>
</li>
<li>
<a href="https://google.com" target="_blank" aria-label="Google"><i class="fab fa-google"></i></a>
</li>
<li>
<a href="https://tripadvisor.com" target="_blank" aria-label="Trip Advisor"><i class="fab fa-tripadvisor"></i></a>
</li>
</ul>
<br><br>
<img src="assets/logos/abta.png" alt="Logo for abta travel protection" class="protection-logo">
<img src="assets/logos/atol.png" alt="Logo for atol travel protection" class="protection-logo">
<img src="assets/logos/clia.png" alt="Logo for CLIA (cruising) travel protection" class="protection-logo">
<img src="assets/logos/fp.png" alt="Logo for financial protection" class="protection-logo">
<img src="assets/logos/tta.png" alt="Logo for Travel Trust association" class="protection-logo">
<br><br>
Photo credit to ©<a href="https://www.deannacarina.com/" target="_blank">Deanna Carina Sale</a>
<a href="https://www.instagram.com/deannacarina/" target="_blank">Instagram</a>
<a href="https://www.linkedin.com/in/deannacarina/" target="_blank">LinkedIn</a><br><br>
</footer>
</body>
</html>