-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcontact.html
149 lines (137 loc) · 7.51 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!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">
<meta name="description" content="The Happy Space Co. website for the modern co-working space in Eastbourne">
<meta name="keywords" content="co-working, networking, collaboration, entrepreneur, remote work, startup">
<title>The Happy Space Co. | Contact Us</title>
<link rel="stylesheet" href="assets/css/style.css">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png">
</head>
<body>
<!-- Main header -->
<header>
<div class="inner">
<nav>
<!-- Main navigation -->
<ul class="nav">
<!-- Logo -->
<li id="logo"><a href="index.html"><img class="logo-glyph" width="46" height="46" src="assets/images/logo.svg"
alt="Happy sunshine">The Happy Space Co.</a></li>
<!-- end logo -->
<li class="nav__item"><a href="index.html">Home</a></li>
<li class="nav__item"><a href="pricing.html">Pricing</a></li>
<li class="nav__item"><a href="gallery.html">Gallery</a></li>
<li class="nav__item nav__item--active"><a href="contact.html">Contact</a></li>
<!-- Toggle for mobile menu -->
<li class="toggle"><a aria-label="toggle" href="#"><i class="ph-list"></i></a></li>
</ul>
</nav>
</div>
</header>
<!-- Page title section, including title and subtitle paragraph -->
<section class="hero--simple">
<div class="inner">
<div class="page-title">
<h1><span class="h1--underline">Contact</span> us</h1>
<p>Drop in and say hi, make a booking or send us a message below!</p>
</div>
</div>
</section>
<!-- Contact section -->
<div class="contact">
<div class="inner">
<!-- Contact form -->
<form action="form-submission.html" method="GET" class="contact-form">
<!-- Name field -->
<label for="name">Your name*</label>
<input type="text" id="name" name="name" required class="text-input">
<!-- Email field -->
<label for="email">Your email address*</label>
<input type="email" id="email" name="email_address" required class="text-input">
<!-- Phone number field -->
<label for="number">Your phone number*</label>
<input type="tel" id="number" name="phone_number" required class="text-input">
<!-- Date picker for booking -->
<label for="session-date">Which day would you like to book?</label>
<input type="date" id="session-date" name="session_date" class="text-input">
<!-- Time picker for booking -->
<fieldset class="half-field">
<legend>Choose your start and finish times:</legend>
<div>
<!-- Start time picker, limited to 8am to 5pm -->
<label for="session-time-start">Start</label>
<input type="time" id="session-time-start" name="session_time_start" min="08:00" max="17:00"
class="text-input">
</div>
<div>
<!-- Finish time picker, limited to 9am to 6pm -->
<label for="session-time-end">Finish</label>
<input type="time" id="session-time-end" name="session_time_end" min="09:00" max="18:00"
class="text-input">
</div>
</fieldset>
<!-- Message textarea field -->
<label for="message">Any other questions/details?</label>
<textarea name="message" id="message" cols="30" rows="10" class="textarea"></textarea>
<!-- Radio inputs for contact preference: email vs phone -->
<fieldset class="radio-field">
<legend>How do you prefer to be contacted?</legend>
<label for="contact-pref2">
<input type="radio" id="contact-pref2" name="contact-pref" class="radio-input" value="email"
checked>
<span>Email</span>
</label>
<label for="contact-pref1">
<input type="radio" id="contact-pref1" name="contact-pref" class="radio-input" value="phone">
<span>Phone</span>
</label>
</fieldset>
<!-- Submit button -->
<input type="submit" value="Send" class="button">
</form>
<!-- Map and contact details -->
<div class="contact--right">
<!-- Google map iframe embed -->
<div class="map">
<iframe title="Google map" class="map--google"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2523.3992811018497!2d0.28089891580595994!3d50.76817152952049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47df73fbce4304c1%3A0xbaa944e130ff652a!2sHyde%20Gardens%2C%20Eastbourne%20BN21%204PN!5e0!3m2!1sen!2suk!4v1630165326995!5m2!1sen!2suk"
loading="lazy"></iframe>
</div>
<!-- Contact details that sits below the map -->
<div class="contact-details">
<address>
<span class="text--bold">The Happy Space Co.</span><br>
Hyde Gardens<br>
Eastbourne<br>
BN21 4PN<br>
<a href="mailto:[email protected]">[email protected]</a>
</address>
<div class="social">
<address class="text--phone"><a href="tel:+441323987654">01323 987 654</a></address>
<!-- Social media icons -->
<ul class="social__icons">
<li><a href="https://twitter.com/" target="_blank" rel="noopener" aria-label="Twitter"><i class="ph-twitter-logo ph-xl"></i></a></li>
<li><a href="https://www.instagram.com/" target="_blank" rel="noopener" aria-label="Instagram"><i class="ph-instagram-logo ph-xl"></i></a></li>
<li><a href="https://www.facebook.com/" target="_blank" rel="noopener" aria-label="Facebook"><i class="ph-facebook-logo ph-xl"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Mini footer - only the copyright as the contact details are above -->
<footer class="footer--light">
<div class="copyright text--sm">© 2021 The Happy Space Co. All rights reserved</div>
</footer>
<!-- Phosphor icons - powering the social media and arrow icons -->
<script src="https://unpkg.com/phosphor-icons"></script>
<!-- Mobile navigation script -->
<script src="assets/js/mobile-navigation.js"></script>
</body>
</html>