-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSchedule.html
483 lines (463 loc) · 33.2 KB
/
Schedule.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
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VIAFit</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.svg">
<script src="https://kit.fontawesome.com/72db12e280.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid p-0 p-md-5">
<!--NAVIGATION BAR (Group Work)-->
<!--The navigation consists of logo, surrounded by an anchor element aligned
to the left on all breakpoints, and an ul element aligned to the right with all the anchors redirecting to specific pages-->
<!--On small screens the navigation items are hidden under burger menu icon, displayed on-click -->
<nav class="navbar navbar-expand-lg navbar-dark blue-bg fixed-top">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" class="img-fluid w-75" alt="lofo of viafit center">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end font-weight-bold h5" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item px-1">
<a class="nav-link text-white text-center" href="index.html">Home</a>
</li>
<li class="nav-item px-1">
<a class="nav-link text-white text-center" href="Classes.html">Classes</a>
</li>
<li class="nav-item px-1">
<a class="nav-link orangeText text-center" href="Schedule.html">Schedule</a>
</li>
<li class="nav-item px-1">
<a class="nav-link text-white text-center" href="Instructors.html">Instructors</a>
</li>
<li class="nav-item px-1">
<a class="nav-link text-white text-center" href="About.html">About Us</a>
</li>
</ul>
</div>
</nav>
<!-- BANNER -->
<div class="jumbotron mt-5" id="scheduleHeader">
<div class="bg-overlay d-flex justify-content-center align-items-center">
<div class="container text-white">
<h1 class="display-4 font-weight-bold text-center"><span class="orangeText">Our</span> Schedule</h1>
</div>
</div>
</div>
<!-- SCHEDULE PAGE made by Maria Asenova -->
<!-- getbootstrap.com and www.w3schools.com have been used as a source of information to code this page -->
<!-- row with inspirational heading displayed on medium breakpoint and above -->
<!-- this is controlled by the property display with value of none and overwritten
to block for medium breakpoint and above-->
<div class="row mx-0 bg-opacity py-4 d-none d-md-block">
<div class="col-12 text-center">
<h3 class="text-white">It's more than a workout - it's an experience</h3>
<p class="text-uppercase font-weight-bold small orangeText mb-0">When you train with us</p>
</div>
</div>
<!-- row with schedule heading for the month and year -->
<div class="row mx-0">
<div class="col-12 text-center blue-bg text-white border-0 py-3 py-md-4">
<p class="m-0 h5">April 2020</p>
</div>
</div>
<!-- *** SCHEDULE *** -->
<!-- row with headings for days of week displayed from medium screen and above -->
<!-- a span element with property display none is used to remove some
letters on medium screen for legibily due to screen size constraints -->
<div class="row mx-0 text-center bg-opacity justify-content-between d-none d-md-flex">
<div class="col-2 py-3 text-white">Mon<span class="d-none d-lg-inline">day</span></div>
<div class="col-2 py-3 text-white">Tue<span class="d-none d-lg-inline">sday</span></div>
<div class="col-2 py-3 text-white">Wed<span class="d-none d-lg-inline">nesday</span></div>
<div class="col-2 py-3 text-white">Thu<span class="d-none d-lg-inline">rsday</span></div>
<div class="col-2 py-3 text-white">Fri<span class="d-none d-lg-inline">day</span></div>
<div class="col-2 py-3 text-white">Sat<span class="d-none d-lg-inline">urday</span>/Sun<span class="d-none d-lg-inline">day</span></div>
</div>
<!-- row for displaying each week of the month, with 6x6 col layout for
small screens and 6 col with 2 col layout for medium screens and above -->
<!-- each col represents a day of the week with info about a class listed with p -->
<!-- display inline on the first p is used to align the date in the top left corner
of the col without taking more space than its content -->
<!-- the last p is not displayed on medium screens and below to make
more space for more important information such as the name of the class and time -->
<div class="row mx-0 justify-content-between bg-gray-light">
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom border-left">
<p class="text-muted d-inline small">6</p>
<p class="text-center mb-0">08:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Zumba</p>
<p class="text-center mb-0 d-none d-lg-block">With Cezary</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">7</p>
<p class="text-center mb-0">06:15</p>
<p class="text-center mb-0 orangeText font-weight-bold">Yoga</p>
<p class="text-center mb-0 d-none d-lg-block">With Maria</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">8</p>
<p class="text-center mb-0">10:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Spinning</p>
<p class="text-center mb-0 d-none d-lg-block">With Ionut</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">9</p>
<p class="text-center mb-0">08:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Crossfit</p>
<p class="text-center mb-0 d-none d-lg-block">With Claudiu</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">10</p>
<p class="text-center mb-0">15:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Postural</p>
<p class="text-center mb-0 d-none d-lg-block">With Cezary</p>
</div>
<div class="col-6 col-md-2 pb-0 pt-0 pt-md-4 border-right border-bottom">
<p class="text-muted d-inline d-md-none small">11/12</p>
<p class="text-center text-muted mb-0">No classes</p>
<p class="text-center text-muted mb-0">available</p>
</div>
</div>
<!-- row -->
<div class="row mx-0 justify-content-between bg-gray-light">
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom border-left">
<p class="text-muted d-inline small">13</p>
<p class="text-center mb-0">09:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Yoga</p>
<p class="text-center mb-0 d-none d-lg-block">With Ionut</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">14</p>
<p class="text-center mb-0">14:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Postural</p>
<p class="text-center mb-0 d-none d-lg-block">With Cezary</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">15</p>
<p class="text-center mb-0">06:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">TRX</p>
<p class="text-center mb-0 d-none d-lg-block">With Claudiu</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">16</p>
<p class="text-center mb-0">10:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Stretching</p>
<p class="text-center mb-0 d-none d-lg-block">With Maria</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">17</p>
<p class="text-center mb-0">15:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Spinning</p>
<p class="text-center mb-0 d-none d-lg-block">With Ionut</p>
</div>
<div class="col-6 col-md-2 pb-0 pt-0 pt-md-4 border-right border-bottom">
<p class="text-muted d-inline d-md-none small">18/19</p>
<p class="text-center text-muted mb-0">No classes</p>
<p class="text-center text-muted mb-0">available</p>
</div>
</div>
<!-- row -->
<div class="row mx-0 justify-content-between bg-gray-light">
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom border-left">
<p class="text-muted d-inline small">20</p>
<p class="text-center mb-0">08:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Stretching</p>
<p class="text-center mb-0 d-none d-lg-block">With Claudiu</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">21</p>
<p class="text-center mb-0">07:15</p>
<p class="text-center mb-0 orangeText font-weight-bold">Yoga</p>
<p class="text-center mb-0 d-none d-lg-block">With Maria</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">22</p>
<p class="text-center mb-0">10:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Spinning</p>
<p class="text-center mb-0 d-none d-lg-block">With Ionut</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">23</p>
<p class="text-center mb-0">08:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Crossfit</p>
<p class="text-center mb-0 d-none d-lg-block">With Claudiu</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">24</p>
<p class="text-center mb-0">15:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Zumba</p>
<p class="text-center mb-0 d-none d-lg-block">With Cezary</p>
</div>
<div class="col-6 col-md-2 pb-0 pt-0 pt-md-4 border-right border-bottom">
<p class="text-muted d-inline d-md-none small">25/26</p>
<p class="text-center text-muted mb-0">No classes</p>
<p class="text-center text-muted mb-0">available</p>
</div>
</div>
<!-- row -->
<div class="row mx-0 justify-content-between bg-gray-light border-left">
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">27</p>
<p class="text-center mb-0">10:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">TRX</p>
<p class="text-center mb-0 d-none d-lg-block">With Claudiu</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">28</p>
<p class="text-center mb-0">06:15</p>
<p class="text-center mb-0 orangeText font-weight-bold">Stretching</p>
<p class="text-center mb-0 d-none d-lg-block">With Maria</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">29</p>
<p class="text-center mb-0">18:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Yoga</p>
<p class="text-center mb-0 d-none d-lg-block">With Ionut</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom">
<p class="text-muted d-inline small">30</p>
<p class="text-center mb-0">08:00</p>
<p class="text-center mb-0 orangeText font-weight-bold">Postural</p>
<p class="text-center mb-0 d-none d-lg-block">With Cezary</p>
</div>
<div class="col-6 col-md-2 pb-3 pb-md-4 pt-0 border-right border-bottom text-muted">
<p class="text-muted d-inline small">1</p>
<p class="text-center mb-0">08:00</p>
<p class="text-center mb-0 font-weight-bold">TRX</p>
<p class="text-center mb-0 d-none d-lg-block">With Claudiu</p>
</div>
<div class="col-6 col-md-2 pb-0 pt-0 pt-md-4 border-right border-bottom">
<p class="text-muted d-inline d-md-none small">2/3</p>
<p class="text-center text-muted mb-0">No classes</p>
<p class="text-center text-muted mb-0">available</p>
</div>
</div>
<!-- end of schedule -->
<!-- *** NEW CUSTOMERS SECTION *** -->
<!-- row with 12 col layout for mobile and medium screens, 6 by 6 col layout for large screens and 5 by 5 col for
extra large screens. The justify-content utility is used to change the alignment of the columns on the different
breakpoints, justify-content-center for small and extra large screens, and justify-content-between for medium and large screens -->
<!-- img element with display none for small and medium screens and display block for large and extra large screens taking 6 col for large and 5 for extra large, img-fluid is used to make the img reponsive -->
<div class="row text-left my-5 blueText justify-content-center justify-content-md-between justify-content-xl-center">
<div class="col-12 col-lg-6 col-xl-5 p-3 text-center text-lg-left">
<h2>Never taken a class before?</h2>
<p class="orangeText text-uppercase font-weight-bold small mb-4">How to choose the right class</p>
<p class="text-muted px-4 px-md-0">A lot of people feel confused when chosing their first class. VIAfit offers many different classes, therefore might be difficult to choose among them. We know how overwhelming this can be but if you make a small research beforehand it can also be easy. We are always happy to help and advice our customers.</p>
</div>
<div class="col-lg-6 col-xl-5 d-flex align-items-center">
<img src="images/trainer.svg" class="img-fluid d-none d-lg-block w-75 mx-auto" alt="personal trainer">
</div>
</div>
<!-- *** STEPS SECTION FOR NEW CUSTOMERS **** -->
<!-- row with 3 columns aligned in the center for medium screen and above -->
<!-- columns stacked on top of each on mobile, each col takes space for 3 col on medium screens and 2 on extra large screens -->
<div class="row justify-content-center">
<div class="col-10 col-md-3 col-xl-2 bg-gray-light py-5 px-4 blueText step-card mr-md-5">
<h2 class="mb-0 text-center">1</h2>
<hr class="d-block mx-auto w-50 bg-secondary mt-2">
<h5 class="text-center my-3">Overview</h5>
<p class="text-center text-muted small">Take a look at the classes offered in the gym, read the descriptions and contact us if you have questions</p>
</div>
<div class="col-10 col-md-3 col-xl-2 bg-gray-light py-5 px-4 blueText step-card mr-md-5">
<h2 class="mb-0 text-center">2</h2>
<hr class="d-block mx-auto w-50 bg-secondary mt-2">
<h5 class="text-center my-3">Feedback</h5>
<p class="text-center text-muted small">Get in touch with an instructor teaching the particular class for further information and guidelince</p>
</div>
<div class="col-10 col-md-3 col-xl-2 bg-gray-light py-5 px-4 blueText step-card">
<h2 class="mb-0 text-center">3</h2>
<hr class="d-block mx-auto w-50 bg-secondary mt-2">
<h5 class="text-center my-3">#</h5>
<p class="text-center text-muted small">Come by at the gym and # for the class at the reception where you can also upgrade your membership</p>
</div>
</div>
<!-- *** CONTACT SECTION *** -->
<!-- row with 12 col layout for small and medium screens, 6 by 6 col layout for large screens and 5 by 5 for extra large.
The justify-content utility is used to change the alignment of the columns on the different breakpoints -->
<!-- col container displayed as flex with align-items-center to aling the img vertically in the center on large screens and above. The img is made resposive with img-fluid, given width of 75%, and displayed as block with margin auto left and right for horizontal alignment -->
<!-- 12 col layout for small and medium, 6 for large (making space for the image to be displayed) and 5 for extra large screens -->
<!-- anchor element styled as button linking to the contact form on the about page. The anchor is displayed as block level element on small screens and as inline element on medium screens and above -->
<div class="row text-left my-5 blueText justify-content-center justify-content-md-between justify-content-xl-center">
<div class="col-lg-6 col-xl-5 d-flex align-items-center">
<img src="images/question.svg" class="img-fluid d-none d-lg-block w-75 mx-auto " alt="personal trainer">
</div>
<div class="col-12 col-lg-6 col-xl-5 p-3 text-center text-lg-left">
<h2>Do you have any questions?</h2>
<p class="orangeText text-uppercase font-weight-bold small mb-4">get in touch with us</p>
<p class="text-muted px-4 px-md-0">We are always happy to hear from our clients. If you have any question or you would like to give us feedback - do not hesitate to contact us. If you have any recommendations regarding classes or the schedule, we are always open for new suggestions and improvements. </p>
<a href="About.html#contact" class="btn btn-orange d-block d-md-inline text-white px-4 py-2 mx-5 mx-md-0">Contact us</a>
</div>
</div>
<!-- *** FAQ SECTION *** -->
<!-- the collapse and card components from
getbootstrap.com are used and modified in this section -->
<!-- row heading of faq -->
<div class="row mt-5 justify-content-center">
<div class="col-12 col-xl-10 blue-bg py-4">
<h2 class="text-center text-white mb-0">FAQ</h2>
</div>
</div>
<!-- row aligning its content in the center with justify utility -->
<!-- 12 column layout on small, medium and large screens, 10 col layout for extra large screens-->
<!-- the accordion class serves as a wrapper, parent container, for the cards with questions -->
<!-- the card comoponent has header with p for question -->
<!-- the paragraph has the role of button, on click the card body is collapsed -->
<!-- the card body is a wrapper for the answer to a question, collapsed when heading is on click -->
<div class="row justify-content-center">
<div class="col-12 col-xl-10 px-0">
<div class="accordion" id="accordionFaq">
<!-- card question one -->
<div class="card border-0">
<div class="card-header cursor-pointer" id="headingOne">
<p class="mb-0 py-2 text-center btn-link blueText font-weight-bold collapsed" role="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Should I do cardio before the Crossfit class as warm up?
</p>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionFaq">
<div class="card-body">
<p class="w-75 mx-auto text-center">Every class starts with a warm up lesson where our instructors show how you are supposed to stretch and warm up before the class starts. If you have any injuries we strongly recommend talking to our instructors before the class, especially when attending the crossfit class. </p>
</div>
</div>
</div>
<!-- card question two -->
<div class="card border-0">
<div class="card-header cursor-pointer" id="headingTwo">
<p class="mb-0 py-2 text-center btn-link blueText font-weight-bold collapsed" role="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
How often should I go to classes?
</p>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionFaq">
<div class="card-body">
<p class="w-75 mx-auto text-center">That very much depends on your personal goals. Our schedule is created in a way to provide customers with variety of classes every week. Our instructors recommend attending classes at least once a week.</p>
</div>
</div>
</div>
<!-- card question three -->
<div class="card border-0">
<div class="card-header cursor-pointer" id="headingThree">
<p class="mb-0 py-2 text-center btn-link blueText font-weight-bold collapsed" role="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Can I attend a class as a try out before signing up?
</p>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionFaq">
<div class="card-body">
<p class="w-75 mx-auto text-center">It is possible to attend a class as a try out but the attendace of the class is paid. Therefore, we strongly recommend getting in touch with our instructors if you are in doubt which class you want to take.</p>
</div>
</div>
</div>
<!-- card question four -->
<div class="card border-0">
<div class="card-header cursor-pointer" id="headingFour">
<p class="mb-0 py-2 text-center btn-link blueText font-weight-bold collapsed" role="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Can I cancel my attendance of a class? If so when should I cancel?
</p>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionFaq">
<div class="card-body">
<p class="w-75 mx-auto text-center">Every class has a maximum number of people who can attend. In order to make sure there is a place for everyone who wants to attend we recomend our customers to cancel their attendance at least 48 hours before the begining of the class. In that way we can give the place to someone else who wants to attend the class.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end of row for FAQ -->
<!-- *** PREPARE FOR YOUR FIRST CLASS *** -->
<!-- row with 12 col layout for mobile and medium screens, 6 by 6 col layout for large screens and 5 by 5 col for
extra large screens. The justify-content utility is used to change the alignment of the columns on the different
breakpoints -->
<!-- img element with display none for small and medium screens and display block for large and extra large screens taking 6 col for large and 5 for extra large -->
<div class="row text-left my-5 blueText justify-content-center justify-content-md-between justify-content-xl-center">
<div class="col-12 col-lg-6 col-xl-5 p-3 text-center text-lg-left">
<h2 class="px-2 px-md-0">Prepare for your first class</h2>
<p class="orangeText text-uppercase font-weight-bold small mb-4">Make the most out of your workout</p>
<p class="text-muted px-4 px-md-0">Drink plenty of water throughout the day. Bring towel and bottle of water. Arrive at least 15 minutes before the class and get in touch with the instructor for the class. The instructor will explain you how the class works and you can ask any questions before the class starts. You can also share your fitness goals and the intructor will give you guidelines for what to aim during the workout. You are always welcome to contact out instructors by email.</p>
<a href="Instructors.html" class="btn btn-orange d-block d-md-inline text-white px-4 py-2 mx-5 mx-md-0">Instructors</a>
</div>
<div class="col-lg-6 col-xl-5 d-flex align-items-center">
<img src="images/preparation.svg" class="img-fluid d-none d-lg-block w-75 mx-auto" alt="personal trainer">
</div>
</div>
<!-- LINK TO INSTRUCTORS PAGE -->
<!-- 12 column layour for small and medium screens, 6 column layout for large screens and above -->
<!-- the layout is specified to be only 6 col on large screen and above, thefore justify utility
with value center is used to align the content in the center of the row -->
<div class="row justify-content-center mt-5">
<div class="col-12 col-lg-6 p-3 text-center text-center">
<h2>More about our classes</h2>
<p class="orangeText text-uppercase font-weight-bold small mb-4">Viafit for your fit</p>
<p class="text-muted px-4 px-md-0">With variety of classes and passionate instructors we help many people stay healthy, fit and strong. When people first join a gym, they are often unsure what they should do once they step inside the building. Whether you are a beginner or you just do not have much fitness knowledge, classes may be your solution. Joining a class can help build a training foundation and structure.</p>
<a href="Classes.html" class="btn btn-orange d-block d-md-inline text-white px-4 py-2 mx-5 mx-md-0">Classes</a>
</div>
</div>
</div>
<!-- FOOTER (Groupwork) -->
<!-- The wrapper for the footer is container fluid so its displayed with 100% on all breakpoints-->
<!-- The footer consists of four rows -->
<!-- The first row is twelve column layout for displaying a motivation quote-->
<!-- The second row is twelve column layout on small devices, six by six on medium and five by seven on large and above-->
<!-- There is a paragraph aligned to the left on medium and above, and a container of social media icons aligned to the right on medium and above-->
<!-- The third row represents the main content for the footer with twelve column layout on small and three column layout on medium and above -->
<!-- The fourth row is twelve column layout on all breakpoints consisting of the copyright-->
<div class="container-fluid blue-bg text-white">
<div class="row text-center mt-5 p-5 bg-gradient">
<div class="col-12">
<h3 class="text-uppercase">Stay active, stay fit</h3>
<p class="small text-uppercase orangeText font-weight-bold">with viafit</p>
</div>
</div>
<div class="row py-3 mx-xl-5">
<div class="col-md-6 col-lg-5 text-center text-md-left mb-3 mb-md-0 orangeText">
<p class="mb-0">Stay connected<span class="d-none d-md-inline">, follow us on social media!</span></p>
</div>
<div class="col-md-6 col-lg-7 text-center text-md-right">
<a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f orangeText mr-5"></i></a>
<a href="https://twitter.com/explore" target="_blank"><i class="fab fa-twitter orangeText mr-5"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram orangeText"></i></a>
</div>
</div>
<div class="row text-center text-md-left mt-5 justify-content-center ml-xl-5">
<div class="col-md-3 col-lg-3 col-xl-3 justify-content-center mx-auto mb-4">
<h5 class="text-uppercase font-weight-bold">viafit horsens</h5>
<hr class="bg-orange mb-4 mt-0 d-inline-block mx-auto w-25">
<p class="mx-auto mx-md-0 small w-75 ">With a large selection of team training and experienced trainers, Viafit ensures the right fit for you</p>
</div>
<div class="col-md-3 col-lg-3 col-xl-3 justify-content-center mx-auto mb-4">
<h5 class="text-uppercase font-weight-bold">About us</h5>
<hr class="bg-orange mb-4 mt-0 d-inline-block mx-auto w-25">
<p><a class="text-white" href="Classes.html">Classes</a></p>
<p><a class="text-white" href="Schedule.html">Schedule</a></p>
<p><a class="text-white" href="Instructors.html">Instructors</a></p>
</div>
<div class="col-md-3 col-lg-3 col-xl-3 justify-content-center mx-auto mb-4">
<h5 class="text-uppercase font-weight-bold">Opening hours</h5>
<hr class="bg-orange mb-4 mt-0 d-inline-block mx-auto w-25">
<p class="mb-0 font-weight-bold">Weekdays</p>
<p class="small">05:30 - 22:00</p>
<p class="mb-0 font-weight-bold">Weekend</p>
<p class="small">07:00 - 22:00</p>
</div>
<div class="col-md-3 col-lg-3 col-xl-3 justify-content-center mx-auto mb-md-0 mb-4">
<h5 class="text-uppercase font-weight-bold">Contact</h5>
<hr class="bg-orange mb-4 mt-0 d-inline-block mx-auto w-25">
<p><i class="fas fa-home mr-3"></i>Kollegievænget 26, Horsens</p>
<a class="text-white" href="mailto:viafit@gmail.com">
<i class="fas fa-envelope mr-3 mb-4"></i>viafit@gmail.com</a>
<p><i class="fas fa-phone mr-3"></i> + 45 50 17 86 65</p>
</div>
</div>
<div class="row">
<div class="col-12 text-muted text-center py-3 small">© 2020 Copyright:
<a href="index.html" class="orangeText"> viafit.dk</a>
</div>
</div>
</div>
</body></html>