-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (137 loc) · 5.36 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fitness Trainer Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Fitness Trainer</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="hero bg-primary text-white text-center py-5">
<div class="container">
<h1 class="display-4">Get Fit and Stay Healthy</h1>
<p class="lead">Join our fitness programs and achieve your fitness goals</p>
<a href="#" class="btn btn-light btn-lg">Get Started</a>
</div>
</header>
<!-- About Section -->
<section class="about py-5">
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="path/to/about-image.jpg" alt="About" class="img-fluid">
</div>
<div class="col-lg-6 mt-3 mt-lg-0">
<h2 class="display-5">About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam felis, lacinia ac urna nec,
bibendum fermentum purus. In hac habitasse platea dictumst.</p>
<p>Fusce ut nisi quis est rutrum ultricies. Phasellus dignissim, nisi sit amet scelerisque tincidunt,
sapien lorem sodales ex, vel egestas orci augue nec nulla.</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services bg-light py-5">
<div class="container">
<h2 class="display-5 text-center mb-5">Our Services</h2>
<div class="row">
<div class="col-md-4">
<div class="card mb-4">
<i class="fas fa-dumbbell fa-3x text-primary mx-auto mt-4"></i>
<div class="card-body">
<h4 class="card-title">Personal Training</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<i class="fas fa-heartbeat fa-3x text-primary mx-auto mt-4"></i>
<div class="card-body">
<h4 class="card-title">Group Fitness</h4>
<p class="card-text">Fusce ut nisi quis est rutrum ultricies.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<i class="fas fa-running fa-3x text-primary mx-auto mt-4"></i>
<div class="card-body">
<h4 class="card-title">Cardio Workouts</h4>
<p class="card-text">Phasellus dignissim, nisi sit amet scelerisque tincidunt.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact py-5">
<div class="container">
<h2 class="display-5 text-center mb-5">Contact Us</h2>
<div class="row">
<div class="col-md-6">
<form>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Your Name">
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="Your Email">
</div>
<div class="mb-3">
<textarea class="form-control" rows="5" placeholder="Your Message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h4>Location</h4>
<p>123 Fitness Street, City, Country</p>
<h4>Email</h4>
<p>[email protected]</p>
<h4>Phone</h4>
<p>+1234567890</p>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<footer class="footer bg-dark text-white text-center py-3">
<p>© 2023 Fitness Trainer. All rights reserved.</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>
</body>
</html>