generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
team.html
163 lines (163 loc) · 11.5 KB
/
team.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
<!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">
<meta name="description"
content="Tooting boxing club is an elite, high-end gym designed for boxing enthusiasts to learn from experienced coaches">
<meta name="keywords"
content="boxing gym, boxing london, boxing, boxercise, sparring, boxing club, boxing tooting, london, tooting">
<meta name="author" content="Jamie Letts">
<script src="https://kit.fontawesome.com/177beb570f.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon.ico">
<title>Tooting Boxing CLub</title>
</head>
<body>
<header>
<!-- Nav Bar -->
<!-- Code samples taken from Boostrap 5 snippet, see Readme file for more info -->
<nav class="navbar navbar-black navbar-expand-lg">
<a href="index.html" class="navbar-brand" aria-label="Go to home page">
<img src="assets/images/glove-logo.svg" alt="Tooting boxing club logo" class="d-inline-block align-text-top">
</a>
<!-- Code samples taken from Message Bird snippet, see Readme file for more info -->
<a href="https://api.whatsapp.com/send?phone=447794059415" aria-label="Message us on whatsapp (opens new tab in whatsapp app)" class="whatsapp" target="_blank"><i class="fa-brands fa-whatsapp"></i>
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle"><span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-2"><a class="nav-link" aria-label="Go to home pahe" href="index.html">Home</a></li>
<li class="nav-item ms-2"><a class="nav-link" aria-label="Go to the about page" href="about.html">About</a></li>
<li class="active nav-item ms-2"><a class="nav-link" aria-label="Team page refreshes" href="team.html">The Team</a></li>
<li class="nav-item ms-2"><a class="nav-link" aria-label="Go to the prices page" href="prices.html">Prices</a></li>
<li class="nav-item ms-2"><a class="nav-link" aria-label="Go to the schedule page" href="schedule.html">Class Schedule</a></li>
<li class="nav-item ms-2"><a class="nav-link" aria-label="Go to contact form page" href="contact.html">Get In Touch</a></li>
<li class="nav-item ms-2"><a class="nav-link" aria-label="Go to sign in / sign up modal" href="#"
data-bs-toggle="modal" data-bs-target="#SignInModal"><i class="fa-solid fa-user"></i> Sign In</a></li>
</ul>
</div>
</nav>
</header>
<!--Main Content-->
<div class="team-title" role="img" aria-label="man in a boxing gym shadow boxing">
<div class="row">
<div class="col-12 text-center">
<h1>MEET THE TEAM</h1>
</div>
</div>
</div>
<section class="container-fluid text-center">
<div class="row coaches">
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="container coach">
<img src="assets/images/coaches/lucy.webp" alt="Picture of boxer Lucy Philips">
<h2>Lucy Philips</h2>
<p><span>'Lucy The Lion'</span> she's all smiles in the gym but a beast in the ring! Our very own pocket rocket will get you sweating!</p>
<a href="schedule.html" class="button" aria-label="Go to schedule page">Book Now</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="container coach">
<img src="assets/images/coaches/mark.webp" alt="Picture of boxer Mark Strong">
<h2>Mark Strong</h2>
<p><span>'Too Strong'</span> is a British and European champ who's defended his title 5 times. Expect knowledge and passion poured into Mark's classes.</p>
<a href="schedule.html" class="button" aria-label="Go to schedule page">Book Now</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="container coach">
<img src="assets/images/coaches/chris.webp" alt="Picture of boxer Chris Bridge">
<h2>Chris Bridge</h2>
<p><span>'The Barbarian'</span> known for his brutal fighting style but he's honeslty one of nicest guys you'll ever meet. This 2 time world champ is all smiles, but don't let that make you think his classes are easy.</p>
<a href="schedule.html" class="button" aria-label="Go to schedule page">Book Now</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="container coach">
<img src="assets/images/coaches/tom.webp" alt="Picture of boxer Tom Little">
<h2>Tom Little</h2>
<p><span>'Iron Fists'</span> Is a 5 times National Champ and Commonwealth Games Gold Medalist. He dreams of being a World Champ and knows how exactly how to get the best out of you.</p>
<a href="schedule.html" class="button" aria-label="Go to schedule page">Book Now</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="container coach">
<img src="assets/images/coaches/frank.webp" alt="Picture of boxer Frank Edwards">
<h2>Frank Edwards</h2>
<p>Franky <span>'The Edge'</span> has been coaching Amatuers and Professionals now for over 10 years. His experience coaching the sweet science is second to none!</p>
<a href="schedule.html" class="button" aria-label="Go to schedule page">Book Now</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="container coach">
<img src="assets/images/coaches/mary.webp" alt="Picture of boxer Mary Scott">
<h2>Mary Scott</h2>
<p><span>'Hot Scotch'</span> an Olympian, Nation champ, Southern Area Title Holder and soon-to-be British Champ. Expect fast pace, high energy and a lot of house music in Mary's classes!</p>
<a href="schedule.html" class="button" aria-label="Go to schedule page">Book Now</a>
</div>
</div>
</div>
</section>
<!-- Modal Sign Up-->
<!-- Code samples taken from Boostrap 5 snippet, see Readme file for more info -->
<div class="modal" id="SignInModal" tabindex="-1" aria-labelledby="SignInModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="sign-in">
<h1 class="text-center">Sign In</h1>
<form class="sign-in-form">
<div class="mb-3 mt-4">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" required>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" required>
</div>
<button type="submit" class="btn btn-secondary">LOGIN</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<p>Not a member? <a href="#">Sign Up Now</a></p>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Contact / Socials -->
<footer>
<div class="container-fluid footer no-gutters">
<div class="row">
<div class="col-8 contact-details">
<p><i class="fa-solid fa-phone hidden" aria-hidden="true"></i>07794059415</p>
<p><i class="fa-solid fa-envelope hidden" aria-hidden="true"></i><a class="email" href="mailto:info@tootingboxingclub.co.uk">info@tootingboxingclub.co.uk</a></p>
<p><i class="fa-solid fa-house hidden" aria-hidden="true"></i>Tooting Common, London, SW17 4BC</p>
<ul class="social-links-sm">
<li class="list-inline-item"><a href="https://www.facebook.com" aria-label="Go to facebook page (opens in new tab)" target="_blank"><i class="fa-brands fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="https://www.twitter.com" aria-label="Go to twitter page (opens in new tab)" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com" aria-label="Go to instagram page (opens in new tab)" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
<div class="col-4">
<ul class="social-links">
<li class="list-inline-item"><a href="https://www.facebook.com" aria-label="Go to facebook page (opens in new tab)" target="_blank"><i class="fa-brands fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="https://www.twitter.com" aria-label="Go to twitter page (opens in new tab)" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com" aria-label="Go to instagram page (opens in new tab)" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
</script>
</body>
</html>