generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
334 lines (331 loc) · 18.7 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
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
329
330
331
332
333
334
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="An introduction into Brazilian jiu-jitsu">
<meta name="keywords" content="guide, Brazilian jiu-jitsu, bjj, Martial arts, fighting">
<meta name="author" content="Patrick O'Doherty">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css"
integrity="sha384-BY+fdrpOd3gfeRvTSMT+VUZmA728cfF9Z2G42xpaRkUGu2i3DyzpTURDo5A6CaLK" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"></script>
<script defer src="https://kit.fontawesome.com/7524c78256.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<link href="assets/images/logo/red-kick-logo.png" rel="icon" type="image/x-icon">
<title>Little Origami - Home</title>
</head>
<body>
<header>
<!-- Bootstrap 5 Navigation Bar -->
<nav class="navbar navbar-expand-sm navbar-icon-top navbar-dark bg-dark">
<div class="container">
<!-- Little Origami Logo -->
<a class="navbar-brand d-flex" href="index.html">
<img src="assets/images/logo/red-kick-logo.png" alt="Logo" height="35"
class="d-inline-block align-top">
<h1>Little Origami</h1>
</a>
<!-- Menu Hamburger Animation -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler"
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navigation Links -->
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ms-auto">
<li><a class="nav-link active" aria-current="page" href="index.html"><i
class="fa-solid fa-house"></i>Home<span class="sr-only">(Current)</span></a></li>
<li><a class="nav-link" href="history.html"><i class="fa-solid fa-earth-asia"></i>History</a>
</li>
<li><a class="nav-link" href="contact.html"><i class="fa-solid fa-comments"></i>Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<!-- Bootstrap 5 Carousel -->
<div>
<!-- Hero Banner -->
<div id="hero-banner" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel Pagination -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#hero-banner" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#hero-banner" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#hero-banner" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<!-- Carousel Content -->
<div class="carousel-inner container-xxl">
<div class="carousel-item active">
<img src="assets/images/banner/banner-1.jpg" class="d-block w-100"
alt="Jiu Jitsu students and teachers">
</div>
<div class="carousel-item">
<img src="assets/images/banner/banner-2.jpg" class="d-block w-100"
alt="A man kicking out of water">
</div>
<div class="carousel-item">
<img src="assets/images/banner/banner-3.jpg" class="d-block w-100"
alt="Two men engaged in closed guard.">
</div>
</div>
</div>
</div>
<!-- Introductory Section -->
<div class="row section-padding container-fluid">
<!-- Welcome Article -->
<article class="col-xl-6 intro-cont">
<h3>Welcome To...</h3>
<h2>Little Origami!</h2>
<p>
An introductory website aimed at informing the reader about the evolution and transition of
Jiu-Jitsu
throughout the world.
<br>
<br>
Continue reading to learn more about Jiu-Jitsu and how you can start today!
<br>
<br>
Alternatively, Learn more about the history here: <a href="history.html">Learn More</a>
</p>
</article>
<!-- Embedded Youtube Video of Joe Rogan -->
<figure id="intro-vd" class="col-xl-6 ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/JpRJLg9Lq5g?si=Wb84fRloQ-n83cEd"
title="Joe Rogan on learning Jiu-Jitsu"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</figure>
</div>
<!-- Technique Cards With 3D Effect -->
<section class="row section-padding alt-bg container-fluid">
<!-- Tutorial by Anand Vunnam: https://bbbootstrap.com/snippets/bootstrap-5-flipping-cards-for-catalog-29291738 -->
<div class="card-space">
<!-- Takedown Card -->
<div class="tech-card">
<div class="card-axis">
<div>
<img src="assets/images/flip-cards/takedown.jpg"
alt="A Judo takedown using the nagasaki technique">
</div>
<div class="content">
<div>
<h3>Takedowns</h3>
<p>
Takedowns are like the initial move in a fascinating game of physical
chess. They're the gateway to an engaging world where you can showcase your skills,
boost your
confidence, and stay fit. Learning takedowns is not just about the physical aspect;
it's about
self-discovery, personal growth, and enjoying a dynamic community of like-minded
individuals. If
you're
looking for a fun and empowering way to challenge yourself, stepping onto the mat
and mastering
takedowns in BJJ is the perfect start.
</p>
</div>
</div>
</div>
</div>
<!-- Submission Card -->
<div class="tech-card">
<div class="card-axis">
<div>
<img src="assets/images/flip-cards/submission.jpg"
alt="An armbar proformed from mount in a tournament">
</div>
<div class="content">
<div>
<h3>Submissions</h3>
<p>Submissions are like the secret techniques that
turn the tide in a match. They're the game-changers, allowing you to skillfully
apply holds or locks
that make your opponent concede. Learning submissions in BJJ is not just about
physical prowess; it's
about the satisfaction of unraveling the puzzle of your opponent's defenses. It's a
journey of
mastering
techniques, boosting confidence, and joining a community that values skill and
camaraderie. So, if
you're looking for an exciting and empowering way to challenge yourself, stepping
into BJJ and
exploring
the world of submissions is the perfect adventure to embark on.
</p>
</div>
</div>
</div>
</div>
<!-- Escape Card -->
<div class="tech-card">
<div class="card-axis">
<div>
<img src="assets/images/flip-cards/escape.jpg" alt="A man kicking through the air">
</div>
<div class="content">
<div>
<h3>Escaping</h3>
<p>Escaping is like the art of turning the tables when you find
yourself in a
tough spot. It's the skill of wriggling out of tricky situations, reclaiming
control, and reversing
the
game. Learning escapes in BJJ is not just about physical agility; it's about the
satisfaction of
outsmarting your opponent and creating opportunities for a comeback. It's a journey
of resilience,
problem-solving, and being part of a community that values both defense and offense.
So, if you're
seeking a dynamic and empowering way to challenge yourself, stepping into BJJ and
mastering escapes is
the perfect route to take on your martial arts journey.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Beginners Guide -->
<section class="row section-padding container-fluid">
<div class="col-lg-8 d-flex">
<!-- Bootstrap 5 Carousel -->
<div id="info-deck" class="carousel slide" data-bs-ride="false">
<!-- Carousel Pagination -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#info-deck" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#info-deck" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#info-deck" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#info-deck" data-bs-slide-to="3"
aria-label="Slide 4"></button>
<button type="button" data-bs-target="#info-deck" data-bs-slide-to="4"
aria-label="Slide 5"></button>
</div>
<!-- Carousel Content -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/info-deck/card-paper.jpg" class="d-block w-100" alt="...">
<!-- First Slide -->
<div class="carousel-caption firstslide">
<h2> Beginner's Guide </h2>
</div>
</div>
<!-- Second Slide -->
<div class="carousel-item">
<img src="assets/images/info-deck/card-paper.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h2>Understand Jiu-Jitsu:</h2>
<p>Jiu-Jitsu, also known as Brazilian Jiu-Jitsu (BJJ), is a martial art and combat sport
that focuses on
ground fighting and submission holds. It emphasizes technique and leverage to allow
a smaller person
to
defend themselves against a larger opponent.</p>
</div>
</div>
<!-- Third Slide -->
<div class="carousel-item">
<img src="assets/images/info-deck/card-paper.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h2> Find A Gym: </h2>
<p>Look for reputable Jiu-Jitsu schools or academies in your area. Consider the
instructor's experience,
the
school's reputation, and the overall atmosphere.</p>
</div>
</div>
<!-- Fourth Slide -->
<div class="carousel-item">
<img src="assets/images/info-deck/card-paper.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h2> Getting Started: </h2>
<p> Clothing: your first class, wear comfortable athletic clothing like a t-shirt and
board shorts or
leggings. As you progress, you may invest in a Jiu-Jitsu gi (uniform).
<br>
Hygiene: Maintain good hygiene. Keep your fingernails and toenails trimmed, and
always wash your
training gear after each session.
</p>
</div>
</div>
<!-- Fifth Slide -->
<div class="carousel-item">
<img src="assets/images/info-deck/card-paper.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption">
<h2> Etiquette and Respect:</h2>
<p> Bow In/Out: Show respect by bowing in and out at the beginning and end of each
class. This is a
common practice in many Jiu-Jitsu schools.
<br>
Respect Your Partner: Jiu-Jitsu is a collaborative effort, and everyone is there to
learn and improve
together.
</p>
</div>
</div>
</div>
<!-- Carousel Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#info-deck"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#info-deck"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Demonstration Video -->
<figure class="vid0 ratio ratio-16x9">
<video src="assets/video/belt-tie.mp4" autoplay muted loop controls></video>
</figure>
<!-- Demonstration Video -->
<figure class="vid1 ratio ratio-16x9">
<video src="assets/video/bowing.mp4" autoplay muted loop controls></video>
</figure>
<!-- Demonstration Video -->
<figure class="vid2 ratio ratio-16x9">
<video src="assets/video/teamwork.mp4" autoplay muted loop controls></video>
</figure>
</section>
</main>
<!-- Contact & Social Media -->
<footer class="end row container-fluid">
<div class="text-center">
<h2>YOU CAN ALWAYS REACH OUT FOR MORE INFORMATION</h2>
</div>
<!-- Social Media Links -->
<div class="col-sm-6">
<h3 class="text-center">Find Us On Social Media:</h3>
<ul class="d-flex">
<li><a href="https://en-gb.facebook.com/" target="_blank"><i class="fa-brands fa-facebook"></i></a></li>
<li><a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="https://www.snapchat.com/" target="_blank"><i class="fa-brands fa-snapchat"></i></a></li>
<li><a href="https://twitter.com/?lang=en" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
</li>
</ul>
</div>
<!-- Contact / Call To Action -->
<div class="footer-contact col-sm-6">
<h3 class="text-center"> Click Here To Contact Us Directly:</h3>
<a href="contact.html" class="btn btn-warning"> Contact Us </a>
</div>
</footer>
</body>
</html>