HTML
1272 lines
42.7 KB
Vitalis | Health & Fitness Hub
Live Preview
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vitalis | Health & Fitness Hub</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
--primary: #0066cc;
--secondary: #ff5e14;
--dark: #1a1d24;
--light: #f8f9fa;
--text: #2d3748;
--white: #ffffff;
--gradient: linear-gradient(135deg, var(--primary) 0%, #00aaff 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
color: var(--text);
background-color: var(--light);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
/* Navigation */
.navbar {
background-color: var(--white);
padding: 1.5rem 2rem;
position: fixed;
width: 100%;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
transition: all 0.3s;
}
.navbar.scrolled {
padding: 1rem 2rem;
background-color: rgba(255,255,255,0.95);
}
.logo {
color: var(--primary);
font-size: 1.8rem;
font-weight: 900;
display: flex;
align-items: center;
}
.logo span {
color: var(--secondary);
}
.logo img {
height: 40px;
margin-right: 10px;
}
.nav-links {
list-style: none;
display: flex;
gap: 2rem;
}
.nav-links a {
color: var(--dark);
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s;
position: relative;
}
.nav-links a:hover {
color: var(--secondary);
}
.nav-links a:after {
content: '';
position: absolute;
width: 0;
height: 3px;
bottom: -5px;
left: 0;
background-color: var(--secondary);
transition: width 0.3s;
}
.nav-links a:hover:after {
width: 100%;
}
.cta-button {
background: var(--gradient);
color: var(--white);
padding: 0.8rem 1.8rem;
border-radius: 50px;
font-weight: 600;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(0,102,204,0.3);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,102,204,0.4);
color: var(--white);
}
.menu-toggle {
display: none;
color: var(--dark);
font-size: 1.5rem;
cursor: pointer;
}
/* Hero Section */
.hero {
height: 100vh;
min-height: 800px;
background: url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
position: relative;
display: flex;
align-items: center;
margin-top: 80px;
}
.hero:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
}
.hero-content {
position: relative;
z-index: 10;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
color: var(--white);
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
margin-bottom: 1.5rem;
line-height: 1.2;
text-transform: uppercase;
}
.hero h1 span {
color: var(--secondary);
}
.hero p {
font-size: 1.2rem;
max-width: 600px;
margin-bottom: 2.5rem;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
}
.btn {
padding: 1rem 2.5rem;
border-radius: 50px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s;
display: inline-block;
text-align: center;
}
.btn-primary {
background: var(--secondary);
color: var(--white);
box-shadow: 0 4px 15px rgba(255,94,20,0.4);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255,94,20,0.5);
}
.btn-secondary {
background: transparent;
color: var(--white);
border: 2px solid var(--white);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-3px);
}
/* Stats Section */
.stats {
background: var(--gradient);
padding: 5rem 2rem;
color: var(--white);
}
.stats-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
text-align: center;
}
.stat-item {
padding: 1.5rem;
}
.stat-number {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
font-family: 'Montserrat', sans-serif;
}
.stat-label {
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Features Section */
.features {
padding: 6rem 2rem;
background-color: var(--white);
}
.section-title {
text-align: center;
margin-bottom: 4rem;
}
.section-title h2 {
font-size: 2.5rem;
color: var(--dark);
margin-bottom: 1rem;
}
.section-title p {
color: var(--text);
max-width: 700px;
margin: 0 auto;
}
.features-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
}
.feature-card {
background: var(--light);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: all 0.3s;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.feature-image {
height: 200px;
overflow: hidden;
}
.feature-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.feature-card:hover .feature-image img {
transform: scale(1.1);
}
.feature-content {
padding: 2rem;
}
.feature-content h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--dark);
}
.feature-content p {
margin-bottom: 1.5rem;
color: var(--text);
}
.feature-link {
color: var(--primary);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.feature-link i {
margin-left: 0.5rem;
transition: transform 0.3s;
}
.feature-link:hover i {
transform: translateX(5px);
}
/* Programs Section */
.programs {
padding: 6rem 2rem;
background-color: var(--light);
}
.programs-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.program-card {
background: var(--white);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: all 0.3s;
}
.program-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.program-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--secondary);
color: var(--white);
padding: 0.3rem 1rem;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
}
.program-content {
padding: 2rem;
position: relative;
}
.program-content h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--dark);
}
.program-meta {
display: flex;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.program-meta-item {
display: flex;
align-items: center;
color: var(--text);
}
.program-meta-item i {
color: var(--primary);
margin-right: 0.5rem;
}
.program-price {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 1.5rem;
}
.program-price span {
font-size: 1rem;
color: var(--text);
font-weight: 400;
}
/* Trainers Section */
.trainers {
padding: 6rem 2rem;
background-color: var(--white);
}
.trainers-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2.5rem;
}
.trainer-card {
background: var(--light);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
text-align: center;
transition: all 0.3s;
}
.trainer-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.trainer-image {
height: 300px;
overflow: hidden;
position: relative;
}
.trainer-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.trainer-card:hover .trainer-image img {
transform: scale(1.1);
}
.trainer-social {
position: absolute;
bottom: 1rem;
left: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 1rem;
opacity: 0;
transition: opacity 0.3s;
}
.trainer-card:hover .trainer-social {
opacity: 1;
}
.trainer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--primary);
color: var(--white);
border-radius: 50%;
transition: all 0.3s;
}
.trainer-social a:hover {
background: var(--secondary);
transform: translateY(-3px);
}
.trainer-info {
padding: 2rem 1.5rem;
}
.trainer-info h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: var(--dark);
}
.trainer-info p {
color: var(--secondary);
font-weight: 600;
margin-bottom: 1rem;
}
.trainer-bio {
color: var(--text);
margin-bottom: 1.5rem;
}
/* Testimonials Section */
.testimonials {
padding: 6rem 2rem;
background-color: var(--light);
}
.testimonials-slider {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.testimonial-card {
background: var(--white);
border-radius: 10px;
padding: 3rem;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
text-align: center;
margin: 0 1rem;
}
.testimonial-text {
font-size: 1.1rem;
font-style: italic;
color: var(--text);
margin-bottom: 2rem;
position: relative;
}
.testimonial-text:before,
.testimonial-text:after {
content: '"';
font-size: 3rem;
color: var(--primary);
opacity: 0.3;
position: absolute;
}
.testimonial-text:before {
top: -1.5rem;
left: -1rem;
}
.testimonial-text:after {
bottom: -3rem;
right: -1rem;
}
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
.author-image {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
margin-right: 1rem;
}
.author-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info h4 {
font-size: 1.2rem;
color: var(--dark);
margin-bottom: 0.3rem;
}
.author-info p {
color: var(--text);
font-size: 0.9rem;
}
/* CTA Section */
.cta {
padding: 6rem 2rem;
background: url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
position: relative;
text-align: center;
color: var(--white);
}
.cta:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,68,136,0.8);
}
.cta-content {
position: relative;
z-index: 10;
max-width: 800px;
margin: 0 auto;
}
.cta h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.cta p {
margin-bottom: 2.5rem;
font-size: 1.2rem;
}
/* Footer */
.footer {
background-color: var(--dark);
color: var(--white);
padding: 5rem 2rem 2rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
}
.footer-column h3 {
color: var(--white);
font-size: 1.3rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 1rem;
}
.footer-column h3:after {
content: '';
position: absolute;
width: 50px;
height: 3px;
bottom: 0;
left: 0;
background-color: var(--secondary);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover {
color: var(--secondary);
}
.contact-info {
margin-bottom: 1.5rem;
}
.contact-info p {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
color: rgba(255,255,255,0.7);
}
.contact-info i {
margin-right: 1rem;
color: var(--secondary);
}
.footer-social {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255,255,255,0.1);
border-radius: 50%;
color: var(--white);
transition: all 0.3s;
}
.footer-social a:hover {
background-color: var(--secondary);
transform: translateY(-3px);
}
.newsletter-form {
margin-top: 1.5rem;
}
.newsletter-form input {
width: 100%;
padding: 0.8rem 1rem;
border: none;
border-radius: 5px;
margin-bottom: 1rem;
}
.newsletter-form button {
width: 100%;
padding: 0.8rem;
background: var(--secondary);
color: var(--white);
border: none;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}
.newsletter-form button:hover {
background: #e05510;
}
.copyright {
text-align: center;
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.5);
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 992px) {
.hero {
min-height: 700px;
}
.hero-content {
text-align: center;
}
.hero p {
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
justify-content: center;
}
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.nav-links {
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: calc(100vh - 80px);
background-color: var(--white);
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 3rem;
gap: 2rem;
transition: left 0.3s;
}
.nav-links.active {
left: 0;
}
.nav-links a {
color: var(--dark);
font-size: 1.2rem;
}
.hero {
margin-top: 80px;
min-height: 600px;
}
.hero-buttons {
flex-direction: column;
gap: 1rem;
}
.btn {
width: 100%;
max-width: 300px;
margin: 0 auto;
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 2.5rem;
}
.section-title h2 {
font-size: 2rem;
}
.testimonial-card {
padding: 2rem 1.5rem;
}
.footer-content {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="logo">
<img src="https://via.placeholder.com/40x40" alt="Vitalis Logo">
VITAL<span>IS</span>
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#programs">Programs</a></li>
<li><a href="#trainers">Trainers</a></li>
<li><a href="#testimonials">Results</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#programs" class="cta-button">Join Now</a>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-content">
<h1>Transform Your <span>Body</span>, Elevate Your <span>Life</span></h1>
<p>Join our science-backed fitness programs designed to help you achieve sustainable results through personalized training and nutrition.</p>
<div class="hero-buttons">
<a href="#programs" class="btn btn-primary">Get Started</a>
<a href="#features" class="btn btn-secondary">Learn More</a>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="stats-container">
<div class="stat-item">
<div class="stat-number">5,000+</div>
<div class="stat-label">Members</div>
</div>
<div class="stat-item">
<div class="stat-number">25</div>
<div class="stat-label">Expert Trainers</div>
</div>
<div class="stat-item">
<div class="stat-number">98%</div>
<div class="stat-label">Success Rate</div>
</div>
<div class="stat-item">
<div class="stat-number">10</div>
<div class="stat-label">Years Experience</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features" id="features">
<div class="section-title">
<h2>Why Choose Vitalis</h2>
<p>Our comprehensive approach combines cutting-edge fitness science with personalized coaching to deliver real results.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-image">
<img src="https://images.unsplash.com/photo-1538805060514-97d9cc17730c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Personal Training">
</div>
<div class="feature-content">
<h3>1-on-1 Coaching</h3>
<p>Work with dedicated trainers who create customized workout plans tailored to your goals, fitness level, and schedule.</p>
<a href="#" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="feature-card">
<div class="feature-image">
<img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-1.2.1&auto=format&fit-crop&w=1350&q=80" alt="Nutrition Planning">
</div>
<div class="feature-content">
<h3>Nutrition Planning</h3>
<p>Get personalized meal plans and dietary guidance from certified nutritionists to complement your training regimen.</p>
<a href="#" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="feature-card">
<div class="feature-image">
<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Recovery Programs">
</div>
<div class="feature-content">
<h3>Recovery Programs</h3>
<p>Optimize your results with our recovery protocols including massage, cryotherapy, and mobility training.</p>
<a href="#" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</section>
<!-- Programs Section -->
<section class="programs" id="programs">
<div class="section-title">
<h2>Our Fitness Programs</h2>
<p>Choose the program that aligns with your goals and lifestyle. All include nutrition guidance and progress tracking.</p>
</div>
<div class="programs-grid">
<div class="program-card">
<div class="feature-image">
<img src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Starter Program">
<div class="program-badge">Beginner</div>
</div>
<div class="program-content">
<h3>Foundation Program</h3>
<div class="program-meta">
<div class="program-meta-item">
<i class="far fa-clock"></i> 8 weeks
</div>
<div class="program-meta-item">
<i class="fas fa-calendar-alt"></i> 3x/week
</div>
</div>
<p>Build fundamental strength and movement patterns with this introductory program perfect for beginners.</p>
<div class="program-price">$299 <span>/ program</span></div>
<a href="#" class="btn btn-primary">Enroll Now</a>
</div>
</div>
<div class="program-card">
<div class="feature-image">
<img src="https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Performance Program">
<div class="program-badge">Popular</div>
</div>
<div class="program-content">
<h3>Performance Program</h3>
<div class="program-meta">
<div class="program-meta-item">
<i class="far fa-clock"></i> 12 weeks
</div>
<div class="program-meta-item">
<i class="fas fa-calendar-alt"></i> 4x/week
</div>
</div>
<p>Take your fitness to the next level with this comprehensive strength and conditioning program.</p>
<div class="program-price">$499 <span>/ program</span></div>
<a href="#" class="btn btn-primary">Enroll Now</a>
</div>
</div>
<div class="program-card">
<div class="feature-image">
<img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Elite Program">
<div class="program-badge">Advanced</div>
</div>
<div class="program-content">
<h3>Elite Program</h3>
<div class="program-meta">
<div class="program-meta-item">
<i class="far fa-clock"></i> 16 weeks
</div>
<div class="program-meta-item">
<i class="fas fa-calendar-alt"></i> 5x/week
</div>
</div>
<p>Our most advanced program for athletes and serious fitness enthusiasts looking to maximize results.</p>
<div class="program-price">$799 <span>/ program</span></div>
<a href="#" class="btn btn-primary">Enroll Now</a>
</div>
</div>
</div>
</section>
<!-- Trainers Section -->
<section class="trainers" id="trainers">
<div class="section-title">
<h2>Meet Our Expert Trainers</h2>
<p>Our certified trainers bring years of experience and specialized knowledge to help you achieve your goals.</p>
</div>
<div class="trainers-grid">
<div class="trainer-card">
<div class="trainer-image">
<img src="https://images.unsplash.com/photo-1562788869-4ed32648eb72?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Trainer James">
<div class="trainer-social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="far fa-envelope"></i></a>
</div>
</div>
<div class="trainer-info">
<h3>James Wilson</h3>
<p>Strength & Conditioning</p>
<p class="trainer-bio">Former collegiate athlete with 10+ years coaching experience specializing in functional strength training.</p>
<a href="#" class="feature-link">View profile <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="trainer-card">
<div class="trainer-image">
<img src="https://images.unsplash.com/photo-1549476464-37392f717541?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Trainer Sarah">
<div class="trainer-social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="far fa-envelope"></i></a>
</div>
</div>
<div class="trainer-info">
<h3>Sarah Johnson</h3>
<p>Nutrition & Wellness</p>
<p class="trainer-bio">Registered dietitian and certified personal trainer focused on sustainable weight management.</p>
<a href="#" class="feature-link">View profile <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="trainer-card">
<div class="trainer-image">
<img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Trainer Mike">
<div class="trainer-social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="far fa-envelope"></i></a>
</div>
</div>
<div class="trainer-info">
<h3>Mike Rodriguez</h3>
<p>Sports Performance</p>
<p class="trainer-bio">Specializes in athletic performance enhancement and injury prevention for competitive athletes.</p>
<a href="#" class="feature-link">View profile <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="trainer-card">
<div class="trainer-image">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Trainer Lisa">
<div class="trainer-social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="far fa-envelope"></i></a>
</div>
</div>
<div class="trainer-info">
<h3>Lisa Chen</h3>
<p>Mobility & Recovery</p>
<p class="trainer-bio">Expert in corrective exercise and mobility training to improve movement quality and reduce pain.</p>
<a href="#" class="feature-link">View profile <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials" id="testimonials">
<div class="section-title">
<h2>Success Stories</h2>
<p>Hear from our members about their transformative experiences with Vitalis.</p>
</div>
<div class="testimonials-slider">
<div class="testimonial-card">
<div class="testimonial-text">
<p>After trying multiple gyms with little results, Vitalis changed everything for me. The personalized approach and expert guidance helped me lose 30 pounds and completely transform my body in just 4 months.</p>
</div>
<div class="testimonial-author">
<div class="author-image">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Jessica T.">
</div>
<div class="author-info">
<h4>Jessica T.</h4>
<p>Lost 30 lbs in 4 months</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta">
<div class="cta-content">
<h2>Ready to Transform Your Life?</h2>
<p>Take the first step towards your fitness goals today. Schedule your free consultation with one of our expert trainers.</p>
<a href="#contact" class="btn btn-primary">Book Free Session</a>
</div>
</section>
<!-- Footer -->
<footer class="footer" id="contact">
<div class="footer-content">
<div class="footer-column">
<h3>About Vitalis</h3>
<p>Vitalis is a premier fitness center dedicated to helping individuals achieve their health and wellness goals through science-backed training methods and personalized coaching.</p>
<div class="footer-social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#home">Home</a></li>
<li><a href="#features">Our Approach</a></li>
<li><a href="#programs">Programs</a></li>
<li><a href="#trainers">Trainers</a></li>
<li><a href="#testimonials">Success Stories</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Programs</h3>
<ul class="footer-links">
<li><a href="#">Foundation Program</a></li>
<li><a href="#">Performance Program</a></li>
<li><a href="#">Elite Program</a></li>
<li><a href="#">Nutrition Coaching</a></li>
<li><a href="#">Corporate Wellness</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Contact Us</h3>
<div class="contact-info">
<p><i class="fas fa-map-marker-alt"></i> 123 Fitness Ave, Health City, HC 12345</p>
<p><i class="fas fa-phone"></i> (123) 456-7890</p>
<p><i class="fas fa-envelope"></i> info@vitalisfitness.com</p>
<p><i class="fas fa-clock"></i> Mon-Fri: 5:00 AM - 10:00 PM<br>Sat-Sun: 7:00 AM - 8:00 PM</p>
</div>
<div class="newsletter-form">
<h4>Join Our Newsletter</h4>
<input type="email" placeholder="Your Email Address">
<button type="submit">Subscribe</button>
</div>
</div>
</div>
<div class="copyright">
<p>© 2025 Vitalis Health & Fitness. All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
</div>
</footer>
<script>
// Mobile Menu Toggle
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
// Close mobile menu when clicking a link
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Navbar scroll effect
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Simple testimonial slider
let currentTestimonial = 0;
const testimonials = [
{
text: "After trying multiple gyms with little results, Vitalis changed everything for me. The personalized approach and expert guidance helped me lose 30 pounds and completely transform my body in just 4 months.",
name: "Jessica T.",
title: "Lost 30 lbs in 4 months",
image: "https://randomuser.me/api/portraits/women/32.jpg"
},
{
text: "As a competitive athlete, I needed training that would take my performance to the next level. The sports-specific programming at Vitalis helped me increase my vertical jump by 6 inches in 12 weeks.",
name: "Marcus R.",
title: "College Basketball Player",
image: "https://randomuser.me/api/portraits/men/22.jpg"
},
{
text: "After having my second child, I struggled to lose the baby weight. The nutrition coaching and customized workouts helped me get back to my pre-pregnancy weight and actually get in better shape than before!",
name: "Sophia K.",
title: "Postpartum Fitness",
image: "https://randomuser.me/api/portraits/women/45.jpg"
}
];
function updateTestimonial() {
const testimonial = testimonials[currentTestimonial];
const testimonialCard = document.querySelector('.testimonial-card');
testimonialCard.innerHTML = `
<div class="testimonial-text">
<p>${testimonial.text}</p>
</div>
<div class="testimonial-author">
<div class="author-image">
<img src="${testimonial.image}" alt="${testimonial.name}">
</div>
<div class="author-info">
<h4>${testimonial.name}</h4>
<p>${testimonial.title}</p>
</div>
</div>
`;
currentTestimonial = (currentTestimonial + 1) % testimonials.length;
}
// Change testimonial every 5 seconds
updateTestimonial();
setInterval(updateTestimonial, 5000);
</script>
</body>
</html>