generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhistory.html
140 lines (137 loc) · 7.27 KB
/
history.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A brief history of 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 - History</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" href="index.html"><i
class="fa-solid fa-house"></i>Home</a></li>
<li><a class="nav-link active" aria-current="page" href="history.html"><i
class="fa-solid fa-earth-asia"></i>History<span class="sr-only">(Current)</span></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>
<!-- Tutorial by Kevin Powell: https://www.youtube.com/watch?v=UmzFk68Bwdk&t=29s&ab_channel=KevinPowell -->
<!-- Page 1 / Blurred Out Scroll Animation -->
<div>
<article class="position">
<img src="assets/images/history-bgs/japan.jpg" alt="Japanese city street light by lanterns">
<div class="txt-cont fade-out">
<h2> Jiu-Jitsu in Japan </h2>
<h3> (15th - 19th centuries) </h3>
<p> Jujutsu, which translates to "gentle art," originated in Japan and encompassed various
martial arts
techniques for self-defense. It included joint locks, throws, and grappling methods.</p>
</div>
</article>
</div>
<!-- Page 2 / TranslateX Scroll Animation -->
<div>
<article class="position translate">
<div class="txt-cont">
<h2> Judo's Influence </h2>
<h3> (late 19th to early 20th centuries) </h3>
<p> Judo, developed by Jigoro Kano in the late 19th century, was a martial art that emphasized the
concept
of
using an opponent's force against them. Mitsuyo Maeda, a judoka, traveled to Brazil in the early
20th
century and befriended Gastão Gracie.</p>
</div>
</article>
</div>
<!-- Page 3 / TranslateY Scroll Animation-->
<div>
<article class="position">
<img src="assets/images/history-bgs/brazil.jpg" alt="Girl walking infront of wall painting with Brazilian flag">
<div class="txt-cont roll-in">
<h2> Birth of Brazilian Jiu-Jitsu </h2>
<h3> (early 20th century) </h3>
<p> Carlos Gracie, the son of Gastão Gracie, learned Judo from Maeda. Carlos, along with his
brothers,
adapted and modified Judo techniques to create what is now known as Brazilian Jiu-Jitsu. The
focus
shifted towards ground fighting, submissions, and positional control, making BJJ effective for
self-defense and competition. </p>
</div>
</article>
</div>
<!-- Page 4 / TranslateX Scroll Animation -->
<div>
<article class="position translate">
<div class="txt-cont">
<h2> Global Spread </h2>
<h3> (late 20th century - present) </h3>
<p> BJJ gained international recognition through the efforts of the Gracie family and their
students.
The
establishment of the Ultimate Fighting Championship (UFC) in the 1990s further popularized BJJ
as
Royce
Gracie showcased its effectiveness against various martial arts. </p>
</div>
</article>
</div>
</main>
<!-- Contact & Social Media -->
<footer class="end row">
<h2 class="text-center">YOU CAN ALWAYS REACH OUT FOR MORE INFORMATION</h2>
<!-- 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>