-
Notifications
You must be signed in to change notification settings - Fork 207
/
Copy pathavatars.html
641 lines (575 loc) · 45.4 KB
/
avatars.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
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shree Krishna: My Strength</title>
<script
src="https://kit.fontawesome.com/d74f12bccc.js"
crossorigin="anonymous"
></script>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<link rel="stylesheet" href="avatars.css">
<style>
body{
background-image: var(--bg-color);
font-family: Arial, sans-serif;
padding: 0;
margin: 0;
overflow-x: hidden;
}
.header {
text-align: center;
background-image: url(https://www.hitaambrish.com/stat/img/home/Gallery_Bg.jpg);
padding: 10px 20px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0px 6px 10px #ccc;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
}
.navigation .homeDiv #homeBtn {
align-items: center;
background-image: linear-gradient(
144deg,
#af40ff,
#5b42f3 50%,
#00ddeb
);
border: 0;
border-radius: 8px;
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
box-sizing: border-box;
color: #ffffff;
display: flex;
font-family: Phantomsans, sans-serif;
justify-content: center;
line-height: 0.8em;
max-width: 100%;
min-width: 110px;
padding: 3px;
text-decoration: none;
cursor: pointer;
}
.navigation .homeDiv #homeBtn:active,
.navigation .homeDiv #homeBtn:hover {
outline: 0;
}
.navigation .homeDiv #homeBtn a {
background-color: rgb(5, 6, 45);
color: #fff;
font-size: 16px;
padding: 16px 24px;
border-radius: 6px;
width: 100%;
height: 100%;
transition: 300ms;
text-decoration: none;
}
.navigation .homeDiv #homeBtn:hover a {
background: none;
}
.navigation {
justify-content: space-between;
}
.navigation .navbar.visible-items {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center; /* Center the items */
align-items: center;
/* margin-right: 350px !important; */
}
.navigation .navbar a {
color: #fff;
text-decoration: none;
font-weight: 500;
margin: 0 5px;
transition: ease-in 0.3s;
border: 2px solid #fff;
padding: 10px 15px;
border-radius: 20px;
}
.navigation .navbar a:hover {
color: rgb(250, 219, 153);
border: 2px solid rgb(250, 219, 153);
}
#icon {
margin-top: -30px;
margin-right: -20px;
position: absolute;
right: 50px;
top: 50px;
}
.searchInput {
box-sizing: border-box;
width: 280px;
height: 35px;
padding: 5px 20px;
border-radius: 50px;
border: 0;
}
.searchInput:focus {
outline: 0;
}
.searchForm button {
padding: 0;
border: 0;
background-color: transparent;
position: relative;
top: 2px;
right: 55px;
}
.searchForm button i {
color: #555;
padding: 9px 15px;
font-size: 16px;
cursor: pointer;
transition: linear 0.16s;
}
.searchForm button i:hover {
color: #23d1c8;
}
footer {
background-color: #1c3d5a;
color: #ffffff;
padding: 40px 0; /* Increased padding for more space */
font-family: 'Poppins', sans-serif;
position: relative;
width: 100%;
}
/* Hamburger menu button */
.hamburger-menu {
display: flex;
align-items: center;
}
.hamburger-menu.open {
display: flex;
position: relative;
}
.hamburger-btn {
font-size: 1.5rem;
color: #fff;
background: none;
border: none;
cursor: pointer;
}
/* Hidden items (hamburger menu), initially hidden */
.hamburger-menu .hidden-items {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
right: 0;
background-color: #333;
padding: 10px;
border-radius: 10px;
z-index: 1;
}
/* Show hidden items when menu is open */
.hamburger-menu.open .hidden-items {
display: flex;
}
.footer-content {
display: flex;
justify-content: space-between; /* Spread items evenly across the footer */
align-items: flex-start;
flex-wrap: wrap; /* Ensure responsiveness */
padding: 0 50px;
max-width: 1200px; /* Limit max width to keep it centered */
margin: 0 auto;
}
.footer-section {
flex: 1;
margin: 20px; /* Add margin for spacing between sections */
min-width: 220px; /* Minimum width for smaller screens */
}
.footer-section h3 {
font-size: 24px; /* Increased the heading size */
margin-bottom: 15px;
color: #f0c43f; /* Gold color */
}
/* Quick Links Styling */
.footer-links {
list-style-type: none;
padding: 0;
}
.footer-links li {
margin-bottom: 12px; /* Spacing between links */
}
.footer-links a {
text-decoration: none;
color: #ffffff;
font-size: 18px; /* Increased font size for better readability */
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #fce4a6; /* Lighter gold on hover */
}
.social-icons a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 2.1rem;
height: 2.1rem;
background-color: transparent;
border: 0.2rem solid #000000;
font-size: 1.2rem;
border-radius: 50%;
margin: 0.1rem 0.2rem 0.1rem 0;
transition: 0.3s ease;
color: #ffffff;
text-decoration: none;
}
.social-icons a:hover {
color: rgb(255, 255, 255);
transform: scale(1.3) translateY(-5px);
background-color: #ac905c;
box-shadow: 0 0 25px #f0eaea;
}
.creatorDiv {
margin-top: 10px;
}
.creatorDiv p {
margin-top: 0;
margin-bottom: 0;
font-size: 14px;
}
.read-more {
color: #f4d35e;
cursor: pointer;
text-decoration: underline;
}
.creatorDiv {
margin-top: 10px;
}
.creatorDiv {
text-align: center;
margin-top: 30px;
font-size: 14px;
padding: 10px;
border-top: 1px solid #ffffff44;
}
.creatorDiv p {
margin-top: 0;
margin-bottom: 0;
font-size: 14px;
}
#toggle-btn {
background-color: #317ca4;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
font-size: 1em;
margin-top: 20px;
transition: background-color 0.3s ease;
margin-bottom: 7px;
}
#toggle-btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<!-- <button id="scrollTopBtn" class="scroll-top-btn">
<i class="fas fa-arrow-up"></i>
</button> -->
<div class="header">
<div class="navigation">
<div class="homeDiv">
<button id="homeBtn"><a href="./index.html">Home</a></button>
</div>
<!-- Visible items on the home page -->
<div class="navbar visible-items">
<a href="scriptures.html">Scriptures</a>
<a href="gallery.html">Gallery</a>
<a href="avatars.html" id="active">Avatars</a>
<a href="devotional-resources.html">Devotional Resources</a>
<a href="prasadam.html" >Prasadam Section</a>
<img src="images/moon.png" id="icon" />
</div>
<!-- Hamburger Menu Button -->
<div class="hamburger-menu">
<button class="hamburger-btn">☰</button>
<div class="navbar hidden-items">
<a href="quiz.html">Quiz</a>
<a href="DIgital.html">Digital Resources</a>
<a href="Personalized.html">ToDoList</a>
<a href="Feedback.html">Feedbackform</a>
<a href="partner.html">Partner</a>
<a href="#" onclick="showLoginForm()">Discussion Forum</a>
</div>
</div>
<form class="searchForm">
<input
type="text"
class="searchInput"
placeholder="Search all the content"
/>
<button>
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>
</div>
</div>
<div class="main">
<h1 class="heading">Avatars of Lord Vishnu</h1>
<!-- Button to toggle languages -->
<button id="toggle-btn">हिन्दी में पढ़िए</button>
<div class="container">
<!-- Row 1: Matsya -->
<div class="row row1">
<img src="images/Matsya.jpeg" alt="Matsya">
<div class="content">
<h1 class="english">Matsya</h1>
<h1 class="hindi" style="display: none;">मात्स्य</h1>
<p class="english">Matsya is the first of the ten primary avatars of the Hindu god Vishnu, and is often depicted as a fish.</p>
<p class="hindi" style="display: none;">मत्स्य हिंदू भगवान विष्णु के दस प्राथमिक अवतारों में से पहला है, और अक्सर इसे मछली के रूप में दर्शाया जाता है।</p>
<p class="english">In the story of Matsya, Vishnu took the form of a fish to save the first man, Manu, from a great flood. Manu caught a small fish that grew to a giant size, and when the flood came, Manu tied his boat to the fish's horn and was saved.</p>
<p class="hindi" style="display: none;">मत्स्य की कहानी में, भगवान विष्णु ने प्रथम मनुष्य मनु को एक भयंकर बाढ़ से बचाने के लिए मछली का रूप धारण किया था। मनु ने एक छोटी मछली पकड़ी जो बड़ी होकर बहुत बड़ी हो गई, और जब बाढ़ आई, तो मनु ने अपनी नाव मछली के सींग से बांध दी और बच गए।</p>
<p class="english">Matsya is considered to have saved the world and the holy Vedas from a demon. The legends of Matsya are full of symbolism, and the story is considered to be a flood myth, a common theme across cultures.</p>
<p class="hindi" style="display: none;">माना जाता है कि मत्स्य ने दुनिया और पवित्र वेदों को एक राक्षस से बचाया था। मत्स्य की किंवदंतियाँ प्रतीकात्मकता से भरी हैं, और कहानी को बाढ़ की मिथक माना जाता है, जो सभी संस्कृतियों में एक आम विषय है।</p>
<p class="english">There are few temples dedicated to Matsya, but the best known are the Matsya Narayana temples in Nagalapuram, Andhra Pradesh; Chennai, Tamil Nadu; and Bellary, Karnataka.</p>
<p class="hindi" style="display: none;">मत्स्य को समर्पित कुछ मंदिर हैं, लेकिन सर्वाधिक प्रसिद्ध हैं नागलपुरम, आंध्र प्रदेश; चेन्नई, तमिलनाडु; तथा बेल्लारी, कर्नाटक के मत्स्य नारायण मंदिर।</p>
<button>Read More</button>
</div>
</div>
<!-- Row 2: Kurma -->
<div class="row row2">
<img src="images/Kurma.jpeg" alt="Kurma">
<div class="content">
<h1 class="english">Kurma</h1>
<h1 class="hindi" style="display: none;">कुर्म</h1>
<p class="english">In Hinduism, Kurmavatara is the second incarnation of the Hindu god Vishnu as a tortoise.</p>
<p class="hindi" style="display: none;">हिंदू धर्म में, कूर्मावतार हिंदू भगवान विष्णु का कछुआ के रूप में दूसरा अवतार है।</p>
<p class="english">In the legend of the churning of the Ocean of Milk, also known as the Samudra Manthana, Kurma dives to the bottom of the ocean to support the cosmic mountain Meru on his back. The devas and asuras then stand on opposite sides of the mountain and churn the ocean to release treasures.</p>
<p class="hindi" style="display: none;">क्षीर सागर के मंथन की कथा में, जिसे समुद्र मंथन के नाम से भी जाना जाता है, कूर्म अपनी पीठ पर ब्रह्मांडीय पर्वत मेरु को सहारा देने के लिए सागर की तलहटी में गोता लगाता है। फिर देवता और असुर पर्वत के विपरीत दिशा में खड़े होकर खजाने को बाहर निकालने के लिए सागर मंथन करते हैं।</p>
<p class="english">Vishnu takes the form of Kurma to save the earth from a cosmic mishap and to avoid a feud between the gods and demons.</p>
<p class="hindi" style="display: none;">पृथ्वी को एक ब्रह्मांडीय दुर्घटना से बचाने और देवताओं और राक्षसों के बीच झगड़े को टालने के लिए भगवान विष्णु ने कूर्म का अवतार लिया।</p>
<p class="english">The Kurma avatar holds great significance and offers valuable lessons on the importance of resilience, selflessness, and determination.</p>
<p class="hindi" style="display: none;">कूर्म अवतार का बहुत महत्व है तथा यह लचीलेपन, निस्वार्थता और दृढ़ संकल्प के महत्व पर बहुमूल्य शिक्षा प्रदान करता है।</p>
<button>Read More</button>
</div>
</div>
<!-- Row 3: Varaha -->
<div class="row row3">
<img src="images/Varaha.jpg" alt="Varaha">
<div class="content">
<h1 class="english">Varaha</h1>
<h1 class="hindi" style="display: none;">वराह</h1>
<p class="english">Varaha is the avatara of the Hindu god Vishnu, in the form of a boar. Varaha is generally listed as third in the Dashavatara, the ten principal avataras of Vishnu.</p>
<p class="hindi" style="display: none;">वराह हिंदू भगवान विष्णु का अवतार है, जो सूअर के रूप में है। वराह को आमतौर पर विष्णु के दस प्रमुख अवतारों में से तीसरे अवतार के रूप में सूचीबद्ध किया जाता है।</p>
<p class="english">Varaha is completely a boar or in an anthropomorphic form, with a boar's head and the human body. His consort, Bhumi, the earth goddess, is a goddess lifted by Varaha.</p>
<p class="hindi" style="display: none;">वराह पूरी तरह से सूअर या मानव रूप में हैं, सूअर का सिर और मानव शरीर। उनकी पत्नी, भूमि, पृथ्वी देवी, वराह द्वारा उठाई गई देवी हैं।</p>
<p class="english">The Shatapatha Brahmana narrates that the universe was primordial waters. Varaha lifts the earth goddess Bhumi out of the cosmic ocean when the demon Hiranyaksha stole the earth goddess and hid her in the primordial waters, Vishnu appeared as Varaha to rescue her. Varaha killed Hiranyaksha and retrieved the earth goddess from the cosmic ocean, lifting it on his tusks, and restored her to her place in the universe.</p>
<p class="hindi" style="display: none;">शतपथ ब्राह्मण में बताया गया है कि ब्रह्मांड आदि जल था। जब राक्षस हिरण्याक्ष ने पृथ्वी देवी को चुराकर आदि जल में छिपा दिया, तो वराह ने पृथ्वी देवी भूमि को ब्रह्मांडीय महासागर से बाहर निकाला, विष्णु ने उन्हें बचाने के लिए वराह के रूप में प्रकट हुए। वराह ने हिरण्याक्ष को मार डाला और पृथ्वी देवी को ब्रह्मांडीय महासागर से वापस लाया, उसे अपने दाँतों पर उठाया और ब्रह्मांड में उसके स्थान पर वापस लाया।</p>
<button>Read More</button>
</div>
</div>
<!-- Row 4: Narasimha -->
<div class="row row4">
<img src="images/Narasimha.jpg" alt="Narasimha">
<div class="content">
<h1 class="english">Narasimha</h1>
<h1 class="hindi" style="display: none;">नरसिंह</h1>
<p class="english">The Narasimha avatar is the fourth avatar of the Hindu god Vishnu, and is known as the lion god. The story of Narasimha is about his protection of his devotee Prahlada from his evil father, the demon king Hiranyakashipu.</p>
<p class="hindi" style="display: none;">नरसिंह अवतार हिंदू भगवान विष्णु का चौथा अवतार है, और उन्हें सिंह देवता के रूप में जाना जाता है। नरसिंह की कहानी उनके भक्त प्रह्लाद को उसके दुष्ट पिता, राक्षस राजा हिरण्यकश्यप से बचाने के बारे में है।</p>
<p class="english">Narasimha is half-man and half-lion, with a thick neck, large shoulders, and a slender abdomen and waist. He has a curly mane of hair, sharp teeth, and leonine facial features.Narasimha is known as the "Great Protector" who protects his devotees from evil.</p>
<p class="hindi" style="display: none;">नरसिंह आधे मनुष्य और आधे सिंह हैं, जिनकी गर्दन मोटी, कंधे बड़े और पेट और कमर पतली है। उनके घुंघराले बाल, नुकीले दांत और सिंह जैसे चेहरे हैं। नरसिंह को "महान रक्षक" के रूप में जाना जाता है जो अपने भक्तों को बुराई से बचाते हैं।</p>
<p class="english">Narasimha emerged from a pillar to kill Hiranyakashipu, who was trying to kill Prahlada. After killing Hiranyakashipu, Narasimha installed Prahlada as the rightful king.</p>
<p class="hindi" style="display: none;">नरसिंह ने हिरण्यकश्यप को मारने के लिए एक खंभे से उभरकर प्रह्लाद को मारने की कोशिश की। हिरण्यकश्यप को मारने के बाद, नरसिंह ने प्रह्लाद को असली राजा बना दिया।</p>
<button>Read More</button>
</div>
</div>
<!-- Row 5: Vamana -->
<div class="row row5">
<img src="images/vaman.jpg" alt="">
<div class="content">
<h1 class="english">Vamana</h1>
<h1 class="hindi" style="display: none;">वामन</h1>
<p class="english">The story of Vamana is about the Hindu god Vishnu's fifth avatar, who took the form of a dwarf to defeat the demon king Bali and restore cosmic order.</p>
<p class="hindi" style="display: none;">वामन की कहानी हिंदू भगवान विष्णु के पांचवें अवतार के बारे में है, जिन्होंने राक्षस राजा बलि को हराने और ब्रह्मांडीय व्यवस्था को बहाल करने के लिए एक बौने का रूप धारण किया था।</p>
<p class="english">Vishnu appeared as a dwarf Brahmin named Vamana and visited the court of the demon king Bali. Vamana asked for as much land as he could cover in three steps. Bali granted the request, and Vamana grew to a giant size. With his first two steps, Vamana covered the Earth and the space between the Earth and the heavens. When there was nowhere left to go, Bali offered to let Vamana place his foot on his head for the third step. Vamana then used the pressure of his foot to send Bali to rule the netherworld.</p>
<p class="hindi" style="display: none;">भगवान विष्णु वामन नामक एक बौने ब्राह्मण के रूप में प्रकट हुए और राक्षस राजा बलि के दरबार में गए। वामन ने तीन पग में जितनी भूमि नाप सके उतनी भूमि मांगी। बलि ने मांग स्वीकार कर ली और वामन विशालकाय हो गए। अपने पहले दो पगों में वामन ने पृथ्वी और पृथ्वी तथा स्वर्ग के बीच के स्थान को नाप लिया। जब आगे बढ़ने के लिए कोई जगह नहीं बची तो बलि ने तीसरे पग के लिए वामन को अपने सिर पर पैर रखने की अनुमति दे दी। इसके बाद वामन ने अपने पैर के दबाव का उपयोग करके बलि को पाताल लोक पर शासन करने के लिए भेज दिया।</p>
<p class="english">The story teaches that one should surrender to God, keep promises, and not take anything for granted.</p>
<p class="hindi" style="display: none;">यह कहानी हमें सिखाती है कि हमें ईश्वर के प्रति समर्पित हो जाना चाहिए, अपने वादे पूरे करने चाहिए और किसी भी चीज को हल्के में नहीं लेना चाहिए।</p>
<button>Read More</button>
</div>
</div>
<!-- Row 6: Parashurama -->
<div class="row row6">
<img src="images/Parashurama.jpg" alt="Parashurama">
<div class="content">
<h1 class="english">Parashurama</h1>
<h1 class="hindi" style="display: none;">परशुराम</h1>
<p class="english">Parashurama is the sixth avatar of the Hindu god Vishnu and is known for his role in correcting the cosmic equilibrium by destroying the Kshatriya class.</p>
<p class="hindi" style="display: none;">परशुराम हिंदू भगवान विष्णु के छठे अवतार हैं और क्षत्रिय वर्ग को नष्ट करके ब्रह्मांडीय संतुलन को सही करने में उनकी भूमिका के लिए जाने जाते हैं।</p>
<p class="english">Parashurama was born to the Brahmin sage Jamadagni and the princess Renuka. He was born with the traits of a Kshatriya, such as aggression and valor, and is known as a "Brahmin-Kshatriya".</p>
<p class="hindi" style="display: none;">परशुराम का जन्म ब्राह्मण ऋषि जमदग्नि और राजकुमारी रेणुका के घर हुआ था। वे क्षत्रिय के गुणों, जैसे आक्रामकता और वीरता के साथ पैदा हुए थे, और उन्हें "ब्राह्मण-क्षत्रिय" के रूप में जाना जाता है।</p>
<p class="english">When Jamadagni suspected Renuka of an unchaste thought, he ordered Parashurama to cut off her head. To avenge his father's murder, Parashurama killed all the male Kshatriyas on earth 21 times, filling five lakes with their blood.</p>
<p class="hindi" style="display: none;">जब जमदग्नि को रेणुका के मन में किसी बुरे विचार का संदेह हुआ, तो उन्होंने परशुराम को उसका सिर काटने का आदेश दिया। अपने पिता की हत्या का बदला लेने के लिए, परशुराम ने पृथ्वी पर सभी पुरुष क्षत्रियों को 21 बार मार डाला, और उनके खून से पाँच झीलें भर दीं।</p>
<p class="english">Parashurama is prophesied to become the guru of Kalki, the 10th and final avatar of Vishnu.</p>
<p class="hindi" style="display: none;">परशुराम के बारे में भविष्यवाणी की गई है कि वे भगवान विष्णु के 10वें और अंतिम अवतार कल्कि के गुरु बनेंगे।</p>
<button>Read More</button>
</div>
</div>
<!-- Row 7: Rama -->
<div class="row row7">
<img src="images/Rama.jpeg" alt="Rama">
<div class="content">
<h1 class="english">Rama</h1>
<h1 class="hindi" style="display: none;">राम</h1>
<p class="english">Lord Rama is worshipped as the seventh and one of the most popular avatars of Vishnu.</p>
<p class="hindi" style="display: none;">भगवान राम को विष्णु के सातवें और सबसे लोकप्रिय अवतारों में से एक के रूप में पूजा जाता है।</p>
<p class="english">According to the Ramayana, Rama was born to Dasaratha and his first wife Kausalya in Ayodhya, the capital of the Kingdom of Kosala. His siblings included Lakshmana, Bharata, and Shatrughna. He married Sita. Born in a royal family, Rama's life is described in the Hindu texts as one challenged by unexpected changes, such as an exile into impoverished and difficult circumstances, and challenges of ethical questions and moral dilemmas.[8] The most notable story involving Rama is the kidnapping of Sita by the demon-king Ravana, followed by Rama and Lakshmana's journey to rescue her.</p>
<p class="hindi" style="display: none;">रामायण के अनुसार, राम का जन्म दशरथ और उनकी पहली पत्नी कौशल्या के घर अयोध्या में हुआ था, जो कोसल राज्य की राजधानी थी। उनके भाई-बहनों में लक्ष्मण, भरत और शत्रुघ्न शामिल थे। उन्होंने सीता से विवाह किया। एक राजसी परिवार में जन्मे, राम के जीवन को हिंदू ग्रंथों में अप्रत्याशित परिवर्तनों से चुनौती भरे जीवन के रूप में वर्णित किया गया है, जैसे कि निर्धन और कठिन परिस्थितियों में निर्वासन, और नैतिक प्रश्नों और नैतिक दुविधाओं की चुनौतियाँ।[8] राम से जुड़ी सबसे उल्लेखनीय कहानी राक्षस-राजा रावण द्वारा सीता का अपहरण है, जिसके बाद राम और लक्ष्मण की उन्हें बचाने के लिए यात्रा होती है।</p>
<p class="english">The entire life story of Rama, Sita and their companions allegorically discusses duties, rights and social responsibilities of an individual. It illustrates dharma and dharmic living through model characters.</p>
<p class="hindi" style="display: none;">राम, सीता और उनके साथियों की पूरी जीवन गाथा एक व्यक्ति के कर्तव्यों, अधिकारों और सामाजिक जिम्मेदारियों पर रूपकात्मक रूप से चर्चा करती है। यह आदर्श पात्रों के माध्यम से धर्म और धार्मिक जीवन को दर्शाता है।</p>
<button>Read More</button>
</div>
</div>
<!-- Row 8: Krishna -->
<div class="row row8">
<img src="images/Krishna_avatar.jpg" alt="">
<div class="content">
<h1 class="english">Krishna</h1>
<h1 class="hindi" style="display: none;">कृष्ण</h1>
<p class="english">He is worshipped as the eighth avatar of Vishnu and also as the Supreme God in his own right. He is the god of protection, compassion, tenderness, and love; and is widely revered among Hindu divinities. Krishna's birthday is celebrated every year by Hindus on Krishna Janmashtami.</p>
<p class="hindi" style="display: none;">उन्हें विष्णु के आठवें अवतार के रूप में पूजा जाता है और साथ ही अपने आप में सर्वोच्च भगवान के रूप में भी। वे सुरक्षा, करुणा, कोमलता और प्रेम के देवता हैं; और हिंदू देवताओं में व्यापक रूप से पूजनीय हैं। कृष्ण का जन्मदिन हर साल हिंदुओं द्वारा कृष्ण जन्माष्टमी पर मनाया जाता है।</p>
<p class="english">The name Krishna means "black" or "dark blue". He is also known by many other names, including Mohan, Govinda, and Keev.</p>
<p class="hindi" style="display: none;">कृष्ण नाम का अर्थ है "काला" या "गहरा नीला"। उन्हें मोहन, गोविंदा और कीव सहित कई अन्य नामों से भी जाना जाता है।</p>
<p class="english">He is a central figure in the Mahabharata, the Bhagavata Purana, the Brahma Vaivarta Purana, and the Bhagavad Gita, and is mentioned in many Hindu philosophical, theological, and mythological texts.[19] They portray him in various perspectives: as a god-child, a prankster, a model lover, a divine hero, and the universal supreme being. His iconography reflects these legends and shows him in different stages of his life, such as an infant eating butter, a young boy playing a flute, a young boy with Radha or surrounded by female devotees, or a friendly charioteer giving counsel to Arjuna.</p>
<p class="hindi" style="display: none;">वह महाभारत, भागवत पुराण, ब्रह्म वैवर्त पुराण और भगवद गीता में एक केंद्रीय व्यक्ति हैं, और कई हिंदू दार्शनिक, धार्मिक और पौराणिक ग्रंथों में उनका उल्लेख किया गया है।[19] वे उन्हें विभिन्न दृष्टिकोणों से चित्रित करते हैं: एक देव-बालक, एक मसखरा, एक आदर्श प्रेमी, एक दिव्य नायक और सार्वभौमिक सर्वोच्च व्यक्ति के रूप में। उनकी प्रतिमा इन किंवदंतियों को दर्शाती है और उन्हें उनके जीवन के विभिन्न चरणों में दिखाती है, जैसे कि मक्खन खाने वाला एक शिशु, बांसुरी बजाता एक छोटा लड़का, राधा के साथ या महिला भक्तों से घिरा एक छोटा लड़का, या अर्जुन को सलाह देने वाला एक दोस्ताना सारथी।</p>
<button>Read More</button>
</div>
</div>
<!-- Row 9: Buddha -->
<div class="row row9">
<img src="images/Budha.jpeg" alt="">
<div class="content">
<h1 class="english">Buddha</h1>
<h1 class="hindi" style="display: none;">बुद्ध</h1>
<p class="english">Gautama Buddha, the founder of Buddhism, is commonly included as an avatar of Vishnu in Hinduism. Buddha is sometimes depicted in Hindu scriptures as a preacher who deludes and leads asuras and heretics away from the path of the Vedic scriptures, but another view praises him a compassionate teacher who preached the path of ahimsa (non-violence).</p>
<p class="hindi" style="display: none;">बौद्ध धर्म के संस्थापक गौतम बुद्ध को हिंदू धर्म में आमतौर पर विष्णु के अवतार के रूप में शामिल किया जाता है। बुद्ध को कभी-कभी हिंदू धर्मग्रंथों में एक उपदेशक के रूप में दर्शाया जाता है जो असुरों और विधर्मियों को वैदिक धर्मग्रंथों के मार्ग से भटकाता है, लेकिन एक अन्य दृष्टिकोण उन्हें एक दयालु शिक्षक के रूप में प्रशंसा करता है जिसने अहिंसा (अहिंसा) का मार्ग बताया।</p>
<p class="english">According to the Vaishnava Puranas, Vishnu took the form of the Buddha to restore order after the daityas defeated the devas in battle.</p>
<p class="hindi" style="display: none;">वैष्णव पुराणों के अनुसार, दैत्यों द्वारा देवताओं को युद्ध में पराजित करने के बाद व्यवस्था बहाल करने के लिए विष्णु ने बुद्ध का रूप धारण किया था।</p>
<p class="english">Buddhist texts written by bikshus often begin with a Saraswati stotra, which pays homage to the Hindu goddess of learning. It's not uncommon to see an idol of Lord Ganesh in a Buddhist temple.</p>
<p class="hindi" style="display: none;">भिक्षुओं द्वारा लिखे गए बौद्ध ग्रंथ अक्सर सरस्वती स्तोत्र से शुरू होते हैं, जो हिंदू विद्या की देवी को श्रद्धांजलि देता है। बौद्ध मंदिर में भगवान गणेश की मूर्ति देखना असामान्य नहीं है।</p>
<button>Read More</button>
</div>
</div>
<!-- Row 10: Kalki -->
<div class="row row10">
<img src="images/Kalki.avif" alt="">
<div class="content">
<h1 class="english">Kalki</h1>
<h1 class="hindi" style="display: none;">कल्कि</h1>
<p class="english">Kalki is the prophesied tenth and final incarnation of the Hindu god Vishnu. According to Vaishnava cosmology, Kalki is destined to appear at the end of the Kali Yuga, the last of the four ages in the cycle of existence (Krita). His arrival will mark the end of the Kali Yuga and herald the beginning of the Satya Yuga, the most virtuous age, before the ultimate dissolution of the universe (Mahapralaya).</p>
<p class="hindi" style="display: none;">कल्कि हिंदू भगवान विष्णु के दसवें और अंतिम अवतार हैं। वैष्णव ब्रह्माण्ड विज्ञान के अनुसार, कल्कि का जन्म कलियुग के अंत में होना तय है, जो अस्तित्व के चक्र (कृत) के चार युगों में से अंतिम युग है। उनका आगमन कलियुग के अंत को चिह्नित करेगा और ब्रह्मांड के अंतिम विघटन (महाप्रलय) से पहले, सबसे पुण्य युग, सत्य युग की शुरुआत का संकेत देगा।</p>
<p class="english">In the Puranas, Kalki is depicted as the avatar who will rejuvenate existence by ending the darkest period of adharma (unrighteousness) and restoring dharma (righteousness). He is described as riding a white horse named Devadatta and wielding a fiery sword. The portrayal of Kalki varies across different Puranas, and his narrative is also found in other traditions, including the Kalachakra-Tantra of Tibetan Buddhism and Sikh texts.</p>
<p class="hindi" style="display: none;">पुराणों में, कल्कि को ऐसे अवतार के रूप में दर्शाया गया है जो अधर्म (अधर्म) के सबसे अंधकारमय काल को समाप्त करके और धर्म (धार्मिकता) को बहाल करके अस्तित्व को फिर से जीवंत करेगा। उन्हें देवदत्त नामक एक सफेद घोड़े पर सवार और एक ज्वलंत तलवार चलाने वाले के रूप में वर्णित किया गया है। कल्कि का चित्रण विभिन्न पुराणों में अलग-अलग है, और उनकी कथा तिब्बती बौद्ध धर्म और सिख ग्रंथों के कालचक्र-तंत्र सहित अन्य परंपराओं में भी पाई जाती है।</p>
<button>Read More</button>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<div class="footer-section statement ">
<h3>Statement on Faith </h3>
<p class="faith-statement">
Faith isn't just about something we believe; it is integral to our very existence, it's about how we live...
</p>
<a href="devotional-resources.html" class="read-more">Read More</a>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="index.html">Home</a></li>
<li><a href="scriptures.html">Scriptures</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="#" onclick="showLoginForm()">Discussion Forum</a></li>
<li><a href="devotional-resources.html">Devotional Resources</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact Us</h3>
<p>Email: [email protected]</p>
<p>Phone: +1 234 567 890</p>
</div>
<div class="footer-section">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="https://github.com/vishal02527" target="_blank"
><i class="fa-brands fa-github"></i
></a>
<a href="https://codepen.io/Vishal-Kumar25" target="_blank"
><i class="fa-brands fa-codepen"></i
></a>
<a
href="https://www.linkedin.com/in/vishal-kumar-8303a3283"
target="_blank"
><i class="fa-brands fa-linkedin"></i
></a>
</div>
</div>
</div>
<div class="creatorDiv">
<p>© All rights reserved <span id="cyear"></span>, Created by Vishal.</p>
</div>
</footer>
<script>
document.querySelector('.hamburger-btn').addEventListener('click', function() {
document.querySelector('.hamburger-menu').classList.toggle('open');
});
</script>
<script>
window.addEventListener('load',()=> {
const year= document.getElementById('cyear');
year.innerHTML=new Date().getFullYear();
});
</script>
<script src="script.js"></script>
</footer>
<script>
// Ensure DOM is fully loaded before running the script
document.addEventListener('DOMContentLoaded', function () {
// Get the button and all the text elements
const toggleButton = document.getElementById("toggle-btn");
const englishTexts = document.querySelectorAll(".english");
const hindiTexts = document.querySelectorAll(".hindi");
// Default state is English
let isHindi = false;
// Add event listener to the button to toggle the language
toggleButton.addEventListener("click", function() {
// Toggle the language state
isHindi = !isHindi;
// Debugging: Check if elements are being selected
console.log("English Elements:", englishTexts);
console.log("Hindi Elements:", hindiTexts);
// Loop through the elements and toggle the visibility
englishTexts.forEach((element) => {
element.style.display = isHindi ? "none" : "block"; // Hide English text
});
hindiTexts.forEach((element) => {
element.style.display = isHindi ? "block" : "none"; // Show Hindi text
});
// Change the button text based on the language
toggleButton.textContent = isHindi ? "Translate to English" : "हिन्दी में पढ़िए";
});
});
</script>
</body>
</html>