-
Notifications
You must be signed in to change notification settings - Fork 2
/
mock-exercise.html
162 lines (145 loc) · 7.55 KB
/
mock-exercise.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disaster Awareness Portal</title>
<!-- Link to your external CSS file -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS (You can also link to the Bootstrap CDN as before) -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<div id="navbar-container"></div>
<div class="mt-6" id="exercise-container">
</div>
<div class="container mt-1" id="disaster-block-list">
<h1 class="mt-7 home-heading text-center">Mock Exercises</h1>
<div class="row">
<div class="col-md-6">
<a href="#" class="text-decoration-none text-dark">
<div class="wide-rectangular-block">
<div class="wide-rectangular-content">
<h2>Avalanche</h2>
<p>Avalanche are sudden and destructive movements of snow, ice, and debris down a mountain slope, posing significant risks to people, property, and the environment.</p>
</div>
<div class="wide-rectangular-image">
<img src="img/avalanche.jpg" alt="avalanche">
</div>
</div>
</a>
</div>
<div class="col-md-6">
<div class="wide-rectangular-block">
<div class="wide-rectangular-content">
<h2>Drought</h2>
<p>Drought is an extended period of abnormally low precipitation that can lead to water scarcity, agricultural losses, and ecosystem stress.</p>
</div>
<div class="wide-rectangular-image">
<img src="img/drought.jpg" alt="Drought">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" id="earthquake-block">
<div class="wide-rectangular-block">
<div class="wide-rectangular-content">
<h2>Earthquake</h2>
<p>An earthquake is a sudden and powerful shaking of the Earth's surface caused by the movement of tectonic plates beneath the Earth's crust, often resulting in damage to buildings and landscapes.</p>
</div>
<div class="wide-rectangular-image">
<img src="img/earthquake.jpg" alt="avalanche">
</div>
</div>
</div>
<div class="col-md-6">
<div class="wide-rectangular-block">
<div class="wide-rectangular-content">
<h2>Flood</h2>
<p>Floods are natural disasters characterized by the overflow of water onto normally dry land, causing damage to property, infrastructure, and posing a threat to human safety.</p>
</div>
<div class="wide-rectangular-image">
<img src="img/flood.jpg" alt="flood">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="#" class="text-decoration-none text-dark">
<div class="wide-rectangular-block">
<div class="wide-rectangular-content">
<h2>Forest Fire</h2>
<p>A forest fire is an uncontrolled blaze that spreads rapidly through wooded areas, often causing significant environmental and property damage.</p>
</div>
<div class="wide-rectangular-image">
<img src="img/forest-fire.jpg" alt="forest fire">
</div>
</div>
</a>
</div>
<div class="col-md-6">
<div class="wide-rectangular-block">
<div class="wide-rectangular-content">
<h2>Heatwave</h2>
<p>A heat wave is an extended period of excessively hot weather, often accompanied by high humidity, that can have adverse effects on health and the environment.</p>
</div>
<div class="wide-rectangular-image">
<img src="img/heatwave.jpg" alt="heatwave">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="#" class="text-decoration-none text-dark">
<div class="wide-rectangular-block">
<div class="wide-rectangular-content">
<h2>Landslide</h2>
<p>A landslide, also known as a "land slip," is the downward movement of rock, soil, and debris on a slope or mountain, often triggered by factors like heavy rainfall, earthquakes, or human activities, with the potential to cause significant damage and loss of life.</p>
</div>
<div class="wide-rectangular-image">
<img src="img/landslide.jpg" alt="landslide">
</div>
</div>
</a>
</div>
<div class="col-md-6">
<div class="wide-rectangular-block">
<div class="wide-rectangular-content">
<h2>Thunderstorm</h2>
<p>A thunderstorm is a weather event with lightning, thunder, heavy rain, and can sometimes include hail and strong winds.</p>
</div>
<div class="wide-rectangular-image">
<img src="img/thunderstorm.jpg" alt="thunderstorm">
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer-container"></div>
<style>
body {
background-image: url('img/background1.jpeg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size:cover;
}
</style>
<!-- Load the JavaScript from navbar-loader.js -->
<script src="js/navbar-loader.js"></script>
<script src="js/footer-loader.js"></script>
<script src="js/mock-loader.js"></script>
<!-- Bootstrap JS and jQuery (optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
</body>
</html>