-
Notifications
You must be signed in to change notification settings - Fork 0
/
media.html
117 lines (113 loc) · 4.4 KB
/
media.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css">
<link rel="stylesheet" href="css/animated_nav_icon.css">
<link rel="stylesheet" href="css/scrolltotop_arrow_style.css">
<link rel="stylesheet" href="css/plyr.css" type="text/css">
<link rel="stylesheet" href="css/responsive.audio.player.css">
</head>
<body oncontextmenu="return false">
<div id="scrolltotop_parent" class="scrolltotop_hide_onload">
<div tabindex="0" id="scrolltotop_arrow"></div>
</div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container"> <a href="../../index" class="navbar-brand text-primary">
<img class="d-inline-block align-top img-fluid mb-1" src="ATV_logo.png" width="200"></a>
<button class="navbar-toggler nav-button border-0" type="button" data-toggle="collapse" data-target="#navbar4">
<div class="animated-icon"><span></span><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbar4">
<ul class="navbar-nav text-center ml-auto">
<li class="nav-item px-1"> <a class="nav-link" href="blog/design">DESIGN</a> </li>
<li class="nav-item px-1"> <a class="nav-link" href="../techniques">TECHNIQUES</a> </li>
<li class="nav-item px-1"> <a class="nav-link active" href="../../media">MUSIC</a> </li>
</ul>
</div>
</div>
</nav>
<div class="py-3">
<div class="container">
<div class="column add-bottom">
<div id="mainwrap">
<div id="nowPlay">
<span id="npAction">Paused.</span><span id="npTitle"></span>
</div>
<div id="audiowrap">
<div id="audio0">
<audio id="audio1" preload="" controls="">Your browser does not support HTML5 Audio! 😢</audio>
</div>
<div id="tracks">
<a id="btnPrev">←</a><a id="btnNext">→</a>
</div>
</div>
<div id="plwrap" class="mx-0 px-0">
<ul id="plList" class="mx-0 px-0"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer py-3">
<div class="container">
<div class="row">
<div class="col-lg-6 p-3 col-12 col-md-6">
<h5> <b>Topics</b> </h5>
<ul class="list-unstyled">
<li> <a href="blog/design">Design</a> </li>
<li> <a href="../techniques">Techniques</a> </li>
</ul>
</div>
<div class="p-3 col-lg-6 col-12 col-md-6">
<h5> <b>About</b> </h5>
<p class="mb-0"> This page serves the purpose of art study for Nalatie, with articles as excerpts found in great classic art books.</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p class="mb-0 mt-2">© 2016-2021 Alex's Time Voyage. All rights reserved</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="js/html5media.min.js"></script>
<script src="js/plyr.min.js"></script>
<script src="js/responsive.audio.player.js"></script>
<script src="js/scrolltotop_arrow_code.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/inview.min.js" script=""></script>
<script>
$(document).ready(function() {
$('.nav-button').on('click', function() {
$('.animated-icon').toggleClass('open');
});
});
</script>
<script >
var $svg = $('#my-svg1, #my-svg2, #my-svg3');
var in_view = new Waypoint.Inview({
element: $svg[0],
enter: function() {
$svg.addClass('animated1');
setTimeout(function() {
$svg.addClass('animated2');
}, 1000)
setTimeout(function() {
$svg.addClass('animated3');
}, 3000)
},
exited: function() {
$svg.removeClass('animated1');
$svg.removeClass('animated2');
$svg.removeClass('animated3');
},
});
</script>
</body>
</html>