206 lines
7.9 KiB
HTML
206 lines
7.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
<html>
|
|||
|
<head>
|
|||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|||
|
<style>
|
|||
|
.container-ext {
|
|||
|
padding-left: 180px;
|
|||
|
padding-right: 180px;
|
|||
|
}
|
|||
|
|
|||
|
.headline {
|
|||
|
line-height: 30px;
|
|||
|
text-shadow: 1px 1px rgba(255, 255, 255, 0.3);
|
|||
|
}
|
|||
|
|
|||
|
ul {
|
|||
|
list-style: none;
|
|||
|
}
|
|||
|
|
|||
|
.headline-left {
|
|||
|
left: 30px;
|
|||
|
}
|
|||
|
|
|||
|
.headline-right {
|
|||
|
top: 20px !important;
|
|||
|
/*bottom:370px !important;*/
|
|||
|
right: 20px;
|
|||
|
}
|
|||
|
|
|||
|
.headline-active {
|
|||
|
position: fixed;
|
|||
|
top: 100px;
|
|||
|
}
|
|||
|
|
|||
|
.list-author:before,
|
|||
|
.list-author:after {
|
|||
|
content: "\200e";
|
|||
|
display: table;
|
|||
|
}
|
|||
|
.list-author:after {
|
|||
|
clear: both;
|
|||
|
}
|
|||
|
|
|||
|
.list-author-vocal {
|
|||
|
float: left;
|
|||
|
margin-right: 10px;
|
|||
|
}
|
|||
|
|
|||
|
.ff { position: fixed; }
|
|||
|
</style>
|
|||
|
</head>
|
|||
|
<body>
|
|||
|
<div class="container-ext">
|
|||
|
|
|||
|
<div class="headline headline-left headline-active">
|
|||
|
<ul class="list-author">
|
|||
|
<li class="list-author-vocal">
|
|||
|
A
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
B
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
C
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
D
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
E
|
|||
|
</li>
|
|||
|
</ul>
|
|||
|
<ul class="list-author">
|
|||
|
<li class="list-author-vocal">
|
|||
|
F
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
G
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
H
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
I
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
J
|
|||
|
</li>
|
|||
|
</ul>
|
|||
|
<ul class="list-author">
|
|||
|
<li class="list-author-vocal">
|
|||
|
K
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
L
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
M
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
N
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
O
|
|||
|
</li>
|
|||
|
</ul>
|
|||
|
<ul class="list-author">
|
|||
|
<li class="list-author-vocal active">
|
|||
|
P
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
R
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
S
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
T
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
V
|
|||
|
</li>
|
|||
|
</ul>
|
|||
|
<ul class="list-author">
|
|||
|
<li class="list-author-vocal">
|
|||
|
W
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
Y
|
|||
|
</li>
|
|||
|
<li class="list-author-vocal">
|
|||
|
Z
|
|||
|
</li>
|
|||
|
</ul>
|
|||
|
<div class="ff" style="left: 69px; top: 115px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 69px; top: 145px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 69px; top: 161px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 69px; top: 191px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 69px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 69px; top: 237px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 69px; top: 253px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 69px; top: 283px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 69px; top: 299px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 69px; top: 329px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 69px; top: 345px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 68px; top: 352px; width: 41px; height: 19px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 68px; top: 382px; width: 41px; height: 19px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 68px; top: 412px; width: 41px; height: 19px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 68px; top: 442px; width: 41px; height: 19px; background: blue;"></div>
|
|||
|
<div class="ff" style="left: 69px; top: 465px; width: 3px; height: 3px; background: blue;"></div>
|
|||
|
|
|||
|
<ul class="list-author">
|
|||
|
<li>
|
|||
|
Word
|
|||
|
</li>
|
|||
|
<li>
|
|||
|
Word
|
|||
|
</li>
|
|||
|
<li>
|
|||
|
Word
|
|||
|
</li>
|
|||
|
<li>
|
|||
|
Word
|
|||
|
</li>
|
|||
|
</ul>
|
|||
|
</div> <!-- headline headline-left headline-active -->
|
|||
|
<div class="headline headline-right headline-active">
|
|||
|
<!--‎f--><div style="width: 2px; height: 2px; background: white;"></div>
|
|||
|
</div>
|
|||
|
|
|||
|
<div style="position:relative;">
|
|||
|
<div style="height: 4000px; background: red;">
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</div> <!-- container-ext -->
|
|||
|
</body>
|
|||
|
</html>
|