-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstory-reef-adventure.html
161 lines (138 loc) · 8.17 KB
/
story-reef-adventure.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
<!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 class="active"><a class="active" href= "story.html">Story</a>
<ul class="dropdown">
<li><a href= "story-coastal-birth.html">Tilly's Coastal Birth</a></li>
<li class="active"><a class="active" 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><a href="resources.html">Resources</a></li>
</ul>
</nav>
<main class="story-slides">
<nav role="navigation breadcrumb" class="breadcrumb">
<ul>
<li><a href="story-coastal-birth.html">Tilly's Coastal Birth</a></li> >
<li class="active"><a class="active" 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>
</nav>
<!-- slideshow -->
<section class="carousel-slideshow" id="story-reef-adventure">
<figure class="carousel slide">
<div class="numbertext">1 / 8</div>
<img class="slideshow-img" src="img/tillysreefadventure/slide-hatchlings-sea.png">
<article class="slideshow-text">
<h1>Tilly and some other hatchlings make it safely into the ocean- She swims quickly, darting here and there...</h1>
<br>
<h1>An enormous shape looms above her...</h1>
</article>
</figure>
<figure class="carousel slide">
<div class="numbertext">2 / 8</div>
<img class="slideshow-img" src="img/tillysreefadventure/slide-whale.png">
<article class="slideshow-text">
<h1>It is a humpback whale that was about 14 times the size of the hatchlings... They were amazed. The humpback whale mother was followed by her calf.</h1>
<br>
<h1>The turtles swim down deeper...</h1>
</article>
</figure>
<figure class="carousel slide">
<div class="numbertext">3 / 8</div>
<img class="slideshow-img" src="img\tillysreefadventure\slide-shelly.png">
<article class="slideshow-text">
<h1>'Look at the colours,' says Tilly. </h1><br>
<h1>'Aren't they beautiful...', says Shelly the seahorse, 'Welcome to the Great Barrier Reef!'</h1>
<br>
</article>
</figure>
<figure class="carousel slide">
<div class="numbertext">4 / 8</div>
<img class="slideshow-img" src="img\tillysreefadventure\seascape.png">
<article class="slideshow-text">
<h1>'Be careful, Tilly, not everyone on the reef is friendly.' Verne warns.</h1>
</article>
</figure>
<figure class="carousel slide">
<div class="numbertext">5 / 8</div>
<img class="slideshow-img" src="img\tillysreefadventure\slide-escape.png">
<article class="slideshow-text">
<h1>A large mouthful of teeth opens before them... Tilly swerved to escape and rushes to the surface for a breathe.</h1>
</article>
</figure>
<figure class="carousel slide">
<div class="numbertext">6 / 8</div>
<img class="slideshow-img" src="img\tillysreefadventure\slide-jelly1.png">
<article class="slideshow-text">
<h1>She sees lots of jellyfish, long and white. Tilly swims over to say hello, but...</h1>
</article>
</figure>
<figure class="carousel slide">
<div class="numbertext">7 / 8</div>
<img class="slideshow-img" src="img\tillysreefadventure\slide-jelly.png">
<article class="slideshow-text">
<h1>... one of the, wraps itself around her. It's not a jellyfish- it's a plastic bag!</h1>
</article>
</figure>
<figure class="carousel slide">
<div class="numbertext">8 / 8</div>
<img class="slideshow-img" src="img\tillysreefadventure\slide-trap.jpg">
<article class="slideshow-text">
<h1>She struggles but the bag only tightens. 'Help!' Tilly cries. I'm trapped and I can't swim!</h1><a class="slide-link" href="story-coastal-rescue.html"><h1 class="slide-link">Will Tilly survive? Find out in the next chapter...</h1></a>
</article>
</figure>
</section>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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 -->
<script src="js/jquery-3.3.1.min.js"></script>
<!--https://zengabor.github.io/zenscroll/#license-->
<script src="js/zenscroll-min.js"></script>
<!-- stats.js lib
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
-->
<script src="js/script.js"></script>
</body>
</html>