-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
441 lines (439 loc) · 20.4 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
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
<!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="A functional strength facility in the Scottish borders (Peebles)" />
<!-- ****** favicons ****** -->
<link rel="shortcut icon" href="./favicon/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="./favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="./favicon/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="./favicon/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="./favicon/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="./favicon/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16.png">
<link rel="apple-touch-icon" href="./favicon/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="./favicon/faviconfavicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="./favicon/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="./favicon/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="./favicon/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="./favicon/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="./favicon/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="./favicon/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/favicon-180.png">
<meta name="msapplication-Tilemodal_color" content="#FFFFFF">
<meta name="msapplication-TileImage" content="./favicon/favicon-144.png">
<meta name="msapplication-config" content="./favicon/browserconfig.xml">
<!-- ****** favicons ****** -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./styles/styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<title>Omni Gym | Scottish Borders</title>
</head>
<body>
<main>
<!-- ! HEADER -->
<header class="header">
<div class="nav_wrapper">
<div class="nav_container">
<nav class="navbar">
<h1 id="navbar_logo">OMNI GYM</h1>
<div class="menu_toggle" id="mobile_menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="nav_menu">
<li><a data-link="section--1" href="#" class="nav_links">About</a></li>
<li><a data-link="section--3" href="#" class="nav_links">Membership</a></li>
<li><a data-link="section--4" href="#" class="nav_links">Contact</a></li>
<li><a href="#" class="nav_links nav_links_btn">Sign Up</a></li>
</ul>
</nav>
</div>
</div>
<div class="hero_container">
<div class="hero_content">
<h1>
Welcome to
<span class="highlight">Omni</span>
<span class="highlight">Gym</span>
</h1>
<p>An inclusive gym in the Scottish borders</p>
<button class="hero_btn" aria-label="Scroll down">Learn more ↓</button>
</div>
<div class="hero_img_container">
<img id="hero_img" src="./images/logo.png" alt="Omni Gym Logo">
</div>
</div>
</header>
<!-- ! ABOUT -->
<section class="section" id="section--1">
<div class="section_header__container">
<div class="section_content">
<h3>About</h3>
<h2>Everything you need in a gym and more</h2>
</div>
</div>
<div class="about_container">
<div class="about_grid">
<div class="about_contents">
<h3>Omni Gym</h3>
<p>A functional strength facility open 7 days a week 18 hours a day between 6am - 12am. Members are given
their own personal key to access the gym during hours of operation.
8 members per hour booking time slots using the
<a href="https://www.gymsync.co.uk/" target="_blank" rel="noopener noreferrer">Gym Sync</a> app.
</p>
</div>
<div>
<img
src="./images/low_res_omni_gym.png"
alt="Omni gym mural on dark wall"
data-src="./images/omni_gym.jpg"
class="lazy_img"
>
</div>
</div>
<div class="about_grid">
<div class="about_col_switch">
<img
src="./images/low_res_pt_legpress.png"
alt="personal trainer assisting client working out"
data-src="./images/pt_legpress.jpg"
class="lazy_img"
>
</div>
<div class="about_contents">
<h3>One on One Personal Training</h3>
<p>Flexible personal training packages are available ranging from silver to gold plus where you can train
from once a month up to 4 times a month offering something for everyone. These packages also include our
group classes on tuesday and thursday evenings giving our pt clients extra sessions to do during the week.
</p>
</div>
</div>
<div class="about_grid">
<div class="about_contents">
<h3>Flexible Memberships</h3>
<p>Our members only gym offers a wide range of services including flexible training times which allows Our 4
tiered membership option allows something for everyone with personal training and classes included.
There’s something for everyone, so don’t hesitate to start your fitness journey with us.</p>
</div>
<div>
<img
src="./images/low_res_member.png"
data-src="./images/member.jpg"
class="lazy_img"
alt="person holding membership leaflets"
>
</div>
</div>
</div>
</section>
<!-- ! SERVICES -->
<section class="section" id="section--2">
<div class="section_header__container">
<div class="section_content">
<h3>Services</h3>
<h2>Changing Your Habits for Better Health</h2>
</div>
</div>
<div class="service_wrapper">
<div class="service_container">
<div class="service_content">
<i class="fas fa-user-friends"></i>
<h2>Group Classes</h2>
<p>The energy within a group exercise class is a great motivation for encouraging you to increase your
output and get the most out of the class.</p>
<p><strong>Tuesday: 19:00 - 20:00 Boxing</strong></p>
<p><strong>Thursday: 19:00 - 20:00 & 20:00 - 21:00 Circuits</strong></p>
</div>
<div class="service_content">
<i class="fas fa-dumbbell"></i>
<h2>Resistance</h2>
<p>Resistance training (also called strength training or weight training) is the use of resistance to
muscular contraction to build the strength, anaerobic endurance and size of skeletal muscles.</p>
</div>
<div class="service_content">
<i class="fas fa-running"></i>
<h2>Cardio</h2>
<p>Cardio exercise, which is sometimes referred to as aerobic exercise, is any rhythmic activity that raises
your heart rate into your target heart rate zone. This is the zone where you burn the most fat and
calories.</p>
</div>
<div class="service_content">
<i class="far fa-smile"></i>
<h2>Wellbeing</h2>
<p>Physical activity has a huge potential to enhance our wellbeing. Even a short burst of 10 minutes' brisk
walking increases our mental alertness, energy and positive mood.</p>
</div>
</div>
</section>
<!-- ! MEMBERSHIP -->
<section class="section" id="section--3">
<div class="section_header__container">
<div class="section_content">
<h3>Monthly Memberships</h3>
<h2>Flexible and affordable memberships</h2>
</div>
</div>
<div class="memberships">
<div class="memberships_tab_container">
<button class="btn memberships_tab memberships_tab--1 memberships_tab--active" data-tab="1">
<span>01</span>GOLD +
</button>
<button class="btn memberships_tab memberships_tab--2" data-tab="2">
<span>02</span>GOLD
</button>
<button class="btn memberships_tab memberships_tab--3" data-tab="3">
<span>03</span>SILVER
</button>
<button class="btn memberships_tab memberships_tab--4" data-tab="4">
<span>04</span>BRONZE
</button>
</div>
<div class="memberships_content memberships_content--1 memberships_content--active">
<h5 class="memberships_header">GOLD +</h5>
<div class="memberships_list">
<ul>
<li>£ 110/month.</li>
<li>4 x 1 hour personal training sessions a month.</li>
<li>Unlimited entry into classes.</li>
<li>Monthly gym Membership.</li>
</ul>
</div>
</div>
<div class="memberships_content memberships_content--2">
<h5 class="memberships_header">GOLD</h5>
<div class="memberships_list">
<ul>
<li>£ 70/month.</li>
<li>2 x 1 hour personal training sessions a month.</li>
<li>Unlimited entry into classes.</li>
<li>Monthly gym Membership.</li>
</ul>
</div>
</div>
<div class="memberships_content memberships_content--3">
<h5 class="memberships_header">SILVER</h5>
<div class="memberships_list">
<ul>
<li>£ 50/month.</li>
<li>1 x 1 hour personal training sessions a month.</li>
<li>Unlimited entry into classes.</li>
<li>Monthly gym Membership.</li>
</ul>
</div>
</div>
<div class="memberships_content memberships_content--4">
<h5 class="memberships_header">BRONZE</h5>
<div class="memberships_list">
<ul>
<li>£ 30/month.</li>
<li>Unlimited entry into classes.</li>
<li>Monthly gym Membership.</li>
<li class="bronze_member_empty_li">Join by the 1st of Jan and get two months free !</li>
</ul>
</div>
</div>
<div class="membership_sign_up">
<button class="nav_links_btn">
Sign Up
</button>
</div>
</div>
</section>
<section class="section" id="train--heroic">
<div class="section_header__container">
<div class="section_content">
<h3>Train Heroic</h3>
<h2>Delivering training plans through an immersive training app</h2>
</div>
</div>
<div class="train_heroic_content">
<div class="train_heroic_img">
<a
href="https://www.instagram.com/trainheroic/?fbclid=IwAR0QtMN9I4K9Y_WfY4dAct3H44e5YqhQ3f47-WYtqXkUdVgJEzRedQAQRZc"
target="_blank"
rel="noopener noreferrer">
<img src="./images/train_heroic.png" alt="train heroic app with workout plan">
</a>
</div>
<div class="train_heroic">
<h3>Train Heroic</h3>
<p>For the price of a silver membership we are offering all our Bronze members the opportunity of monthly
online training plans put straight into the app ready for you to collect at the start of the month.</p>
<p>These programs will be available to everyone through the <a href="https://linktr.ee/trainheroic"
target="_blank" rel="noopener noreferrer">train heroic</a> app on a monthly basis. The app gives us
opportunity to program for a much wider range of our membership and help keep everyone progressing. There’s
videos of every exercise as well as the ability log all your training and comments about each session on an
indivisible basis.</p>
</div>
</div>
</section>
<!-- ! FOOTER -->
<footer class="footer section" id="section--4">
<div class="section_footer__container">
<div class="section_content">
<h3>Contact</h3>
<h2>Where to find us</h2>
</div>
</div>
<div id='map'>
<iframe
title="map of omni gym's location"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2251.5157104906843!2d-3.1708541839143773!3d55.64523870775008!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4887ed6a1681af31%3A0x67820f1a74ab7621!2sOmni-fitness!5e0!3m2!1sen!2suk!4v1633187542993!5m2!1sen!2suk"
width="500"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
<div class="footer_wrapper">
<div class="footer_container">
<div class="item_1 item">
<div>
<h3>Location</h3>
</div>
<span>Unit 5 Elm Ct,</span>
<span>Cavalry Park,</span>
<span>Peebles</span>
<span>EH45 9BU</span>
</div>
<div class="item_2 item">
<div>
<h3>Directions</h3>
</div>
<span>Google maps</span>
<span>code: JRWJ+3G</span>
<span>Peebles</span>
</div>
</div>
<div>
<h3>Hours of Operation</h3>
</div>
<span>7 days a week</span>
<span>06:00 - 00:00</span>
<div>
<div>
<h3>Contact Us</h3>
</div>
<a href="mailto:[email protected]">[email protected]</a>
<div>
<h3>Get Social</h3>
</div>
<div>
<a href="https://www.facebook.com/OmniGym1/" target="_blank" aria-label="Facebook"
rel="noopener noreferrer">
<i class="fab fa-facebook-square"></i>
</a>
<a href="https://www.instagram.com/omni_gym/?hl=en" target="_blank" aria-label="Instagram"
rel="noopener noreferrer">
<i class="fab fa-instagram-square"></i>
</a>
</div>
<div>
<p>We'd love to see you enjoying the gym! Share your images on social media using the hashtag #omnigym.</p>
</div>
</div>
<div class="cheveron_up">
<button class="footer_btn" aria-label="back to top">
<i class="fas fa-chevron-up"></i>
</button>
</div>
</footer>
</main>
<!-- ! GALLERY -->
<div class="gallery_overlay">
<span class="close_btn_gallery">×</span>
<div class='gallery_container'>
<div><img src='./images/gallery/gym_floor_1.jpg' alt="Gym floor with cardio equipment and white omni gym mural on wall" /></div>
<div><img src='./images/gallery/gym_floor_2.jpg' alt="Gym floor with punching bag, barbells and pulldown cable machine" /></div>
<div><img src='./images/gallery/gym_floor_3.jpg' alt="white omni gym mural on wall" /></div>
<div><img src='./images/gallery/gym_floor_4.jpg' alt="Gym floor with omni gym mural on the wall" /></div>
<div><img src='./images/gallery/gym_floor_5.jpg' alt="Gym floor with dumbbell's and benches" /></div>
<div><img src='./images/gallery/gym_floor_6.jpg' alt="Squat racks and free weights" /></div>
<div><img src='./images/gallery/gym_floor_7.jpg' alt="Squat racks and free weights" /></div>
<div><img src='./images/gallery/gym_floor_8.jpg' alt="Squat racks and free weights" /></div>
<div><img src='./images/gallery/gym_floor_9.jpg' alt="Soft plyo box" /></div>
<div><img src='./images/gallery/gym_floor_10.jpg' alt="Hex bar with omni gym logo underneath" /></div>
<div><img src='./images/gallery/gym_floor_11.jpg' alt="Personal trainer assisting with bench press" /></div>
<div><img src='./images/gallery/gym_floor_12.jpg' alt="Personal trainer assisting with lunges" /></div>
<div><img src='./images/gallery/gym_floor_13.jpg' alt="Group working doing planks" /></div>
<div><img src='./images/gallery/gym_floor_14.jpg' alt="Omni gym mural on wall and mirror" /></div>
<div><img src='./images/gallery/gym_floor_15.jpg' alt="Omni gym leaflets with social media availability" /></div>
<div><img src='./images/gallery/gym_floor_16.jpg' alt="Omni leaflets showing membership tiers and contact information" /></div>
<div><img src='./images/gallery/gym_floor_17.jpg' alt="Omni gym water bottles" /></div>
<div><img src='./images/gallery/gym_floor_18.jpg' alt="Punching bag hanging from wall frame" /></div>
<div><img src='./images/gallery/gym_floor_19.jpg' alt="SkiErg machine and barbells on wall mount" /></div>
<div><img src='./images/gallery/gym_floor_20.jpg' alt="Close up 5kg wight on barbell" /></div>
<div><img src='./images/gallery/gym_floor_21.jpg' alt="Close up on kettle bells" /></div>
<div><img src='./images/gallery/gym_floor_22.jpg' alt="Close up on Giant mounted bike logo" /></div>
<div><img src='./images/gallery/gym_floor_23.jpeg' alt="Assault Cardio Bike" /></div>
<div><img src='./images/gallery/gym_floor_24.jpeg' alt="Weight lifting bench" /></div>
<div><img src='./images/gallery/gym_floor_25.jpeg' alt="Group class session" /></div>
<div><img src='./images/gallery/gym_floor_26.jpeg' alt="olympic barbel weights on wall mount" /></div>
<div><img src='./images/gallery/gym_floor_27.jpeg' alt="leg press and squat rack with free weights" /></div>
<div><img src='./images/gallery/gym_floor_28.jpeg' alt="dumbbells mounted on rack" /></div>
</div>
</div>
<!-- ! MODAL -->
<div class="modal" id="email_modal">
<div class="modal_content">
<span class="close_btn">×</span>
<div class="modal-header">
<p>Fill in your details below and we’ll be in touch.</p>
<p>
If you have any questions regarding the gym, contact us on any social media platforms or
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<form name="contact_form" action="https://formspree.io/f/xbjqvypn" method="POST">
<div class="form_content">
<div class="form_control">
<label for="name">Full Name*</label>
<input name="name" id="name" placeholder="First and Last Name" required/>
<div class="error hide"><strong>required</strong></div>
</div>
<div class="form_control">
<label for="email">Email*</label>
<input name="email" id="email" placeholder="e.g. [email protected]" />
<div class="error hide"><strong>required</strong></div>
</div>
<div class="form_control">
<label for="phone">Phone Number*</label>
<input name="phone" id="phone" placeholder="+447711..." required></input>
<div class="error hide"><strong>required</strong></div>
</div>
<div class="form_control">
<label for="address">Address</label>
<input name="address" id="address" placeholder="Unit 5 Elm Ct, Cavalry Park"></input>
</div>
<div class="form_control">
<label for="town">Town</label>
<input name="town" id="town" placeholder="Peebles"></input>
</div>
<div class="form_control">
<label for="post_code">Post Code*</label>
<input name="post_code" id="post_code" placeholder="EH45 9BU" required></input>
<div class="error hide"><strong>Post Code is required</strong></div>
</div>
</div>
<div class="form_btn_container">
<p id="my_form--status"></p>
<button type="submit">Send</button>
</div>
</form>
<div class="modal_footer">
<span class="modal_social">
On social media? Follow us on
<a href="https://www.facebook.com/OmniGym1/" target="_blank" rel="noopener noreferrer">Facebook</a>
&
<a href="https://www.instagram.com/omni_gym/?hl=en" target="_blank" rel="noopener noreferrer">Instagram</a>!
</span>
</div>
<script src="script.js"></script>
</body>
</html>