-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdisaster.html
111 lines (105 loc) · 7.3 KB
/
disaster.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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="text-gray-400 bg-gray-900 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a href="index.html" class="flex title-font font-medium items-center text-white mb-4 md:mb-0">
<img src="logo.png" alt="Logo" class="w-20 h-20 text-white p-2 rounded-full"></img>
<span class="ml-3 text-xl">ResQHub</span>
</a>
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
<a href="disaster.html" class="mr-5 hover:text-white">Disaster</a>
<a href="prep.html" class="mr-5 hover:text-white">Be Prepared</a>
<a href="contact.html" class="mr-5 hover:text-white">Contact</a>
<a href="library.html" class="mr-5 hover:text-white">Library</a>
</nav>
<a href="https://www.careindia.org/donate/" class="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">Donate
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</header>
<!--landslides-->
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
<img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="landslide.jpeg.jpg">
<div class="text-center lg:w-2/3 w-full">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">Landslides</h1>
<p class="leading-relaxed mb-8">Natural phenomena involving the downward movement of rock, soil, and debris on slopes. Understand local geological conditions, monitor for warning signs, avoid construction on steep slopes, and evacuate if necessary. Prompt action and awareness are key for minimizing casualties and damage.</p>
<div class="flex justify-center">
<button href="landslide.html" class="inline-flex text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-600 rounded text-lg">Know More</button>
</div>
</div>
</div>
</section>
<!--Earthquakes-->
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
<img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="Earthquake.jpg">
<div class="text-center lg:w-2/3 w-full">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">Earthquakes</h1>
<p class="leading-relaxed mb-8">Sudden shaking of the ground caused by the movement of tectonic plates. Secure heavy furniture, identify safe spots indoors, and have an emergency kit ready. Avoid running outside during shaking, and be cautious of aftershocks.</p>
<div class="flex justify-center">
<button href="earthquake.html" class="inline-flex text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-600 rounded text-lg">Know More</button>
</div>
</div>
</div>
</section>
<!--droughts-->
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
<img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="drought.jpg">
<div class="text-center lg:w-2/3 w-full">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">Droughts</h1>
<p class="leading-relaxed mb-8">Prolonged periods of low precipitation leading to water scarcity. Conserve water, practice sustainable farming, and support water-efficient policies. Diversify water sources, prioritize essential water usage, and raise awareness about water conservation to mitigate drought's impact.</p>
<div class="flex justify-center">
<button href="drought.html" class="inline-flex text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-600 rounded text-lg">Know More</button>
</div>
</div>
</div>
</section>
<!--Floods-->
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
<img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="flood.jpg">
<div class="text-center lg:w-2/3 w-full">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">Floods</h1>
<p class="leading-relaxed mb-8">Overflow of water onto land not usually submerged. Prepare emergency kits, elevate electrical systems, and secure valuables. Evacuate if authorities advise, avoid flooded areas, and never drive through flooded roads. Community planning and early warning systems are crucial for flood management.</p>
<div class="flex justify-center">
<button href="floods.html" class="inline-flex text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-600 rounded text-lg">Know More</button>
</div>
</div>
</div>
</section>
<!--cyclones-->
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
<img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="cyclone.jpg">
<div class="text-center lg:w-2/3 w-full">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">Cyclones</h1>
<p class="leading-relaxed mb-8">Intense storms with rotating winds around a central low-pressure area. Prepare an emergency plan, reinforce homes, and stock up on supplies. Evacuate if instructed, stay indoors during the storm, and heed official warnings. Early detection and preparedness save lives during cyclones.</p>
<div class="flex justify-center">
<button href="cyclones.html" class="inline-flex text-white bg-purple-500 border-0 py-2 px-6 focus:outline-none hover:bg-purple-600 rounded text-lg">Know More</button>
</div>
</div>
</div>
</section>
<footer class="text-gray-400 bg-gray-900 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a href="index.html" class="flex title-font font-medium items-center text-white mb-4 md:mb-0">
<img src="logo.png" alt="Logo" class="w-20 h-20 text-white p-2 rounded-full"></img>
<span class="ml-3 text-xl">ResQHub</span>
</a>
<p class="text-sm text-gray-400 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">© The Invincibles —
<a href="mailto:[email protected]" class="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">Email</a>
</p>
</div>
</footer>
</body>
</html>