Source code
Revision control
Copy as Markdown
Other Tools
<!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 style="position:relative;">
<div style="height: 4000px; background: red;">
</div>
</div>
</div> <!-- container-ext -->
</body>
</html>