-
Notifications
You must be signed in to change notification settings - Fork 1
/
home3.html
369 lines (341 loc) · 21.9 KB
/
home3.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/Tailwind.css">
<link rel="stylesheet" href="CSS/style3.css">
<link rel="stylesheet" href="CSS/Sprites.css">
<script src="./home.js"></script>
<script src="https://kit.fontawesome.com/0b6d8e7b56.js" crossorigin="anonymous"></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">
<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 C3</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(233, 21, 215, 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: rgb(157, 255, 0);">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 NATURAL ATTRACTIONS IN INDIA</h1>
<hr>
<hr>
<div class="container">
<h2 style = "color: rgb(255, 209, 3); font-weight: 1000;">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://deih43ym53wif.cloudfront.net/everest-base-camp-himalayas-nepal_08bc81b2f2.jpeg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3 style = "color: black;">HIMALAYAS</h3>
<p style="color: black;">GREATEST IN THE WORLD</p>
</div>
</div>
<div class="item">
<img src="https://www.sunderbannationalpark.in/wp-content/uploads/2020/02/sunderban-tourism.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>SUNDARBANS</h3>
<p>WEST BENGAL</p>
</div>
</div>
<div class="item">
<img src="https://k6u8v6y8.stackpathcdn.com/blog/wp-content/uploads/2017/10/leh-srinagar-travel-experience.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3 style="color: rgb(245, 229, 11);">MAGNETIC HILLS</h3>
<p style="color: rgb(255, 217, 0);">LADAKH</p>
</div>
</div>
<div class="item">
<img src="https://img.traveltriangle.com/blog/wp-content/uploads/2018/01/Seven-Sisters-Falls-kb6529tdf.jpg
" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>CHERAPUNJI</h3>
<p>MEGHALAYA</p>
</div>
</div>
<div class="item">
<img src="https://images.squarespace-cdn.com/content/v1/5940f2725016e1c79e469470/1537259886928-U3S2V8K44PAITY24ASU1/ke17ZwdGBToddI8pDm48kL-Vr_Q4RZHQn7lGx-rbmgZ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0s1LK8gu64hle203mIYOUnoo3OAjjBYQ20lbs4emsfPlx9A9kkSGxH-gROWNEwFFkA/Alleppey+Backwaters+tour
" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>ALEPPI BACKWATERS</h3>
<p>KERALA</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">The geographic terrain of India is rich and diverse, filled with lush green forests, scenic lakes, majestic mountain peaks, mosaics of grasslands, tropical beaches, and vast stretches of wilderness. From east to west, north to south, this South Asian country packs an assortment of treasures for nature lovers. Here is a rundown of some of the most beautiful places where you can be at one with nature.
</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://img1.oastatic.com/img2/48054508/1080x410r/basecamp-in-nepal-himalayas.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;">HIMALAYAS</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://i.imgur.com/WLFIgp2.jpg" ></img>
<p id = "inpara1" style =" color:red">The Himalayas, which literally means the abode of snow, is the youngest and the highest range of fold mountains in the world. In India it extends in the east from the borders of Myanmar to where the Indus divides it from the Hindukush and Karakoran ranges, covering a distance of about 2500 km. The Himalayas consist of three parallel ranges, the Greater Himalayas known as the Himadri, the Lesser Himalayas called the Himachal, and the Shivalik hills, which comprise the foothills.
Due to the changes in temperature as one climbs higher, there is a diverse range of flora and fauna making it a virtual heaven for naturalists. Plants and animals of the tropics are found up to 1000 m. from there to about 3000 m are the temperate region species and, above that comes the region of the Alpines. With height and change in temperature, the flora and fauna also change from the deodars to the azaleas to the pines and firs, from the tiger to the snow leopard, from the sparrows and cormorant to the snow partridge, snow cock, and snow pigeon.
</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://beyonder.travel/wp-content/uploads/2020/06/Sundarban_river-1024x445.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;">SUNDARBANS</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.outlookindia.com/outlooktraveller/public/uploads/2018/02/tiger-in-sunderbans-1024x672.jpg" ></img>
<p id = 'inpara2' style =" color:rgb(255, 238, 0); background-color: rgba(100, 8, 128, 0.8);">The Sundarbans is a cluster of low-lying islands in the Bay of Bengal, spread across India and Bangladesh, famous for its unique mangrove forests. This active delta region is among the largest in the world, measuring about 40,000 sq km.The Sundarbans delta in India has been a priority region for WWF-India since 1973 due to its unique biodiversity. While it supports a sizeable population of wild tigers and other wildlife, it is also an ecologically fragile and climatically vulnerable region that is home to over 4.5 million people. Securing the future of the Sundarbans, its biodiversity and people requires a long term vision that can integrate climate adaptation and conservation strategies along with shorter term interventions such as ensuring sustainable livelihoods, access to clean and sustainable energy and effective human wildlife conflict management.</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://devilonwheels.com/wp-content/uploads/2018/12/Magnetic-Hill-Leh-Ladakh-10.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;">MAGNETIC HILLS</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://i.pinimg.com/originals/45/46/05/454605af3b62ec653520f7d4c5c6703c.jpg" ></img>
<p id = 'inpara3' style =" color:rgb(255, 238, 0) ; background-color: rgba(100, 8, 128, 0.8);">While one raids the barren roads of Leh, a signboard appears indicating “Magnetic Hill- The Phenomenon that Defies Gravity.” A white box marked with ‘Park your vehicle Here’ appears ahead of the board where one can park their vehicles in neutral and see them moving uphill at a speed of 10-20km/hr by itself against the gravity.
The phenomenon is a sensation and attracts hundreds of tourists every month. One can see them enjoying and throwing various facts & theories behind the same. This small stretch is a perfect stopover to record videos, click pictures and take some rest in solace.
Many experts have presented various theories in and against the assumption and tried to find the reason vehicle moving uphill and not downhill against the slope. And they came out with the aspect of Magnetic theory or optical illusion amongst many other reasons.
</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://i.pinimg.com/originals/a1/f2/ea/a1f2ead8a4b1b804ff157650c44750a5.png" 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;">CHERAPUNJI</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://www.dynamitenews.com/images/2019/07/13/meghalaya-cabinet-approves-draft-water-policy/4b69807.jpg" ></img>
<p id = "inpara4" style =" color:rgb(255, 238, 0); background-color: rgba(100, 8, 128, 0.8);">Spread out along the razor sharp ridges of a gigantic mountain wall, Cherrapunjee sits neatly on the edge of the Himalayas towering the pancake low lying plains of Bangladesh. This alluring village was once regarded as the wettest place on the earth given the massive monsoon rainfall that it sees. Road leading from Shillong to this miniscule village passes through the magnificent scenery that become sensational at the Dympep viewpoint. Here you’ll come across a photogenic V shaped valley that deeply slits into the plateau.
The lush green surroundings of Cherrapunjee very well justifies the Meghalaya’s over-used ‘Scotland of the East’ tag. Nohkalikai Falls here are particularly dramatic especially during the monsoon season when they are brimming with a quantity which is 20 times more than the original. These can be seen from the viewpoint that is located on a plateau that lies at the edge of the 4.4 km mountain ride from the Sohra market. You can hire a local taxi here that will shuttle you to the view point. More significant than this is the series of the ‘Grand Canyon’ gorges that are located around the region that further descends into the green chasms of the tropical forests.</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://drifterplanet.com/wp-content/uploads/2019/02/Canoeing-in-a-narrow-canal-in-Alleppey-backwaters-where-houseboats-cant-go.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;">ALEPPI</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://www.tripsavvy.com/thmb/9Yl_Bed_AgFCvuQBFrkcY8fIKFY=/3008x1692/smart/filters:no_upscale()/houseboats_in_kottayam_2_438-56a3be175f9b58b7d0d39246.jpg" ></img>
<p id = "inpara5" style =" color:rgb(255, 238, 0); background-color: rgba(100, 8, 128, 0.8);">Alleppey is a coastal town where one side is the Arabian Sea and other side completely covered by rivers and canals which is known as Alleppey backwaters. There are many big and small canals. Both sides of these crisscrossed canals and rivers are beautiful lagoons, green paddy fields, coconut palms, local village homes which are not available in any other part of the world. Local people live on the banks of these canals and these canals and rivers are part of their daily life. Road access to these villages which are surrounded by small canals and rivers are limited. Therefore, most of the local people are depend on water transport ie small rice boats or country boats/motor boats to move from one place to another place. Still in some part of the village, one can see moving small country boat sells ethnic items to the villagers who are living on the banks of canals and rivers. All these make Alleppey a major tourist attraction place.
Another important attraction of Allepepy is the famous and exciting water sport called snake boat race is organized at different canals in Alleppey which attracts the largest crowd from all over the world. Alleppey backwaters with houseboats will be a best combination for the spending leisure time.</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; background-color: rgba(123, 248, 207,0.5);">PROUD TO BE AN INDIAN</h1>
<h1 style="color: rgb(4, 51, 8); font-size: 3vw;text-align: center;background-color: rgba(99, 148, 238,0.5);">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>