-
Notifications
You must be signed in to change notification settings - Fork 0
/
resources.html
169 lines (148 loc) · 8.49 KB
/
resources.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!--
* sets the width of the page to follow the screen-width of the device
* sets the initial zoom level when the page
-->
<title>Tilly's Reef Adventure</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page-wrap">
<a href="#content">
<header role="banner" class="banner">
<img id="banner-logo" src="img/tillysreefadventure/logo-banner.png" alt="Tilly's Reef Adventure banner logo">
</header>
</a>
<section id="content">
<nav role="navigation" class="global" >
<a href="index.html"><img id="banner-logo-nav" src="img/tillysreefadventure/logo-banner.png" alt="Tilly's Reef Adventure banner logo"></a>
<ul>
<li id="home"><a href="index.html">Home</a></li>
<li><a href="story.html">Story</a>
<ul class="dropdown">
<li><a href="story-coastal-birth.html">Tilly's Coastal Birth</a></li>
<li><a href="story-reef-adventure.html">Tilly's Reef Adventure</a></li>
<li><a href="story-coastal-rescue.html">Tilly's Coastal Rescue</a></li>
</ul>
</li>
<!-- spacer hack -->
<li class="spacer"></li>
<li class="spacer"></li>
<li><a href="characters.html">Characters</a></li>
<li class="active"><a class="active" href="resources.html">Resources</a></li>
</ul>
</nav>
<main class="card" href="https://www.genanthro.com/2017/06/27/sounds-of-the-ocean/">
<a class="cards">
<header>
<h3>Sounds of the Ocean (Generation Anthropocene)</h3>
</header>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/330364106&color=007c92"></iframe>
<p>How is the soundscape of the ocean changing? What does this mean for the marine environment and how does this impact us? Click to find out more!</p>
<div class="desc">
<p>View ---></p>
</div>
</a>
<a class="cards" href="http://unesdoc.unesco.org/images/0026/002607/260721E.pdf">
<header>
<h3>Ocean Literacy For All - A Toolkit</h3>
</header>
<figure class="thumb">
<img src="/tra/img/UNESCO/OceanLiteracyForAll-AToolkit.PNG" alt="UNESCO ocean literacy principles">
</figure>
<div class="desc">
<p>View ---></p>
</div>
</a>
<a class="cards" href="https://marinedebris.noaa.gov/noaa-coloring-book">
<header>
<h3>Colouring Book</h3>
</header>
<figure class="thumb">
<img src="/tra/img/NOAA/MDcolorbook-5.jpg" alt="NOAA color book cover page">
</figure>
<div class="desc">
<p>View ---></p>
</div>
</a>
<a class="cards" href="https://marinedebris.noaa.gov/fact-sheet/garbage-patches-fact-sheet">
<header>
<h3>Garbage Patches Factsheet</h3>
</header>
<figure class="thumb">
<img src="/tra/img/NOAA/activity-garbagepatch.PNG" alt="NOAA infographic on garbage patches">
</figure>
<div class="desc">
<p>View ---></p>
</div>
</a>
<a class="cards" href="https://www.genanthro.com/2017/05/11/interview-odile-madden/">
<header>
<h3>Interview with a materials scientist (Generation Anthropocene)</h3>
</header>
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/322112587&color=007c92"></iframe>
<p>What is plastic? Can we pinpoint the birth of planned obsolescence? "If the Anthropocene boundary were defined by plastics, what would the global marker be?"</p>
<div class="desc">
<p>View ---></p>
</div>
</a>
<a class="cards" href="https://oceanservice.noaa.gov/podcast/apr18/nop15-tides-currents.html">
<header>
<h3>Tides and Currents Podcast (NOAA)</h3>
</header>
<figure class="thumb">
<img src="/tra/img/NOAA/tidesandcurrents-podcast.PNG" alt="NOAA podcast on tides and currents">
<audio controls>
<source src="https://oceanservice.noaa.gov/podcast/apr18/nop15-tides-currents.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</figure>
<div class="desc">
<p>View ---></p>
</div>
</a>
<a class="cards" href="https://nmssanctuaries.blob.core.windows.net/sanctuaries-prod/media/archive/education/pdfs/oceanliteracy_cards.pdf">
<header>
<h3>Ocean Literacy Cards</h3>
</header>
<figure class="thumb">
<img src="/tra/img/NOAA/activity-oceanliteracy.PNG" alt="NOAA activity on ocean literacy">
</figure>
<div class="desc">
<p>View ---></p>
</div>
</a>
<a class="cards">
<header>
<h3>Trash Talk Special Feature (NOAA)</h3>
</header>
<iframe width ="560" height="315" src="https://www.youtube.com/embed/uCQMZfnM-a4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</a>
</main>
<footer>
<img src="/tra/img/cc-by-nc-sa.JPG" alt="Creative Commons Attribution Non-commercial Share Alike">
<nav class="footer">
<ul>
<li><a href="https://www.rhondasart.com.au/pages/about-us">About the Author</a></li>
<li><a href="credits.html">Credits</a></li>
</ul>
</nav>
</footer>
</section>
</div> <!--page wrap end tag-->
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="js/particles.min.js"></script>
<div id="particles-js"></div> <!-- particles.js container -->
<!-- http://nnattawat.github.io/flip/ -->
<script src="js/jquery.flip.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<!--https://zengabor.github.io/zenscroll/#license-->
<script src="js/zenscroll-min.js"></script>
<script src="js/script.js"></script>
</body>
</html>