web-html5-scripts/error-pages/404-pages/glitched-out-404/style.css

218 lines
42 KiB
CSS
Raw Normal View History

@import url(https://fonts.googleapis.com/css?family=Gilda+Display);
html {
background-color:black;
color: white;
overflow: hidden;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: medium;
}
.error {
text-align: center;
font-family: 'Gilda Display', serif;
text-align: center;
width: 100%;
height: 120px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: -60px;
right: 0;
-webkit-animation: noise-3 1s linear infinite;
animation: noise-3 1s linear infinite;
overflow: default;
}
body:after {
content: 'error 404';
font-family: OCR-A;
font-size: 100px;
text-align: center;
width: 550px;
margin: auto;
position: absolute;
top: 25%;
bottom: 0;
left: 0;
right: 35%;
opacity: 0;
color: white;
-webkit-animation: noise-1 .2s linear infinite;
animation: noise-1 .2s linear infinite;
}
body:before {
content: 'error 404';
font-family: OCR-A;
font-size: 100px;
text-align: center;
width: 550px;
margin: auto;
position: absolute;
top: 25%;
bottom: 0;
left: 0;
right: 35%;
opacity: 0;
color: white;
-webkit-animation: noise-2 .2s linear infinite;
animation: noise-2 .2s linear infinite;
}
.info {
text-align: center;
width: 200px;
height: 60px;
margin: auto;
position: absolute;
top: 280px;
bottom: 0;
left: 20px;
right: 0;
-webkit-animation: noise-3 1s linear infinite;
animation: noise-3 1s linear infinite;
}
.info:before {
content: 'file not found';
font-family: OCR-A;
font-size: 100px;
text-align: center;
width: 800px;
margin: auto;
position: absolute;
top: 20px;
bottom: 0;
left: 40px;
right: 100px;
opacity: 0;
color: white;
-webkit-animation: noise-2 .2s linear infinite;
animation: noise-2 .2s linear infinite;
}
.info:after {
content: 'file not found';
font-family: OCR-A;
font-size: 100px;
text-align: center;
width: 800px;
margin: auto;
position: absolute;
top: 20px;
bottom: 0;
left: 40px;
right: 0;
opacity: 0;
color: white;
-webkit-animation: noise-1 .2s linear infinite;
animation: noise-1 .2s linear infinite;
}
@-webkit-keyframes noise-1 {
0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
10% {opacity: .1;}
50% {opacity: .5; left: -6px;}
80% {opacity: .3;}
100% {opacity: .6; left: 2px;}
}
@keyframes noise-1 {
0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
10% {opacity: .1;}
50% {opacity: .5; left: -6px;}
80% {opacity: .3;}
100% {opacity: .6; left: 2px;}
}
@-webkit-keyframes noise-2 {
0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
10% {opacity: .1;}
50% {opacity: .5; left: 6px;}
80% {opacity: .3;}
100% {opacity: .6; left: -2px;}
}
@keyframes noise-2 {
0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
10% {opacity: .1;}
50% {opacity: .5; left: 6px;}
80% {opacity: .3;}
100% {opacity: .6; left: -2px;}
}
@-webkit-keyframes noise {
0%, 3%, 5%, 42%, 44%, 100% {opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1);}
4.3% {opacity: 1; -webkit-transform: scaleY(1.7); transform: scaleY(1.7);}
43% {opacity: 1; -webkit-transform: scaleX(1.5); transform: scaleX(1.5);}
}
@keyframes noise {
0%, 3%, 5%, 42%, 44%, 100% {opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1);}
4.3% {opacity: 1; -webkit-transform: scaleY(1.7); transform: scaleY(1.7);}
43% {opacity: 1; -webkit-transform: scaleX(1.5); transform: scaleX(1.5);}
}
@-webkit-keyframes noise-3 {
0%,3%,5%,42%,44%,100% {opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1);}
4.3% {opacity: 1; -webkit-transform: scaleY(4); transform: scaleY(4);}
43% {opacity: 1; -webkit-transform: scaleX(10) rotate(60deg); transform: scaleX(10) rotate(60deg);}
}
@keyframes noise-3 {
0%,3%,5%,42%,44%,100% {opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1);}
4.3% {opacity: 1; -webkit-transform: scaleY(4); transform: scaleY(4);}
43% {opacity: 1; -webkit-transform: scaleX(10) rotate(60deg); transform: scaleX(10) rotate(60deg);}
}
.wrap {
top: 30%;
left: 25%;
height: 200px;
margin-top: -100px;
position: absolute;
}
code {
color: white;
}
span.blue {
color: #48beef;
}
span.comment {
color: #7f8c8d;
}
span.orange {
color: #f39c12;
}
span.green {
color: #33cc33;
}
.viewFull {
font-family:OCR-A;
color:orange;
text-decoration:;
}
@font-face {
font-family: OCR-A;
src: url('data:font/woff;base64,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
}
@media only screen and (min-height: 500px) {
.viewFull{
display:none;
}
}