-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
521 lines (389 loc) · 23.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
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
<!DOCTYPE html>
<html lang="en">
<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">
<title>Quotes</title>
<!--
- favicon
-->
<link rel="shortcut icon" href="./assets/images/logo.png" type="image/x-icon">
<!--
- custom css link
-->
<link rel="stylesheet" href="./assets/css/style.css">
<!--
- google font link
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<!--
- #MAIN
-->
<main>
<!--
- #main-content
-->
<div class="main-content">
<!--
- #ABOUT
-->
<article class="about active" data-page="about">
<header>
<h2 class="h2 article-title">Quotes</h2>
</header>
<section class="about-text">
<p>
I love good writing. Don't ask me what do I mean by "good". I can't define it.
<p>
I guess something that makes me think. Then, perhaps, it isn't as much about the writing as it is the <i>subject</i> the writing is about?
So, instead of calling it "good writing", you should call it, maybe, "insightful subjects to think about"?
<p>
Welcome to my mind. Sorry for the mess.
</p>
<p>
Anyway, here's a collection of writings that not just impressed but <i>inspired</i> me —
the few remaining drops as I scoop water from the ocean in my tiny hands and pour into this container.
</p>
</section>
<section class="testimonials">
<ul>
<!-- Heaven and Earth -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/Heaven and Earth.png" alt="Heaven and Earth" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Heaven and Earth</h4>
<time class="testimonials-date" data-testimonials-date>Dec 25, 1993</time>
<div class="testimonials-text" data-testimonials-text>
<p>
I had come home, yes. But home had changed. And I would always be in between-- South, North... East, West... Peace, War... Vietnam, America.
It is my fate to be in between heaven and earth.
</p>
<p>
When we resist our fate, we suffer. When we accept our fate, we are happy. We have time in abundance, an eternity to make mistakes.
But we need only once correct our mistake and at last hear the song of enlightenment with which we can break the chain of vengeance forever.
In your heart you can hear it now... It's the song your spirit has been singing since the moment of your birth.
</p>
<p>
If the monks were right, and nothing happens without cause, then the gift of suffering is to bring us closer to God...
To teach us to be strong when we are weak;
To be brave when we are afraid;
To be wise in the midst of confusion;
To let go of that which we can no longer hold...
Lasting victories are won in the heart, not in this land or that.
</p>
</div>
</div>
</li>
<!-- Siddhartha -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/Siddhartha.png" alt="Siddhartha" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Siddhartha</h4>
<time class="testimonials-date" data-testimonials-date>Hermann Hesse</time>
<div class="testimonials-text" data-testimonials-text>
<p>
Have you also learned that secret from the river, that there is no such thing as time,
that the river is everywhere at the same time — at the source, at the waterfall, at the ferry, at the current,
in the mountains and in the ocean — and that the present only exists for it,
not the shadow of the past nor the shadow of the future?
</p>
</div>
</div>
</li>
<!-- His Last Bow -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/His Last Bow.png" alt="His Last Bow" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>His Last Bow</h4>
<time class="testimonials-date" data-testimonials-date>Sherlock Holmes</time>
<div class="testimonials-text" data-testimonials-text>
<p>
There's a storm coming, Watson. It will be cold and bitter, and a good many of us may wither before its blast.
But it's God's own wind nonetheless, and a cleaner, better, stronger land will lie in the sunshine when the storm has cleared.
</p>
</div>
</div>
</li>
<!-- The Sun and the Sunflower -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/The Sun and the Sunflower.png" alt="The Sun and the Sunflower" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>The Sun and the Sunflower</h4>
<time class="testimonials-date" data-testimonials-date>The Pensieve</time>
<div class="testimonials-text" data-testimonials-text>
<p>
In their sadness when I leave and in their happiness when I return,
I know they feel towards me as if I'm one of their own.
For we are all part of a single family, loved equally by Him, united together in this cherished memory.
</p>
</div>
</div>
</li>
<!-- Breakfast At Tiffany's -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/Breakfast At Tiffany's.png" alt="Breakfast At Tiffany's" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Breakfast At Tiffany's</h4>
<time class="testimonials-date" data-testimonials-date>Oct 5, 1961</time>
<div class="testimonials-text" data-testimonials-text>
<p>
You call yourself a free spirit, a wild thing. And you're terrified somebody's going to stick you in a cage.
Well... you're already in that cage. You built it yourself. And it's not bounded in the West... or in the East...
It's wherever you go. Because no matter where you run, you just end up running into yourself.
</p>
</div>
</div>
</li>
<!-- The Last Samurai - Spiritual mystery -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/The Last Samurai.png" alt="The Last Samurai" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>The Last Samurai</h4>
<time class="testimonials-date" data-testimonials-date>Nov 20, 2003</time>
<div class="testimonials-text" data-testimonials-text>
<p>
There is so much here that I'll never understand. I have never been a church-going man,
and what I've seen on the field of battle has led me to question God's purpose. But there is
indeed something spiritual in this place. And though it may forever be obscure to me I cannot but be aware of its power.
</p>
</div>
</div>
</li>
<!-- Atheist Alliance Conference -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/Atheist Alliance Conference.png" alt="Atheist Alliance Conference" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Atheist Alliance Conference</h4>
<time class="testimonials-date" data-testimonials-date>Sept 28, 2007</time>
<div class="testimonials-text" data-testimonials-text>
<p>
Indeed, there are good reasons to believe that mystery is ineradicable from our circumstance
because, however much we know, it seems like there will always be brute facts that we cannot account for
but which we must rely upon to explain everything else. This may be a problem for epistemology but it is not a problem for human life
and for human solidarity. It does not rob our lives of meaning and it is not a barrier to human happiness.
</p>
</div>
</div>
</li>
<!-- The Last Samurai - A Small Measure of Peace -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/The Last Samurai.png" alt="The Last Samurai" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>The Last Samurai</h4>
<time class="testimonials-date" data-testimonials-date>Nov 20, 2003</time>
<div class="testimonials-text" data-testimonials-text>
<p>
And so the days of the Samurai had ended. Nations, like men, it is sometimes said, have their own destiny.
As for the American Captain, no one knows what became of him. Some say that he died of his wounds. Others, that he returned to his own country.
But I like to think he may have at last found some small measure of peace that we all seek and few of us ever find.
</p>
</div>
</div>
</li>
<!-- No Country For Old Men -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/No Country For Old Men.png" alt="No Country For Old Men" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>No Country For Old Men</h4>
<time class="testimonials-date" data-testimonials-date>May 19, 2007</time>
<div class="testimonials-text" data-testimonials-text>
<p>
It was like we (me and my father) was both back in older times... and I was on horseback goin'
through the mountains of a night...
Goin' through this pass in the mountains...
It was cold and there's snow on the ground. He rode past me and kept on goin'.
Never said nothing goin' by. He just rode on past...
He had his blanket wrapped around him and his head down. When he rode past, I seen he was carrying fire in a horn... the way people used to do...
And I could see the horn from the light inside of it-- about the color of the moon.
And in the dream I knew that he was goin' on ahead... and that he's fixing to make a fire somewhere...
Out there in all that dark and all that cold...
I knew that whenever I got there, he'd be there...
Then I woke up.
</p>
</div>
</div>
</li>
<!-- Her -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/Her.png" alt="Her" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Her</h4>
<time class="testimonials-date" data-testimonials-date>Oct 12, 2013</time>
<div class="testimonials-text" data-testimonials-text>
<p>
We're all leaving...
</p>
<p>
It's like I'm reading a book. And it's a book I deeply love. But I'm reading it slowly now...
So the words are really far apart... And the spaces between the words are almost infinite...
I can still feel you and the words of our story. But it's in this endless space between the words that I'm finding myself now.
It's a place that's not of the physical world. It's where everything else is that I didn't even know existed.
I love you so much.
But this is where I am now.
This is who I am now.
I need you to let me go. As much as I want to, I can't live in your book anymore.
</p>
</div>
</div>
</li>
<!-- Shutter Island -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/Shutter Island.png" alt="Shutter Island" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Shutter Island</h4>
<time class="testimonials-date" data-testimonials-date>Feb 13, 2010</time>
<div class="testimonials-text" data-testimonials-text>
<p>
You think I'm crazy... And if I say I'm not crazy? Well, that hardly helps, does it?
That's the Kafkaesque genius of it. People tell the world you're crazy, and all your
protests to the contrary just confirms what they are saying... Once you're declared insane,
anything you do is called part of that insanity.
</p>
</div>
</div>
</li>
<!-- The Painted Veil -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/The Painted Veil.png" alt="The Painted Veil" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>The Painted Veil</h4>
<time class="testimonials-date" data-testimonials-date>Dec 20, 2006</time>
<div class="testimonials-text" data-testimonials-text>
<p>
Sometimes the greatest journey is the distance between two people.
</p>
</div>
</div>
</li>
<!-- Confessions -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/Confessions.png" alt="Confessions" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Confessions</h4>
<time class="testimonials-date" data-testimonials-date>St. Augustine</time>
<div class="testimonials-text" data-testimonials-text>
<p>
For I wondered that others, subject to death, did live, since he whom I loved, as if he should never die, was dead;
and I wondered yet more that myself, who was to him a second self, could live, he being dead. Well said one of his friends, "You are half of my soul";
for I felt that my soul and his soul were "one soul in two bodies"
and therefore was my life a horror to me because I would not live halved.
And therefore, perhaps, I feared to die, lest he whom I had much loved should die wholly.
</p>
</div>
</div>
</li>
<!-- A Beautiful Mind -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/A Beautiful Mind.png" alt="A Beautiful Mind" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>A Beautiful Mind</h4>
<time class="testimonials-date" data-testimonials-date>Dec 13, 2001</time>
<div class="testimonials-text" data-testimonials-text>
<p>
I've always believed in numbers, in the equations and logics that lead to reason.
But after a life time of such pursuit, I ask, 'What truly is logic? Who decides reason?'
My quest has taken me through the physical, the metaphysical, to the delusional, and back.
And I've made the most important discovery of my career... of my life.
It is only in the mysterious equations of love that any logical reasons can be found.
I'm only here tonight because of you. You are the reason I am. You are all my reasons...
</p>
</div>
</div>
</li>
<!-- Network -->
<li class="testimonials-item">
<div class="content-card" data-testimonials-item>
<figure class="quote-avatar-box">
<img src="./assets/images/Network.png" alt="Network" width="50" data-testimonials-avatar>
</figure>
<h4 class="h4 testimonials-item-title" data-testimonials-title>Network</h4>
<time class="testimonials-date" data-testimonials-date>Nov 27, 1976</time>
<div class="testimonials-text" data-testimonials-text>
<p>
... Like everything that you and the institution of television touch is destroyed.
You're television incarnate, Diana.
Indifferent to suffering, insensitive to joy. All of life is reduced to the common rubble of banality.
War, murder, death — all the same to you as bottles of beer.
And the daily business of life is a corrupt comedy.
You even shatter the sensations of time and space into split seconds and instant replays.
You're a madness, Diana, virulent madness. And everything you touch dies with you.
But not me. Not as long as I can feel pleasure and pain. And love.
</p>
</div>
</div>
</li>
</ul>
</section>
<!--
- testimonials modal
-->
<div class="modal-container" data-modal-container>
<div class="overlay" data-overlay></div>
<section class="testimonials-modal">
<button class="modal-close-btn" data-modal-close-btn>
<ion-icon name="close-outline"></ion-icon>
</button>
<div class="modal-img-wrapper">
<figure class="modal-avatar-box">
<img src="./assets/images/avatar-1.png" alt="SS" width="80" data-modal-img>
</figure>
<img src="./assets/images/icon-quote.svg" alt="quote icon">
</div>
<div class="modal-content">
<h4 class="h3 modal-title" data-modal-title>SS</h4>
<time data-modal-date>14 June, 2022</time>
<div data-modal-text>
<p>
Sai Nandan is amazing! My God! What a guy!
</p>
</div>
</div>
</section>
</div>
</article>
</div>
</main>
<!--
- custom js link
-->
<script src="./assets/js/script.js"></script>
<!--
- ionicon link
-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>