generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathfeatures.html
217 lines (214 loc) · 9.52 KB
/
features.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Features - Elion Gym</title>
<meta name="description" content="Elion Gym has everything you need for a good workout, a strong physique, and great health.">
<meta name="keywords" content="weightlifting gym, fitness club, strength training, group training, personal training">
<link rel="icon" type="image/x-icon" href="assets/favicon/favicon.ico">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<!-- Hero Image Slider
Inspired by https://www.youtube.com/watch?v=Ll5JIjdwQEM -->
<div class="hero-slides">
<div class="slide-dots">
<input type="radio" name="slide" id="slide1" checked>
<input type="radio" name="slide" id="slide2">
<input type="radio" name="slide" id="slide3">
<div class="labels">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
<div class="hero-images">
<div class="hero-img slide1-bg"></div>
<div class="hero-img slide2-bg"></div>
<div class="hero-img slide3-bg"></div>
</div>
</div>
</div>
<!-- Header Logo & Navbar w/ toggle -->
<a href="index.html" id="header-logo" class="blk-textshadow">Elion Gym</a>
<input type="checkbox" id="navbar-toggle" name="navbar-toggle">
<label for="navbar-toggle" class="navbar-toggle-label"><i class="fa-solid fa-bars"></i></label>
<nav>
<ul id="menu">
<li><a href="index.html" aria-label="Go to home page.">Home</a></li>
<li><a href="join.html" aria-label="Go to join page.">Join</a></li>
<li><a class="active" href="" aria-current="page">Features</a></li>
<li><a href="events.html" aria-label="Go to events page.">Events</a></li>
</ul>
</nav>
</header>
<main aria-label="Main content">
<!-- Features columns - info about what the gym has to offer -->
<section id="features">
<h2 class="section-heading bg-dark">What We Have</h2>
<div class="container feature-container big-text">
<p class="text-center txt-light">We have a big assortment of machines and free weights, and plenty of
calisthenics equipment. We also
have a shop in the gym, and a vending machine for off hours.</p>
<div class="feature-segment" id="machines">
<h3 class="bg-dark corners">Machines</h3>
<ul>
<li>
Cable machines
<ul>
<li>2 standard cable machines</li>
<li>1 lat pulldown machine</li>
<li>1 cable row machine</li>
<li>20+ grips</li>
</ul>
</li>
<li>
Leg machines
<ul>
<li>1 Hack squat machine</li>
<li>1 Leg press machine</li>
<li>1 Hamstring curl machine</li>
<li>1 Quad kick machine</li>
</ul>
</li>
<li>
Upper-body machines
<ul>
<li>1 Smith machine</li>
<li>1 Shoulder Press machine</li>
<li>2 Pec decks</li>
<li>1 Preacher curl machine</li>
</ul>
</li>
<li>
Core machines
<ul>
<li>2 Ab curlers</li>
<li>1 Ab twister</li>
</ul>
</li>
<li>
Cardio machines
<ul>
<li>3 Treadmills</li>
<li>4 Stationary bikes</li>
<li>2 Ellipticals / Crosstrainers</li>
<li>2 Rowing machines</li>
</ul>
</li>
</ul>
</div>
<div class="feature-segment" id="weights">
<h3 class="bg-dark corners">Weights section</h3>
<ul>
<li>
50 pairs of dumbbells
<ul>
<li>Fixed weight</li>
<li>Ranging fom 1kg to 50kg</li>
</ul>
</li>
<li>4 Olympic barbells
<ul>
<li>Plates fom 5kg to 50kg</li>
<li>Plenty of plates</li>
<li>Foam covers available</li>
</ul>
</li>
<li>2 Squat racks</li>
<li>2 Adjustable benches with rack</li>
<li>3 Adjustable benches</li>
<li>1 Trap bar</li>
<li>1 Landmine</li>
</ul>
</div>
<div class="feature-segment" id="bodyweight">
<h3 class="bg-dark corners">Bodyweight</h3>
<ul>
<li>
3 Pull-up bars
<ul>
<li>Multiple grip angles</li>
<li>Different heights</li>
</ul>
</li>
<li>2 Dip stations</li>
<li>3 Ab rollers</li>
<li>2 Pairs of Parallettes</li>
<li>1 Set of Olympic rings</li>
<li>2 Sets of Battle ropes</li>
<li>Resistance bands of varying strength</li>
<li>Mats for stretching and static exercise</li>
</ul>
</div>
</div>
</section>
<!-- In-Gym Shop Information -->
<section id="shop-section">
<div class="feature-segment" id="shop">
<h3 class="bg-dark corners big-text">Shop</h3>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Protein Shake</td>
<td>€2.5</td>
</tr>
<tr>
<td>Protein Bar</td>
<td>€3</td>
</tr>
<tr>
<td>PWO</td>
<td>€3</td>
</tr>
<tr>
<td>Electrolytes</td>
<td>€2</td>
</tr>
<tr>
<td>T-Shirt</td>
<td>€20</td>
</tr>
<tr>
<td>Shorts</td>
<td>€20</td>
</tr>
<tr>
<td>Towel</td>
<td>€20</td>
</tr>
</table>
</div>
</section>
</main>
<footer>
<div class="container" id="footer-wrapper">
<a class="footer-logo" href="index.html">Elion Gym</a>
<div>
<p><i class="fa-solid fa-phone"></i> 777-666 55</p>
<p><i class="fa-solid fa-envelope"></i> [email protected]</p>
</div>
<div class="flex-break"></div>
<div id="socials-list">
<ul id="social-icons">
<li><a href="https://facebook.com" target="_blank" rel="noopener" aria-label="Visit our Facebook page in a new tab."><i
class="fa-brands fa-facebook"></i></a></li>
<li><a href="https://instagram.com" target="_blank" rel="noopener" aria-label="Visit our Istagram page in a new tab."><i
class="fa-brands fa-instagram"></i></a></li>
<li><a href="https://youtube.com" target="_blank" rel="noopener" aria-label="Visit our YouTube channel in a new tab."><i
class="fa-brands fa-youtube"></i></a></li>
<li><a href="https://tiktok.com" target="_blank" rel="noopener" aria-label="Visit our TikTok channel in a new tab."><i
class="fa-brands fa-tiktok"></i></a></li>
</ul>
</div>
<p>© Emil Jädersten</p>
</div>
</footer>
<!--Import FontAwesome-->
<script src="https://kit.fontawesome.com/1284835d90.js" crossorigin="anonymous"></script>
</body>
</html>