-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
275 lines (271 loc) · 16.4 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
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
<!DOCTYPE html>
<html lang="en" class="h-full">
<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" />
<link rel="icon" type="image/svg+xml" href="./img/diamond.svg" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./main.css">
<script defer src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.4/dist/alpine.min.js"></script>
<title>Team Diamond - Nantwich's Premier MMA Gym</title>
</head>
<body class="bg-trueGrey-50 font-rubik min-h-screen">
<div id="hero" class="relative bg-trueGrey-800 overflow-hidden mb-8 lg:mb-12">
<div class="max-w-7xl mx-auto">
<div x-data="{ menuOpen: false }"
class="relative z-10 pb-8 bg-trueGrey-800 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2"
fill="#262626" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<div>
<div class="relative pt-6 px-4 sm:px-6 lg:pl-6 lg:pr-0">
<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start animate-slideInTop"
aria-label="Global">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full md:w-auto">
<div class="w-36 md:w-40 lg:w-44">
<a href="/">
<span class="sr-only">Team Diamond</span>
<img class="w-full" src="https://d2s9wmnb8wwjnh.cloudfront.net/td-logo.png"
alt="Team Diamond logo">
</a>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button @click="menuOpen = true" type="button"
class="bg-trueGrey-800 rounded-md p-2 inline-flex items-center justify-center text-blue-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-300"
aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<ul class="hidden md:block md:ml-16 md:space-x-8 text-blue-300 ">
<li class="inline"><a href="./classes.html"
class="font-medium border-b-2 border-t-2 border-transparent hover:border-b-2 hover:border-t-2 hover:border-trueGrey-50 transform transition duration-200">Classes</a>
</li>
<li class="inline"><a href="./instructors.html"
class="font-medium border-b-2 border-t-2 border-transparent hover:border-b-2 hover:border-t-2 hover:border-trueGrey-50 transform transition duration-200">Instructors</a>
</li>
<li class="inline"><a href="./about.html"
class="font-medium border-b-2 border-t-2 border-transparent hover:border-b-2 hover:border-t-2 hover:border-trueGrey-50 transform transition duration-200">About</a>
</li>
<li class="inline"><a href="./contact.html"
class="font-medium border-b-2 border-t-2 border-transparent hover:border-b-2 hover:border-t-2 hover:border-trueGrey-50 transform transition duration-200">Contact
Us</a></li>
</ul>
</nav>
</div>
<div id="mobile__menu" x-show.transition.duration.150ms="menuOpen"
class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
<div class="rounded-lg shadow-md bg-trueGrey-50 ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="px-5 pt-4 flex items-center justify-between">
<div class="h-8 w-8">
<a href="/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="#70bbef" d="M145.454 209.709L249.289 483.58h12.345l103.834-273.871z" />
<path
d="M232.914 474.449c4.335 4.886 10.17 7.927 16.375 9.132L145.454 209.71.322 163.994c.661 4.906-15.025-18.303 232.592 310.455z"
fill="#9cd7f2" />
<path
d="M51.695 180.177L.322 163.995c.661 4.905-15.024-18.304 232.592 310.453 3.21 3.618 7.245 6.219 11.642 7.817L51.695 180.177z"
fill="#71c5db" />
<g fill="#9cd7f2">
<path
d="M86.074 51.099l59.38 158.611L255.461 84.212l-167.38-34.11c-.727.316-1.4.651-2.007.997zM365.468 209.71L261.634 483.58c6.205-1.205 12.039-4.246 16.375-9.132 64.394-85.292 233.353-308.79 233.863-310.854L365.468 209.71zM365.468 209.71l59.361-158.56c-.7-.398-1.396-.735-2.074-1.03L255.461 84.212 365.468 209.71z" />
</g>
<path fill="#57addd" d="M145.454 209.709h220.014L255.461 84.212z" />
<path
d="M86.074 51.099c-3.916 2.227-4.52 3.544-10.676 11.438C-4.743 165.306-.551 157.536.322 163.994l145.132 45.715-59.38-158.61z"
fill="#70bbef" />
<path
d="M51.695 180.177L87.063 53.74l-.989-2.642c-3.915 2.227-4.52 3.544-10.676 11.438-80.142 102.77-75.949 95-75.077 101.458l51.374 16.183z"
fill="#57addd" />
<path
d="M365.468 209.71l146.403-46.115c.413-2.149-.209-3.422-1.25-4.756-72.603-93.205-82.672-106.93-85.792-107.689l-59.361 158.56z"
fill="#70bbef" />
<path
d="M255.461 84.212L422.756 50.12c-3.521-1.527-6.327-1.748-6.433-1.767l-134.829-18.16c-42.419-5.714-60.701 2.923-187.247 18.208-.195.042-2.915.287-6.166 1.702l167.38 34.109z"
fill="#57addd" />
</svg></a>
</div>
<div class="-mr-2">
<button @click="menuOpen = false" type="button"
class="bg-trueGrey-50 rounded-md p-2 inline-flex items-center justify-center text-trueGrey-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-300">
<span class="sr-only">Close main menu</span>
<svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="px-2 pt-2 pb-3 space-y-1 text-trueGrey-800">
<a href="./classes.html" class="block px-3 py-2 rounded-md text-base font-medium">Classes</a>
<a href="./instructors.html" class="block px-3 py-2 rounded-md text-base font-medium">Instructors</a>
<a href="./about.html" class="block px-3 py-2 rounded-md text-base font-medium">About</a>
<a href="./contact.html" class="block px-3 py-2 rounded-md text-base font-medium">Contact Us</a>
</div>
</div>
</div>
</div>
<main
class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28 animate-slideInFast">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-bold text-grey-50 sm:text-5xl md:text-6xl">
<span class="block xl:inline">The home of</span>
<span class="block text-blue-300 xl:inline">champions.</span>
</h1>
<p
class="mt-3 text-base text-trueGrey-400 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Interested in getting fit, gaining confidence and learning an effective form of self defence?
Join us at Team Diamond, Nantwich's premier MMA gym.
</p>
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<a href="./contact.html"
class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium tracking-wide rounded-md text-trueGrey-50 bg-blue-400 hover:bg-blue-500 transform transition duration-200 md:py-4 md:text-lg md:px-10">
Find out more!
</a>
</div>
<div class="mt-3 sm:mt-0 sm:ml-3">
<a href="./classes.html"
class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium tracking-wide rounded-md text-blue-400 bg-trueGrey-50 hover:bg-trueGrey-200 transform transition duration-200 md:py-4 md:text-lg md:px-10">
Class Timetable
</a>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
src="https://d2s9wmnb8wwjnh.cloudfront.net/hero-img.webp" alt="Kickboxer">
</div>
</div>
<section id="testimonials" class="mb-6 animate-slideInSlow">
<div class="w-full max-w-7xl mx-auto">
<h2 class="text-center font-semibold text-trueGrey-800 text-xl md:text-2xl">What our members say about us:</h2>
<div class="grid md:grid-cols-2 sm:grid-cols-1 lg:grid-cols-3 gap-x-6 mx-5 py-10 md:p-10">
<div
class="w-full mx-auto rounded-lg bg-white border border-trueGrey-200 p-5 text-trueGrey-800 font-light mb-6">
<div class="w-full flex mb-4 items-center">
<div class="flex-grow pl-3">
<h6 class="font-bold text-trueGrey-600">Andrew Selby</h6>
</div>
</div>
<div class="w-full">
<p class="text-sm leading-tight"><span
class="text-lg leading-none italic font-bold text-trueGrey-400 mr-1">"</span>I started the BJJ class
just under 2 months ago to fill the gaps in my game, concentrate on improving my jiu jitsu in the Gi and
transferring some skills to my no gi game. Brilliant gym and group of guys/girls to train with.<span
class="text-lg leading-none italic font-bold text-trueGrey-400 ml-1">"</span></p>
</div>
</div>
<div
class="w-full mx-auto rounded-lg bg-white border border-trueGrey-200 p-5 text-trueGrey-800 font-light mb-6">
<div class="w-full flex mb-4 items-center">
<div class="flex-grow pl-3">
<h6 class="font-bold text-trueGrey-600">Paul Holland</h6>
</div>
</div>
<div class="w-full">
<p class="text-sm leading-tight"><span
class="text-lg leading-none italic font-bold text-trueGrey-400 mr-1">"</span>Superb training venue with
great experienced staff and excellent equipment. They offer a range of classes to suit the field of
martial arts that you wish to pursue. BJJ, Thai Boxing and Boxing classes plus fitness circuits and
Yoga.<span class="text-lg leading-none italic font-bold text-trueGrey-400 ml-1">"</span></p>
</div>
</div>
<div
class="w-full mx-auto rounded-lg bg-white border border-trueGrey-200 p-5 text-trueGrey-800 font-light mb-6">
<div class="w-full flex mb-4 items-center">
<div class="flex-grow pl-3">
<h6 class="font-bold text-trueGrey-600">Ross Brinsden</h6>
</div>
</div>
<div class="w-full">
<p class="text-sm leading-tight"><span
class="text-lg leading-none italic font-bold text-trueGrey-400 mr-1">"</span>I honestly can’t recommend
this gym enough. The coaches and students are very welcoming. There is a really good, friendly atmosphere
tempered with a solid work ethic – when the training starts everyone gets their heads down and gives it
their all. <span class="text-lg leading-none italic font-bold text-trueGrey-400 ml-1">"</span></p>
</div>
</div>
<div
class="w-full mx-auto rounded-lg bg-white border border-trueGrey-200 p-5 text-trueGrey-800 font-light mb-6">
<div class="w-full flex mb-4 items-center">
<div class="flex-grow pl-3">
<h6 class="font-bold text-trueGrey-600">Ken Beech</h6>
</div>
</div>
<div class="w-full">
<p class="text-sm leading-tight"><span
class="text-lg leading-none italic font-bold text-trueGrey-400 mr-1">"</span>If you are bored with your
current gym, workout or discipline and are looking to increase your fitness, lose some weight, or learn
the art of muay thai then I really can’t praise the gym highly enough.<span
class="text-lg leading-none italic font-bold text-trueGrey-400 ml-1">"</span></p>
</div>
</div>
<div
class="w-full mx-auto rounded-lg bg-white border border-trueGrey-200 p-5 text-trueGrey-800 font-light mb-6">
<div class="w-full flex mb-4 items-center">
<div class="flex-grow pl-3">
<h6 class="font-bold text-trueGrey-600">Hazel Robinson</h6>
</div>
</div>
<div class="w-full">
<p class="text-sm leading-tight"><span
class="text-lg leading-none italic font-bold text-trueGrey-400 mr-1">"</span>Best atmosphere, friendly
environment and the best place to go for an amazing workout whether for fitness or training to compete.
<span class="text-lg leading-none italic font-bold text-trueGrey-400 ml-1">"</span>
</p>
</div>
</div>
<div
class="w-full mx-auto rounded-lg bg-white border border-trueGrey-200 p-5 text-trueGrey-800 font-light mb-6">
<div class="w-full flex mb-4 items-center">
<div class="flex-grow pl-3">
<h6 class="font-bold text-trueGrey-600">Lee Cooke</h6>
</div>
</div>
<div class="w-full">
<p class="text-sm leading-tight"><span
class="text-lg leading-none italic font-bold text-trueGrey-400 mr-1">"</span>Awesome venue to train at
with a wide variety of classes to participate in.<span
class="text-lg leading-none italic font-bold text-trueGrey-400 ml-1">"</span></p>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-white">
<div
class="max-w-7xl mx-auto py-4 lg:py-10 px-4 sm:px-6 lg:px-8 md:flex md:items-center justify-center md:justify-between">
<div class="flex justify-center space-x-6 md:order-2">
<a href="mailto:beastmasters-nantwich@hotmail.com"
class="text-xl md:text-2xl transition transform duration-300 text-trueGrey-400 ease-in-out hover:scale-125 hover:text-blue-300"
alt="email"><i class="far fa-envelope"></i></a>
<a href="https://www.facebook.com/beastmastersnantwich/" target="_blank" rel="noopener noreferrer"
class="text-xl md:text-2xl transition transform duration-300 text-trueGrey-400 ease-in-out hover:scale-125 hover:text-blue-300"
alt="facebook"><i class="fab fa-facebook"></i></a>
</div>
<div class="mt-4 md:mt-0 md:order-1">
<p class="text-center text-base text-trueGrey-400">
© 2021 Team Diamond. All rights reserved.
</p>
</div>
</div>
</footer>
</body>
<script type="module" src="./main.js"></script>
</html>