-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
443 lines (440 loc) · 17.2 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
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dokkōdō</title>
<link rel="icon" type="image/x-icon" href="./img/heart.jpg" />
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext"
rel="stylesheet">
<!-- CSS WebSlides -->
<link rel="stylesheet" type='text/css' media='all' href="./css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="./css/svg-icons.css">
</head>
<body>
<header>
<nav role="navigation">
<ul>
<li class="github">
<a rel="external" href="https://github.com/ayoub3bidi" title="Github">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
</svg>
</a>
</li>
<li class="twitter">
<a rel="external" href="https://twitter.com/ayoub3bidi" title="Twitter">
<svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use>
</svg>
</a>
</li>
</ul>
</nav>
</header>
<main role="main">
<article id="webslides" class="vertical">
<section>
<span class="background"
style="background-image:url('https://cdnb.artstation.com/p/assets/images/images/004/495/497/large/joakim-ericsson-samurai-3-small.jpg?1484082829')"></span>
<div class="wrap aligncenter">
<h1 style="color: aliceblue;"><strong>Rōnin</strong></h1>
<p style="color: aliceblue;" class="text-intro">The Japanese word ‘rōnin’ describes a samurai without a
master, who wanders alone. The status of a ronin varied across different time-periods. In a general sense,
being a ronin implied failure. More specifically, a ronin had renounced the act of ‘seppuku’, which is a
form of Japanese ritual suicide that was applied to restore honor after defeat. Those who refused seppuku
became outcasts that endured a reputation of disgrace.</p>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">Walking their own path, some ronin worked as mercenaries and bodyguards, and others
became criminals. One of the most legendary ronin is <B>Miyamoto Musashi</B>, who is famed as Japan’s
greatest swordsman - undefeated in more than 60 duels. Musashi became a ronin after he escaped death
during the Battle of <b>Sekigahara</b> when serving general <b>Hideyori</b>. Aside from being a
swordsman, he
was also a philosopher, artist, and well-learned Buddhist.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">Among other writings, <b>Musashi</b> left us with 21 principles for those who walk
alone named
<b>Dokkōdō</b> (獨行道 : "The Path of Aloneness" or "The Way of Walking Alone"), that he wrote down not
long
before he died. Even though the age of the samurai is long gone, Musashi’s principles are timeless and
can
inspire us today to live well.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto2.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Accept everything Just The Way It Is</b><br>
Rather than worry or fret about what's going on around you, accept it. The time you've spent dwelling on
it is better spent improving yourself.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto3.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Do Not Seek Pleasure For It's Own Sake</b><br>
Anyone who has lived a few years understand the pains of losing friends to addictions and watching the
problems that come with them. If it makes you happy go for it. Just make sure that when the feeling
fades you're a couple steps farther ahead.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto4.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Do Not, Under Any Circumstances, Depend On A Partial Feeling</b><br>
You must be sure of where you put your foot before you step. The meaning here is not to get confused, to
keep your head clear, and only act when you're certain.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto5.png">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Think Lightly Of Yourself And Deeply Of The World</b><br>
How can you hear wisdom if you can only hear yourself? If you only walk around with eyes for yourself,
you'll miss the details of the world around you. Paying attention to the world let's you better
appreciate the results of your actions, as well as giving you insight into things you would otherwise
miss.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto6.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Be Detached From Desire Your Whole Lifelong</b><br>
If you spend your life chasing a dream you may be running forever. Live your life to be content, have
goals but don't let them rule you. Don't dwell on what others have when you can make your own.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto7.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Do Not Regret What You Have Done</b><br>
Understand your actions. If you disprove of how you are, don't constantly regret the past and be bitter.
Work to understand yourself, put it past you, and live your life how you should.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto8.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Never Be Jealous</b><br>
It's a waste of time. Spend your energy productively. All that time scheming could achieve a lot of
other things.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto9.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Never Let Yourself Be Saddened By A Separation</b><br>
Just by living life people will come and go. It's not the distance that matters but how you remember
them. Keep them close to your heart and they are always living in your footsteps.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto10.png">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Resentment And Complaint Are Appropriate Neither For Oneself Nor Others</b><br>
Better to focus your energy on bettering yourself or them then causing useless grief. Pissing and
moaning at the world doesn't make it spin faster.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto12.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Do Not Let Yourself Be Guided By The Feeling Of Lust Or Love</b><br>
Act with respect to yourself. Love will come and go, Don't do something for someone you wouldn't do for
yourself. Don't burn a bridge you've spent years building.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto13.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>In All Things Have No Preferences</b><br>
Have an open mind, be ready to try all things and desire none.If you always act a certain way you will
never experience anything new.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto14.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Be Indifferent To Where You Live</b><br>
If your unhappy with where you are, move, but in time you'll realize it's not where you live but how you
live. A palace or a parking garage; be happy of shelter and warmth.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto15.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Do Not Pursue The Taste Of Good Food</b><br>
Living the life of a ronin Mushashi learned the value of appreciating a full stomach. A taste for good
food can be as harmful as any addiction.
</div>
<div>
<img src="./img/MusashiMiyamoto11.png">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Do Not Hold On To Possessions You No Longer Need</b><br>
If it no longer benefits with you, part with it freely. Give it to someone who can appreciate it. It's
easy to get a bunch of junk that will just weigh you down.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto16.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b> Do Not Act Following Customary Beliefs</b><br>
Think and act for yourself. Act how you think you should act not how others say you should. You only
have one chance to decide for yourself.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto17.png">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Do Not Collect Weapons Or Practice With Weapons Beyond What Is Useful</b><br>
A tribute to his time but apt advice depending on how you apply it. It's better to be a master swordsman
than an apprentice in many weapons.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto18.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Do Not Fear Death</b><br>
Everyone dies, Everyone comes to terms differently. The best way to do it is identify what scares you
the most about it and work from there.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto19.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Do Not Seek To Possess Either Goods Or Fiefs For Your Old Age</b><br>
Live usefully and collect what is useful. Don't waste your time when you can spend your time bettering
yourself.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto20.png">
</div>
</div>
</div>
</section>
19
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Respect Buddha And The Gods Without Counting On Their Help</b><br>
Count on yourself, Don't count on luck or gods to pull you through. Tackle the endeavors you know are
within your capabilities. If you pray to them for strength then they will put you in situations to find
it.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto21.png">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>You May Abandon Your Own Body But You Must Preserve Your Honor</b><br>
Don't do anything you can't live with for the rest of your life. Your actions make you. If you become
old and weak, not far from the drink, live still with the actions and character that made men respect
you.</p>
</div>
<div>
<img src="./img/MusashiMiyamoto22.jpg">
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="grid vertical-align">
<div class="column">
<p class="text-intro">
<b>Never Stray From The Way</b><br>
If you live a certain way, Either devote yourself wholly to it or cast it aside. If you can't bring
yourself to place complete conviction in your actions then why do them?</p>
</div>
<div>
<img src="./img/MusashiMiyamoto23.jpg">
</div>
</div>
</div>
</section>
<section class="aligncenter">
<span class="background" style="background-image:url('./img/Ronin.jpg"></span>
<div class="wrap">
<h2 style="color:black;"><strong>This was the way of Rōnin</strong></h2>
<p style="color: black;" class="text-intro">The way that can inspire us today to live well.</p>
</div>
</section>
<section class="slide-bottom">
<div class="wrap">
<div class="content-right text-serif">
<h2>
<strong>Thank you !</strong>
</h2>
<p>If you like it please share so everyone can benefit.</p>
<p>Copyright © 2021 <a target="_blank" title="See my project on gitHub"
href="https://github.com/ayoub3bidi/Dokkodo">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
</svg>
</a> Ayoub Abidi</p>
</div>
</div>
</section>
</article>
</main>
<script src="./js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<script defer src="./js/svg-icons.js"></script>
</body>
<footer></footer>
</html>