to much updates to mention awesome stuff
This commit is contained in:
parent
8c06b21ec7
commit
b436208407
144
404-lost.html
144
404-lost.html
|
|
@ -1,144 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>404</title>
|
||||
<meta name="description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
|
||||
<meta property="og:title" content="404">
|
||||
<meta property="og:description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
|
||||
</head>
|
||||
<!--[if lt IE 8]>
|
||||
<p class="js-fail text-center animated slideInDown">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
|
||||
<noscript class="js-fail text-center animated slideInDown">Javascript required to run this website</noscript>
|
||||
<body><div class="video-overlay"></div>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 0 0.15em #1da9cc;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
filter: blur(0.007em);
|
||||
animation: shake 2.5s linear infinite both;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
|
||||
clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
|
||||
}
|
||||
|
||||
h1::before,
|
||||
h1::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
h1::before {
|
||||
animation: crack1 2.5s linear forwards;
|
||||
-webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
|
||||
clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
h1::after {
|
||||
animation: crack2 2.5s linear forwards;
|
||||
-webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
|
||||
clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
|
||||
filter: blur(0.018em);
|
||||
transform: translateY(0.018em) rotate(0deg);
|
||||
}
|
||||
|
||||
10%, 30%, 40%, 50%, 70%, 80%, 90% {
|
||||
filter: blur(0.01em);
|
||||
transform: translateY(-0.018em) rotate(0deg);
|
||||
}
|
||||
|
||||
20%, 60% {
|
||||
filter: blur(0.03em);
|
||||
transform: translate(-0.018em, 0.018em) rotate(0deg);
|
||||
}
|
||||
|
||||
45%, 85% {
|
||||
filter: blur(0.03em);
|
||||
transform: translate(0.018em, -0.018em) rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
filter: blur(0.007em);
|
||||
transform: translate(0) rotate(-0.5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes crack1 {
|
||||
0%, 95% {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-51%, -48%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes crack2 {
|
||||
0%, 95% {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-49%, -53%);
|
||||
}
|
||||
}</style>
|
||||
<header>
|
||||
|
||||
<h1 data-text="404 | Page not found"><span>404 | Page not found</span></h1>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
<script>document.write('<a class="button btn" onclick="goBack()" href="' + document.location.hostname + '" title="← BACK TO ' + window.location.hostname + '">BACK</a>');</script>
|
||||
<script>document.write(new Date().getFullYear());</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<footer class="wrapper">
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<script src="js/background-video.js"></script>
|
||||
<link type="text/css" href="css/background-video.css" rel="stylesheet" />
|
||||
<link type="text/css" href="css/grid.css" rel="stylesheet" />
|
||||
<script>
|
||||
new BackgroundVideo({
|
||||
|
||||
video: [
|
||||
{
|
||||
file: "video/outside/storm.mp4"
|
||||
// formats: ["mp4"]
|
||||
}
|
||||
],
|
||||
|
||||
mobileImg: "img/tunnelvision.jpg",
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
78
404.html
78
404.html
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>500 | Internal Server Error</title>
|
||||
<meta name="description" content="A 500 error status implies that there is an internal server error">
|
||||
<meta property="og:title" content="500">
|
||||
<meta property="og:description" content="A 500 error status implies that there is an internal server error">
|
||||
</head>
|
||||
<!--[if lt IE 8]>
|
||||
<p class="js-fail text-center animated slideInDown">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
|
||||
<noscript class="js-fail text-center animated slideInDown">Javascript required to run this website</noscript>
|
||||
<link rel="preload" href="../background-video-master/fonts/CyberdyneOutline.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<body class="skynet-2">
|
||||
<div class="video-overlay"></div>
|
||||
|
||||
<div class="frame">
|
||||
|
||||
<header class="wrapper">
|
||||
|
||||
|
||||
<div class="bit-10 left">
|
||||
<div class="skynet-watermark"><img src="../background-video-master/video/skynet.png" alt="Error Skynet Launch"></div></div>
|
||||
<div class="bit-80 right">
|
||||
<div class="glitch">
|
||||
<h1>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bit-1 text-center">
|
||||
<h2>Internal server error </h2>
|
||||
<p>Server meltdown - Please evacuate</p>
|
||||
</div>
|
||||
</header>
|
||||
<main class="wrapper">
|
||||
|
||||
</main>
|
||||
<footer class="wrapper fixed bottom">
|
||||
<strong class="left">
|
||||
<script>document.write('<a class="button btn" onclick="goBack()" href="' + document.location.hostname + '" title="← BACK TO ' + window.location.hostname + '"> << previous page </a>');</script>
|
||||
</strong>
|
||||
<strong class="right"><script>document.write(new Date().getFullYear());</script> | errorpages on steroids ™</strong>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/background-video.js"></script>
|
||||
<link type="text/css" href="fonts/stylesheet.css" rel="stylesheet" />
|
||||
<link type="text/css" href="css/background-video.css" rel="stylesheet" />
|
||||
<link type="text/css" href="css/grid.css" rel="stylesheet" />
|
||||
<style>
|
||||
.skynet-watermark img {width:100%}
|
||||
.skynet-watermark {
|
||||
display: block;
|
||||
position:relative;
|
||||
z-index: 900;
|
||||
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
new BackgroundVideo({
|
||||
video: [{file: "video/skynet.mp4" // formats: ["mp4"]
|
||||
}, ]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -4,24 +4,24 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>404</title>
|
||||
<title>404 | Not found</title>
|
||||
<meta name="description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
|
||||
<meta property="og:title" content="404">
|
||||
<meta property="og:title" content="404 | Page Not Found">
|
||||
<meta property="og:description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
|
||||
</head>
|
||||
<!--[if lt IE 8]>
|
||||
<p class="js-fail text-center animated slideInDown">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
|
||||
<noscript class="js-fail text-center animated slideInDown">Javascript required to run this website</noscript>
|
||||
<link rel="preload" href="../background-video-master/fonts/ComputerAid.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="../background-video-master/fonts/AvengeanceHeroicAvengerNormal.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<body class="cyber">
|
||||
<body class="avengers">
|
||||
<div class="video-overlay"></div>
|
||||
<div class="frame">
|
||||
<header class="wrapper">
|
||||
<div class="bit-1 text-center">
|
||||
<h1>Error 404</h1>
|
||||
<h2>Not found</h2>
|
||||
<p>Lost in the matrix - get out now!</p>
|
||||
<h1>Avengers please help!</h1>
|
||||
<h2>Error 404 - page not found</h2>
|
||||
<p>The 404 Not Found HTTP status code is a client error used to indicate that a resource was not found at the specified address. It is most likely the result of a dead link or a misspelled address.</p>
|
||||
</div>
|
||||
</header>
|
||||
<main class="wrapper">
|
||||
|
|
@ -29,21 +29,22 @@
|
|||
</main>
|
||||
<footer class="wrapper fixed bottom">
|
||||
<strong class="left">
|
||||
<script>document.write('<a class="button btn" onclick="goBack()" href="' + document.location.hostname + '" title="← BACK TO ' + window.location.hostname + '"><< Exit</a>');</script>
|
||||
<script>document.write('<a class="button btn" onclick="goBack()" href="' + document.location.hostname + '" title="← BACK TO ' + window.location.hostname + '"> previous page </a>');</script>
|
||||
</strong>
|
||||
<strong class="right"><script>document.write(new Date().getFullYear());</script> | errorpages on steroids ™</strong>
|
||||
<strong class="right"><script>document.write(new Date().getFullYear());</script> - errorpages on steroids ™</strong>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/background-video.js"></script>
|
||||
<link type="text/css" href="fonts/stylesheet.css" rel="stylesheet" />
|
||||
<link type="text/css" href="css/background-video.css" rel="stylesheet" />
|
||||
<link type="text/css" href="css/grid.css" rel="stylesheet" />
|
||||
<script>
|
||||
<link href="fonts/stylesheet.css" rel="stylesheet">
|
||||
<link href="css/grid.css" rel="stylesheet">
|
||||
<link href="css/background-video.css" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
new BackgroundVideo({
|
||||
video: [{file: "video/tunnelvision.mp4" // formats: ["mp4"]
|
||||
}, ]
|
||||
video: [{file: "video/avengers.webm" // formats: ["mp4"]
|
||||
}, ]
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>404 | Not found</title>
|
||||
<meta name="description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
|
||||
<meta property="og:title" content="404 | Page Not Found">
|
||||
<meta property="og:description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
|
||||
</head>
|
||||
<!--[if lt IE 8]>
|
||||
<p class="js-fail text-center animated slideInDown">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
|
||||
<noscript class="js-fail text-center animated slideInDown">Javascript required to run this website</noscript>
|
||||
<link rel="preload" href="../background-video-master/fonts/AvengeanceHeroicAvengerNormal.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<body class="avengers">
|
||||
<div class="video-overlay"></div>
|
||||
<div class="frame">
|
||||
<header class="wrapper">
|
||||
<div class="bit-1 text-center">
|
||||
<h1>Avengers please help!</h1>
|
||||
<h2>Error 404 - page not found</h2>
|
||||
<p>The 404 Not Found HTTP status code is a client error used to indicate that a resource was not found at the specified address. It is most likely the result of a dead link or a misspelled address.</p>
|
||||
</div>
|
||||
</header>
|
||||
<main class="wrapper">
|
||||
|
||||
</main>
|
||||
<footer class="wrapper fixed bottom">
|
||||
<strong class="left">
|
||||
<script>document.write('<a class="button btn" onclick="goBack()" href="' + document.location.hostname + '" title="← BACK TO ' + window.location.hostname + '"> previous page </a>');</script>
|
||||
</strong>
|
||||
<strong class="right"><script>document.write(new Date().getFullYear());</script> - errorpages on steroids ™</strong>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/background-video.js"></script>
|
||||
<link href="fonts/stylesheet.css" rel="stylesheet">
|
||||
<link href="css/grid.css" rel="stylesheet">
|
||||
<link href="css/background-video.css" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
new BackgroundVideo({
|
||||
video: [{file: "video/avengers.webm" // formats: ["mp4"]
|
||||
}, ]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -7,14 +7,113 @@
|
|||
body.fire {
|
||||
font-family: 'Cheap Fire', sans-serif;
|
||||
}
|
||||
body.thunder {
|
||||
font-family: 'Thunder Titan', sans-serif;
|
||||
|
||||
.fire > h1 {
|
||||
color: #f5f5f5!important;
|
||||
text-shadow: 0px -2px 4px #fff, 0px -2px 10px #FF3, 0px -10px 20px #F90, 0px -20px 40px #C33;
|
||||
}
|
||||
|
||||
body.cyber {
|
||||
font-family: 'Computer Aid', sans-serif;
|
||||
.flame span {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
background-image: url("https://dl.dropbox.com/s/r2s8s2r17wi0xm6/flame.png?dl=0");
|
||||
background-position: 0 -1000px;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: fire 4s linear infinite;
|
||||
}
|
||||
|
||||
.flame h1 {
|
||||
color: #fff;
|
||||
font-size: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes fire {
|
||||
0% {
|
||||
background-position: 0% -50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% -25%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
body.thunder {
|
||||
font-family: 'electrical',sans-serif;
|
||||
}
|
||||
|
||||
body.skynet {
|
||||
font-family: 'Cyberdyne',sans-serif;
|
||||
}
|
||||
|
||||
body.skynet-2 h1,
|
||||
body.skynet-2 h2 {
|
||||
font-family: 'Cyberdyne Outline',sans-serif;
|
||||
}
|
||||
|
||||
body.skynet-2 {
|
||||
font-family: 'Cyberdyne',sans-serif;
|
||||
}
|
||||
|
||||
body.avengers {
|
||||
font-family: 'Avengeance Heroic Avenger',sans-serif;
|
||||
}
|
||||
|
||||
.avengers P {
|
||||
font-size: 130%;
|
||||
line-height: 200%;
|
||||
letter-spacing: 2pt;
|
||||
padding:0 5em;
|
||||
}
|
||||
|
||||
.avengers h1 {
|
||||
font-size:7em;
|
||||
}
|
||||
|
||||
.avengers h2 {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
body.grunge {
|
||||
font-family: 'Distorter Demo',sans-serif;
|
||||
}
|
||||
|
||||
body.windows {
|
||||
font-family: 'Windows Command Prompt',monospace;
|
||||
}
|
||||
|
||||
|
||||
@media(min-width:0) and (max-width:540px) {
|
||||
.skynet-watermark {
|
||||
padding: 25%;
|
||||
}
|
||||
|
||||
.glitch {
|
||||
margin: 0 15%;
|
||||
}
|
||||
|
||||
.avengers h1 {
|
||||
font-size: 5em
|
||||
}
|
||||
|
||||
.avengers h2 {
|
||||
font-size: 10vw;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.avengers P {
|
||||
font-size: 130%;
|
||||
line-height: 200%;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
@ -59,12 +158,17 @@ body.fire .video-overlay {
|
|||
overflow:hidden;
|
||||
display: block;
|
||||
z-index:100;
|
||||
|
||||
background: linear-gradient(360deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.1) 91%);
|
||||
background: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.1) 91%);
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
width:100%;
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
.skynet .video-overlay,.skynet-2 .video-overlay{
|
||||
background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.1) 91%);
|
||||
}
|
||||
.video-overlay.fens{
|
||||
background:rgba(0,0,0,.5) url(../video/video-bg-pattern.png) center center repeat;
|
||||
opacity:.5
|
||||
}
|
||||
210
css/grid.css
210
css/grid.css
|
|
@ -1,126 +1,30 @@
|
|||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
font,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;position:relative;margin:0 auto;width:100%;float:left;overflow:hidden;z-index:99999;text-align:center;}
|
||||
h1,h2,h3,h4,h5,h6,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#fff;line-height:160%;}
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
dialog,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
z-index: 99999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
h1 a,
|
||||
h2 a,
|
||||
h3 a,
|
||||
h4 a,
|
||||
h5 a,
|
||||
h6 a {
|
||||
color: #fff;
|
||||
line-height: 160%;
|
||||
font-size:8vw;
|
||||
}
|
||||
h1 {font-size: 8vw;}
|
||||
h2 {font-size: 3vw;}
|
||||
p {font-size: 100%;}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none
|
||||
}
|
||||
a{text-decoration:none;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;transition:all .2s linear}a:hover{text-decoration:none}
|
||||
a{color:#f4f4f4;text-decoration:none;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;transition:all .2s linear}a:hover{text-decoration:none}
|
||||
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 160%;
|
||||
font-size:2vw;
|
||||
font-size:100%;
|
||||
position: relative;
|
||||
color:white;
|
||||
color:#F4F4F4;
|
||||
}
|
||||
|
||||
a.button.btn {
|
||||
|
||||
color: #000;
|
||||
background: #f4f4f4;
|
||||
padding: 2% 0;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed!important;
|
||||
|
|
@ -321,67 +225,22 @@ bit-55 = 55%
|
|||
|
||||
|
||||
@media(min-width:0) and (max-width:480px) {
|
||||
* {
|
||||
font-size: 99%
|
||||
}
|
||||
/*
|
||||
[class*='left'],
|
||||
[class*='left'],
|
||||
[class*='right'] {
|
||||
float: none !important
|
||||
} */
|
||||
}
|
||||
|
||||
/* [class*='bit-'] {
|
||||
[class*='bit-'] {
|
||||
float: none !important;
|
||||
width: 98%;
|
||||
padding: 1%;
|
||||
margin: 0 auto
|
||||
} */
|
||||
|
||||
.horizon li {
|
||||
float: none;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
width: 98%;
|
||||
padding: 2%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media(min-width:0) and (max-width:320px) {
|
||||
|
||||
.bit-4,
|
||||
.bit-30,
|
||||
.bit-3,
|
||||
.bit-65,
|
||||
.bit-70 {
|
||||
width: 96% !important;
|
||||
padding: 2%;
|
||||
clear: both
|
||||
}
|
||||
|
||||
ul.horizon li {
|
||||
width: 96%;
|
||||
text-align: center;
|
||||
float: none;
|
||||
clear: both;
|
||||
padding: 2%
|
||||
}
|
||||
|
||||
|
||||
.text-right,
|
||||
.text-left {
|
||||
width: 98% !important;
|
||||
padding: 1%;
|
||||
float: none;
|
||||
margin: 1% auto;
|
||||
text-align: center !important
|
||||
}
|
||||
|
||||
body { font-size: 1.5em;}
|
||||
}
|
||||
|
||||
@media(min-width:321px) and (max-width:720px) {
|
||||
@media(min-width:481px) and (max-width:720px) {
|
||||
|
||||
.bit-30,
|
||||
.bit-3,
|
||||
|
|
@ -405,32 +264,13 @@ bit-55 = 55%
|
|||
clear: both;
|
||||
padding: 2%
|
||||
}
|
||||
}
|
||||
@media(min-width:321px) and (max-width:720px) {
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h1 a,
|
||||
h2 a,
|
||||
h3,
|
||||
h3 a {
|
||||
font-size: 3em
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
h4 a,
|
||||
h5 a,
|
||||
h6 a {
|
||||
font-size: 1.8em
|
||||
}
|
||||
body {
|
||||
font-size:20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media(min-width:721px) and (max-width:1960px) {
|
||||
@media(min-width:721px) and (max-width:1200px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media(min-width:1201px) and (max-width:1960px) {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,10 +19,12 @@
|
|||
<div class="frame">
|
||||
<header class="wrapper">
|
||||
<div class="bit-1 text-center">
|
||||
<h1>Error 500</h1>
|
||||
<div class="flame">
|
||||
<h1><span>Error 500</span></h1>
|
||||
<h2>Internal server error </h2>
|
||||
<p>Server meltdown - Please evacuate</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="wrapper">
|
||||
|
||||
|
|
@ -36,8 +38,9 @@
|
|||
</div>
|
||||
<script src="js/background-video.js"></script>
|
||||
<link type="text/css" href="fonts/stylesheet.css" rel="stylesheet" />
|
||||
<link type="text/css" href="css/background-video.css" rel="stylesheet" />
|
||||
<link type="text/css" href="css/grid.css" rel="stylesheet" />
|
||||
<link type="text/css" href="css/background-video.css" rel="stylesheet" />
|
||||
|
||||
<script>
|
||||
new BackgroundVideo({
|
||||
video: [{file: "video/fire.mp4" // formats: ["mp4"]
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
248
fonts/demo.html
248
fonts/demo.html
|
|
@ -158,6 +158,122 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<div class="demo">
|
||||
<h1 style="font-family: '28 Days Later'; font-weight: normal; font-style: normal;">28 Days Later</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: '28 Days Later';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="28DaysLater.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: '28 Days Later'; font-weight: normal; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||
</p>
|
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'Computer Aid'; font-weight: normal; font-style: normal;">Computer Aid</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'Computer Aid';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="ComputerAid.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'Computer Aid'; font-weight: normal; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||
</p>
|
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'Cyberdyne'; font-weight: normal; font-style: normal;">Cyberdyne</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'Cyberdyne';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="Cyberdyne.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'Cyberdyne'; font-weight: normal; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||
</p>
|
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'Avengeance Heroic Avenger'; font-weight: normal; font-style: normal;">Avengeance Heroic Avenger Normal</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'Avengeance Heroic Avenger';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="AvengeanceHeroicAvengerNormal.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'Avengeance Heroic Avenger'; font-weight: normal; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||
</p>
|
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'Cheap Fire'; font-weight: normal; font-style: normal;">Cheap Fire</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
|
|
@ -187,6 +303,93 @@ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<h1 style="font-family: '1942 report'; font-weight: normal; font-style: normal;">1942 report</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: '1942 report';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="1942report.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: '1942 report'; font-weight: normal; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||
</p>
|
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'Cyberdyne Outline'; font-weight: normal; font-style: normal;">Cyberdyne Outline</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'Cyberdyne Outline';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="CyberdyneOutline.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'Cyberdyne Outline'; font-weight: normal; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||
</p>
|
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<h1 style="font-family: '`DragonForcE\''; font-weight: normal; font-style: normal;">‘DragonForcE’</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: '`DragonForcE\'';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="DragonForcE.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: '`DragonForcE\''; font-weight: normal; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||
</p>
|
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'Distorter Demo'; font-weight: normal; font-style: normal;">Distorter Demo</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
|
|
@ -217,15 +420,15 @@ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'Thunder Titan'; font-weight: normal; font-style: normal;">Thunder Titan</h1>
|
||||
<h1 style="font-family: 'SEGA LOGO FONT'; font-weight: normal; font-style: normal;">SEGA LOGO FONT</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'Thunder Titan';
|
||||
font-family: 'SEGA LOGO FONT';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="ThunderTitan.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'Thunder Titan'; font-weight: normal; font-style: normal;">
|
||||
<link rel="preload" href="SEGA.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'SEGA LOGO FONT'; font-weight: normal; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
|
|
@ -246,15 +449,44 @@ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
|||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'Computer Aid'; font-weight: normal; font-style: normal;">Computer Aid</h1>
|
||||
<h1 style="font-family: 'Windows Command Prompt'; font-weight: normal; font-style: normal;">Windows Command Prompt Regular</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'Computer Aid';
|
||||
font-family: 'Windows Command Prompt';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="ComputerAid.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'Computer Aid'; font-weight: normal; font-style: normal;">
|
||||
<link rel="preload" href="Windows-Command-Prompt.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'Windows Command Prompt'; font-weight: normal; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
0123456789.:,;()*!?'@#<>$%&^+-=~
|
||||
</p>
|
||||
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<h1 style="font-family: 'electrical'; font-weight: normal; font-style: normal;">electrical</h1>
|
||||
<pre title="Usage">.your-style {
|
||||
font-family: 'electrical';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}</pre>
|
||||
<pre title="Preload (optional)">
|
||||
<link rel="preload" href="electrical.woff2" as="font" type="font/woff2" crossorigin></pre>
|
||||
<div class="font-container" style="font-family: 'electrical'; font-weight: normal; font-style: normal;">
|
||||
<p class="letters">
|
||||
abcdefghijklmnopqrstuvwxyz<br>
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>500 | Internal Server Error</title>
|
||||
<meta name="description" content="A 500 error status implies that there is an internal server error">
|
||||
<meta property="og:title" content="500">
|
||||
<meta property="og:description" content="A 500 error status implies that there is an internal server error">
|
||||
<link rel="preload" href="../background-video-master/fonts/CyberdyneOutline.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="../background-video-master/fonts/Cyberdyne.woff2" as="font" type="font/woff2" crossorigin>
|
||||
</head>
|
||||
<!--[if lt IE 8]><p class="js-fail text-center animated slideInDown">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
|
||||
<noscript class="js-fail text-center animated slideInDown">Javascript required to run this website</noscript>
|
||||
|
||||
<body class="skynet-2">
|
||||
<div class="video-overlay"></div>
|
||||
<div class="frame">
|
||||
<header class="wrapper">
|
||||
<div class="bit-10 left">
|
||||
<div class="skynet-watermark"><img src="../background-video-master/video/skynet.png" alt="Error Skynet Launch"></div></div>
|
||||
<div class="bit-80 right">
|
||||
<div class="glitch">
|
||||
<h1>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
<div class="line">Error 500</div>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bit-1 text-center">
|
||||
<h2>Internal server error </h2>
|
||||
<p>The 500 Internal Server Error status code is a catch-all server error and the HTTP request can not be fulfilled</p>
|
||||
</div>
|
||||
</header>
|
||||
<main class="wrapper">
|
||||
|
||||
</main>
|
||||
<footer class="wrapper fixed bottom">
|
||||
<strong class="left">
|
||||
<script>document.write('<a class="button btn" onclick="goBack()" href="' + document.location.hostname + '" title="← BACK TO ' + window.location.hostname + '"> << previous page </a>');</script>
|
||||
</strong>
|
||||
<strong class="right"><script>document.write(new Date().getFullYear());</script> | errorpages on steroids ™</strong>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/background-video.js"></script>
|
||||
<link href="fonts/stylesheet.css" rel="stylesheet">
|
||||
<link href="css/grid.css" rel="stylesheet">
|
||||
<link href="css/background-video.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.skynet-watermark img {width:100%}
|
||||
.skynet-watermark {
|
||||
display: block;
|
||||
position:relative;
|
||||
z-index: 900;
|
||||
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
new BackgroundVideo({
|
||||
video: [{file: "video/skynet.mp4" // formats: ["mp4"]
|
||||
}, ]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
10
thunder.html
10
thunder.html
|
|
@ -4,15 +4,15 @@
|
|||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>404</title>
|
||||
<meta name="description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
|
||||
<meta property="og:title" content="404">
|
||||
<meta property="og:description" content="A 404 error status implies that the file or page that you're looking for could not be found.">
|
||||
<title>500 | Internal Server Error</title>
|
||||
<meta name="description" content="A 500 error status implies that there is an internal server error">
|
||||
<meta property="og:title" content="500">
|
||||
<meta property="og:description" content="A 500 error status implies that there is an internal server error">
|
||||
</head>
|
||||
<!--[if lt IE 8]>
|
||||
<p class="js-fail text-center animated slideInDown">You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
|
||||
<noscript class="js-fail text-center animated slideInDown">Javascript required to run this website</noscript>
|
||||
<link rel="preload" href="../background-video-master/fonts/ThunderTitan.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="../background-video-master/fonts/electrical.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<body class="thunder">
|
||||
<div class="video-overlay"></div>
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
video/fire.mp4
BIN
video/fire.mp4
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
Loading…
Reference in New Issue