-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (166 loc) · 8.34 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Belgrade Fitness, leave your mark.">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Audiowide|Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<title>Belgrade Fitness</title>
</head>
<body>
<header class="main-header">
<nav>
<h1 class="fade-in wow" data-wow-delay=".5s"><a href="index.html"><span class="title-color">Belgrade</span> Fitness</a></h1>
<ul>
<li class="fade-in wow" id="delay-1" data-wow-delay=".5s"><a href="index.html">Home</a></li>
<li class="fade-in wow" id="delay-2" data-wow-delay=".5s"><a href="gyms.html">Gyms</a></li>
<li class="nav-end fade-in wow" id="delay-3" data-wow-delay=".5s"><a href="trainers.html">Trainers</a></li>
</ul>
</nav>
<p>Leave Your Mark</p>
</header>
<!-- End of Main Header -->
<div class="call-to-action">
<h2>Start your journey today!</h2>
<p><a href="join-now.html">Join now</a></p>
</div>
<!-- End Of Call To Action -->
<main>
<section class="section-1">
<div class="container">
<h3 class="section-1-title fade-in wow" data-wow-delay=".5s">Why work with us?</h3>
<span class="line fade-in wow" data-wow-delay=".5s">Future me is gonna kill me</span>
<p class="section-title-content fade-in wow" data-wow-delay=".5s">Because we are the best at what we do!</p>
<div class="flex-container">
<div class="item-1 fade-in wow" data-wow-delay=".5s">
<i class="fas fa-x-ray fa-4x"></i>
<h3>Biggest Gyms</h3>
<p>Our gyms come with a variety of sections for all types of athletes. They range from tennis courts, basketball courts, swimming pools and gymnasiums,.</p>
</div>
<!-- End of Item-1 -->
<div class="item-2 fade-in wow" data-wow-delay=".5s">
<i class="fas fa-user-md fa-4x"></i>
<h3>Experienced Personal Trainers</h3>
<p>The trainers at Belgrade Fitness have over 10 years of experience in fitness. You'll get your pick of trainer to best fit your training style and personality.</p>
</div>
<!-- End of Item-2 -->
<div class="item-3 fade-in wow" data-wow-delay=".5s">
<i class="fas fa-stopwatch fa-4x"></i>
<h3>Best Programs</h3>
<p>Courses engineered by top athletes from many sports all being thought by our instructors. To ensure you get the best raining in the industry.</p>
</div>
<!-- End of Item-3 -->
</div>
<!-- End Of Flex Container -->
</div>
<!-- End Of Container -->
</section>
<!-- End Of Section 1 -->
<section class="section-2">
<div class="container">
<h3 class="section-2-title"> Pricing </h3>
<span class="line-2">Future me is gonna kill me</span>
<p class="section-title-content section-2-content">Pricing structure for our services that cannot be beaten...</p>
<div class="flex-container">
<div class="item-1">
<h4 class="pricing-title">Basic</h4>
<p class="pricing-content"><b>1</b> Pass</p>
<p class="pricing-content"><b>$10</b> /month</p>
<p class="pricing-content"><b>Machine</b> Access</p>
<p class="pricing-content"><b>0</b> Trainers</p>
<p class="pricing-content"><b>0</b> Perks</p>
<p class="pricing-content sign-up-container"><a href="join-now.html" class="sign-up">Sign up</a></p>
</div>
<!-- End of Item-1 -->
<div class="item-2">
<h4 class="pricing-title-big">STANDARD</h4>
<p class="pricing-content"><b>2</b> Passes</p>
<p class="pricing-content"><b>$20</b> /month</p>
<p class="pricing-content"><b>Full</b> Access</p>
<p class="pricing-content"><b>1</b> Trainer</p>
<p class="pricing-content"><b>2</b> Perks</p>
<p class="pricing-content sign-up-container"><a href="join-now.html" class="sign-up">Sign up</a></p>
</div>
<!-- End of Item-2 -->
<div class="item-3">
<h4 class="pricing-title">PRO</h4>
<p class="pricing-content"><b>3</b> Passes</p>
<p class="pricing-content"><b>$30</b> /month</p>
<p class="pricing-content"><b>Full</b> Access</p>
<p class="pricing-content"><b>5</b> Trainers</p>
<p class="pricing-content"><b>10</b> Perks</p>
<p class="pricing-content sign-up-container"><a href="join-now.html" class="sign-up">Sign up</a></p>
</div>
<!-- End of Item-3 -->
</div>
<!-- End Of Flex Container -->
</div>
<!-- End Of Container -->
</section>
<!-- End Of Section 2 -->
<section class="section-3">
<div class="container fade-in wow" data-wow-delay=".5s">
<h3>Contact Us</h3>
<span class="line">Future me is gonna kill me</span>
<p class="section-title-content">Need to get in touch? Fill in the form below for more information:</p>
<form action="index.html" method="post">
<div class="flex-container">
<div class="item-1">
<input type="email" name="user_email" placeholder="email" class="input">
<input type="text" name="user_name" placeholder="name..." class="input">
<input type="text" name="user_subject" placeholder="subject..." class="input">
</div>
<!-- End of Item-1 -->
<div class="item-2">
<textarea placeholder="message..." class="input"></textarea>
<p class="contact-button"><a href="#">Submit</a></p>
</div>
<!-- End of Item-2 -->
</div>
<!-- End of Flex Container -->
</form>
</section>
</div>
</main>
<footer class="main-footer">
<div class="flex-container">
<section class="item-1">
<h1>About <a href="index.html"><span class="title-color">Belgrade</span> Fitness</a></h1>
<p>Belgrade Fitness was founded by Derek Hale in 1998 during his golden bodybuilding days. He always struggled to find the right advice from credible mentors, as the industry filled with fake gurus and bodybuilding products. Derek Hale envisioned Belgrade
Fitness as the #1 source for fitness enthusiast. Now it serves as training grounds for people all over the country whom are trying to take their fitness journey's to the next level.</p>
<p>Belgrade Fitness will be taking the next step in becoming a worldwide gym by opening 22 new locations all over the world in 2018.</p>
<div class="social-bar">
<a href="#"><i class="social-icon fab fa-facebook-f"></i></a>
<a href="#"><i class="social-icon fab fa-twitter"></i></a>
<a href="#"><i class="social-icon fab fa-instagram"></i></a>
<a href="#"><i class="social-icon fab fa-pinterest-p"></i></a>
<a href="#"><i class="social-icon fab fa-google-plus-g"></i></a>
<a href="#"><i class="social-icon fas fa-rss"></i></a>
</div>
<!-- End of Social Bar -->
</section>
<!-- End of Item-1 -->
<section class="item-2">
<p class="hello">Say hello:</p>
<p class="contact-info"><i class="contact-icon fas fa-map-marker-alt"></i><b>Address:</b> 67a Zeleni Venac, 11000 Beograd</p>
<p class="contact-info"><i class="contact-icon fas fa-envelope"></i><b>Email:</b> bg@belgradefitness.com</p>
<p class="contact-info"><i class="contact-icon fas fa-phone"></i><b>Phone:</b> 064-268-3395</p>
</section>
<!-- End of Item-2 -->
</div>
<!-- End of container -->
<p class="copyright">2018© copyrighted by <a href="index.html"><span class="title-color">Belgrade</span> Fitness</a>.</p>
<a href="#top" class="back-to-top"><i class="fas fa-angle-up"></i></a>
</footer>
<script src="JS/smooth-scroll.js"></script>
<script>
var scroll = new SmoothScroll('a[href*="#"]');
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>