alicestrt/vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

changed position of legend

Browse Source
This commit is contained in:
alicestrt 2021-01-15 19:10:35 +01:00
parent 59121578e1
commit 872ebd6a89
2 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -20,7 +20,7 @@
<div class="container-fluid p-0"> <div class="container-fluid p-0">
<div class="bg"> <div class="bg">
<div class="row"> <div class="row">
<div class="col-md-4 offset-md-8" id="menu"> <div class="col-md-3 offset-md-9" id="menu">
<span id="about"> <span id="about">
<a href="#" >about</a> | <a href="#" >about</a> |
</span> </span>
@ -35,10 +35,21 @@
</div> </div>
<div class="row"> <div class="row">
<!-- background audio --> <!-- background audio -->
<div class="col-md-9" style="position: static;"> <div class="col-md-9">
<div class="row">
<div class="col-md-12">
<br>
<div class="map_legend">
<div id="box1" onclick="popup_bg(10)"><i class="fa fa-play"></i></div> <p>Folklore literature</p>
<div id="box2" onclick="popup_bg(300)"><i class="fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
<div id="box3" onclick="popup_bg(500)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
<div id="box4" onclick="popup_bg(700)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-md-5 offset-md-1 col-sm-6 offset-sm-3 col-xs-6 offset-xs-3"> <div class="col-md-5 col-sm-6 col-xs-6">
<button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button> <button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button>
<audio id="audioBG" <audio id="audioBG"
preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)"> preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
@ -47,17 +58,7 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
<input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px"> <input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-12">
<br>
<div class="map_legend">
<div id="box1" onclick="popup_bg(10)"><i class="fa fa-play"></i></div> <p>Folklore literature</p>
<div id="box2" onclick="popup_bg(300)"><i class="fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
<div id="box3" onclick="popup_bg(500)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
<div id="box4" onclick="popup_bg(700)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
</div> </div>
</div> </div>

14
static/css/style.css
View File

@ -4,7 +4,7 @@
@import url('https://fonts.googleapis.com/css2?family=Asul&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Asul&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');
* { * {
border: 1px black solid; border: 0px black solid;
} }
body { body {
@ -61,15 +61,16 @@ body {
/* Audio in background */ /* Audio in background */
.audioBG { .audioBG {
margin-top: 35px;
margin-left: 50px; margin-left: 50px;
margin-top: -2px;
font-size: 20px!important;
} }
button { button {
background-color: #fff0f000; background-color: #fff0f000;
} }
#dur1 { #dur1 {
margin-top: 45px; margin-top: -2px;
} }
.audio-button { .audio-button {
@ -209,7 +210,7 @@ a {
padding-left: 5px; padding-left: 5px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
display: inline; display: inline;
font-size: 1em; font-size: 0.8em;
} }
@ -407,10 +408,13 @@ h2 {
/* about and colophon */ /* about and colophon */
#menu {
margin-top: 15px;
}
#about, #colophon, #how { #about, #colophon, #how {
font-family:'Walter Turncoat', cursive; font-family:'Walter Turncoat', cursive;
color: #d81159; color: #d81159;
margin-top: 20px;
font-size: 16px; font-size: 16px;
} }