-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
266 lines (253 loc) · 13.8 KB
/
index.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
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
<!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. | Home</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 class="home">
<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 nav__item--active"><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"><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>
<!-- Hero section -->
<section class="hero">
<div class="inner">
<!-- Left half of hero section. Contains headline, subheader, CTA and trustpilot review -->
<div class="hero__left">
<h1>We have a space for <span class="h1--underline">everyone</span></h1>
<p>The most welcoming co-working venue in Sussex. With modern facilities and a cafe on-site.</p>
<div class="hero__cta">
<a class="button" href="contact.html">Book a session</a>
<a class="text--sm text--bold" href="pricing.html">Our pricing <i class="ph-arrow-right"></i></a>
</div>
<div class="trustpilot">
<a class="text--sm" href="#">
Trustpilot<br>
<i class="ph-star-fill"></i><i class="ph-star-fill"></i><i class="ph-star-fill"></i><i
class="ph-star-fill"></i><i class="ph-star-fill"></i><br>
Rated excellent from over 5.3k reviews
</a>
</div>
</div>
<!-- Right half of hero section. Contains main image and small testimonial -->
<div class="hero__right">
<img class="img--xlg" width="620" height="465" src="assets/images/hero__main.png"
alt="Woman leaning against a shelf, looking to the left and smiling broadly">
<blockquote>
<img class="avatar" width="64" height="64" src="assets/images/testimonial__avatar.png"
alt="Avatar of a man called Marvin Root">
<p>"The Happy Space Co. has completely surpassed my expectations! You rock!"<br>
<cite>Marvin Root - Founder of Biomedia</cite>
</p>
</blockquote>
</div>
</div>
</section>
<!-- Features/perks section -->
<section class="features">
<div class="inner">
<!-- Divider div -->
<div class="break">
<ul class="perks">
<!-- Feature 1 - contains illustration, header and subheader -->
<li class="perks__item">
<figure>
<img width="288" height="244" src="assets/images/perk__one.svg"
alt="Line drawing of a man sitting at a desk">
<figcaption>
<h2 class="h3">Private space</h2>
<h3 class="subheader">Benefit from private offices, beautifully furnished.</h3>
</figcaption>
</figure>
</li>
<!-- Feature 2 - contains illustration, header and subheader -->
<li class="perks__item">
<figure>
<img width="288" height="244" src="assets/images/perk__two.svg"
alt="Line drawing of a woman sitting at a desk, working on a computer">
<figcaption>
<h2 class="h3">Open space</h2>
<h3 class="subheader">For collaborating or working alongside others.</h3>
</figcaption>
</figure>
</li>
<!-- Feature 3 - contains illustration, header and subheader -->
<li class="perks__item">
<figure>
<img width="288" height="244" src="assets/images/perk__three.svg"
alt="Line drawing of two people sitting at a table solving a puzzle">
<figcaption>
<h2 class="h3">Social space</h2>
<h3 class="subheader">Common areas to take a break, refuel and refresh.</h3>
</figcaption>
</figure>
</li>
<!-- Feature 4 - contains illustration, header and subheader -->
<li class="perks__item">
<figure>
<img width="288" height="244" src="assets/images/perk__four.svg"
alt="Line drawing of a man holding a globe">
<figcaption>
<h2 class="h3">Open <span class="text--number">24/7</span></h2>
<h3 class="subheader">All paying members have access at any time.</h3>
</figcaption>
</figure>
</li>
</ul>
</div>
<!-- close divider div -->
</div>
</section>
<!-- Testimonial section -->
<div class="testimonials">
<div class="inner">
<!-- Testimonial 1 with left aligned image -->
<blockquote>
<img class="img--lg" width="510" height="383" src="assets/images/testimonial__one.png"
alt="A woman smiling while working on a laptop">
<p>"I can honestly say that there is not one company that I've ever worked with that has better service
than The Happy Space Co.!"<br>
<cite>Sophie Wilson - COO at Innovant</cite>
</p>
</blockquote>
<!-- Testimonial 2 with right aligned image -->
<blockquote>
<img class="img--lg" width="510" height="383" src="assets/images/testimonial__two.png"
alt="A man with a mobile against his ear, sitting in front of a laptop">
<p>"Huge thanks to The Happy Space Co.! Your co-working space is amazing and your service is
wonderful."<br>
<cite>Christophe Harris - Art Director at Creative Loom</cite>
</p>
</blockquote>
</div>
</div>
<!-- FAQ section -->
<section class="faq">
<div class="inner">
<div class="faq__title">
<div class="break">
<h2 class="title">Questions? Answered!</h2>
</div>
<h3 class="subheader">FAQ</h3>
</div>
<div class="faq__list">
<!-- FAQ question 1 -->
<details class="faq__item">
<summary class="text--bold">What facilities do you have?</summary>
<p>We have everything you need for a modern co-working experience, including high-speed internet and
gorgeous, intentional workspaces. We have common areas like our kitchenettes and sofas. And
there's a cafe on-site with the best iced coffee in town!</p>
<p>If you have a specific request, do <a href="contact.html">get in touch</a> and let us know.</p>
</details>
<!-- FAQ question 2 -->
<details class="faq__item">
<summary class="text--bold">What workspaces are available?</summary>
<p>We have two open working spaces, where you can pick a desk for an hour or two, or reserve a
space for days, weeks or months at a time. These areas are great for working alongside others,
whether strangers or not.</p>
<p>There are private offices of different sizes. Either work solo or as part of a small team with
extra space and desks. These offices have large screens for video calls.</p>
<p>Lastly, there are our larger offices. These can be used for larger groups or teams, and have
multiple wall-mounted screens for video calls or presentations, as well as tea/coffee
facilities.</p>
<p>All of our spaces are flexible - <a href="contact.html">get in touch</a> if you have any questions!</p>
</details>
<!-- FAQ question 3 -->
<details class="faq__item">
<summary class="text--bold">What are your opening times?</summary>
<p>Our standard opening times are 8am to 6pm, Monday to Friday.</p>
<p>However, if you are a member (have a long-term space), we will give you you're own entry code for
24/7 access.</p>
<p>See the <a href="pricing.html">pricing page</a> for more information.</p>
</details>
<!-- FAQ question 4 -->
<details class="faq__item">
<summary class="text--bold">Do you run networking or social events?</summary>
<p>Not yet! We will be running our own events soon. Keep an eye on our website for details.</p>
<p>However, we're more than happy to allow local businesses or members to use our spaces for
business events.</p>
</details>
<!-- FAQ question 5 -->
<details class="faq__item">
<summary class="text--bold">What are the rules around visitors?</summary>
<p>For any visitors to our co-working spaces, please book a meeting room.</p>
<p>Alternatively, don't forget that we do have the cafe on-site which can be used for visitors too! However, this
is a public business with customers from outside of our co-working space, so bear in mind that
it may be busy at times.</p>
</details>
</div>
</div>
</section>
<!-- Call to action section -->
<section class="call-to-action">
<div class="inner">
<h3 class="title">Claim your <span class="h1--underline">happy</span> space<br>
<span class="subheader">Your new co-working space is a click away!</span></h3>
<a class="button" href="contact.html">Book a session</a>
</div>
</section>
<!-- Main footer -->
<footer>
<div class="inner">
<!-- Footer navigation -->
<ul class="footer__nav">
<li><a href="index.html">Home</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- Address details -->
<address>
<span class="text--bold">The Happy Space Co.</span><br>
Hyde Gardens<br>
Eastbourne<br>
BN21 4PN<br>
</address>
<div class="social">
<!-- Contact details (phone and email) -->
<address class="social__contact">
<a class="text--phone" href="tel:+441323987654">01323 987 654</a><br>
<a href="mailto:[email protected]">[email protected]</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>
<!-- Copyright -->
<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>