Gym-Fitness-Website-Frontend/about.html at main · Bilaal68/Gym-Fitness-Website-Frontend · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn about POWERHOUSE GYM - Our story, mission, and the team dedicated to your fitness success.">
    <title>About Us | POWERHOUSE GYM</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header -->
    <header class="header" id="header">
        <div class="container">
            <a href="index.html" class="logo">
                <span class="logo-icon"><i class="fas fa-dumbbell"></i></span>
                <span class="logo-text">POWER<span class="accent">HOUSE</span></span>
            </a>
            <nav class="nav" id="nav">
                <ul class="nav-list">
                    <li><a href="index.html" class="nav-link">Home</a></li>
                    <li><a href="about.html" class="nav-link active">About</a></li>
                    <li><a href="classes.html" class="nav-link">Classes</a></li>
                    <li><a href="trainers.html" class="nav-link">Trainers</a></li>
                    <li><a href="schedule.html" class="nav-link">Schedule</a></li>
                    <li><a href="pricing.html" class="nav-link">Pricing</a></li>
                    <li><a href="contact.html" class="nav-link">Contact</a></li>
                </ul>
            </nav>
            <div class="header-actions">
                <a href="contact.html#trial" class="btn btn-primary btn-sm">Start Free Trial</a>
                <button class="hamburger" id="hamburger" aria-label="Toggle menu">
                    <span></span><span></span><span></span>
                </button>
            </div>
        </div>
    </header>

    <!-- Mobile Menu -->
    <div class="mobile-menu" id="mobileMenu">
        <ul class="mobile-nav-list">
            <li><a href="index.html" class="mobile-nav-link">Home</a></li>
            <li><a href="about.html" class="mobile-nav-link active">About</a></li>
            <li><a href="classes.html" class="mobile-nav-link">Classes</a></li>
            <li><a href="trainers.html" class="mobile-nav-link">Trainers</a></li>
            <li><a href="schedule.html" class="mobile-nav-link">Schedule</a></li>
            <li><a href="pricing.html" class="mobile-nav-link">Pricing</a></li>
            <li><a href="contact.html" class="mobile-nav-link">Contact</a></li>
        </ul>
        <a href="contact.html#trial" class="btn btn-primary btn-block">Start Free Trial</a>
    </div>

    <main>
        <!-- Page Hero -->
        <section class="page-hero">
            <div class="page-hero-bg">
                <img src="https://images.unsplash.com/photo-1558611848-73f7eb4001a1?w=1920&q=80" alt="Gym team">
            </div>
            <div class="page-hero-overlay"></div>
            <div class="container">
                <div class="page-hero-content">
                    <h1>About <span class="accent">POWERHOUSE</span></h1>
                    <p>More than a gym. A community dedicated to transforming lives.</p>
                    <nav class="breadcrumb" aria-label="Breadcrumb">
                        <a href="index.html">Home</a>
                        <span>/</span>
                        <span>About Us</span>
                    </nav>
                </div>
            </div>
        </section>

        <!-- Our Story -->
        <section class="section about-story">
            <div class="container">
                <div class="about-grid">
                    <div class="about-content animate-on-scroll">
                        <span class="section-tag">Our Story</span>
                        <h2>From Passion to <span class="accent">POWERHOUSE</span></h2>
                        <p>Founded in 2009 by former professional athletes Marcus Chen and Lisa Rodriguez, POWERHOUSE GYM started with a simple mission: create a fitness space where everyone feels welcome, regardless of their starting point.</p>
                        <p>What began as a small 5,000 sq ft facility has grown into a 50,000 sq ft fitness destination, serving over 10,000 active members. But our core values remain the same – community, results, and unwavering support for every member's journey.</p>
                        <p>We believe fitness isn't just about physical transformation. It's about building confidence, mental resilience, and a lifestyle that empowers you in every aspect of life.</p>
                        <div class="about-signature">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80" alt="Marcus Chen" class="signature-photo">
                            <div>
                                <strong>Marcus Chen</strong>
                                <span>Co-Founder & CEO</span>
                            </div>
                        </div>
                    </div>
                    <div class="about-image animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?w=800&q=80" alt="POWERHOUSE gym interior">
                        <div class="about-badge">
                            <span class="badge-number">15+</span>
                            <span class="badge-text">Years of Excellence</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Core Values -->
        <section class="section values-section">
            <div class="container">
                <div class="section-header animate-on-scroll">
                    <span class="section-tag">What We Stand For</span>
                    <h2 class="section-title">Our Core <span class="accent">Values</span></h2>
                </div>
                <div class="values-grid">
                    <div class="value-card animate-on-scroll">
                        <div class="value-icon"><i class="fas fa-heart"></i></div>
                        <h3>Community First</h3>
                        <p>We're more than a gym – we're a family. Every member matters, and we celebrate each other's victories.</p>
                    </div>
                    <div class="value-card animate-on-scroll">
                        <div class="value-icon"><i class="fas fa-bullseye"></i></div>
                        <h3>Results Driven</h3>
                        <p>We're committed to helping you achieve real, measurable results through science-backed training methods.</p>
                    </div>
                    <div class="value-card animate-on-scroll">
                        <div class="value-icon"><i class="fas fa-hands-helping"></i></div>
                        <h3>Inclusive Environment</h3>
                        <p>All fitness levels welcome. No judgment, no intimidation – just support and encouragement.</p>
                    </div>
                    <div class="value-card animate-on-scroll">
                        <div class="value-icon"><i class="fas fa-lightbulb"></i></div>
                        <h3>Continuous Innovation</h3>
                        <p>We constantly update our equipment, programs, and methods to give you the best fitness experience.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Virtual Tour -->
        <section class="section tour-section" id="tour">
            <div class="container">
                <div class="section-header animate-on-scroll">
                    <span class="section-tag">Explore Our Space</span>
                    <h2 class="section-title">Virtual <span class="accent">Gym Tour</span></h2>
                    <p class="section-subtitle">Take a look around our world-class facilities</p>
                </div>
                <div class="tour-carousel" id="tourCarousel">
                    <div class="carousel-container">
                        <div class="carousel-track" id="carouselTrack">
                            <div class="carousel-slide">
                                <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1200&q=80" alt="Main gym floor">
                                <div class="slide-caption">
                                    <h3>Main Gym Floor</h3>
                                    <p>20,000 sq ft of premium equipment</p>
                                </div>
                            </div>
                            <div class="carousel-slide">
                                <img src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?w=1200&q=80" alt="Cardio deck">
                                <div class="slide-caption">
                                    <h3>Cardio Deck</h3>
                                    <p>100+ cardio machines with entertainment</p>
                                </div>
                            </div>
                            <div class="carousel-slide">
                                <img src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?w=1200&q=80" alt="Free weights area">
                                <div class="slide-caption">
                                    <h3>Free Weights Zone</h3>
                                    <p>Complete range from 5-150 lbs</p>
                                </div>
                            </div>
                            <div class="carousel-slide">
                                <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1200&q=80" alt="Group fitness studio">
                                <div class="slide-caption">
                                    <h3>Group Fitness Studios</h3>
                                    <p>3 dedicated studios for classes</p>
                                </div>
                            </div>
                            <div class="carousel-slide">
                                <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=1200&q=80" alt="Yoga studio">
                                <div class="slide-caption">
                                    <h3>Yoga & Meditation Room</h3>
                                    <p>Peaceful space for mindful practice</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-btn prev" aria-label="Previous slide"><i class="fas fa-chevron-left"></i></button>
                    <button class="carousel-btn next" aria-label="Next slide"><i class="fas fa-chevron-right"></i></button>
                    <div class="carousel-dots" id="carouselDots"></div>
                </div>
            </div>
        </section>

        <!-- Team Preview -->
        <section class="section team-preview">
            <div class="container">
                <div class="section-header animate-on-scroll">
                    <span class="section-tag">Meet The Team</span>
                    <h2 class="section-title">Expert <span class="accent">Trainers</span></h2>
                    <p class="section-subtitle">Certified professionals dedicated to your success</p>
                </div>
                <div class="trainers-grid">
                    <div class="trainer-card animate-on-scroll">
                        <div class="trainer-image">
                            <img src="https://images.unsplash.com/photo-1567013127542-490d757e51fc?w=400&q=80" alt="Marcus Chen">
                            <div class="trainer-social">
                                <a href="https://instagram.com" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                                <a href="https://linkedin.com" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                            </div>
                        </div>
                        <div class="trainer-info">
                            <h3>Marcus Chen</h3>
                            <span class="trainer-role">Co-Founder & Head Coach</span>
                            <p>NASM-CPT, CrossFit L3, 15+ years experience</p>
                        </div>
                    </div>
                    <div class="trainer-card animate-on-scroll">
                        <div class="trainer-image">
                            <img src="https://images.unsplash.com/photo-1594381898411-846e7d193883?w=400&q=80" alt="Lisa Rodriguez">
                            <div class="trainer-social">
                                <a href="https://instagram.com" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                                <a href="https://linkedin.com" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                            </div>
                        </div>
                        <div class="trainer-info">
                            <h3>Lisa Rodriguez</h3>
                            <span class="trainer-role">Co-Founder & Yoga Director</span>
                            <p>RYT-500, Pilates Certified, 12+ years experience</p>
                        </div>
                    </div>
                    <div class="trainer-card animate-on-scroll">
                        <div class="trainer-image">
                            <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&q=80" alt="James Wilson">
                            <div class="trainer-social">
                                <a href="https://instagram.com" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                                <a href="https://linkedin.com" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                            </div>
                        </div>
                        <div class="trainer-info">
                            <h3>James Wilson</h3>
                            <span class="trainer-role">Strength & Conditioning</span>
                            <p>CSCS, USA Weightlifting, 10+ years experience</p>
                        </div>
                    </div>
                </div>
                <div class="section-cta animate-on-scroll">
                    <a href="trainers.html" class="btn btn-primary">Meet All Trainers <i class="fas fa-arrow-right"></i></a>
                </div>
            </div>
        </section>

        <!-- CTA Section -->
        <section class="section cta-section">
            <div class="cta-bg">
                <img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1920&q=80" alt="Fitness motivation">
            </div>
            <div class="cta-overlay"></div>
            <div class="container">
                <div class="cta-content animate-on-scroll">
                    <h2>Ready to Join the <span class="accent">POWERHOUSE</span> Family?</h2>
                    <p>Start your transformation today with a free trial. No commitment required.</p>
                    <div class="cta-buttons">
                        <a href="contact.html#trial" class="btn btn-primary btn-lg">Start Free Trial</a>
                        <a href="contact.html" class="btn btn-outline btn-lg">Contact Us</a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a href="index.html" class="logo">
                        <span class="logo-icon"><i class="fas fa-dumbbell"></i></span>
                        <span class="logo-text">POWER<span class="accent">HOUSE</span></span>
                    </a>
                    <p>Transform your body and mind with the best fitness community in the city.</p>
                    <div class="social-links">
                        <a href="https://facebook.com" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                        <a href="https://instagram.com" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                        <a href="https://twitter.com" target="_blank" rel="noopener" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="https://youtube.com" target="_blank" rel="noopener" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                <div class="footer-links">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="classes.html">Classes</a></li>
                        <li><a href="trainers.html">Trainers</a></li>
                        <li><a href="schedule.html">Schedule</a></li>
                        <li><a href="pricing.html">Pricing</a></li>
                    </ul>
                </div>
                <div class="footer-links">
                    <h4>Programs</h4>
                    <ul>
                        <li><a href="classes.html#strength">Strength Training</a></li>
                        <li><a href="classes.html#cardio">Cardio</a></li>
                        <li><a href="classes.html#yoga">Yoga</a></li>
                        <li><a href="classes.html#hiit">HIIT</a></li>
                        <li><a href="classes.html#boxing">Boxing</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h4>Contact Us</h4>
                    <ul>
                        <li><i class="fas fa-map-marker-alt"></i> 123 Fitness Street, Gym City, GC 12345</li>
                        <li><i class="fas fa-phone"></i> <a href="tel:+15551234567">(555) 123-4567</a></li>
                        <li><i class="fas fa-envelope"></i> <a href="mailto:[email protected]">[email protected]</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 POWERHOUSE GYM. All rights reserved | By Bilal.</p>
                <div class="footer-legal">
                    <a href="privacy.html">Privacy Policy</a>
                    <a href="terms.html">Terms of Service</a>
                </div>
            </div>
        </div>
    </footer>

    <button class="back-to-top" id="backToTop" aria-label="Back to top"><i class="fas fa-chevron-up"></i></button>
    <script src="script.js"></script>
</body>
</html>