-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbookings.html
122 lines (109 loc) · 4.98 KB
/
bookings.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
<!--Kate Blake-->
<!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" />
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<title>Bookings - Second Hand</title>
<link rel="icon" href="./images/circlelogo80.png" type="image/x-icon" />
<script defer src="./js/bookings.js"></script>
</head>
<body>
<script>
0;
</script>
<header>
<img class="logo" src="./images/circlelogo80.png" alt="Thrift Fest Logo" />
<h1 class="logo-heading" style="color: var(--accentMain)">Second Hand Thrift Fest</h1>
<input type="checkbox" class="nav-toggle" name="nav-toggle" id="nav-toggle" />
<!--This is for the responsive menu-->
<nav>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./events.html">Events</a></li>
<li><a href="./gallery.html">Gallery</a></li>
<li><a href="./bookings.html" class="is-active">Bookings</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<!--This is for the responsive menu-->
<span></span>
</label>
</header>
<div class="bookings-container">
<h1>Bookings</h1>
<p>Fields marked with * are required.</p>
<form id="booking-form" onsubmit="return validateInputs()">
<div>
<label for="FirstName">First Name:*</label>
<input type="text" name="FirstName" id="FirstName" title="Your First Name" placeholder="Jane" required />
</div>
<div>
<label for="Surname">Surname:*</label>
<input type="text" name="Surname" id="Surname" title="Your Surname" placeholder="Doe" required />
</div>
<div>
<label for="Business">Business Name:</label>
<input type="text" name="Business" id="Business" title="The name of your Business" placeholder="Jane's Jewels" />
</div>
<div>
<label for="Email">Email Address:*</label>
<input type="email" name="Email" id="Email" title="Your Email Address" placeholder="janedoe@example.com" required />
<div class="error"></div>
</div>
<div>
<label for="Cellphone">Cellphone Number:*</label>
<input type="tel" name="Cellphone" id="Cellphone" title="Your Cellphone Number" placeholder="012 345 6789" required />
<div class="error"></div>
</div>
<div>
<label for="Alt">Alternative Number:</label>
<input type="tel" name="Alt" id="Alt" title="An alternative Contact number" placeholder="987 654 3210" />
<div class="error"></div>
</div>
<div>
<label for="Stalls">Number of Stalls:*</label>
<input type="number" name="Stalls" id="Stalls" min="1" title="The number of stalls to book. The minimum is 1" placeholder="1" required />
</div>
<div>
<label for="Trestles">Number of Trestles:</label>
<input type="number" name="Trestles" id="Trestles" min="0" title="The number of trestle tables to book. The minimum is 0" placeholder="0" />
</div>
<div>
<label for="Event">Event:*</label>
<select name="Event" id="Event" title="The Event you wish to sell at" required>
<option value="Ubuntu">Novalis</option>
<option value="Observatory">Obs-fficial</option>
<option value="Trenchtown">Trenchtown</option>
<option value="Brass">Brass Bell</option>
<option value="Vegan">Vegan Goods</option>
<option value="Blue">Blue Bird</option>
</select>
</div>
<div class="other-details">
<label for="Other">Any other details:</label>
<textarea name="Other" id="Other" cols="40" rows="5" title="Any other details you would like to send" placeholder="What items you are going to sell, etc."></textarea>
</div>
<div class="form-buttons">
<input type="submit" value="Submit" id="submit" onsubmit="submitSuccess()" />
<input type="reset" value="Reset" id="reset" />
</div>
<div id="submit-message">Details submitted successfully.</div>
</form>
</div>
<footer>
<p>© Designed by Kate Blake, All Rights Reserved</p>
<div class="socials">
<a href="https://www.facebook.com/OfficialSecondHandGroup/" target="_blank" rel="noopener" rel="noreferrer"
><img src="./images/fb250lightgreen.png" height="40px" alt="Facebook Page Link"
/></a>
<a href="https://www.instagram.com/thriftfest/" target="_blank" rel="noopener" rel="noreferrer"><img src="./images/instalightgreen.png" height="40px" alt="Instagram Page Link" /></a>
</div>
<div class="back-to-top"><a href="#top">Back to Top</a></div>
</footer>
</body>
</html>