-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
73 lines (59 loc) · 3 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- app specific css -->
<link rel="stylesheet" href="./css/attenborough.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- popcorn js -->
<script type="text/javascript" src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script type="text/javascript" src="./js/mediaelement-and-player.min.js"></script>
<script type="text/javascript" src="./js/attenborough.js"></script>
</head>
<body>
<div class="player-wrapper audio-player">
<audio id="audio-player" controls>
<source src="./assets/audio/space.mp3" type="audio/mp3">
are you sure your browser supports audio??
</audio>
</div>
<div class="marker marker1"></div>
<div class="marker marker2"></div>
<div class="marker marker3"></div>
<div class="marker marker4"></div>
<div class="marker marker5"></div>
<header>
<h1>Astronaut Chris Hadfield Brings Lessons From Space Down To Earth</h1>
</header>
<div id="footnotediv"></div>
<div class="card-wrapper">
<div class="card card1 active">
<h3>"Suddenly, instantly, I was blind...Houston I have a problem."</h3>
<h5>— Chris Hadfield</h5>
</div>
<div class="card card2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit dolor et elit auctor pretium. Vivamus egestas quam in ornare rhoncus. Integer eget urna interdum, aliquam est ac, ornare velit. Suspendisse quis consectetur ligula. Cras rutrum ante nec luctus mollis. Fusce in turpis sem. Nullam posuere et turpis ut efficitur. Quisque commodo, neque dapibus vulputate commodo, nunc odio congue libero, aliquam dictum erat diam id tellus. In condimentum nisi ac leo tempor, ac condimentum nisi sodales. Proin sed mi dapibus, ornare erat in, ullamcorper dui. Nullam feugiat metus eget dolor aliquet suscipit. In vitae ante euismod, vulputate lectus et, molesti</p>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#audio-player').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','progress','volume'],
audioVolume: 'horizontal',
audioWidth: 450,
audioHeight: 70,
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
});
</script>
</body>
</html>