-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
189 lines (168 loc) · 6.59 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pro GYM</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<!--NAVIGATION-->
<nav>
<ul>
<li><a href="#home" class="nav item">Home</a></li>
<li><a href="#equipement" class="nav item">Equipement</a></li>
<li><a href="#plans" class="nav item">Prices</a></li>
<li><a href="#contact" class="nav item">Contact</a></li>
</ul>
</nav>
<!-- HOME -->
<div id="home" class="hero">
<div class="home-left">
<h1>8-pro GYM</h1>
<p>Train with the best.</p>
<p>Get the most out of your workouts.</p>
<p>Every single day!</p>
<div class="btn-hero">
<a href="#equipement" class="btn-home b1">Equipement</a>
<a href="#contact" class="btn-home b2">Contact</a>
</div>
</div>
<div class="home-right"></div>
</div>
<!-- INFO -->
<h2 class="info-title">Clubs offering</h2>
<section class="info-section" id="infos">
<div class="info-card">
<div class="container-info-photo">
<img src="img/info.jpg" alt="">
</div>
<h2>Exercise group</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo harum neque mollitia amet dolor et sapiente sint, sequi itaque exercitationem numquam eaque enim porro vitae cum obcaecati tempora facilis error?</p>
</div>
<div class="info-card">
<div class="container-info-photo">
<img src="img/info3.jpg" alt="">
</div>
<h2>Body builder</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo harum neque mollitia amet dolor et sapiente sint, sequi itaque exercitationem numquam eaque enim porro vitae cum obcaecati tempora facilis error?</p>
</div>
<div class="info-card">
<div class="container-info-photo">
<img src="img/info2.jpg" alt="">
</div>
<h2>Personal training</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo harum neque mollitia amet dolor et sapiente sint, sequi itaque exercitationem numquam eaque enim porro vitae cum obcaecati tempora facilis error?</p>
</div>
</section>
<!-- CHOICE -->
<section id="choice">
<div class="training-choice">
<h3>Group excercise</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita facilis est explicabo veritatis assumenda veniam, provident quas distinctio doloremque perspiciatis. Iusto, fugit adipisci quis ipsum quibusdam iste ullam voluptates suscipit!</p>
<button class="btn-outline-choice">Become a member</button>
</div>
<div class="training-choice">
<h3>Small-group training</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita facilis est explicabo veritatis assumenda veniam, provident quas distinctio doloremque perspiciatis. Iusto, fugit adipisci quis ipsum quibusdam iste ullam voluptates suscipit!</p>
<button class="btn-outline-choice">Become a member</button>
</div>
</section>
<!-- CHOICE -->
<h2 class="title-equipement">Equipements</h2>
<section id="equipement">
<button type="button" data-index="1" class="btn-modal"></button>
<button type="button" data-index="5" class="btn-modal"></button>
<button type="button" data-index="2" class="btn-modal"></button>
<button type="button" data-index="3" class="btn-modal"></button>
<button type="button" data-index="4" class="btn-modal"></button>
<button type="button" data-index="9" class="btn-modal"></button>
<button type="button" data-index="6" class="btn-modal"></button>
<button type="button" data-index="7" class="btn-modal"></button>
<button type="button" data-index="8" class="btn-modal"></button>
</section>
<div class="bloc-modal">
<div class="bloc-img">
<img src="" alt="">
<button class="close">X</button>
</div>
</div>
<!-- Parallax -->
<section class="parallax">
<p class="parallax-txt">STAY STRONG.</p>
</section>
<!-- Plans -->
<h2 class="plans-title">Plans</h2>
<section id="plans">
<div class="card-plan">
<h3>Basic</h3>
<p class="plan-price"><span>25</span> /mois</p>
<p class="card-info">
<img src="img/checked.svg" alt="" class="imb-card-info">
Single Club Access
</p>
<p class="card-info">
<img src="img/checked.svg" alt="" class="imb-card-info">
Fitness Assessment
</p>
</div>
<div class="card-plan">
<h3>Premium</h3>
<p class="plan-price"><span>45</span> /mois</p>
<p class="card-info">
<img src="img/checked.svg" alt="" class="imb-card-info">
All Club Unlimited Access
</p>
<p class="card-info">
<img src="img/checked.svg" alt="" class="imb-card-info">
VIP Guest privileges
</p>
<p class="card-info">
<img src="img/checked.svg" alt="" class="imb-card-info">
Unlimited Use of Massage Chairs
</p>
<p class="card-info">
<img src="img/checked.svg" alt="" class="imb-card-info">
20% of Supplements and cooler Drinks
</p>
</div>
<div class="card-plan vip">
<h3>VIP</h3>
<p class="plan-price"><span>79</span> /mois</p>
<p class="card-info">
<img src="img/checked.svg" alt="" class="imb-card-info">
All Premium Amenites Included
</p>
<p class="card-info">
<img src="img/checked.svg" alt="" class="imb-card-info">
Monthly Progress Meeting
</p>
<p class="card-info">
<img src="img/checked.svg" alt="" class="imb-card-info">
Personalize Eating Plan from a Certified Nutritionist
</p>
</div>
</section>
<!-- Contact -->
<h2 class="contact-title">Contact</h2>
<section id="contact">
<form>
<label for="lastname">Last Name</label>
<input type="text" id="lastname">
<label for="email">Email</label>
<input type="email" id="email">
<label for="message">Message</label>
<textarea id="message"></textarea>
<button type="submit" class="contact-btn">Send</button>
</form>
</section>
<!-- Contact -->
<footer>
<p>All right reserved - 2021</p>
</footer>
<script src="app.js"></script>
</body>
</html>