-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpricing.html
176 lines (165 loc) · 8.87 KB
/
pricing.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
<!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. | Pricing</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 nav__item--active"><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>
<!-- Page title section -->
<section class="hero--simple">
<div class="inner">
<div class="page-title">
<h1>Our <span class="h1--underline">pricing</span></h1>
<p>No contracts - switch it up or cancel at any time!</p>
</div>
</div>
</section>
<!-- Pricing section -->
<section class="pricing">
<div class="pricing-inner">
<!-- Card 1. Contains header, short description, price, call-to-action button and benefits list -->
<div class="price-card">
<div class="price-card__left">
<div class="break">
<h2>Nomadic</h2>
</div>
<p>An open workspace by the hour, half-day or day!<br>
<span class="price-text">From<br><span class="text--price">£3</span><br>per hour</span>
</p>
<a href="contact.html" class="button">Book a session</a>
</div>
<!-- Benefits list -->
<ul class="price-card__list">
<li class="price-card__li"><i class="ph-check"></i> Ergonomic desk and chair</li>
<li class="price-card__li"><i class="ph-check"></i> Unlimited drinks and snacks</li>
<li class="price-card__li"><i class="ph-check"></i> Phone booth</li>
<li class="price-card__li"><i class="ph-check"></i> 1GB fibre internet</li>
<li class="price-card__li"><i class="ph-check"></i> Multifunction printer</li>
<li class="price-card__li"><i class="ph-check"></i> <strong>Access from 8am to 6pm</strong></li>
</ul>
</div>
<!-- Card 2. Contains header, short description, price, call-to-action button and benefits list -->
<div class="price-card">
<div class="price-card__left">
<div class="break">
<h2>Private</h2>
</div>
<p>Your private office in either an open or closed space - your choice!<br>
<span class="price-text">From<br><span class="text--price">£279</span><br>per month</span>
</p>
<a href="contact.html" class="button">Book a session</a>
</div>
<!-- Benefits list -->
<ul class="price-card__list">
<li class="price-card__li"><i class="ph-check"></i> Ergonomic desk and chair</li>
<li class="price-card__li"><i class="ph-check"></i> Unlimited drinks and snacks</li>
<li class="price-card__li"><i class="ph-check"></i> Phone booth</li>
<li class="price-card__li"><i class="ph-check"></i> 1GB fibre internet</li>
<li class="price-card__li"><i class="ph-check"></i> Multifunction printer</li>
<li class="price-card__li"><i class="ph-check"></i> Locker available</li>
<li class="price-card__li"><i class="ph-check"></i> Meeting room credits</li>
<li class="price-card__li"><i class="ph-check"></i> <strong>24/7 access</strong></li>
</ul>
</div>
<!-- Card 3. Contains header, short description, price, call-to-action button and benefits list -->
<div class="price-card">
<div class="price-card__left">
<div class="break">
<h2>Groups</h2>
</div>
<p>Larger rooms for groups and teams, for meetings or collaboration.<br>
<span class="price-text">From<br><span class="text--price">£549</span><br>per month</span>
</p>
<a href="contact.html" class="button">Book a session</a>
</div>
<!-- Benefits list -->
<ul class="price-card__list">
<li class="price-card__li"><i class="ph-check"></i> Ergonomic desk and chair</li>
<li class="price-card__li"><i class="ph-check"></i> Unlimited drinks and snacks</li>
<li class="price-card__li"><i class="ph-check"></i> Phone booth</li>
<li class="price-card__li"><i class="ph-check"></i> 1GB fibre internet</li>
<li class="price-card__li"><i class="ph-check"></i> Multifunction printer</li>
<li class="price-card__li"><i class="ph-check"></i> Private office with key</li>
<li class="price-card__li"><i class="ph-check"></i> Meeting room credits</li>
<li class="price-card__li"><i class="ph-check"></i> <strong>24/7 access</strong></li>
</ul>
</div>
</div>
</section>
<!-- Call to action section -->
<section class="call-to-action">
<div class="inner">
<h3 class="title">Not sure?</h3>
<p>Fire any questions our way, we'll see what we can do!</p>
<a class="button" href="contact.html">Contact us</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>