-
Notifications
You must be signed in to change notification settings - Fork 0
/
Index.html
416 lines (378 loc) · 20.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./styles.css">
<title>Kropp Fitness</title>
</head>
<body>
<header class="header">
<a class="header__logo" href="">
<img class="header__logo-image" src="./images/logo.png" alt="Kropp Logo" width="135" height="25" loading="lazy">
</a>
<nav class="header__menu">
<ul class="header__menu-list">
<li class="header__menu-item">
<a class="header__menu-link is-current" href="">Home</a>
</li>
<li class="header__menu-item">
<a class="header__menu-link" href="">Pages</a>
</li>
<li class="header__menu-item">
<a class="header__menu-link" href="">Portfolio</a>
</li>
<li class="header__menu-item">
<a class="header__menu-link" href="">Blog</a>
</li>
<li class="header__menu-item">
<a class="header__menu-link" href="">Shop</a>
</li>
</ul>
</nav>
<div class="header__actions">
<button class="header__book-button button" type="button">Book now</button>
<button class="header__burger-button" type="button" title="Open menu">
<span class="visually-hidden">Open menu</span>
<span class="header__burger-button-line"></span>
<span class="header__burger-button-line"></span>
<span class="header__burger-button-line"></span>
</button>
</div>
</header>
<main class="content">
<h1 class="visually-hidden">Kropp Fitness Club</h1>
<section class="banner">
<h2 class="visually-hidden">Upcoming events</h2>
<div class="banner__body">
<div class="banner__info">
New event <br/>
coming up / <time datetime="06-07">june 7</time> - <time datetime="06-13">13</time>
</div>
<h3 class="banner__title">Crossfit</h3>
</div>
<div class="banner__pagination">
<ul class="banner__pagination-list">
<li class="banner__pagination-item">
<button class="banner__pagination-button" type="button">
</button>
</li>
<li class="banner__pagination-item">
<button class="banner__pagination-button" type="button"></button>
</li>
<li class="banner__pagination-item">
<button class="banner__pagination-button is-current" type="button"></button>
</li>
</ul>
</div>
</section>
<section class="motivation">
<h2 class="visually-hidden">Motivation</h2>
<ul class="motivation__list">
<li class="motivation__item">
<div class="motivation__card container">
<div class="motivation__card-body">
<h3 class="motivation__card-title backdrop-title title-medium" data-title="Strong">Be you, just stronger! <br/> Power is in you</h3>
<div class="motivation__card-description">
<p>Unum solum justo ex ius. Pro cu probo laboramus eius insolens euripidis te eos, ut agam tota.</p>
</div>
<a class="motivation__card-description button transparent" href="">View more</a>
</div>
<img class="motivation__card-image" src="./images/motivation/1.jpg" alt="A man pulling himself up on a horizontal bar" width="518" height="760" loading="lazy">
</div>
</li>
<li class="motivation__item">
<div class="motivation__card container">
<div class="motivation__card-body">
<h3 class="motivation__card-title backdrop-title title-medium" data-title="Start">Today is the best <br/> day to start!</h3>
<div class="motivation__card-description">
<p>Sed abhorreant constituam consectetuer eu. At mei clita deserunt, his movet molestie nemore.</p>
</div>
<a class="motivation__card-description button transparent" href="">View more</a>
</div>
<img class="motivation__card-image" src="./images/motivation/2.jpg" alt="Man with dumbbells" width="518" height="760" loading="lazy">
</div>
</li>
</ul>
</section>
<section class="training__types container-wide">
<h2 class="visually-hidden">Types of training</h2>
<ul class="training__types-list">
<li class="training__types-item">
<img class="training__types-image" src="./images/training-types/1.svg" alt="" width="150" height="140" loading="lazy">
<h3 class="training__types-item-title">Maxpump</h3>
</li>
<li class="training__types-item">
<img class="training__types-image" src="./images/training-types/2.svg" alt="" width="150" height="140" loading="lazy">
<h3 class="training__types-item-title">aron gym</h3>
</li>
<li class="training__types-item">
<img class="training__types-image" src="./images/training-types/3.svg" alt="" width="150" height="140" loading="lazy">
<h3 class="training__types-item-title">fit & tone</h3>
</li>
<li class="training__types-item">
<img class="training__types-image" src="./images/training-types/4.svg" alt="" width="150" height="140" loading="lazy">
<h3 class="training__types-item-title">forza</h3>
</li>
<li class="training__types-item">
<img class="training__types-image" src="./images/training-types/5.svg" alt="" width="150" height="140" loading="lazy">
<h3 class="training__types-item-title">balance fitness</h3>
</li>
<li class="training__types-item">
<img class="training__types-image" src="./images/training-types/6.svg" alt="" width="150" height="140" loading="lazy">
<h3 class="training__types-item-title">body sculpt</h3>
</li>
</ul>
</section>
<section class="join-us">
<div class="join-us__video-wrapper">
<video class="join-us__video" src="" width="960" height="600" poster="./images/video-placeholder.jpg"></video>
<button class="join-us__video-play-button" type="button">
Play
</button>
</div>
<div class="join-us__body container">
<h2 class="join-us__title">Join us</h2>
<form class="join-us__form">
<header class="join-us__form-header">
<h3 class="join-us__form-title backdrop-title centered title-big" data-title="Go!">Start here</h3>
<div class="join-us__form-subtitle section-description">fill the form below to start your journey</div>
</header>
<div class="join-us__form-body">
<label class="visually-hidden" for="username">Name</label>
<input class="join-us__form-input input" id="username" placeholder="Name">
<label class="visually-hidden" for="email">Email</label>
<input class="join-us__form-input input" id="email" placeholder="Email" type="email">
<button class="join-us__form-button button transparent" type="submit">Subscribe</button>
</div>
</form>
</div>
</section>
<section class="location container-wide">
<img class="location__map-image" src="./images/map.jpg" alt="" width="960" height="600">
<div class="location__body">
<h2 class="location__title title-medium backdrop-title centered" data-title="Look">
Find us near you
</h2>
<div class="location__description">
<p>Nec suas signiferumque id. An eum labore commodo principes. Usu diam noluisse cu, nam adipisci</p>
</div>
<a class="location__button button transparent" href="/">View more</a>
</div>
</section>
<section class="family">
<header class="family__header container">
<h2 class="family__title title-big backdrop-title centered" data-title="part">be a part of our fit family</h2>
<div class="family__description">
<p>Training helps you think and feel better. join us!</p>
</div>
</header>
<div class="family__body container-wide">
<img class="family__image" src="./images/family/1.jpg" alt="Training people" width="414" height="479" loading="lazy">
<img class="family__image" src="./images/family/2.jpg" alt="Training people" width="744" height="479" loading="lazy">
<img class="family__image" src="./images/family/3.jpg" alt="Training people" width="396" height="479" loading="lazy">
<img class="family__image" src="./images/family/4.jpg" alt="Training people" width="396" height="479" loading="lazy">
<img class="family__image" src="./images/family/5.jpg" alt="Training people" width="414" height="479" loading="lazy">
</div>
</section>
<section class="calculate">
<div class="calculate__inner container">
<div class="calculate__body">
<h2 class="calculate__title title-medium backdrop-title" data-title="BMI">Input your BMI</h2>
<div class="calculate__description">
<p>Duo graece ponderum ne, ei mel aliquando. Pro te tamquam nonumes, nam no nemore epicurei</p>
</div>
<form class="calculate__form">
<div class="calculate__form-body">
<label class="visually-hidden" for="height">Height</label>
<input class="calculate-input input" id="height" type="number" placeholder="Height / cm">
<label class="visually-hidden" for="weight">Weight</label>
<input class="calculate-input input" id="weight" type="number" placeholder="Weight / kg">
<label class="visually-hidden" for="age">Age</label>
<input class="calculate-input input" id="age" type="number" placeholder="Age">
<label class="visually-hidden" for="gender">Gender</label>
<select class="calculate__input input" id="gender" required>
<option value="" disabled selected>Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<label class="visually-hidden" for="activity-factor">Select an activity factor</label>
<select class="calculate__input input wite" id="activity-factor" required>
<option value="" disabled selected>Select an activity factor:</option>
<option value="male">1</option>
<option value="female">2</option>
</select>
</div>
<button class="calculate__button button transparent" type="submit">Calculate</button>
</form>
</div>
<div class="calculate__table-wrapper">
<table class="calculate__table">
<thead>
<tr>
<th>BMI</th>
<th>Weight status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Below 18.5</td>
<td>Underweight</td>
</tr>
<tr>
<td>18.5 - 24.9</td>
<td>Healthy</td>
</tr>
<tr>
<td>25.0 - 29.9</td>
<td>Overweight</td>
</tr>
<tr>
<td>30.0 - and Above</td>
<td>Obese</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><b>BMR</b> Metabolic Rate / <b>BMI</b> Body Mass Index</td>
</tr>
</tfoot>
</table>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__main">
<div class="footer__main-inner container">
<header class="footer__header">
<a class="footer__logo" href="">
<img class="footer__logo-image" src="./images/logo.png" alt="Kropp Logo" width="270" height="50" loading="lazy">
</a>
<p class="footer__description section-description">please feel free to send us an e-mail at <a href="mailto:kropp@qodeinteractive.com">kropp@qodeinteractive.com</a> For any additional inquiries</p>
</header>
<div class="footer__body">
<div class="footer__column">
<h2 class="footer__column-title">About</h2>
<p class="footer__about">Shape up your site with Kropp, a theme especially made for
fitness & gym websites.</p>
</div>
<div class="footer__column">
<h2 class="footer__column-title">Working hours</h2>
<div class="footer__schedule">
Monday - Friday<br/>
<time datetime="05:30/24:00">05:30 - 24:00</time>
</div>
<div class="footer__schedule">
Weekdays<br/>
<time datetime="00:00/24:00">00:00 - 24:00</time>
</div>
</div>
<div class="footer__column">
<h2 class="footer__column-title">Location</h2>
<address class="footer__address">
68 Jay Street, Brooklyn,<br/>
NY 11201, United States
</address>
<div class="footer__contacts">
<ul class="footer__contacts-list">
<li class="footer__contacts-item">
<a class="footer__contacts-link" href="mailto:kropp@qodeinteractive.com">
kropp@qodeinteractive.com
</a>
</li>
<li class="footer__contacts-item">
<a class="footer__contacts-link" href="tel:+17184076400">
+ (1) 718 - 407 - 6400
</a>
</li>
</ul>
</div>
</div>
<div class="footer__column">
<h2 class="footer__column-title has--arrow">start now</h2>
<form class="footer__subscribe">
<label class="visually-hidden" for="subscribe-email">Email</label>
<input class="footer__subscribe-input input" type="email" id="subscribe-email" placeholder="Email">
<button class="footer__subscribe-button" type="submit" title="Subscribe">
<span class="visually-hidden">Subscribe</span>
</button>
</form>
<div class="footer__soc1als">
<ul class="footer__soc1als-list">
<li class="footer__soc1als-item">
<a class="footer__soc1als-link" href="" target="_blank">
<svg fill="#000000" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>tiktok</title>
<path fill="black" d="M16.656 1.029c1.637-0.025 3.262-0.012 4.886-0.025 0.054 2.031 0.878 3.859 2.189 5.213l-0.002-0.002c1.411 1.271 3.247 2.095 5.271 2.235l0.028 0.002v5.036c-1.912-0.048-3.71-0.489-5.331-1.247l0.082 0.034c-0.784-0.377-1.447-0.764-2.077-1.196l0.052 0.034c-0.012 3.649 0.012 7.298-0.025 10.934-0.103 1.853-0.719 3.543-1.707 4.954l0.020-0.031c-1.652 2.366-4.328 3.919-7.371 4.011l-0.014 0c-0.123 0.006-0.268 0.009-0.414 0.009-1.73 0-3.347-0.482-4.725-1.319l0.040 0.023c-2.508-1.509-4.238-4.091-4.558-7.094l-0.004-0.041c-0.025-0.625-0.037-1.25-0.012-1.862 0.49-4.779 4.494-8.476 9.361-8.476 0.547 0 1.083 0.047 1.604 0.136l-0.056-0.008c0.025 1.849-0.050 3.699-0.050 5.548-0.423-0.153-0.911-0.242-1.42-0.242-1.868 0-3.457 1.194-4.045 2.861l-0.009 0.030c-0.133 0.427-0.21 0.918-0.21 1.426 0 0.206 0.013 0.41 0.037 0.61l-0.002-0.024c0.332 2.046 2.086 3.59 4.201 3.59 0.061 0 0.121-0.001 0.181-0.004l-0.009 0c1.463-0.044 2.733-0.831 3.451-1.994l0.010-0.018c0.267-0.372 0.45-0.822 0.511-1.311l0.001-0.014c0.125-2.237 0.075-4.461 0.087-6.698 0.012-5.036-0.012-10.060 0.025-15.083z"></path>
</svg>
</a>
</li>
<li class="footer__soc1als-item">
<a class="footer__soc1als-link" href="" target="_blank">
<svg viewBox="0 -3 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-300.000000, -7442.000000)" fill="#000000">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289" id="youtube-[#168]">
</path>
</g>
</g>
</g>
</svg>
</a>
</li>
<li class="footer__soc1als-item">
<a class="footer__soc1als-link" href="" target="_blank">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="#0F0F0F"/>
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="#0F0F0F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="#0F0F0F"/>
</svg>
</a>
</li>
<li class="footer__soc1als-item">
<a class="footer__soc1als-link" href="" target="_blank">
<svg viewBox="-5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-385.000000, -7399.000000)" fill="#000000">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M335.821282,7259 L335.821282,7250 L338.553693,7250 L339,7246 L335.821282,7246 L335.821282,7244.052 C335.821282,7243.022 335.847593,7242 337.286884,7242 L338.744689,7242 L338.744689,7239.14 C338.744689,7239.097 337.492497,7239 336.225687,7239 C333.580004,7239 331.923407,7240.657 331.923407,7243.7 L331.923407,7246 L329,7246 L329,7250 L331.923407,7250 L331.923407,7259 L335.821282,7259 Z" id="facebook-[#176]">
</path>
</g>
</g>
</g>
</svg>
</a>
</li>
<li class="footer__soc1als-item">
<a class="footer__soc1als-link" href="" target="_blank">
<svg viewBox="0 -2 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-60.000000, -7521.000000)" fill="#000000">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M10.29,7377 C17.837,7377 21.965,7370.84365 21.965,7365.50546 C21.965,7365.33021 21.965,7365.15595 21.953,7364.98267 C22.756,7364.41163 23.449,7363.70276 24,7362.8915 C23.252,7363.21837 22.457,7363.433 21.644,7363.52751 C22.5,7363.02244 23.141,7362.2289 23.448,7361.2926 C22.642,7361.76321 21.761,7362.095 20.842,7362.27321 C19.288,7360.64674 16.689,7360.56798 15.036,7362.09796 C13.971,7363.08447 13.518,7364.55538 13.849,7365.95835 C10.55,7365.79492 7.476,7364.261 5.392,7361.73762 C4.303,7363.58363 4.86,7365.94457 6.663,7367.12996 C6.01,7367.11125 5.371,7366.93797 4.8,7366.62489 L4.8,7366.67608 C4.801,7368.5989 6.178,7370.2549 8.092,7370.63591 C7.488,7370.79836 6.854,7370.82199 6.24,7370.70483 C6.777,7372.35099 8.318,7373.47829 10.073,7373.51078 C8.62,7374.63513 6.825,7375.24554 4.977,7375.24358 C4.651,7375.24259 4.325,7375.22388 4,7375.18549 C5.877,7376.37088 8.06,7377 10.29,7376.99705" id="twitter-[#154]">
</path>
</g>
</g>
</g>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer__extra">
<div class="footer__extra-inner container">
<div class="footer__copyright">
© <time datetime="2022">2022</time> Qode Interactive, All Rights Reserved | <a href="/">Privacy Policy</a> | <a href="/">Contact Us</a>
</div>
</div>
</div>
</footer>
</body>
</html>