-
Notifications
You must be signed in to change notification settings - Fork 0
/
story-template.html
204 lines (184 loc) · 9.41 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
<!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">
<title>Bocas del Toro</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Fonts -->
<script src="https://use.typekit.net/yvc1tde.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<link rel="stylesheet" type="text/css" href="css/sass/main.css" />
<link rel="stylesheet" type="text/css" href="css/mobile-custom.css" />
<link rel="stylesheet" type="text/css" href="css/mobile-story.css" />
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="fade-in">
<div id="menu-wrap">
<nav class="nav-side">
<ul id="nav_ul">
<li><a id="expand-nav">Chapters</a></li>
<ul id="sub-nav" class="no-display">
<li><a href=#>Chapter 1</a></li>
<li><a href=#>Chapter 2</a></li>
<li><a href=#>Chapter 3</a></li>
<li><a href=#>Chapter 4</a></li>
<li><a href=#>Chapter 5</a></li>
</ul>
<li><a href=#>Full Doc</a></li>
<li><a href=#>The Issue</a></li>
<li><a href=#>Game</a></li>
<li><a href=#>About</a></li>
</ul>
<a href="#" class="nav-toggle"><a>
</nav>
<a href="index.html"><img alt="changing tides" src="assets/icons/logo_for_mobile.png" class="story_headline" /></a>
</div>
<div class="wrapper">
<div id="fullpage">
<!-- Page 1: Title -->
<div class="section firstPage_dot" id="section0">
<div class="intro container-video" style="margin-top: 20px;">
<div class="row">
<div class="col-md-12">
<img alt="arthead" class="arthead" src="assets/artheads/arthead_sample.png" />
</div>
</div>
<div class="row">
<div class="col-md-12" id="credits">
<p class="article_subhead">Bocas del Toro's struggle to maintain the beauty of the coral reef.</p>
<p class="article_credits"><strong>Written by:</strong> Justina Vasquez</p>
<p class="article_credits"><strong>Video by:</strong> Anna Spelman and Sophia Nahli Allison</p>
</div>
<div class="row">
<div class="col-md-12" id="buttons">
<a href=#section1 class="mobile_button">Watch Video</a>
<a href=#section3 class="mobile_button">360 Experience</a>
<p class="scroll-more">Scroll for more<img src="/assets/icons/arrow-down.png"></span></p>
</div>
</div>
</div>
</div>
</div>
<!-- Page 2: Video -->
<div class="section video-padding thirdPage_dot" id="section1">
<div class="intro container-video">
<div class='embed-container'>
<iframe src='https://player.vimeo.com/video/157306694' allowFullScreen></iframe>
</div>
</div>
</div>
<!-- Page 3: Text -->
<div class="section fp-auto-height secondPage_dot" id="section2">
<div class="intro container-text">
<p>
<img alt="C dropcap" class="dropcap" src="assets/dropcaps/C.png" />orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi est lacus, auctor sit amet massa eu, eleifend laoreet quam. Vivamus feugiat tellus nec facilisis aliquam. Mauris
eros ligula, tempor eu sollicitudin id, blandit ac orci. Curabitur vel malesuada felis.
</p>
<p>
Curabitur sem eros, volutpat posuere hendrerit ac, feugiat in turpis. Quisque faucibus augue in ante vehicula laoreet. Fusce id sem feugiat, tincidunt dolor eu, iaculis augue. Sed egestas iaculis metus. Cras vehicula imperdiet justo vel luctus. Mauris
suscipit nisi in aliquet volutpat.
</p>
<p>
Ut in lacus sit amet urna blandit suscipit id eget lorem. Nullam faucibus velit non fermentum gravida. Nulla tincidunt tincidunt justo quis accumsan.
</p>
<img alt="reef" src="media/img/reef.jpg" class="story-image" />
<p>
Ut et purus metus. Maecenas id ex et enim rutrum molestie. Suspendisse ac mi ut lectus eleifend rhoncus ut ut diam. Praesent nisl risus, eleifend ut diam nec, interdum vestibulum lectus. Proin nec interdum dui. Cras tristique, elit et sollicitudin volutpat,
purus felis mattis nisi, eget tristique sem elit quis eros.
<p>
Nam consectetur diam vel ipsum posuere imperdiet. Nam rutrum nec dolor sit amet maximus. Cras vehicula massa et turpis rutrum aliquet. Duis ut neque in orci aliquet posuere. Vivamus mattis urna sed dapibus interdum. Aenean scelerisque elementum laoreet.
</p>
<p>
Phasellus sit amet arcu vehicula, ultrices risus at, congue odio. Nullam luctus ut mauris sed semper. Nunc enim augue, dictum lobortis ipsum at, commodo tincidunt ex.
</p>
<p>
Nam pharetra, nibh sed dictum egestas, nisi erat volutpat diam, et accumsan mi tellus vel justo. Sed vel scelerisque neque, eget commodo eros.
</p>
</div>
</div>
<!-- Page 4: 360 Video -->
<div class="section video-padding fourthPage_dot" id="section3">
<script src="360/embedpano.js"></script>
<div id="pano" style="width:100%;height:300px;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({js:"360/krpano.js", xml:"360/krpano.xml", target:"pano", html5:"always", id:"krpanoPlayer", passQueryParameters:true});
</script>
</div>
</div>
<!-- Page 5: Text -->
<div class="section fp-auto-height fifthPage_dot" id="section4">
<div class="intro container-text">
<p>
<img alt="C dropcap" class="dropcap" src="assets/dropcaps/C.png" />orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi est lacus, auctor sit amet massa eu, eleifend laoreet quam. Vivamus feugiat tellus nec facilisis aliquam. Mauris
eros ligula, tempor eu sollicitudin id, blandit ac orci. Curabitur vel malesuada felis.
</p>
<p>
Curabitur sem eros, volutpat posuere hendrerit ac, feugiat in turpis. Quisque faucibus augue in ante vehicula laoreet. Fusce id sem feugiat, tincidunt dolor eu, iaculis augue. Sed egestas iaculis metus. Cras vehicula imperdiet justo vel luctus. Mauris
suscipit nisi in aliquet volutpat.
</p>
<p>
Ut in lacus sit amet urna blandit suscipit id eget lorem. Nullam faucibus velit non fermentum gravida. Nulla tincidunt tincidunt justo quis accumsan.
</p>
<img alt="reef" src="media/img/reef.jpg" class="story-image" />
<p id="trigger-para">
Ut et purus metus. Maecenas id ex et enim rutrum molestie. Suspendisse ac mi ut lectus eleifend rhoncus ut ut diam. Praesent nisl risus, eleifend ut diam nec, interdum vestibulum lectus. Proin nec interdum dui. Cras tristique, elit et sollicitudin volutpat,
purus felis mattis nisi, eget tristique sem elit quis eros.
</p>
<p>
Nam consectetur diam vel ipsum posuere imperdiet. Nam rutrum nec dolor sit amet maximus. Cras vehicula massa et turpis rutrum aliquet. Duis ut neque in orci aliquet posuere. Vivamus mattis urna sed dapibus interdum. Aenean scelerisque elementum laoreet.
</p>
<p>
Phasellus sit amet arcu vehicula, ultrices risus at, congue odio. Nullam luctus ut mauris sed semper. Nunc enim augue, dictum lobortis ipsum at, commodo tincidunt ex.
</p>
<p>
Nam pharetra, nibh sed dictum egestas, nisi erat volutpat diam, et accumsan mi tellus vel justo. Sed vel scelerisque neque, eget commodo eros.
</p>
</div>
<a href="#">
<div id="previous-chapter" class="arrows-chapters">
<div class="row">
<div class="col-xs-3 arrow"><img alt="left arrow" src="assets/icons/left_arrow_white.png" class="img-responsive"></div>
<div class="col-xs-9">
<div class="chapter-label">Chapter 1</div>
<div class="chapter-title">Below the Reef</div>
</div>
</div>
</div>
</a>
<a href="#">
<div id="next-chapter" class="arrows-chapters">
<div class="row">
<div class="col-xs-9">
<div class="chapter-label">Chapter 3</div>
<div class="chapter-title">Bananas in Peril</div>
</div>
<div class="col-xs-3 arrow"><img alt="right arrow" src="assets/icons/right_arrow_white.png" class="img-responsive"></div>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.waypoints.js"></script>
<script type="text/javascript" src="js/storyscripts.js"></script>
</body>
</html>