<!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" 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 >
