-
Notifications
You must be signed in to change notification settings - Fork 1
/
home2.html
374 lines (345 loc) · 22.7 KB
/
home2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/0b6d8e7b56.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="CSS/Tailwind.css">
<link rel="stylesheet" href="CSS/style2.css">
<script src="./home.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/Sprites.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="icon" href="https://icon2.cleanpng.com/20180404/igw/kisspng-agra-delhi-package-tour-travel-agent-tamilnadu-5ac480b4412e27.341814031522827444267.jpg">
<title>INCREDIBLE INDIA C2</title>
</head>
<body class="main1">
<div id="container">
<button class="BTN" onclick="openSlideMenu()" style="position: fixed; z-index: 5;">
<b>EXPLORE</b>
</button>
<div id="side-menu" class="side-nav">
<a href="javascript:void();" class="btn-close" onclick="closeSlideMenu()" style="margin-top: 0px;"><font size="50px"><b>×</b></font></a>
<div id="list">
<br><br><a href="index.html"><i class="fas fa-home"></i> Home</a>
<br><br><a href="home1.html"><i class="fab fa-old-republic"></i> Places</a>
<br><br><a href="Food.html"><i class="fas fa-utensils"></i> Food</a>
<br><br><a href="home2.html"><i class="fab fa-galactic-senate"></i> Festivals</a>
<br><br><a href="home3.html"><i class="fas fa-paw"></i> Nature</a>
<br><br><a href="know.html"><i class="fas fa-scroll"></i> Acknowledgement</a>
</div>
</div>
</div>
<header class="text-gray-600 body-font" style="background-color:rgba(122, 250, 207,0.3)">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<span class="ml-3 text-xl" style="font-size: 2vw;color:red;">INCREDIBLE INDIA</span>
<div class="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
</div>
</div>
</header>
<heading>
<h1 id="c1" style="text-decoration: underline;">TOP 5 FESTIVALS IN INDIA</h1>
<hr>
<hr>
<div class="container">
<h2 style = "color: rgb(65, 7, 29);">GALLERY</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://static01.nyt.com/images/2018/11/08/world/08diwali/merlin_146446161_d0e0de41-03a7-465d-b94e-cf5e1c14f773-superJumbo.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>DIWALI</h3>
<p>THE FESTIVAL OF LIGHTS</p>
</div>
</div>
<div class="item">
<img src="https://www.holidify.com/images/cmsuploads/compressed/Durga_-_Ballygunge_Durga_Puja_Samiti_-_Maddox_Square_-_Kolkata_2017-09-26_3947_20200709115152.JPG" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>DURGA PUJA</h3>
<p>BENGALI'S HEART THROB</p>
</div>
</div>
<div class="item">
<img src="https://wallpapercave.com/wp/wp2408583.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>HOLI</h3>
<p>FESTIVAL OF COLORS</p>
</div>
</div>
<div class="item">
<img src="https://static2.tripoto.com/media/filter/tst/img/7372/TripDocument/1528458204_evening.jpg
" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>RAMADAN/Eid-Ul-Fitr</h3>
<p>MUSLIM'S BIGGEST FESTIVAL</p>
</div>
</div>
<div class="item">
<img src="https://www.travelbeginsat40.com/wp-content/uploads/2018/07/Ganesha1.jpg
" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>GANESH CHATURTHI</h3>
<p> VINAYAKA CHATURTHI </p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="desc1">
<p id="p1">India is a land of festivals and fairs. Virtually celebrating each day of the year, there are more festivals celebrated in India than anywhere else in the world. Each festival pertains to different occasions, some welcome the seasons of the year, the harvest, the rains, or the full moon. Others celebrate religious occasions, the birthdays of divine beings and saints, or the advent of the New Year. A number of these festivals are common to most parts of India. However, they may be called by different names in various parts of the country or may be celebrated in a different fashion. Some of the festivals celebrated all over India are mentioned below.
</p>
</div>
</heading>
<main>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="p-4 md:w-1/3" id = "card1">
<div class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://img.huffingtonpost.com/asset/5faea1752400006528b043ca.jpeg?ops=scalefit_630_noupscale" alt="blog">
<div class="p-6">
<h1 class="title-font text-lg font-medium text-gray-900 mb-3" style= "color: rgb(255, 217, 0); font-size: larger; font-weight: 2000;">DIWALI</h1>
<div class="flex items-center flex-wrap ">
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<div class = "incard" id = "incard1">
<img src = "https://images.financialexpress.com/2017/10/firecrackers.jpg" ></img>
<p id = "inpara1" style =" color:red">Deepawali or Diwali, is a festival of lights symbolising the victory of righteousness and the lifting of spiritual darkness. The word 'Deepawali' literally means rows of diyas (clay lamps). This is one of the most popular festivals in the Hindu calendar. It is celebrated on the 15th day of Kartika (October/November). This festival commemorates Lord Rama's return to his kingdom Ayodhya after completing his 14-year exile.
The most beautiful of all Indian festivals, Diwali is a celebration of lights. Streets are illuminated with rows of clay lamps and homes are decorated with colours and candles. This festival is celebrated with new clothes, spectacular firecrackers and a variety of sweets in the company of family and friends. All this illumination and fireworks, joy and festivity, signify the victory of divine forces over those of wicked.</p>
</div>
</div>
<div class="p-4 md:w-1/3" id = "card2">
<div class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://nie-images.s3.amazonaws.com/gall_content/2016/10/2016_10$largeimg07_Oct_2016_112220390.jpg" alt="blog">
<div class="p-6">
<h1 class="title-font text-lg font-medium text-gray-900 mb-3" style= "color: rgb(252, 252, 26); font-size: larger;">DURGA PUJA</h1>
<div class="flex items-center flex-wrap">
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<div class = "incard" id = "incard2">
<img src = "https://www.miraclefoundation.org/wp-content/uploads/2008/10/kolkatas-durga-puja-festival-wallpaper.jpg" ></img>
<p id = 'inpara2' style =" color:red; background-color: rgba(4, 4, 70,0.8);">Durga Puja, or the annual celebration of Hindu goddess Durga, is one of India’s grandest festivals. It is a multiple-day celebration varying from 6 days in some parts of the country to 10 days in others. In most of Northern India the festival is celebrated as Navratri (nine nights). Regardless of these variations, the last four days of Maha Saptami, Maha Ashtami, Maha Navami and Vijay Dashami, are particularly important and accordingly celebrated with much splendor around the country.
In most parts of the country, the festival commemorates the victory of the goddess over a demon called Mahishasura. As told by Hindu mythology, the demon was set out to wage war against the gods and it was up to Durga to slay him and protect earth. She began her battle against the demon on the seventh day of Navratri, known as Maha Saptami and slayed him by the final day of Vijay Dashami.
The goddess, known to Hindus as the ‘destroyer of evil’, is characterized by her ten arms carrying various lethal weapons, as well as her vehicle – the lion. Also known as Bhavani, Amba, Chandika, Gauri, Parvati, Mahishasuramardini, Durga is the ‘Mother goddess’ and the ‘Protector of the Righteous’ to Hindu devotees.</p>
</div>
</div>
<div class="p-4 md:w-1/3" id = "card3">
<div class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://i2.wp.com/detechter.com/wp-content/uploads/2018/02/Modern-Holi-Festival.jpg?resize=662%2C489&ssl=1" alt="blog">
<div class="p-6">
<h1 class="title-font text-lg font-medium text-gray-900 mb-3" style= "color: rgb(252, 252, 26); font-size: larger;">HOLI</h1>
<div class="flex items-center flex-wrap ">
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<div class = "incard" id = "incard3">
<img src = "https://assets.seniority.in/media/ktpl_blog/Holi_Main_image.jpg" ></img>
<p id = 'inpara3' style =" color:red ; background-color: rgba(4, 4, 70,0.8);">Holi has been celebrated in the Indian subcontinent for centuries, with poems documenting celebrations dating back to the 4th century CE. It marks the beginning of spring after a long winter, symbolic of the triumph of good over evil. It is celebrated in March, corresponding to the Hindu calendar month of Phalguna.
There are varying accounts of Holi’s origin mentioned in several works of ancient Indian literature. According to one popular version of the story, an evil king became so powerful that he forced his subjects to worship him as their god. But to the king’s ire, his son Prahlada continued to be an ardent devotee of the Hindu deity Lord Vishnu. The angry king plotted with his sister, Holika, to kill his son. Holika, who was immune to fire, tricked Prahlada to sit in a pyre with her. When the pyre was lit, the boy’s devotion to Lord Vishnu helped him walk away unscathed while Holika, from whom the festival derives its name, was burned to death despite her immunity.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="text-gray-600 body-font" >
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4" >
<div class="p-4 md:w-1/3" id = "card4">
<div class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://static.india.com/wp-content/uploads/2018/06/eid-mubarak-1.jpg?impolicy=Medium_Resize&w=1200&h=800" alt="blog">
<div class="p-6">
<h1 class="title-font text-lg font-medium text-gray-900 mb-3" style= "color: rgb(252, 252, 26); font-size: larger;">RAMADAN</h1>
<div class="flex items-center flex-wrap ">
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<div class = "incard" id = "incard4">
<img src = "https://statik.tempo.co/data/2019/05/05/id_839563/839563_720.jpg" ></img>
<p id = "inpara4" style =" color:red; background-color: rgba(4, 4, 70,0.8);">Victoria Memorial is one of the famous and beautiful monuments of Kolkata. It was built between 1906 and 1921 to commemorate Queen Victoria's 25-year reign in India. After the Sepoy Mutiny of 1857, the British government gathered the reins of control of the country directly, and in 1876 the British parliament made Victoria the Empress of India. Her reign ended with her death in 1901.
Ramadan is the most sacred month of the year in Islamic culture. Muslims observe the month of Ramadan, to mark that Allah, or God, gave the first chapters of the Quran to the Prophet Muhammad in 610, according to the Times of India. During Ramadan, Muslims fast, abstain from pleasures and pray to become closer to God. It is also a time for families to gather and celebrate.
Ramadan is the ninth month in the Islamic calendar, which is a lunar calendar based on the cycles of the moon. Observances begin the morning after the crescent moon is visibly sighted, marking the beginning of the new month. Traditionally, people searched for the slight crescent using the naked eye, which has led to the declaration of different starting times for Ramadan, due to weather or geography. In order to have a more consistent start time for Muslims around the world, however, astronomical calculations are now sometimes used. Using science to mark the beginning of the month is controversial, however, and in many parts of the world, Ramadan still does not begin until religious leaders announce that they have personally seen the crescent moon.</p>
</div>
</div>
<div class="p-4 md:w-1/3" id = "card5">
<div class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden">
<img class="lg:h-48 md:h-36 w-full object-cover object-center" src="https://static.toiimg.com/thumb/77689824.cms?width=804&height=603&resizemode=4&imgsize=934890" alt="blog">
<div class="p-6">
<h1 class="title-font text-lg font-medium text-gray-900 mb-3" style= "color: rgb(252, 252, 26); font-size: larger;">GANESH CHATURTHI</h1>
<div class="flex items-center flex-wrap">
<svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<div class = "incard" id = "incard5">
<img src = "https://m.hindustantimes.com/rf/image_size_1200x900/HT/p2/2020/08/22/Pictures/eve-of-ganesh-chaturthi-festival_f356ac0a-e438-11ea-aae4-2b178f7f5029.jpg" ></img>
<p id = "inpara5" style =" color:red; background-color: rgba(4, 4, 70,0.8);">Beginning with the 2nd century B.C., and continuing into the 6th century A.D., the paintings and sculptures in the caves of Ajanta and Ellora, inspired by Buddhism and its compassionate ethos, unleashed a surge of artistic excellence unmatched in human history. These Buddhist and Jain caves are ornately carved, yet seem quiet and meditative and exude a divine energy and power.
Ganesh Chaturthi is a ten-day Hindu festival celebrated to honour the elephant-headed God Ganesha's birthday. He is the younger son of Lord Shiva and Goddess Parvati.
Ganesha is known by 108 different names and is the Lord of arts and sciences and the deva of wisdom. He is honoured at the start of rituals and ceremonies as he's considered the God of beginnings. He's widely and dearly referred to as Ganapati or Vinayaka.
There are two different versions about Ganesha's birth. One has it that Goddess Parvati created Ganesha out of dirt off her body while having a bath and set him to guard her door while she finishes her bath. Shiva who has gone out, returned at that time, but as Ganesha didn't know of him, stopped him from entering. An angry Shiva severed the head of Ganesha after a combat between the two. Parvati was enraged and Shiva promised Ganesha will live again. The devas who went in search of a head facing north of a dead person could manage only the head of an elephant. Shiva fixed the elephant's head on the child and brought him back to life.
The other legend has it that Ganesha was created by Shiva and Parvati on request of the Devas, to be a vighnakartaa (obstacle-creator) in the path of rakshasas (demonic beings), and a vighnahartaa (obstacle-averter) to help the Devas.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<h1 id = "foot1" style="color: whitesmoke; font-size: 3vw; text-align: center; text-decoration: dotted;">HOVER ON ANY OF THE CARDS TO KNOW MORE</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1 style = "color:yellow; font-size:4vw;text-align: center;">PROUD TO BE AN INDIAN</h1>
<h1 style="color: lime; font-size: 3vw;text-align: center;">MERA DESH MAHAN</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<script>
$(document).ready(function(){
$('incard1').hide()
$('#card1').mouseenter(function(){
$('#incard1').show()
});
$('#incard1').click(function(){
$('#incard1').hide();
})
$('#incard2').hide();
$('#card2').hover(function(){
$('#incard2').show()
});
$('#incard2').click(function(){
$('#incard2').hide();
})
$('#incard3').hide();
$('#card3').hover(function(){
$('#incard3').show()
});
$('#incard3').click(function(){
$('#incard3').hide();
})
$('#incard4').hide();
$('#card4').hover(function(){
$('#incard4').show()
});
$('#incard4').click(function(){
$('#incard4').hide();
})
$('#incard5').hide();
$('#card5').hover(function(){
$('#incard5').show()
});
$('#incard5').click(function(){
$('#incard5').hide();
})
})
$('#p1').hide();
$(window).scroll(function(){
var val = $(window).scrollTop();
console.log(val);
if(val>424 && val<795){
$('#p1').show(1000);
}
});
function openSlideMenu(){
document.getElementById('side-menu').style.width = '300px';}
function closeSlideMenu(){
document.getElementById('side-menu').style.width = '0';}
</script>
</body>
</html>