-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (131 loc) · 5.58 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Body Bulding</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/c6f38472f5.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="wrapper flex">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<a href="#">English</a>
<a href="#">My Page</a>
<a href="#">Logout</a>
</div>
</header>
<i class="fa-sharp fa-solid fa-bars menu"></i>
<div class="navigation">
<i class="fa-solid fa-xmark xmark"></i>
<nav class="wrapper">
<div class="nav-top">
<a href="index.html">
<img class="logo" src="assets/images/logo2.png" alt="logo">
<p class="max-font-26"><span>SP Fitness</span><br>center 2023</p>
</a>
</div>
<ul class="nav-links flex column">
<li><a class="nav-link max-font-26" href="about.html">About</a></li>
<li><a class="nav-link max-font-26" href="#">Program</a></li>
<li><a class="nav-link max-font-26" href="#">Join</a></li>
<li><a class="nav-link max-font-26" href="#">Sponsor</a></li>
<li><a class="nav-link max-font-26 " href="#">News</a></li>
</ul>
<div class="nav-bottom flex">
<button class="max-font-26" type="button">SPFC Story</button>
</div>
</nav>
</div>
<main>
<section id="headline" class="section">
<div class="greeting wrapper">
<p>"Hello! Champion"</p>
</div>
<div class="wrapper">
<h1>Super Power<br>Fitness Center 2023</h1>
<p class="description">Super Power Fitness Center is a premier gym offering various services and facilities to
help you achieve your fitness goals. Whether you want to lose weight, build muscle, improve your health or
just
have fun, we have something for you. Join us today and discover the benefits of working out with our qualified
trainers, state-of-the-art equipment and supportive community.</p>
<p class="date">2023.2.12(Mon) ~ 3(FRI)</p>
<p class="place">@ Hajb El Ayoun, Kairouan</p>
</div>
</section>
<section id="about">
<div id="program">
<div class="wrapper flex column">
<h2 class="title max-font-26">Main Program</h2>
<div class="tag">
<div class="program-tag">
<i class="program-img fa-solid fa-hands-holding-child card-icon"></i>
<h3 class="program-title">Personal Training</h3>
<p class="program-detail">Members of the professional personal training staff at SuperPower Fitness</p>
</div>
<div class="program-tag">
<i class="program-img fa-solid fa-tent card-icon"></i>
<h3 class="program-title">Boot Camp</h3>
<p class="program-detail">For those seeking an intense, no-excuses workout that will take your fitnes</p>
</div>
<div class="program-tag">
<i class="program-img fa-solid fa-dumbbell card-icon"></i>
<h3 class="program-title">Equipment</h3>
<p class="program-detail">We offer a large selection of cardiovascular, strength and free weight</p>
</div>
<div class="program-tag">
<i class="program-img fa-solid fa-person-rays card-icon"></i>
<h3 class="program-title">Exercise Classes</h3>
<p class="program-detail">Enjoy fun and challenging group fitness classes led by certified motivating</p>
</div>
<div class="program-tag">
<i class="program-img fa-solid fa-user-nurse card-icon"></i>
<h3 class="program-title">Health Assessment & Prescription</h3>
<p class="program-detail">Meet one on one with a degreed exercise professional to assess your fitness</p>
</div>
</div>
<button type="button" class="join-btn">Join SPFC 2023 Now</button>
<a href="#" class="desktop-link max-font-26">see the whole program</a>
</div>
</div>
</section>
<section id="trainers" class="flex column">
<div class="wrapper flex column">
<h2 class="title max-font-26">Featured Trainers</h2>
<div id="trainers-container" class="trainers-container flex column">
</div>
<button type="button" class="trainer-btn"><span class="moreless">MORE </span><i
class="chevron fas fa-chevron-down"></i></button>
</div>
</section>
<section id="partners">
<div class="container">
<h2 class="title max-font-26">Partner</h2>
<div class="company flex">
<span id="facebook">Facebook</span>
<span id="mozilla">Mozilla</span>
<span id="apple">Apple</span>
<span id="microsoft">Microsoft</span>
<span id="google">Google</span>
</div>
</div>
</section>
</main>
<footer class="wrapper flex">
<a href="index.html">
<img class="logo" src="assets/images/logo2.png" alt="logo">
<p class="max-font-26">SP Fitness<br>center 2023</p>
</a>
<p class="max-font-26">
2023 | SuperPower Fitness center
<span>
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae minima recusandae voluptate. Numquam esse cumque consequatur culpa, veniam sunt, vero repellat, consequuntur itaque maiores fugit sequi ullam exercitationem repudiandae magni?
</span>
</p>
</footer>
</body>
<script src="script.js"></script>
</html>