-
Notifications
You must be signed in to change notification settings - Fork 0
/
story-template.html
executable file
·655 lines (493 loc) · 31.1 KB
/
story-template.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
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Code Red: Baltimore’s Climate Divide | CNS Maryland</title>
<meta name="description" content="Code Red: Baltimore’s Climate Divide">
<meta name="author" content="Capital News Service at Merrill College of Journalism, University of Maryland">
<!-- Favicon -->
<link rel="icon" type="image/png" href="https://cnsmaryland.org/wp-content/uploads/2017/02/cns_favion-1.png">
<!-- Twitter Card data -->
<meta name="twitter:title" content="Code Red">
<meta name="twitter:description" content="Baltimore’s Climate Divide">
<meta name="twitter:image" content="Insert image here">
<meta name="twitter:card" content="summary_large_image">
<!-- Open Graph data for Facebook -->
<meta property="og:title" content="Code Red: Baltimore’s Climate Divide" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://cnsmaryland.org/interactives/summer-2019/code-red/index.html" />
<meta property="og:image" content="Insert image here" />
<meta property="og:description" content="Extreme temperatures pose a serious, long-term health threat for people with chronic medical conditions — and climate change is making the problem worse." />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- c3.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.13/c3.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<!-- d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.1/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.13/c3.min.js"></script>
<!-- our CSS -->
<link rel="stylesheet" href="css/story-template.css">
<link rel="stylesheet" href="css/common.css">
<!-- Required for sidescroll -->
<link rel="stylesheet" href="css/scroll-style.css">
<!-- graphics CSS -->
<link rel="stylesheet" href="css/graphics-css.css">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900&display=swap" rel="stylesheet">
</head>
<body>
<!-- START Header -->
<header>
<a href="http://www.cnsmaryland.org"><img src="images/cns-logo-white.png" id="cns-logo"></a>
</header> <!-- END Header -->
<!-- START Hero Container -->
<div class="hero-container">
<div class="cover-img relative-img" style="background-image: url('images/pills.jpg')"></div>
<div class="headline-container-slide">
<div class="chapter-header"><u>CHAPTER TWO</u></div>
<div class="story-header"> Heat & Inequality</div>
<div class="hero-text">For people with diabetes, asthma, COPD, heart disease and kidney disease, heat and humidity is more than a summer nuisance.</div>
<div class="fa-stack" style="vertical-align: top;">
<i class="fas fa-circle fa-stack-1x"></i>
<a href="#story"><i class="fas fa-chevron-circle-down fa-stack-1x fa-inverse" style="color:#ff5f00"></i></a>
</div>
</div>
</div> <!-- END Hero Container -->
<!-- START Main Story Container -->
<div class="story-container">
<a name="story"><div class="container"></a><br>
<!-- Back button-->
<div class="back-button">
<a href="index.html"><i class="far fa-arrow-alt-circle-left"> Home</i></a>
</div><br><br>
<div id="social-icons-story">
<span class="icon-facebook"></span>
<span class="icon-twitter"></span><br><br>
</div><br><br><br>
<!-- Headline and Byline-->
<p class="text-title"><b>Indoors and out, warm weather harms health</b></p><br>
<p class="text-author">STORY BY: JAZMIN CONNOR AND JERMAINE ROWLEY</p><br><br><br>
<!-- START Chapter -->
<p class="opening-letter"><b class="first-words">As global warming continues </b> to increase the atmosphere’s temperature, cold snaps persist in cities like Baltimore and won’t vanish anytime soon.</p><br>
<p>Extremely cold weather will remain a factor in the Northeast because of disruptions in the polar vortex, a phenomenon that pushes cold arctic air into the United States. Because cold snaps will occur in the future, <a class ="underline-effect" href="#" style="color: #ff5f00;"><b>Baltimore can’t ignore the effects of freezing temperatures on its residents.</b></a></p><br>
<p>There are common misconceptions about the relationship between the warming of the atmosphere and the frequency of cold snaps. A warmer climate doesn’t cause extreme cold weather to become extinct, said Judah Cohen, the Director of Seasonal Forecasting at Atmospheric and Environmental Research. </p><br>
<!-- Image and caption --> <!-- Can be repeated -->
<img src="images/couple.png" class="image">
<p class="caption">Caption: Insert caption here</p>
<p>Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ac leo nunc. Proin eu porttitor quam, nec eleifend lacus. Maecenas vel nibh at lectus tristique pellentesque. </p><br>
<p>Pellentesque ut posuere nunc.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam erat sit amet odio dapibus, pellentesque varius libero eleifend. Maecenas vel nibh at lectus tristique pellentesque. </p><br>
<p>A venenatis nulla dolor nec magna. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ac leo nunc. Proin eu porttitor quam, nec eleifend lacus. Maecenas vel nibh at lectus tristique pellentesque.</p><br>
</div><!-- END 'Container' div-->
</div><br><br><!-- END 'Story Container' div to open wider container -->
<!-- START Responsive Scrollytelling -->
<!-- sticky container-->
<section class="image-scrolly-section">
<!-- sticky element-->
<figure>
<img src="images/fullscreen.jpg" class="sticky">
</figure>
<!-- floating child elements-->
<article>
<div class="annotations-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum tellus felis, at lobortis orci sollicitudin ac. Donec lobortis sapien ac posuere faucibus. Mauris lectus neque, pretium non volutpat eget, vestibulum at magna. In sollicitudin augue nunc, non bibendum augue ornare quis.</div>
<div class="annotations-1">Integer accumsan interdum justo eu pretium. Aliquam maximus mi sit amet dapibus efficitur.</div>
<div class="annotations-1">Sed condimentum lacus sit amet turpis aliquam varius nec a lacus. In facilisis convallis ante sit amet consequat. Aenean a lorem mollis, bibendum nibh nec, maximus orci. Nulla facilisi.</div>
</article>
<!-- /end sticky container-->
</section>
<!-- END Responsive Scrollytelling -->
<!-- START 'Container' div again -->
<div class="story-container">
<div class="container">
<br><br><p>“There is this generalized warming of the planet that would decrease extreme winter weather,” Cohen said. </p> <br>
<p>“But also on the other hand, there are more frequent disruptions of the polar vortex which would increase [it], so it's kind of a tug-of-war between the two.”</p><br><br>
<hr style="border: 2px solid #ff5f00;" width="50%" /><br>
<p class="chapter-title"><b>CHAPTER TITLE: GOES HERE</b></p><br>
<p class="opening-letter"><b class="first-words">The number of extremely hot days</b> in Baltimore have stayed relatively constant, even as average summer temperatures rise. Days that increased above 90 degrees and 100 degrees do appear to be occurring at a more frequent rate. </p><br>
<p>Freezing days haven’t gone away because of the climate change effects on the polar vortex. The polar vortex consists of air masses located above the North and South Pole that contain trapped cold air. </p><br>
<p>Due to the warming of the stratosphere — the layer of the atmosphere that lies above the one we live in — the polar vortex weakens and can break into multiple sections. This allows the cold air that was once contained in the vortex to escape the poles and move extreme cold temperatures to lower latitudes, such as the continental United States. </p><br><br><br>
<!-- START Graphic container-->
<div class="graphic-container">
<div class="chart-title"><b>Number of extreme hot days in Baltimore</b></div>
<div class="chart-description">Baltimore saw spikes in days that recorded over 100 degrees, but the city has relatively consistent patterns from year to year.</div><br>
<div class="chart-author">BY AUTHOR NAME</div>
<div id="category"></div>
<div class="chart-source">Source: BWI Airport Sensor Data</em><br><br></div>
</div><br><!-- END Graphic container-->
<p>The impact from these disruptions could last anywhere from 4-to-8 weeks, according to Cohen, a wide range that makes it difficult to predict how long future cold snaps will be.</p><br>
<p>“You may get a cold snap like we had with that polar vortex event in late January in the upper Midwest, where they had that historic cold then it moderating quickly, so that's more typical,” Cohen said. “We think of it as more episodic, but there are cases where it's been continuous when the pattern gets locked and it doesn't change."</p><br>
<p>In Baltimore, there isn’t an indication that cold snap longevity is changing. The occurrence of three-day-long cold snaps with a minimum temperature below 32 degrees are just as sporadic as previous years. </p><br>
<!-- START Pullquote div -->
<div class="pullquote">
<div class="pullquote-top">106.0°F</div>
<div class="pullquote-bottom">"The hottest day in Baltimore, Maryland on record was July 23, 2011.”</div>
</div><br><br><!-- END Pullquote div -->
<p>Cold snaps that occur in places that usually experience winter weather such as the Northeastern United States, northern Europe and East Asia are the result of polar vortex disruptions, according to Cohen. When winter extremes occur in other locations, experts consider these events unexplainable.</p><br>
<p>This winter, snowfall hit Maui, Hawaii at its lowest elevation ever. Meanwhile, Seattle recorded record-breaking temperatures and Las Vegas had snowfall for the first time in over a decade.</p><br>
<p>“They [disruptions] could maybe bring a rare event, but it is much harder to attribute something like one snowfall in Vegas to something on a climate scale,” Cohen said. “Things randomly do happen from time to time."</p><br><br>
</div><!-- END 'Container' div-->
</div><!-- END 'Story Container' div to open wider container -->
<!-- START Responsive Scrollytelling -->
<!-- sticky container-->
<section class="image-scrolly-section">
<!-- sticky element-->
<figure>
<img src="images/fullscreen2.jpg" class="sticky">
</figure>
<!-- floating child elements-->
<article>
<div class="annotations">"Lorem ipsum dolor sit amet, consectetur adipiscing elit." <br><br><b>- PERSON'S NAME, 56</b></div>
<div class="annotations">Etiam ac libero metus. Donec id egestas nunc, eu pellentesque purus.</div>
<div class="annotations">Duis vel molestie nunc, ac molestie nulla. Praesent in porttitor risus.</div>
</article>
<!-- /end sticky container-->
</section>
<!-- END Responsive Scrollytelling -->
<!-- START 'Container' div again -->
<div class="story-container">
<div class="container">
<br><br><p>Scientists find it even more difficult to assess what’s a random weather event and what’s a direct result of global warming, such as <a class ="underline-effect" href="#" style="color: #ff5f00;"><b>the cold snap in January that reached the lowest temperatures in the Midwest in the past 25 years.</b></a></p><br>
<p>“How do you determine if that's an indication of a changing climate and not just the weather event?” said Tim Canty, an oceanic and atmospheric professor at the University of Maryland. “That's the trick and that's a question among climate communities.”</p><br><br>
<hr align="left" style="border: 2px solid #ff5f00;" width="50%" /><br>
<!-- NEW CHAPTER -->
<p class="chapter-title-alt"><b>Struggling to Pay the Bills</b></p><br>
<p class="chapter-author">STORY BY: IAN ROUND</p><br><br>
<p class="opening-letter">What experts do know is that sporadic winter weather will continue, including in the city of Baltimore. Over the past 30 years, there’s been a consistent appearance of cold snaps in the Northeastern U.S. In the years to come, the pattern is not expected to change, according to Cohen.</p><br>
<p>Even as the atmosphere’s temperature continues to gradually increase, residents must not dismiss cold snaps when experiencing warmer winters. Extreme cold weather events have always happened, are still happening and show no signs of completely disappearing, despite a decrease in extremely cold days. </p><br>
<!-- GRAPH -->
<p class="chart-title"><b>Warming Centers in Baltimore</b></p>
<iframe width="100%" height="520" frameborder="0" src="https://amarton.carto.com/builder/0d059c9b-525b-4dd8-a2f6-0a36203d6300/embed" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
<p class="caption">During periods of extremely cold weather, the Baltimore Health Commissioner declares a Code Blue Extreme Cold Alert and the city opens warming centers, which are community locations like libraries and senior centers where residents can go to warm up. However, many of the warming centers have limited hours or aren’t open daily.</p><br>
<p>Even as the atmosphere’s temperature continues to gradually increase, residents must not dismiss cold snaps when experiencing warmer winters. Extreme cold weather events have always happened, are still happening and show no signs of completely disappearing, despite a decrease in extremely cold days. </p><br>
<p>“And the difficulties with this and trying to get people to care about this is … we had this massive cold snap this year,” Canty said. “But what about if next year it's 70 degrees all winter long and everyone's happy about that?"</p><br>
<!-- START Pullquote div -->
<div class="pullquote">
<div class="pullquote-top">"I can’t afford to keep compiling that water bill. It just scares me to death.”</div>
<div class="pullquote-bottom"> - DELORES BUCHANAN, 72</div>
</div><br><br><!-- END Pullquote div -->
<p>Cold snaps that occur in places that usually experience winter weather such as the Northeastern United States, northern Europe and East Asia are the result of polar vortex disruptions, according to Cohen. When winter extremes occur in other locations, experts consider these events unexplainable.</p><br>
<p>This winter, snowfall hit Maui, Hawaii at its lowest elevation ever. Meanwhile, Seattle recorded record-breaking temperatures and Las Vegas had snowfall for the first time in over a decade.</p><br>
<div class="embed-container">
<p class="chart-title"><b>A video</b>
<div class="chart-description">A responsive video that scales nicely to the parent element with an 16:9 aspect ratio</div><br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<p class="caption">A video caption if needed.</p><br>
</div>
<p>Even as the atmosphere’s temperature continues to gradually increase, residents must not dismiss cold snaps when experiencing warmer winters. Extreme cold weather events have always happened, are still happening and show no signs of completely disappearing, despite a decrease in extremely cold days. </p><br>
<p>“And the difficulties with this and trying to get people to care about this is … we had this massive cold snap this year,” Canty said. “But what about if next year it's 70 degrees all winter long and everyone's happy about that?"</p><br>
<p>Cold snaps that occur in places that usually experience winter weather such as the Northeastern United States, northern Europe and East Asia are the result of polar vortex disruptions, according to Cohen. When winter extremes occur in other locations, experts consider these events unexplainable.</p><br>
<div class="embed-container">
<img src="images/faces-places.jpg" class="image">
<div class="align">
<div class="table-images">
<img src="images/lee-lewis.jpg" class="image">
</div>
<div class="table-images">
<img src="images/shoe-repair.jpg" class="image">
</div>
</div>
</div>
<p class="caption">Top: Justin Marine, left, and Makayla Jefferson, of Wide Angle Youth Media, install batteries and memory cards to complete the sensors in January 2019. Left: CNS data journalists Jake Gluck, left, and Noah Johnson solder sensor components. Right: A completed sensor. Capital News Service photos.</p>
<p>This winter, snowfall hit Maui, Hawaii at its lowest elevation ever. Meanwhile, Seattle recorded record-breaking temperatures and Las Vegas had snowfall for the first time in over a decade.</p><br>
<p>Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ac leo nunc. Proin eu porttitor quam, nec eleifend lacus. Maecenas vel nibh at lectus tristique pellentesque. </p><br>
<p>Pellentesque ut posuere nunc.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam erat sit amet odio dapibus, pellentesque varius libero eleifend. Maecenas vel nibh at lectus tristique pellentesque. </p><br>
</div><!-- END 'Container' div-->
</div><br><br><!-- END 'Story Container' div to open wider container -->
<!-- START Table of Contents -->
<div class="table-of-contents">
<div class="more-stories">
<div class="container">
<!--Orange Line-->
<hr style="border: 1px solid #ff5f00;" width="100%" /><br>
<!--Table of Contents title-->
<div class="small-head">
<b>CODE RED:</b> Baltimore's Climate Divide
</div><br>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 table-contents-box">
<div class="hover-box" onclick="window.location='http://google.com';">
<div class="hover-img">
<img src="images/box-pills.jpg">
<div class="over-layer">
<h2><b>CHAPTER ONE</b></h2>
<h3>Health & Inequality</h3>
<div class="hover-info">
<p class="hover-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<div class="plus-sign">
<i class="fas fa-plus-circle fa-2x" style="color:#ff5f00"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 table-contents-box">
<div class="hover-box" onclick="window.location='http://google.com';">
<div class="hover-img">
<img src="images/box-people.jpg">
<div class="over-layer">
<h2><b>CHAPTER TWO</b></h2>
<h3>Heat & Health</h3>
<div class="hover-info">
<p class="hover-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<a href="story-template.html"><div class="plus-sign"><i class="fas fa-plus-circle fa-2x" style="color:#ff5f00"></i></div></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 table-contents-box">
<div class="hover-box" onclick="window.location='http://google.com';">
<div class="hover-img">
<img src="images/box-trees.jpg">
<div class="over-layer">
<h2><b>CHAPTER THREE</b></h2>
<h3>The Role of Trees</h3>
<div class="hover-info">
<p class="hover-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<a href="story-template.html"><div class="plus-sign"><i class="fas fa-plus-circle fa-2x" style="color:#ff5f00"></i></div></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 table-contents-box">
<div class="hover-box" onclick="window.location='http://google.com';">
<div class="hover-img">
<img src="images/box-forward.jpg">
<div class="over-layer">
<h2><b>CHAPTER FOUR</b></h2>
<h3>Seeking solutions</h3>
<div class="hover-info">
<p class="hover-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
<a href="story-template.html"><div class="plus-sign"><i class="fas fa-plus-circle fa-2x" style="color:#ff5f00"></i></div></a>
</p>
</div>
</div>
</div>
</div>
</div>
</div><!-- END 'row' div-->
</div><br><!-- END 'more-stories' div to open wider container -->
<!--END Table of Contents-->
<!-- START Table of Contents for Computer Screens -->
<div class="more-stories-bottom">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 table-contents-box">
<div class="hover-box" onclick="window.location='http://google.com';">
<div class="hover-img">
<img src="images/box-bts.jpg">
<div class="over-layer">
<h2><b>ABOUT THE PROJECT</b></h2>
<h3>BEHIND THE SCENES</h3>
<div class="hover-info">
<p class="hover-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<div class="plus-sign">
<i class="fas fa-plus-circle fa-2x" style="color:#ff5f00"></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 table-contents-box">
<div class="hover-box" onclick="window.location='http://google.com';">
<div class="hover-img">
<img src="images/box-npr.jpg">
<div class="over-layer">
<h2><b>NPR</b></h2>
<h3>ARTICLE TITLE</h3>
<div class="hover-info">
<p class="hover-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<a href="story-template.html"><div class="plus-sign"><i class="fas fa-plus-circle fa-2x" style="color:#ff5f00"></i></div></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 table-contents-box">
<div class="hover-box" onclick="window.location='http://google.com';">
<div class="hover-img">
<img src="images/box-health.jpg">
<div class="over-layer">
<h2><b>NPR</b></h2>
<h3>ARTICLE TITLE</h3>
<div class="hover-info">
<p class="hover-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<a href="story-template.html"><div class="plus-sign"><i class="fas fa-plus-circle fa-2x" style="color:#ff5f00"></i></div></a>
</div>
</div>
</div>
</div>
</div>
</div><!-- END 'row' div-->
<div class="container">
<hr style="border: 1px solid #ff5f00;" width="100%" /><br>
</div>
</div><br><br><!-- END 'more-stories' div to open wider container -->
</div><!--END Table of Contents-->
<!-- START Table of Contents for Tablet and Mobile -->
<div class="tablet-mobile">
<div class="container">
<hr style="border: 1px solid #ff5f00;" width="100%" /><br>
<div class="small-head">
<b>CODE RED:</b> Baltimore's Climate Divide
</div><br>
</div>
<div class="app">
<ul class="card-container">
<li>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="images/boxpills.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>CHAPTER ONE</b></h5>
<h6 class="card-subtitle">HEALTH & HEAT</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Read more</a>
</div>
</div>
</li>
<li>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="images/boxpeople.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>CHAPTER TWO</b></h5>
<h6 class="card-subtitle">HEALTH & INEQUALITY</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Read more</a>
</div>
</div>
</li>
<li>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="images/boxtrees.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>CHAPTER THREE</b></h5>
<h6 class="card-subtitle">THE ROLE OF TREES</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Read more</a>
</div>
</div>
</li>
<li>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="images/boxforward.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>CHAPTER FOUR</b></h5>
<h6 class="card-subtitle">Seeking solutions</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Read more</a>
</div>
</div>
</li>
<li>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="images/boxbts.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>ABOUT THE PROJECT</b></h5>
<h6 class="card-subtitle">BEHIND THE SCENES</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Read more</a>
</div>
</div>
</li>
<li>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="images/boxnpr.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b>NPR</b></h5>
<h6 class="card-subtitle">ARTICLE TITLE</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Read more</a>
</div>
</div>
</li>
</ul>
</div>
<div class="container">
<br><div class="scroll-more"> Swipe to see more stories <i class="fas fa-angle-double-right"></i></div>
<hr style="border: 1px solid #ff5f00;" width="100%" /><br>
</div>
</div><!--END Table of Contents-->
<!--START Partnership message-->
<div class="container">
<p id="credit"><b class="orange">BEHIND THE SCENES.</b> Learn more about the reporting behind the stories <a class ="underline-effect" href="#" style="color:black"><b>here</a></b>. Read the first instalment of Captial News Service's investigation into the effects of climate change on public health in Baltimore, "<a class ="underline-effect" href="https://cnsmaryland.org/interactives/spring-2019/baltimore-climate-temperature-health/" style="color:black"><b>Bitter Cold.</b></a>"
<br><br>
<b class="orange">PARTNERSHIPS.</b> NPR and Wide Angle Youth Media contributed to the reporting of these stories. Support for this project also comes from Online News Association, Park Foundation, The Anne E. Casey Foundation and the Philip Merrill College of Journalism. </p><br><br>
</div><!--CLOSE Partnership message-->
<!-- JavaScript calls -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Stickyfill.js - Required for sidescroll-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js'></script>
<!-- Scrollama and intersection observer js files - Required for sidescroll-->
<script src="https://unpkg.com/[email protected]/intersection-observer.js"></script>
<script src="https://unpkg.com/scrollama"></script>
<!-- app js file - Required for sidescroll-->
<script src="js/scroll-app.js"></script>
<!-- Our custom Javascript -->
<script src="js/javascript.js"></script>
<!-- Variables for social media icon popups -->
<script type="text/javascript">
//Twitter variables
var tweet = "Code Red: Baltimore’s Climate Divide"; //Tweet text
var url = "https://cnsmaryland.org/interactives/summer-2019/code-red/index.html"; //Interactive URL
//Facebook variables
var picture = "Insert facebook image"; //Picture URL
var title = "Code Red: Baltimore’s Climate Dividee"; //Post title
var description = "Insert facebook desc"; //Post description
var url = "https://cnsmaryland.org/interactives/summer-2019/code-red/index.html"; //Interactive URL
</script>
<!-- METRICS -->
<!-- START Parse.ly Include: Standard -->
<div id="parsely-root" style="display: none">
<span id="parsely-cfg" data-parsely-site="cnsmaryland.org"></span>
</div>
<script>
(function(s, p, d) {
var h=d.location.protocol, i=p+"-"+s,
e=d.getElementById(i), r=d.getElementById(p+"-root"),
u=h==="https:"?"d1z2jf7jlzjs58.cloudfront.net"
:"static."+p+".com";
if (e) return;
e = d.createElement(s); e.id = i; e.async = true;
e.src = h+"//"+u+"/p.js"; r.appendChild(e);
})("script", "parsely", document);
</script>
<!-- END Parse.ly Include: Standard -->
<!--our c3 javascript-->
<script src="js/c3-charts.js"></script>
<script type="text/javascript">
var chart = c3.generate({
bindto: '#category',
data: {
columns: [
['Average temperature', 80, 82, 86, 84, 84, 87],
['Highest Temperature', 101, 108, 105, 110, 109, 120]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
},
color: {
pattern: ['#ff8e44', '#fc4b2c', 'black', '#60c4b2', '#973895']
}
});
</script>
</body>
</html>