-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
223 lines (211 loc) · 12.5 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Browser tab icon, otherwise known as a Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Associated links for styles & frameworks -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<!-- Browser Tab Title -->
<title>One Last Rep | Earn your Stripes!</title>
</head>
<body>
<header>
<!-- Nav -->
<nav class="navbar navbar-expand-lg navbar-dark bg-custom fixed-top">
<!-- Gym Logo -->
<a class="navbar-brand" href="index.html">
<img src="assets/images/olrfitnesslogo.png" alt="gym Logo" title="gym Logo">
</a>
<!-- Toggler Icon on Mobile -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navigation Links -->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto uppercase">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="coaches.html">Coaches</a>
</li>
<li class="nav-item">
<a class="nav-link" href="classes.html">Classes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Welcome Showcase / Mission Statement -->
<figure class="main-img" title="busy gym in use">
<p class="lead">In here, We all earn our <span class="orange">Stripes!</span></p>
</figure>
<!-- Recent Testimonials Section -->
<div class="container-wrapper container-wrapper-testimonials">
<div class="container testimonials-container">
<section class="testimonials">
<!-- Testimonials Header -->
<div class="row">
<div class="col-12 header">
<h2 class="text-uppercase testimonials-header">Testimonials:</h2>
<hr class="block-divider">
</div>
</div>
<!-- Testimonials from Users -->
<div class="row testimonial-media">
<!-- Each image accompanying each testimonial takes up 1/4 of the row space on medium and above, with the remaining space
allocated to the blockquote testimonial -->
<div class="col-md-3 media">
<!-- Images accompanying each testimonial will not display on small devices saving excessive scroll of home page -->
<img src="assets/images/couple.jpg" class="img-fluid mx-auto d-none d-md-block" alt="User Testimonial 1">
</div>
<!-- Each Testimonial takes up the full row width on small width screen sizes -->
<div class="col-sm-12 col-md-9 media-body my-auto">
<blockquote class="blockquote">
<p><span class="orange">OLR</span> has become our 2nd home. Fitness, Friends, Fun & Fantastic Staff <3<br>
- The O' Briens</p>
</blockquote>
</div>
</div>
<div class="row testimonial-media">
<div class="col-sm-12 col-md-9 media-body my-auto">
<blockquote class="blockquote">
<p>I was so nervous even driving near the place, but once I took that leap I never looked back! Time to earn my <span class="orange">Stripes.</span><br>
- Tim Hugh</p>
</blockquote>
</div>
<div class="col-md-3 media">
<img src="assets/images/man.jpg" class="img-fluid mx-auto d-none d-md-block" alt="User Testimonial 2">
</div>
</div>
<div class="row testimonial-media">
<div class="col-md-3 media">
<img src="assets/images/woman.jpg" class="img-fluid mx-auto d-none d-md-block" alt="User Testimonial 3">
</div>
<div class="col-sm-12 col-md-9 media-body my-auto">
<blockquote class="blockquote">
<p>I recently moved here and was missing my old gym, after trying some of the other local gyms none of them compared to <span class="orange">OLR!</span><br>
- Natalia</p>
</blockquote>
</div>
</div>
</section>
</div>
</div>
<!-- Footer (social media/Free Intro Class CTA/Privacy Policy etc etc) -->
<footer class="container-fluid">
<div class="row">
<!-- Supplementary links section such as Directions to Gym/Link to Contact -->
<div class="col-sm-4 footer-list text-center">
<ul class="additional-links-footer">
<!-- Each li element, except for contact, will open up in a new tab to reduce potential of user navigating away without returning -->
<!-- "Contact" li element will navigate user to Contact page -->
<li class="footer-item"><a href="assets/supplementarydocs/gdprnotice.pdf" target="_blank">Privacy Policy</a></li>
<li class="footer-item"><a href="https://wego.here.com/directions/mix//OLR-Fitness,-Six-Cross-Roads,-Waterford:e-eyJuYW1lIjoiT0xSIEZpdG5lc3MiLCJhZGRyZXNzIjoiU2l4IENyb3NzIFJvYWRzLCBXYXRlcmZvcmQsIElyZWxhbmQiLCJsYXRpdHVkZSI6NTIuMjMxMDI5OSwibG9uZ2l0dWRlIjotNy4xNDMyOSwicHJvdmlkZXJOYW1lIjoiZmFjZWJvb2siLCJwcm92aWRlcklkIjo0ODY5MzAwNDg0NzQxMDd9?map=52.22113,-6.92637,11,normal&fb_locale=en_GB" target="_blank">Directions</a></li>
<li class="footer-item"><a href="contact.html">Contact</a></li>
<li class="footer-item"><a href="assets/supplementarydocs/accreditation.pdf" target="_blank">Accreditation</a></li>
</ul>
</div>
<!-- Primary Call-to-action of website, to entice user to sign up for free class -->
<div class="col-sm-4 sign-up text-center">
<section class="free-intro">
<h3 class="free-intro-header">Schedule <span class="faded-orange">FREE</span> Intro Class!</h3>
<button class="btn btn-sm btn--cta btn--orange" data-toggle="modal" data-target="#signUpModal">Click here!</button>
</section>
</div>
<!-- Social Media Links, that when clicked will navigate user to each in a new tab -->
<div class="col-sm-4">
<ul class="list-inline social-links">
<li class="list-inline-item">
<a target="_blank" href="https://www.facebook.com/OLR-Fitness-486930048474107/">
<i class="fab fa-facebook" aria-hidden="true"></i>
<span class="sr-only">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" href="https://www.twitter.com/">
<i class="fab fa-twitter" aria-hidden="true"></i>
<span class="sr-only">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" href="https://www.instagram.com/olrfitnesswaterford/?hl=en">
<i class="fab fa-instagram" aria-hidden="true"></i>
<span class="sr-only">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" href="https://www.linkedin.com/">
<i class="fab fa-linkedin" aria-hidden="true"></i>
<span class="sr-only">LinkedIn</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" href="https://www.youtube.com/">
<i class="fab fa-youtube" aria-hidden="true"></i>
<span class="sr-only">Youtube</span>
</a>
</li>
</ul>
</div>
</div>
</footer>
<!-- Modal Popup -->
<div class="modal" tabindex="-1" role="dialog" id="signUpModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Let's get you started.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Required attribute added to each element of the modal, as is customary and to industry standards -->
<!-- Each form element has the associated data input validation added to it, e.g. Contact Number will only accept numerical values -->
<form>
<div class="form-group">
<label for="Name">Full Name</label>
<input type="text" class="form-control" id="Name" aria-describedby="nameHelp" placeholder="Enter Full Name" required>
<small id="nameHelp" class="form-text text-muted">Your personal details are safe with us!</small>
</div>
<div class="form-group">
<label for="InputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="PhoneNo">Contact Number</label>
<input type="number" class="form-control" id="PhoneNo" aria-describedby="phoneNoHelp" placeholder="Enter Phone Number" required>
<small id="phoneNoHelp" class="form-text text-muted">We'll never share your Contact number with anyone else.</small>
</div>
<div class="form-group">
<label for="goals">What are your Goals?</label>
<textarea class="form-control" id="goals" aria-describedby="goalsHelp" placeholder="Tell us what you need!" required></textarea>
<small id="goalsHelp" class="form-text text-muted">This information is strictly confidential and will enable us to tailor your first class to your requirement!</small>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- JQuery for Navbar expansion/collapse & Modal popup -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>