ordering
parent
43d6b6dc01
commit
7bbce34bd4
@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>teletext</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: teletext;
|
||||
src: url(font/Modeseven-L3n5.ttf);
|
||||
}
|
||||
|
||||
.green::-moz-selection { /* Code for Firefox */
|
||||
/*color: white;*/
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.green::selection {
|
||||
/*color: red;*/
|
||||
background: blue;
|
||||
}
|
||||
|
||||
body{position: relative;
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: teletext;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.green {color: #6ee947;}
|
||||
.white {color: #fff;}
|
||||
.yellow {color: #fff841;}
|
||||
.violet {color: darkviolet;}
|
||||
.magenta {color: crimson;}
|
||||
|
||||
|
||||
.mainTxt {
|
||||
width: 58%;
|
||||
margin-left: 21%;
|
||||
margin-right: 21%;
|
||||
}
|
||||
|
||||
.blink_me {
|
||||
animation: blinker 1s step-start infinite;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.lineH {
|
||||
text-align: center;
|
||||
letter-spacing: 10px;
|
||||
animation: lineH 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes lineH {
|
||||
50% {
|
||||
letter-spacing: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.zigzag {letter-spacing: -5px;}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
font-size: 48px;
|
||||
/*z-index: -1;*/
|
||||
}
|
||||
|
||||
.bgBlack { background-color: black;}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="mainTxt">
|
||||
<h1 class="blink_me bgBlack">Introduction</h1>
|
||||
<br>
|
||||
|
||||
<!-- -->
|
||||
<div>
|
||||
<p class="green bgBlack">What you are reading to can be accessed at different levels of intensity.</p>
|
||||
|
||||
<p class="green bgBlack">It might be helpful to think of these as options, or hatches opening along a corridor inside a maze. </p>
|
||||
|
||||
<p class="zigzag white bgBlack">\/<a href="#">\/</a>\/\<a href="#">/\</a>/\/<a href="#">\/</a>\/\/\/\<a href="#">/\</a>/\<a href="#">/\</a>/\/\/\/<a href="#">\/</a>\/\/\/\/\/\/\/\<a href="#">/\</a>/<a href="#">\/</a>\/\/\/\/\/\/</p>
|
||||
|
||||
<p class="yellow bgBlack">At degree 0</p>
|
||||
<p class="lineH bgBlack"> <a href="#">"-Th.e_gat(e-"</a> </p>
|
||||
<p class="yellow bgBlack">is the name on a door in a world which eventually does not, has not, and will never exist.</p>
|
||||
</div>
|
||||
|
||||
<!-- <p class="linez">/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\</p> -->
|
||||
|
||||
<!-- <img src="https://cdn.lowgif.com/full/454a59780310bb83-never-ending-maze-gif-find-share-on-giphy.gif"> -->
|
||||
</main>
|
||||
|
||||
<!-- <p>At degree 0 <a href="#">"-Th.e_gat(e-"</a> is the name on a door in a world which eventually does not, has not, and will never exist'.</p> -->
|
||||
|
||||
<script type="text/javascript">
|
||||
var w = window.innerWidth;
|
||||
var h = window.innerHeight;
|
||||
|
||||
function getRintw() {
|
||||
|
||||
var x = Math.floor(Math.random() * w) - 50;
|
||||
return x
|
||||
|
||||
}
|
||||
|
||||
function getRinth() {
|
||||
|
||||
var y = Math.floor(Math.random() * h) - 80;
|
||||
return y
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
for (var i = 0; i < 300; i++) {
|
||||
$("body").append(
|
||||
'<span class="stars blink_me" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
|
||||
);
|
||||
}
|
||||
|
||||
for (var i = 0; i < 30; i++) {
|
||||
|
||||
$("body").append(
|
||||
'<span class="stars violet" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
|
||||
);
|
||||
|
||||
$("body").append(
|
||||
'<span class="stars magenta" style="top:' + getRinth() + 'px; left:' + getRintw() + 'px;">.</span>'
|
||||
);
|
||||
}
|
||||
|
||||
$(".stars").click(function(){
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,7 @@
|
||||
$(document).ready(function(){
|
||||
|
||||
$( function() {
|
||||
$( ".draggable" ).draggable();
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title> @@@ilinx </title>
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="draggable">
|
||||
<img id="spiral" class="rotating" src="./img/spiral_b.png">
|
||||
<div id="ilinx">
|
||||
<h1 class="ilinx draggable">i</h1>
|
||||
<h1 class="ilinx draggable">l</h1>
|
||||
<h1 class="ilinx draggable">i</h1>
|
||||
<h1 class="ilinx draggable">n</h1>
|
||||
<h1 class="ilinx draggable">x</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="./drag.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,62 @@
|
||||
body{
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#ilinx{
|
||||
width: 6%;
|
||||
margin-left: 47%;
|
||||
margin-right: 47%;
|
||||
}
|
||||
|
||||
.ilinx {
|
||||
font-size: 35px;
|
||||
margin-top: -2px;
|
||||
float:left;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
#spiral { width: 300px; }
|
||||
|
||||
.rotating {
|
||||
-webkit-animation: rotating 3s linear infinite;
|
||||
-moz-animation: rotating 3s linear infinite;
|
||||
-ms-animation: rotating 3s linear infinite;
|
||||
-o-animation: rotating 3s linear infinite;
|
||||
animation: rotating 3s linear infinite;
|
||||
}
|
||||
|
||||
/* Rotate loop */
|
||||
|
||||
@-webkit-keyframes rotating /* Safari and Chrome */ {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotating {
|
||||
from {
|
||||
-ms-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-ms-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title> @@@ilinx </title>
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<style type="text/css">
|
||||
body{
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<div class="draggable">
|
||||
<img id="spiral" class="rotating" src="./img/spiral_w.png">
|
||||
<div id="ilinx">
|
||||
<h1 class="ilinx draggable">i</h1>
|
||||
<h1 class="ilinx draggable">l</h1>
|
||||
<h1 class="ilinx draggable">i</h1>
|
||||
<h1 class="ilinx draggable">n</h1>
|
||||
<h1 class="ilinx draggable">x</h1>
|
||||
</div>
|
||||
<div id="islands">
|
||||
<p class="island draggable">thule</p>
|
||||
<p class="island draggable">mu</p>
|
||||
<p class="island draggable">lemuria</p>
|
||||
<p class="island draggable">hyperborea</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="./drag.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Template</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Hello World!</h1>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
@ -1,94 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>teletext</title>
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: teletext;
|
||||
src: url(font/Modeseven-L3n5.ttf);
|
||||
}
|
||||
|
||||
.green::-moz-selection { /* Code for Firefox */
|
||||
/*color: white;*/
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.green::selection {
|
||||
/*color: red;*/
|
||||
background: blue;
|
||||
}
|
||||
|
||||
body{
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: teletext;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.green {color: #6ee947;}
|
||||
.white {color: #fff;}
|
||||
.yellow {color: #fff841;}
|
||||
|
||||
|
||||
.mainTxt {
|
||||
width: 58%;
|
||||
margin-left: 21%;
|
||||
}
|
||||
|
||||
.blink_me {
|
||||
animation: blinker 1s step-start infinite;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.lineH {
|
||||
text-align: center;
|
||||
letter-spacing: 10px;
|
||||
animation: lineH 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes lineH {
|
||||
50% {
|
||||
letter-spacing: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.zigzag {letter-spacing: -5px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1 class="blink_me">Introduction</h1>
|
||||
<br>
|
||||
|
||||
<!-- -->
|
||||
<div class="mainTxt">
|
||||
<p class="green">What you are reading to can be accessed at different levels of intensity.</p>
|
||||
|
||||
<p class="green">It might be helpful to think of these as options, or hatches opening along a corridor inside a maze. </p>
|
||||
|
||||
<p class="zigzag white">\/<a href="#">\/</a>\/\<a href="#">/\</a>/\/<a href="#">\/</a>\/\/\/\<a href="#">/\</a>/\<a href="#">/\</a>/\/\/\/<a href="#">\/</a>\/\/\/\/\/\/\/\<a href="#">/\</a>/<a href="#">\/</a>\/\/\/\/\/\/</p>
|
||||
|
||||
<p class="yellow">At degree 0</p>
|
||||
<p class="lineH"> <a href="#">"-Th.e_gat(e-"</a> </p>
|
||||
<p class="yellow">is the name on a door in a world which eventually does not, has not, and will never exist.</p>
|
||||
</div>
|
||||
|
||||
<a href="#">\/</a>
|
||||
<!-- <p class="linez">/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\</p> -->
|
||||
|
||||
<!-- <img src="https://cdn.lowgif.com/full/454a59780310bb83-never-ending-maze-gif-find-share-on-giphy.gif"> -->
|
||||
</div>
|
||||
|
||||
<!-- <p>At degree 0 <a href="#">"-Th.e_gat(e-"</a> is the name on a door in a world which eventually does not, has not, and will never exist'.</p> -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue