-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
294 lines (234 loc) · 15.8 KB
/
index.html
File metadata and controls
294 lines (234 loc) · 15.8 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Los Angeles 2024 Fires</title>
<link rel="stylesheet" href="./styles.css">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
</head>
<body>
<div class="grid-container">
<header class="grid-item-1">
<div id="logo_div">
<img src="./images/logo_icon.svg" alt="Logo Icon Depicting a Circle Around a Flame Emoticon" title="Logo Icon Depicting a Circle Around a Flame Emoticon" id="logo_icon">
</div>
<h1>Los Angeles Fires - 2025</h1>
<nav class="navBar">
<ul class="navList">
<li>
<a href="#introHeader" class="navLinks">Home</a>
</li>
<li>
<a href="#timelineContainer" class="navLinks">Timeline</a>
</li>
<li>
<a href="#photoGridContainer" class="navLinks">Gallery</a>
</li>
</ul>
</nav>
</header>
<main class="grid-item-2">
<div>
<h2 id="introHeader">Hollywood on Fire</h2>
</div>
<div class="introImageContainer">
<figure id="introImage">
<img class="responsiveImages" src="./images/palisades-fire-los-angeles-california-photos-2025-04.webp" alt="Image of Los Angeles Palisades Street Engulfed in Flames" title="Image of Los Angeles Palisades Street Engulfed in Flames">
<figcaption>Image of Los Angeles Palisades Street Engulfed in Flames | Credit: <a href="https://time.com/7205487/california-wildfire-palisades-fire-photos/" target="_blank" class="figLinks">Time Magazine | Ethan Swope - AP</a></figcaption>
</figure>
</div>
<div id="introArticle">
<p>Disaster struck California right at the beginning of 2025. Wild fires erupted on January 7th, 2025 starting as a brush fire in the Palisades. </p>
<p>The flames were fed by strong winds and dry weather conditions and spread to over 23,448 acres of land in the Palisades.</p>
<p>The fires started in the Palisades of California on the morning of January 7th and then spread the storm through to the Eaton area just hours after the initial flames.</p>
<p>Evacuation orders were given up to 200,000 people in the areas effected. </p>
<br>
<br>
<hr>
<br>
<br>
<h3>Damages and Destruction Aftermath</h3>
<p>Confirmed by medical examiner's office as well as the California Department of Forestry and Fire Protection, the death toll has risen to 29 souls.</p>
<p>Approximately, according to NBC News and Cal Fire, over 37,000 acres of land burned. </p>
<br>
<div class="introImageContainer">
<figure class="screenshotImg">
<img src="./images/Screenshot_Cal_Fire_2025_Incidents_Archive.png" alt="Screenshot of California Department of Forestry and Fire Protection Archived Reports of Palisades and Eaton Fire" title="Screenshot of California Department of Forestry and Fire Protection Archived Reports of Palisades and Eaton Fire" class="responsiveImages">
<figcaption>Screenshot of California Department of Forestry and Fire Protection Archived Reports of Palisades and Eaton Fire | Credit: <a href="https://www.fire.ca.gov/incidents/2025" target="_blank" class="figLinks">California Department of Forestry and Fire Protection Archived Reports of Palisades and Eaton Fire</a></figcaption>
</figure>
</div>
<br>
<p>Monday after the fires broke out, some residents were allowed to return to their homes and neighborhoods. Some victimes, unfortunately, ended up homeless due to the wreckage of the disaster.</p>
<p>NBC News reports that JPMorgan has estimated anwhere from $20 billion to $50 billion in losses or claims to losses from the fires.</p>
<div class="introImageContainer">
<figure class="screenshotImg">
<img src="./images/palisades-eaton-fire-los-angeles-california-photos-2025-28.webp" alt="Aerial View of the Aftermath with Burnt Neighborhoods in the Palisades" title="Aerial View of the Aftermath with Burnt Neighborhoods in the Palisades" class="responsiveImages">
<figcaption>Aerial View of the Aftermath with Burnt Neighborhoods in the Palisades | Credit: <a href="https://time.com/7205487/california-wildfire-palisades-fire-photos/" target="_blank" class="figLinks">Time Magazine | Mark J. Terrill | AP</a></figcaption>
</figure>
</div>
<p>The cause of the fires are still under investigation. Controversy strikes political spaces as Mayor Karen Bass fires the L.A. Fire Chief Kristin Crowley after the fires took place.</p>
</div>
<br>
<br>
<hr>
<br>
<br>
<div id="timelineContainer">
<h4>Timeline of the Fires</h4>
<div id="timelineArticle">
<div id="timelineOne">
<img src="./images/caution-sign.svg" alt="Caution Sign with Red Outline" title="Caution Sign with Red Outline" class="timelineIcons">
</div>
<div id="timelineTwo">
<p class="timelineHeaders">January 7th - 10:30 a.m.</p>
<p>Fire begins to burn in the Southeast of the Palisades starting at 10 acres</p>
</div>
<div id="timelineThree">
<p class="timelineHeaders">January 7th - 12:30 p.m.</p>
<p>Palisades fire quickly grew to 200 acres, evacuation orders given for those in the fires path to Pacific Coast Highway</p>
</div>
<div id="timelineFour">
<img src="./images/evacuate-fire.svg" alt="Fire Flame with Stick Figure Running Away" title="Fire Flame with Stick Figure Running Away" class="timelineIcons">
</div>
<div id="timelineFive">
<img src="./images/wild-fire.svg" alt="Wild Fire Icon - Tree On Fire" title="Wild Fire Icon - Tree On Fire" class="timelineIcons">
</div>
<div id="timelineSix">
<p class="timelineHeaders">January 7th - 6:30 p.m.</p>
<p>Fire starts in Altadena where the Eaton Fires begin, 80 mph winds rising, two fires are now being fought by firefighters</p>
</div>
<div id="timelineSeven">
<p class="timelineHeaders">January 7th - 10:30 p.m.</p>
<p>Third fire breaks out in Sylmar as the Hurst Fire, 800 acres begins to burn</p>
</div>
<div id="timelineNine">
<img src="./images/fire.svg" alt="Fire Flame Icon" title="Fire Flame Icon" class="timelineIcons">
</div>
<div id="timelineTen">
<img src="./images/fire-engine.svg" alt="Fire Truck" title="Fire Truck" class="timelineIcons">
</div>
<div id="timelineEleven">
<p class="timelineHeaders">January 8th - 9:00 a.m.</p>
<p>Both Palisades and Eaton fires double in size, firefighters continue their efforts</p>
</div>
<div id="timelineTwelve">
<p class="timelineHeaders">January 24th</p>
<p>More than two weeks later the fires are noted to be 100% contained. Over 37,000 acres of burned land and homes.</p>
</div>
<div id="timelineThirteen">
<img src="./images/damaged-house.svg" alt="Broken House Icon" title="Broken House Icon" class="timelineIcons">
</div>
</div>
</div>
<br>
<br>
<br>
<hr>
<div id="photoGridContainer">
<h5>L.A. Fires Photo Gallery</h5>
<p>Click on the images to open them in a new tab</p>
<div id="photoGridArticle">
<div id="photoGridOne">
<a href="./images/photo-grid-one-palisades-fire-los-angeles-california-photos-2025-08.webp" target="_blank">
<img src="./images/photo-grid-one-palisades-fire-los-angeles-california-photos-2025-08.webp" alt="Fire Embers Sweep Street and Trees" title= "Fire Embers Sweep Street and Trees | Photo Credit: Time Magazine | Josh Edelson | AFP/Getty Images" class="responsiveImages">
</a>
</div>
<div id="photoGridTwo">
<a href="./images/photo-grid-two-palisades-eaton-fire-los-angeles-california-photos-2025-31.webp" target="_blank">
<img src="./images/photo-grid-two-palisades-eaton-fire-los-angeles-california-photos-2025-31.webp" alt="Eaton Home and Trees Engulfed in Flames" title= "Eaton Home and Trees Engulfed in Flames | Photo Credit: Time Magazine | Josh Edelson | AFP/Getty Images" class="responsiveImages">
</a>
</div>
<div id="photoGridThree">
<a href="./images/photo-grid-three-palisades-eaton-fire-los-angeles-california-photos-2025-33.webp" target="_blank">
<img src="./images/photo-grid-three-palisades-eaton-fire-los-angeles-california-photos-2025-33.webp" alt="Firefighters Attempting to Put Out Fires Inside Middle School Auditorium" title= "Firefighters Attempting to Put Out Fires Inside Middle School Auditorium| Photo Credit: Time Magazine | Josh Edelson | AFP/Getty Images" class="responsiveImages">
</a>
</div>
<div id="photoGridFour">
<a href="./images/photo-grid-four-palisades-fire-los-angeles-california-photos-2025-12.webp" target="_blank">
<img src="./images/photo-grid-four-palisades-fire-los-angeles-california-photos-2025-12.webp" alt="Single Firefighter Bringing Hose to Burning House" title= "Single Firefighter Bringing Hose to Burning House| Photo Credit: Time Magazine | Ethan Swope | AP" class="responsiveImages">
</a>
</div>
<div id="photoGridFive">
<a href="./images/photo-grid-five-palisades-eaton-fire-los-angeles-california-photos-2025-34.webp" target="_blank">
<img src="./images/photo-grid-five-palisades-eaton-fire-los-angeles-california-photos-2025-34.webp" alt="Sky View of Smoke Covering the Air with Red Glow" title= "Sky View of Smoke Covering the Air with Red Glow| Photo Credit: Time Magazine | Patrick T. Fallon | AFP/Getty Images" class="responsiveImages">
</a>
</div>
<div id="photoGridSix">
<a href="./images/photo-grid-six-palisades-fire-los-angeles-california-photos-2025-07.webp" target="_blank">
<img src="./images/photo-grid-six-palisades-fire-los-angeles-california-photos-2025-07.webp" alt="Firefighters on the Beach Battling Fires" title= "Firefighters on the Beach Battling Fires| Photo Credit: Time Magazine | David Crane | MediaNews Group/Los Angeles Daily News/Getty Images" class="responsiveImages">
</a>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
</main>
<footer class="grid-item-3">
<div id="footerGridContainer">
<div id="footerGridOne">
<p>Los Angeles Fires Article ©</p>
</div>
<div id="footerGridTwo">
<p class="footerHeaderTitles">Article Links:</p>
<ul>
<li>
<a href="#introHeader" class="footerLinks">Introduction</a>
</li>
<li>
<a href="#timelineContainer" class="footerLinks">Timeline of Events</a>
</li>
<li>
<a href="#photoGridContainer" class="footerLinks">Photo Gallery</a>
</li>
</ul>
</div>
<div id="footerGridThree">
<p class="footerHeaderTitles">Article Reference Credits:</p>
<ul>
<li>
<a href="https://www.nbcnews.com/news/us-news/california-wildfires-what-we-know-palisades-eaton-los-angeles-rcna188239" class="footerLinks" target="_blank">NBC News - California Wildfires What We Know</a>
</li>
<li>
<a href="https://www.nbcnews.com/news/us-news/deaths-los-angeles-area-wildfires-rise-rcna189541" class="footerLinks" target="_blank">NBC News - Deaths-Los Angeles Area Wildfires Rise</a>
</li>
<li>
<a href="https://time.com/7205487/california-wildfire-palisades-fire-photos/" class="footerLinks" target="_blank">Time Magazine - Palisades/Eaton Fires Images</a>
</li>
<li>
<a href="https://www.nbclosangeles.com/news/california-wildfires/timeline-eaton-palisades-fires-la-county/3614940/" class="footerLinks" target="_blank">NBC Los Angeles - California Wildfires | Timeline</a>
</li>
<li>
<a href="https://www.fire.ca.gov/incidents/2025" class="footerLinks" target="_blank">Department of Forestry and Fire Protection</a>
</li>
</ul>
</div>
<div id="footerGridFour">
<p class="footerHeaderTitles">Icons/Images Credits:</p>
<ul>
<li>
<a href="https://iconduck.com/" class="footerLinks" target="_blank">Iconduck | Open Source Icons</a>
</li>
<li>
<a href="https://time.com/7205487/california-wildfire-palisades-fire-photos/" class="footerLinks" target="_blank">Time Magazine - Palisades/Eaton Fires Images</a>
</li>
<li>
<a href="https://www.figma.com/community/file/1299091453336389256" class="footerLinks" target="_blank">Evericons | Figma | Logo</a>
</li>
</ul>
</div>
<div id="footerGridFive">
<p class="footerInfoText">Website | Website Design By: Ben Gallegos</p>
<p class="footerInfoText">Class: Interface Design</p>
<p class="footerInfoText">Assignment: Responsive Website Design</p>
</div>
</div>
</footer>
</div>
</body>
</html>