-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
305 lines (299 loc) · 15.1 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home || Uchiha</title>
<link rel="stylesheet" href="./css/master.css">
<link rel="icon" href="./pictures/mainPage/icon.png">
<!-- Swiper -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
</head>
<body>
<header>
<div class="tab">
<a href="#Info">Info</a>
</div>
<!-- <div class="">
Tab 2
</div> -->
<div class="middle">
<img src="./pictures/mainPage/icon.png" alt="UchihaClanLogo">
<div class="clan__name">
Uchiha Clan
</div>
</div>
<!-- <div class="">
Tab 3
</div> -->
<div class="tab">
<a href="#Contacts">Contacts</a>
</div>
</header>
<nav class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./pictures/mainPage/0.jpg" alt="Madara Uchiha">
<div class="uchiha__name">
Madara Uchiha
</div>
</div>
<div class="swiper-slide">
<img class="swiper-slide" src="./pictures/mainPage/1.jpg" alt="Izuna Uchiha">
<div class="uchiha__name">
Izuna Uchiha
</div>
</div>
<div class="swiper-slide">
<img class="swiper-slide" src="./pictures/mainPage/2.jpg" alt="Kagami Uchiha">
<div class="uchiha__name">
Kagami Uchiha
</div>
</div>
<div class="swiper-slide">
<img class="swiper-slide" src="./pictures/mainPage/3.jpeg" alt="Fugaku Uchiha">
<div class="uchiha__name">
Fugaku Uchiha
</div>
</div>
<div class="swiper-slide">
<img class="swiper-slide" src="./pictures/mainPage/4.jpg" alt="Obito Uchiha">
<div class="uchiha__name">
Obito Uchiha
</div>
</div>
<div class="swiper-slide">
<img class="swiper-slide" src="./pictures/mainPage/5.jpg" alt="Shisui Uchiha">
<div class="uchiha__name">
Shisui Uchiha
</div>
</div>
<div class="swiper-slide">
<img class="swiper-slide" src="./pictures/mainPage/6.jpg" alt="Itachi Uchiha">
<div class="uchiha__name">
Itachi Uchiha
</div>
</div>
<div class="swiper-slide">
<img class="swiper-slide" src="./pictures/mainPage/7.jpg" alt="Sasuke Uchiha">
<div class="uchiha__name">
Sasuke Uchiha
</div>
</div>
<div class="swiper-slide">
<img class="swiper-slide" src="./pictures/mainPage/8.jpg" alt="Sarada Uchiha">
<div class="uchiha__name">
Sarada Uchiha
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</nav>
<div class="life__lesson">
The concept of hope is nothing more than giving up. A word that holds no true meaning.
</div>
<main class="main" id="Info">
<div class="main__container">
<div class="main__text text-main">
<!-- <div class="text-main__general">
The Uchiha Clan (うちは一族, Uchiha Ichizoku) is one of the four noble clans of Konohagakure, reputed to be the village's strongest because of their Sharingan and natural battle prowess. After helping found Konoha decades ago, the Uchiha grew increasingly isolated from the village's affairs, culminating in most of their deaths during the Uchiha Clan Downfall. Few Uchiha now survive into the present day.
</div> -->
<div class="text-main__title">
<h1><span>Who is Uchiha?</span></h1>
<p>
Uchiha is a fictional clan in "Naruto" anime series.
<br>Members (Uchihas) of the Uchiha clan are considered to feel the deep empathy and to love more than other clans.
<br>However, Uchihas believed that they natural ability to love is a weakness. Thus, they partly hid any signs of affection, and that in turn made them look as the most evil clan.
<br>In fact, Uchihas experience love deep inside their hearts. Nevertheless, when an Uchiha experiences considerable emotional distress or loses intimate person (like parent, siblings, friends)
<br>Uchiha's strong sense of love will transform into a sense of hatred towards offenders and desire to revenge.
<br>
That is the nature of the Uchiha ...
</p>
</div>
<div class="text-main__title">
<h1><span>General Abilities<span></h1>
<p>
<br>Uchihas are innately physically strong and have potent chakra (energy to use nature styles) since they are descendants of Otsutsuki clan.
<br>Uchihas are renowned for their "Sharingan" that empowers their skills; the "Sharingan" type is the most powerful visual kekkei genkai.
<br>However, Uchiha is not the strongest clan. <br>Senju clan is the strongest one and they are the only ones who were able to confront Uchihas.
<br>Uchiha clan and Senju clan were always in rivalry.
</p>
<!-- <p>
The Uchiha were known for having an innate aptitude for all combat-oriented skills and an advanced growth rate. They also have an especially potent chakra quality as well as a natural affinity for the fire nature transformation; Uchiha are not truly considered adults until they can successfully perform the Fire Release: Great Fireball Technique. Exceptional Uchiha have such skill with Fire Release that either multiple Water Release users working in tandem or a similarly skilled Water Release user are required to extinguish their flames. Uchiha also frequently use ninja tools in combat, being best known for their use of shuriken. <br>
</p>
<p> -->
<!-- <span>The Uchiha clan are most feared for their dōjutsu kekkei genkai, the Sharingan. They can use their Sharingan to see chakra, cast various genjutsu, and, most infamously, copy opponents' jutsu. The Sharingan is such a versatile ability that many ninja consider it wiser to flee than to face an Uchiha in one-on-one combat. Sharingan can be evolved into Mangekyō Sharingan by experiencing loss of a loved one, granting the user new and more powerful jutsu. Overuse of the Mangekyō eventually robs the Mangekyō of its sight, something that can only be restored by receiving another's eyes, preferably a sibling's, to create "eternal" Mangekyō. The Mangekyō's mechanics were long poorly misunderstood by the Uchiha, causing many to personally kill their loved ones to gain power.</span>
</p> -->
</div>
<div class="text-main__title">
<h1><span>What is Sharingan?</span></h1>
<p>
Sharingan is kekkei genkai (put simply, chakra). This chakra is produced in a brain of an Uchiha and interacts with the ophthalmic nerve that results in the unique shape of eye pattern.
Sharingan provides an ability to see the chakra flow, copy techniques, see person's inner self, crearte illusions and many more dangerous abilities.
Regarding the shape of the eye pattern, it is true that the eyes are the windows to the soul. That means that the more complicated eye pattern an Uchiha possess, the more he suffered ...
<br><br>
There is more ominous thing – Mangekyo Sharingan. Mangekyo Sharingan provides power to awaken secret techniques (and they are even more powerful) of the Uchiha Clan.
<br>Some of those techniques are Amaterasu (black flame that does not go out until the target it burnt completely), Susanoo (impenetrable in defense and destructive in attack), Kamui (ability to teleport between dimensions) ...
<br>To awaken Mangekyo Sharingan an Uchiha has to kill an inmate person such as friend, sibling ...
<br>However, there is huge drawback of using Mangekyo Sharingan. <br>Every time an Uchiha uses Mangekyo Sharingan, his/her eyesight becomes worse ... and the Uchiha will be doomed to the fate of becoming blind (no more power of the sharingan) ...
<br>Well ... a user of Mangekyo Sharingan can avert such fate by transplating sibling's eyes ...
<br>That makes an Uchiha posses Eternal Mangekyo Sharingan that provides limitless power ...
</p>
<img class="sharingan" src="./pictures/mainPage/sharingan.png" alt="">
</div>
<div class="text-main__title">
<h1><span>Renowned Uchihas</span></h1>
<p>
<p>
<span style="color: red;">Madara Uchiha</span> – the strongest Uchiha and the first one to awaken Eternal Mangekyo Sharingan and Rinnegan.
<br>
<span style="color: red;">Obito Uchiha</span> – his Mangekyo Sharingan provides unique ability: Kamui. During the fight, Obito could leave an impression that physical attacks pass through him since he could transport part of his body to different dimension. Was manipulated by Madara.
<br>
<span style="color: red;">Shisui Uchiha</span> – or "Shisui the Teleporter". He was very fast ninja and possesed Kotoamatsukami, the most powerful genjutsu.
<br>
<span style="color: red;">Itachi Uchiha</span> – he could basically read a person as an open book thanks to his mastery of the Sharingan. Shusui's best friend.
<br>
<span style="color: red;">Sasuke Uchiha</span> – the second one to awaken Eternal Mangekyo Sharingan and Rinnegan. Itachi's little brother.
</p>
</p>
</div>
</div>
</div>
</main>
<footer class="footer" id="Contacts">
<div class="footer__content">
<a class="footer__logo">
<img src="pictures/mainPage/icon.png" alt="">
<span>Uchiha Clan</span>
</a>
<div class="footer__container">
<div class="footer__column column-footer">
<div class="column-footer__photo">
<img src="pictures/mainPage/profilePhoto_1.jpg" alt="">
</div>
<div class="column-footer__text">
<span>Amirkhon Agzamov aka <a href="https://github.com/AAgzamov" target="_blank">AAgzamov</a></span><br>
<span>Email - [email protected]</span>
</div>
</div>
<div class="footer__column column-footer">
<a href="https://github.com/AAgzamov/UchihaClan" class="column-footer__logo" target="_blank">
<img src="pictures/mainPage/gitHubIcon.png" alt="">
</a>
</div>
<div class="footer__column column-footer">
<div class="column-footer__photo">
<img src="pictures/mainPage/profilePhoto_2.jpg" alt="">
</div>
<div class="column-footer__text">
<span>Sardorbek Ruziev aka <a href="https://github.com/MorkovchaForce" target="_blank">MorkovchaForce</a></span><br>
<span>Email - [email protected]</span>
</div>
</div>
</div>
</div>
</footer>
<div class="quote">
<div class="quote__text">
In this world, wherever there is <span>light</span> – there are also <span>shadows</span>.<br>
As long as the concept of <span>winners</span> exists, there must also be <span>losers</span>.<br>
The selfish desire of wanting to maintain <span>peace</span> causes <span>wars</span> and <span>hatred</span>
is born to protect <span>love</span>.
</div>
<div class="quote__author">
– Madara Uchiha
</div>
<div class="play__button">
<span id="playButton">Play Background Music</span>
</div>
</div>
<div class="hint">
Press Shift + M for the magic to happen...
</div>
<script type="text/javascript" src="./js/script.js">
</script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script type="text/javascript">
const bodyDiv = document.querySelector("body")
const lifeLessonDiv = document.querySelector(".life__lesson")
const swiper = new Swiper(".swiper", {
direction: "horizontal",
loop: true,
centeredSlides: true,
speed: 100,
// centerInsufficientSlides: true,
// centeredSlidesBounds: true,
slidesPerView: "auto",
// spaceBetween: 50,
effect: "coverflow",
coverflowEffect: {
depth: 400,
rotate: 20,
stretch: 0,
slideShadows: true
},
pagination: {
el: ".swiper-pagination"
}
})
bodyDiv.addEventListener("mousemove", () => {
if (swiper.realIndex === 0){
lifeLessonDiv.innerText = "The concept of hope is nothing more than giving up. A word that holds no true meaning"
}
else if (swiper.realIndex === 1){
lifeLessonDiv.innerText = "People cannot show each other their true feelings. Fear, suspicion, and resentment never subside"
}
else if (swiper.realIndex === 2){
lifeLessonDiv.innerText = "Man seeks peace, yet at the same time yearning for war... Those are the two realms belonging solely to man"
}
else if (swiper.realIndex === 3){
lifeLessonDiv.innerText = "It’s foolish to fear what we have yet to see and know"
}
else if (swiper.realIndex === 4){
lifeLessonDiv.innerText = "When a man learns to love, he must bear the risk of hatred"
}
else if (swiper.realIndex === 5){
lifeLessonDiv.innerText = "I don't even know if there is such a thing as justice in the world. We fight believing in our own justice. But if the enemy is doing the same thing, who's right?"
}
else if (swiper.realIndex === 6){
lifeLessonDiv.innerText = "Knowledge and awareness are vague, and perhaps better called illusions. Everyone lives within their own subjective interpretation"
}
else if (swiper.realIndex === 7){
lifeLessonDiv.innerText = "The people that are the hardest to love are usually the ones who need it the most"
}
else if (swiper.realIndex === 8){
lifeLessonDiv.innerText = "Don’t be afraid of losing other people, be afraid of losing yourself"
}
})
bodyDiv.addEventListener("touchend", () => {
if (swiper.realIndex === 0){
lifeLessonDiv.innerText = "The concept of hope is nothing more than giving up. A word that holds no true meaning"
}
else if (swiper.realIndex === 1){
lifeLessonDiv.innerText = "People cannot show each other their true feelings. Fear, suspicion, and resentment never subside"
}
else if (swiper.realIndex === 2){
lifeLessonDiv.innerText = "Man seeks peace, yet at the same time yearning for war... Those are the two realms belonging solely to man"
}
else if (swiper.realIndex === 3){
lifeLessonDiv.innerText = "It’s foolish to fear what we have yet to see and know"
}
else if (swiper.realIndex === 4){
lifeLessonDiv.innerText = "When a man learns to love, he must bear the risk of hatred"
}
else if (swiper.realIndex === 5){
lifeLessonDiv.innerText = "I don't even know if there is such a thing as justice in the world. We fight believing in our own justice. But if the enemy is doing the same thing, who's right?"
}
else if (swiper.realIndex === 6){
lifeLessonDiv.innerText = "Knowledge and awareness are vague, and perhaps better called illusions. Everyone lives within their own subjective interpretation"
}
else if (swiper.realIndex === 7){
lifeLessonDiv.innerText = "The people that are the hardest to love are usually the ones who need it the most"
}
else if (swiper.realIndex === 8){
lifeLessonDiv.innerText = "Don’t be afraid of losing other people, be afraid of losing yourself"
}
})
</script>
</body>
</html>