-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
265 lines (242 loc) · 12.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
<html>
<head>
<title>Summer Body Fitness</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<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.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<!---------------Header--------------->
<section id="header">
<nav class="navbar navbar-light">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo" width="300" height="60" ></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#top">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">FEATURES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</section>
<!----------Welcome Text------------>
<section id="welcome">
<div class="container">
<div class="welcome text-center wow slideInLeft">
<h1>No Sweat. No Abs.</h1>
<p>Join our gym today for that <strong>'SUMMER BODY'</strong>. From a minimal membership of <strong>R200 per month</strong> for a single person or <strong>R350 per month</strong> for a couple. Subscribe below and stand a chance to win 6 months FREE gym membership.</p>
<button type="submit" class="btn home-btn">SUBSCRIBE</button>
</div>
</div>
</section>
<!-------------About Us------------->
<section id="about">
<div class="container">
<div class="row">
<div class="col-md-6 text-center wow fadeInLeft">
<img src="images/athlete.jpg" alt="athlete" class="img-fluid">
</div>
<div class="col-md-6 text-justify wow fadeInRight">
<h3>Sweat It Out!</h3>
<p>Come join a family of body fitness 'freaks' who sweat it out everyday to build the bodies they have always dreamed of. Whether you wanna lose some weight, stay fit or grow some abs, we are your body goals.</p>
<p>Summyer Body Fitness is about a communibty, a resilient community of passionate people who wanbt to achieve not just abs but a healthy lifestyle. We are those people, we make it happen daily, no excuses.</p>
</div>
<div class="col-md-6 text-justify wow fadeInLeft">
<h3>Your Dream Body!</h3>
<p>We are the bridge to your greatest dream body. Whether you a gent who wants to get'em lady's heads turning or a lady wo want to get'em gent's heads turning, we will enable you bu boosting your confidence through a well built body.</p>
<p>Nothing changes until you change. Your dream body will not happen miraculously, you need to put in the work actually not just work but hard work, those early morning and late evenings at the gym and most importantly, great discipline.</p>
</div>
<div class="col-md-6 wow fadeInRight">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/xx4m2EZlNTA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<!----------------Services---------------------->
<section id="services">
<div class="container">
<div class="row wow fadeInUp">
<div class="col-md-4">
<img src="images/martial-arts.png" class="wow fadeInRight delay-1s" alt="services" height="100" width="100">
<h4 class="wow fadeInRight delay-2s">Mixed Martial Arts</h4>
<p>"Martial arts are codified systems and traditions of combat practices, which are practiced for a variety of reasons: self-defense, competition, physical health and fitness, entertainment, as well as mental, physical, and spiritual development." - Wikipedia</p>
</div>
<div class="col-md-4">
<img src="images/bench.png" class="wow fadeInRight delay-1s" alt="services" height="100" width="100">
<h4 class="wow fadeInRight delay-2s">Cardio</h4>
<p>Cardio is a pillar of a balanced exercise regimen. Cardio machines help you work very hard in a very short period of time, making a morning or lunchtime workout an exercise in efficiency. But most people don't use the machines correctly.</p>
</div>
<div class="col-md-4">
<img src="images/stationary-bike.png" class="wow fadeInRight delay-1s" alt="services" height="100" width="100">
<h4 class="wow fadeInRight delay-2s">Personal Training</h4>
<p>Our new One-on-One Personal Training service offers you more than what money can buy. A personalized gym experience which delivers assured results on both short-term and long-term period. This service is offered both at the comfort of your home and within our facilities.</p>
</div>
</div>
</div>
</section>
<!------------------------Features---------------------------->
<section id="features">
<div class="container">
<div class="row">
<div class="col-md-6 wow fadeInLeft">
<img src="images/work-work-wrok.png" class="img-fluid">
</div>
<div class="col-md-6 wow fadeInDown">
<div class="feature-box">
<div class="feature-left">
<i class="fa fa-trophy"></i>
</div>
<div class="feature-right">
<h4>Certified Trainers</h4>
<p>We have certified trainers to help you for all your body fitness needs.</p>
</div>
</div>
<div class="feature-box">
<div class="feature-left">
<i class="fa fa-calendar-o"></i>
</div>
<div class="feature-right">
<h4>Experienced Trainers</h4>
<p>Not only are our trainers certified but they have years of exceptional experience. </p>
</div>
</div>
<div class="feature-box">
<div class="feature-left">
<i class="fa fa-heartbeat"></i>
</div>
<div class="feature-right">
<h4>Passionate Trainers</h4>
<p>Cherry on top, our certified and experienced trainers are very passionate about what they do.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!----------------------Testimonials-------------------->
<section id="testimonials">
<div class="container">
<h1 class="text-center">Meet Our Members</h1>
<p class="text-center">Hear from some our daily gym members on how <strong>Summer Body Fitness</strong> has changed their lives through the gym.</p>
<div class="row">
<div class="col-md-4 wow fadeInLeft delay-1s">
<p class="review">“Finally after many years of switching from one major chain to another I have found the gym
for me. From the state of the art equipment and friendly staff, to the dedication from their personal trainers,
the experience is exceptional.<br><i class="fa fa-twitter"></i><span>@Greg</span></p>
<img src="images/greg.jpg" alt="Greg" width="80" height="80">
</div>
<div class="col-md-4 wow fadeInUp">
<p class="review">"Clean and neat. Great trainers, especially John. The entire gym community is also supportive
and very friendly. Instructions for each class are also good and easy to follow along. The equipment is
and well serviced.<br><i class="fa fa-twitter"></i><span>@Tom</span></p>
<img src="images/tom.png" alt="Tom" width="80" height="80">
</div>
<div class="col-md-4 wow fadeInRight delay-1s">
<p class="review">“Close to where I work and stay, they have very flexible working hours to accommodate us all.
The facilities also have safe and plenty of parking space. The showers have very warm water which is ideal
after a great workout.<br><i class="fa fa-twitter"></i><span>@Dora</span></p>
<img src="images/dora.jpg" alt="Dora" width="80" height="80">
</div>
</div>
</div>
</section>
<!------Subscribe--------->
<section id="subscribe">
<div class="container">
<div class="subscribe text-center">
<h3>Join For Free Trial Now</h3>
<p>Get a free 7 days, full access trial to our gym.</p>
<div class="input-group">
<input type="email" class="form-control" placeholder="Your Email">
<div class="input-group-append">
<button type="submit" class="input-group-text btn">Sign Up!</button>
</div>
</div>
</div>
</div>
</section>
<!------------Footer----------->
<section id="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="images/logo.png" class="footer-logo" width="220" height="80">
<p>We are your gateway to your body goals, you dream body, your everyday summer body. Come join us today and sweat it out.</p>
</div>
<div class="col-md-3">
<h1>Features</h1>
<p>Excellent Trainers</p>
<p>Free Consultation</p>
<p>Flexible Working Hours</p>
<p>7 Days Free Trial</p>
</div>
<div class="col-md-3">
<h1>Quick Contact</h1>
<p><i class="fa fa-phone-square"></i><a href="tel:#">+27 88 123 4567</a></p>
<p><i class="fa fa-envelope"></i><a href="mailto:#">[email protected]</a></p>
<p><i class="fa fa-home"></i> 23 Benard Road, Rivonia Mall</p>
<p class="city">Sandton, South Africa</p>
</div>
<div class="col-md-3">
<h1>Follow Us On</h1>
<p><i class="fa fa-facebook-official"></i><a href="#">@SummerBodyFitness</a></p>
<p><i class="fa fa-youtube-play"></i><a href="#">@SummerBodyFitness</a></p>
<p><i class="fa fa-instagram"></i><a href="#">@summerBodyFitness</a></p>
<p><i class="fa fa-twitter"></i><a href="#">@SummerBodyFitness</a></p>
</div>
</div> <hr>
<p class="copyright">Made with <i class="fa fa-heart-o"></i> by <a href="www.thubamamba.com"><strong>Thuba Mamba</strong></a> aka <strong>Thubz!</strong></p>
</div>
</section>
<!-------------------Scroll to the top---------------->
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-arrow-circle-up"></i></button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-----------Animation-------------->
<script src="js/wow.min.js"></script>
<script>new WOW().init();</script>
<!----Smooth Scroll-------->
<script src="js/smooth-scroll.js"></script>
<script>
var scroll = new SmoothScroll('a[href*="#"]');
</script>
</body>
</html>