You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.2 KiB
HTML
94 lines
2.2 KiB
HTML
5 years ago
|
<!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>
|