generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
131 lines (129 loc) · 6.51 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>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 class="active" href="" aria-current="page">Home</a></li>
<li><a href="join.html" aria-label="Go to join page.">Join</a></li>
<li><a href="features.html" aria-label="Go to features 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">
<!-- Selling points in neat segments -->
<section id="sales-points">
<h2 class="section-heading bg-dark">Unleash Your Strongest Self</h2>
<div class="container points">
<div class="sales-point odd corners">
<i class="fa-regular fa-clock"></i>
<div class="bg-dark corners">
<h3>Open 24/7</h3>
<p>Train whenever YOU want. Our gym is always open.</p>
<br>
<h4>Staff hours:</h4>
<p>Mon-Fri: 06-21</p>
<p>Sat-Sun: 10-15</p>
</div>
</div>
<div class="sales-point corners">
<i class="fa-solid fa-person-running"></i>
<div class="bg-dark corners">
<h3>Training for Everyone</h3>
<p>Whether you're a powerlifter or a crossfitter, whether you go heavy everyday or just want to
break a sweat - We have all the tools you need for your workout.</p>
</div>
</div>
</div>
<div class="flex-break"></div>
<div class="container points">
<div class="sales-point odd corners">
<i class="fa-solid fa-people-pulling"></i>
<div class="bg-dark corners">
<h3>Personal Training</h3>
<p>We work with a number of affiliated trainers to offer you personal training at a reasonable
price.</p>
</div>
</div>
<div class="sales-point corners">
<i class="fa-solid fa-users"></i>
<div class="bg-dark corners">
<h3>Challenge Yourself!</h3>
<p>Pump your motivation and see your progress with our frequent group training sessions and
lifting competitions.</p>
</div>
</div>
</div>
</section>
<!-- Owner/Staff section -->
<section id="owner-section">
<div class="container owner-wrapper">
<img src="assets/images/owner.webp" alt="Picture of the owner" id="portrait" width="200" height="200">
<div>
<p class="bg-dark big-text txt-light corners">At Elion Gym, we aim to make workouts effective and fun. We offer a wide range of equipment for every type of training - and no silly gimmicks. Come train with us and unleash your strongest self!</p>
<h3 class="big-text">Elion Fullmag</h3>
<p>Owner, Elion Gym</p>
</div>
</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" defer></script>
</body>
</html>