├── 404
    ├── index.html
    ├── oxygen.fonts.css
    ├── script.js
    ├── sign_question.png
    └── style.css
├── 500
    ├── index.html
    ├── oxygen.fonts.css
    ├── script.js
    └── style.css
├── 503
    ├── index.html
    ├── oxygen.fonts.css
    ├── script.js
    └── style.css
├── 504
    ├── error_ico.png
    ├── index.html
    ├── oxygen.fonts.css
    ├── script.js
    └── style.css
├── LICENSE.md
└── README.md


/404/index.html:
--------------------------------------------------------------------------------
  1 | <meta charset="UTF-8">
  2 | <link rel="stylesheet" type="text/css" href="style.css">
  3 | <link rel="stylesheet" type="text/css" href="oxygen.fonts.css">
  4 | <div class="container">
  5 |         <div class="error">
  6 |             <h1>404</h1>
  7 |             <h2>error</h2>
  8 |             <p>No hemos podido encontrar lo que estás buscando. Revisa la URL e intentalo nuevamente</p>
  9 |             <p class="subtitle">ERR_NOT_FOUND</p>
 10 |         </div>
 11 |         <div class="stack-container">
 12 |             <div class="card-container">
 13 |                 <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
 14 |                     <div class="card">
 15 |                         <div class="writing">
 16 |                             <div class="topbar">
 17 |                                 <div class="red"></div>
 18 |                                 <div class="yellow"></div>
 19 |                                 <div class="green"></div>
 20 |                             </div>
 21 |                             <div class="code">
 22 |                                 <div class="centered">
 23 |                                     <img src="sign_question.png">
 24 |                                 </div>
 25 |                             </div>
 26 |                         </div>
 27 |                     </div>
 28 |                 </div>
 29 |             </div>
 30 |             <div class="card-container">
 31 |                 <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
 32 |                     <div class="card">
 33 |                         <div class="writing">
 34 |                             <div class="topbar">
 35 |                                 <div class="red"></div>
 36 |                                 <div class="yellow"></div>
 37 |                                 <div class="green"></div>
 38 |                             </div>
 39 |                             <div class="code">
 40 |                                 <div class="centered">
 41 |                                     <img src="sign_question.png">
 42 |                                 </div>
 43 |                             </div>
 44 |                         </div>
 45 |                     </div>
 46 |                 </div>
 47 |             </div>
 48 |             <div class="card-container">
 49 |                 <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
 50 |                     <div class="card">
 51 |                         <div class="writing">
 52 |                             <div class="topbar">
 53 |                                 <div class="red"></div>
 54 |                                 <div class="yellow"></div>
 55 |                                 <div class="green"></div>
 56 |                             </div>
 57 |                             <div class="code">
 58 |                                 <div class="centered">
 59 |                                     <img src="sign_question.png">
 60 |                                 </div>
 61 |                             </div>
 62 |                         </div>
 63 |                     </div>
 64 |                 </div>
 65 |             </div>
 66 |             <div class="card-container">
 67 |                 <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
 68 |                     <div class="card">
 69 |                         <div class="writing">
 70 |                             <div class="topbar">
 71 |                                 <div class="red"></div>
 72 |                                 <div class="yellow"></div>
 73 |                                 <div class="green"></div>
 74 |                             </div>
 75 |                             <div class="code">
 76 |                                 <div class="centered">
 77 |                                     <img src="sign_question.png">
 78 |                                 </div>
 79 |                             </div>
 80 |                         </div>
 81 |                     </div>
 82 |                 </div>
 83 |             </div>
 84 |             <div class="card-container">
 85 |                 <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
 86 |                     <div class="card">
 87 |                         <div class="writing">
 88 |                             <div class="topbar">
 89 |                                 <div class="red"></div>
 90 |                                 <div class="yellow"></div>
 91 |                                 <div class="green"></div>
 92 |                             </div>
 93 |                             <div class="code">
 94 |                                 <div class="centered">
 95 |                                     <img src="sign_question.png">
 96 |                                 </div>
 97 |                             </div>
 98 |                         </div>
 99 |                     </div>
100 |                 </div>
101 |             </div>
102 |             <div class="card-container">
103 |                 <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
104 |                     <div class="card">
105 |                         <div class="writing">
106 |                             <div class="topbar">
107 |                                 <div class="red"></div>
108 |                                 <div class="yellow"></div>
109 |                                 <div class="green"></div>
110 |                             </div>
111 |                             <div class="code">
112 |                                 <div class="centered">
113 |                                     <img src="sign_question.png">
114 |                                 </div>
115 |                             </div>
116 |                         </div>
117 |                     </div>
118 |                 </div>
119 |             </div>
120 |         </div>
121 |     <footer>
122 |         <p class="copyright">©2020 Grupo Multimedios Argentina</p>
123 |     </footer>
124 |     </div>
125 |     <style>
126 |         footer {
127 |             position: fixed;
128 |             bottom:0;
129 |             height: 40px;
130 |             border-top-color:#33333342;
131 |             border-top-style:solid;
132 |             border-top-width:1px;
133 |             width: 100%;
134 |         }
135 | 
136 |         p.copyright {
137 |             position:absolute;
138 |             margin:0;
139 |             top: 9px;
140 |             width: 100%;
141 |             color: #000000a3;
142 |             font-size: 1em;
143 |             text-align: center;
144 |             bottom:0;
145 |         }
146 |     </style>
147 | 	<script type="text/javascript" src="script.js"></script>


--------------------------------------------------------------------------------
/404/oxygen.fonts.css:
--------------------------------------------------------------------------------
 1 | /* latin-ext */
 2 | @font-face {
 3 |   font-family: 'Oxygen';
 4 |   font-style: normal;
 5 |   font-weight: 400;
 6 |   font-display: swap;
 7 |   src: local('Oxygen Regular'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v9/2sDfZG1Wl4LcnbuKgE0mV0Q.woff2) format('woff2');
 8 |   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 9 | }
10 | /* latin */
11 | @font-face {
12 |   font-family: 'Oxygen';
13 |   font-style: normal;
14 |   font-weight: 400;
15 |   font-display: swap;
16 |   src: local('Oxygen Regular'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v9/2sDfZG1Wl4LcnbuKjk0m.woff2) format('woff2');
17 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
18 | }
19 | 


--------------------------------------------------------------------------------
/404/script.js:
--------------------------------------------------------------------------------
 1 | const stackContainer = document.querySelector('.stack-container');
 2 | const cardNodes = document.querySelectorAll('.card-container');
 3 | const consoleNodes = document.querySelectorAll('.writing');
 4 | const perspecNodes = document.querySelectorAll('.perspec');
 5 | const perspec = document.querySelector('.perspec');
 6 | const card = document.querySelector('.card');
 7 | 
 8 | let counter = stackContainer.children.length;
 9 | 
10 | //function to generate random number
11 | function randomIntFromInterval(min, max) {
12 |     return Math.floor(Math.random() * (max - min + 1) + min);
13 | }
14 | 
15 | //after tilt animation, fire the explode animation
16 | card.addEventListener('animationend', function () {
17 |     perspecNodes.forEach(function (elem, index) {
18 |         elem.classList.add('explode');
19 |     });
20 | });
21 | 
22 | //after explode animation do a bunch of stuff
23 | perspec.addEventListener('animationend', function (e) {
24 |     if (e.animationName === 'explode') {
25 |         cardNodes.forEach(function (elem, index) {
26 | 
27 |             //add hover animation class
28 |             elem.classList.add('pokeup');
29 | 
30 |             //add event listner to throw card on click
31 |             elem.addEventListener('click', function () {
32 |                 let updown = [800, -800]
33 |                 let randomY = updown[Math.floor(Math.random() * updown.length)];
34 |                 let randomX = Math.floor(Math.random() * 1000) - 1000;
35 |                 elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
36 |                 elem.style.transition = "transform 1s ease, opacity 2s";
37 |                 elem.style.opacity = "0";
38 |                 counter--;
39 |                 if (counter === 0) {
40 |                     stackContainer.style.width = "0";
41 |                     stackContainer.style.height = "0";
42 |                 }
43 |             });
44 |         });
45 |     }
46 | 
47 | });


--------------------------------------------------------------------------------
/404/sign_question.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PecceG2/HTML_Template_http_codes/b45474b6882c53f05bdf1db728093d676f672247/404/sign_question.png


--------------------------------------------------------------------------------
/404/style.css:
--------------------------------------------------------------------------------
  1 | body,
  2 | html {
  3 |     padding: 0;
  4 |     margin: 0;
  5 |     font-family: 'Quicksand', sans-serif;
  6 |     font-weight: 400;
  7 |     overflow: hidden;
  8 | }
  9 | p {
 10 |     font-family: 'Oxygen', sans-serif;
 11 | }
 12 | 
 13 | .code .centered{
 14 |     width: 50%;
 15 |     margin-top: 6%;
 16 |     margin-left: 24%;
 17 | }
 18 | 
 19 | .code .centered img{
 20 |     width:140px;
 21 |     filter: invert(66%);
 22 | }
 23 | .subtitle{
 24 |     font-size: 14px;
 25 |     color: #b3b3b3;
 26 | }
 27 | .writing {
 28 |     width: 320px;
 29 |     height: 200px;
 30 |     background-color: #3f3f3f;
 31 |     border: 1px solid #bbbbbb;
 32 |     border-radius: 6px 6px 4px 4px;
 33 |     position: relative;
 34 | }
 35 | 
 36 | .writing-error{
 37 |     width: 320px;
 38 |     height: 200px;
 39 |     border: 1px solid #bbbbbb;
 40 |     animation: glitchError 2.5s infinite;
 41 |     border-radius: 6px 6px 4px 4px;
 42 |     position: relative;
 43 | }
 44 | 
 45 | @keyframes glitchError {
 46 |     0% {
 47 |         transform: none;
 48 |         opacity: 1;
 49 |     }
 50 |     7% {
 51 |         transform: skew(-0.5deg, -0.9deg);
 52 |         opacity: 0.75;
 53 |     }
 54 |     10% {
 55 |         transform: none;
 56 |         opacity: 1;
 57 |     }
 58 |     27% {
 59 |         transform: none;
 60 |         opacity: 1;
 61 |     }
 62 |     30% {
 63 |         transform: skew(0.8deg, -0.1deg);
 64 |         opacity: 0.75;
 65 |     }
 66 |     35% {
 67 |         transform: none;
 68 |         opacity: 1;
 69 |     }
 70 |     52% {
 71 |         transform: none;
 72 |         opacity: 1;
 73 |     }
 74 |     55% {
 75 |         transform: skew(-1deg, 0.2deg);
 76 |         opacity: 0.75;
 77 |     }
 78 |     50% {
 79 |         transform: none;
 80 |         opacity: 1;
 81 |     }
 82 |     72% {
 83 |         transform: none;
 84 |         opacity: 1;
 85 |     }
 86 |     75% {
 87 |         transform: skew(0.4deg, 1deg);
 88 |         opacity: 0.75;
 89 |     }
 90 |     80% {
 91 |         transform: none;
 92 |         opacity: 1;
 93 |     }
 94 |     100% {
 95 |         transform: none;
 96 |         opacity: 1;
 97 |     }
 98 | }
 99 | 
100 | .writing .topbar{
101 |     position: absolute;
102 |     width: 100%;
103 |     height: 12px;
104 |     background-color: #f1f1f1;
105 |     border-top-left-radius: 4px;
106 |     border-top-right-radius: 4px;
107 | }
108 | 
109 | .writing .topbar div{
110 |     height: 6px;
111 |     width: 6px;
112 |     border-radius: 50%;
113 |     margin: 3px;
114 |     float: left;
115 | }
116 | 
117 | .writing .topbar div.green{
118 |     background-color: #60d060;
119 | }
120 | .writing .topbar div.red{
121 |     background-color: red;
122 | }
123 | .writing .topbar div.yellow{
124 |     background-color: #e6c015;
125 | }
126 | 
127 | .writing .code {
128 |     padding: 15px;
129 | }
130 | 
131 | .writing .code ul {
132 |     list-style: none;
133 |     margin: 0;
134 |     padding: 0;
135 | }
136 | 
137 | .writing .code ul li {
138 |     background-color: #9e9e9e;
139 |     width: 0;
140 |     height: 7px;
141 |     border-radius: 6px;
142 |     margin: 10px 0;
143 | }
144 | 
145 | .errorLine{
146 |     background-color: #c7151e !important;
147 |     width: 0;
148 |     height: 7px;
149 |     border-radius: 6px;
150 |     margin: 10px 0;
151 | }
152 | 
153 | .container {
154 |     display: -webkit-box;
155 |     display: -ms-flexbox;
156 |     display: flex;
157 |     -webkit-box-align: center;
158 |         -ms-flex-align: center;
159 |             align-items: center;
160 |     -webkit-box-pack: center;
161 |         -ms-flex-pack: center;
162 |             justify-content: center;
163 |     height: 100vh;
164 |     width: 100%;
165 |     -webkit-transition: -webkit-transform .5s;
166 |     transition: -webkit-transform .5s;
167 |     transition: transform .5s;
168 |     transition: transform .5s, -webkit-transform .5s;
169 | }
170 | 
171 | .stack-container {
172 |     position: relative;
173 |     width: 420px;
174 |     height: 210px;
175 |     -webkit-transition: width 1s, height 1s;
176 |     transition: width 1s, height 1s;
177 | }
178 | 
179 | .pokeup {
180 |     -webkit-transition: all .3s ease;
181 |     transition: all .3s ease;
182 | }
183 | 
184 | .pokeup:hover {
185 |     -webkit-transform: translateY(-10px);
186 |             transform: translateY(-10px);
187 |     -webkit-transition: .3s ease;
188 |     transition: .3s ease;
189 | }
190 | 
191 | 
192 | .error {
193 |     width: 400px;
194 |     padding: 40px;
195 |     text-align: center;
196 | }
197 | 
198 | .error h1 {
199 |     font-size: 125px;
200 |     padding: 0;
201 |     margin: 0;
202 |     font-weight: 700;
203 | }
204 | 
205 | .error h2 {
206 |     margin: -30px 0 0 0;
207 |     padding: 0px;
208 |     font-size: 47px;
209 |     letter-spacing: 12px;
210 | }
211 | 
212 | .perspec {
213 |     -webkit-perspective: 1000px;
214 |             perspective: 1000px;
215 | }
216 | 
217 | .writeLine{
218 |     -webkit-animation: writeLine .4s linear forwards;
219 |             animation: writeLine .4s linear forwards;
220 | }
221 | 
222 | .explode{
223 |     -webkit-animation: explode .5s ease-in-out forwards;
224 |             animation: explode .5s ease-in-out forwards;
225 | }
226 | 
227 | .card {
228 |     -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
229 |             animation: tiltcard .5s ease-in-out 1s forwards;
230 |     position: absolute;
231 | }
232 | 
233 | @-webkit-keyframes tiltcard {
234 |     0% {
235 |         -webkit-transform: rotateY(0deg);
236 |                 transform: rotateY(0deg);
237 |     }
238 | 
239 |     100% {
240 |         -webkit-transform: rotateY(-30deg);
241 |                 transform: rotateY(-30deg);
242 |     }
243 | }
244 | 
245 | @keyframes tiltcard {
246 |     0% {
247 |         -webkit-transform: rotateY(0deg);
248 |                 transform: rotateY(0deg);
249 |     }
250 | 
251 |     100% {
252 |         -webkit-transform: rotateY(-30deg);
253 |                 transform: rotateY(-30deg);
254 |     }
255 | }
256 | 
257 | @-webkit-keyframes explode {
258 |     0% {
259 |         -webkit-transform: translate(0, 0) scale(1);
260 |                 transform: translate(0, 0) scale(1);
261 |     }
262 | 
263 |     100% {
264 |         -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
265 |                 transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
266 |     }
267 | }
268 | 
269 | @keyframes explode {
270 |     0% {
271 |         -webkit-transform: translate(0, 0) scale(1);
272 |                 transform: translate(0, 0) scale(1);
273 |     }
274 | 
275 |     100% {
276 |         -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
277 |                 transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
278 |     }
279 | }
280 | 
281 | @-webkit-keyframes writeLine {
282 |     0% {
283 |         width:0;
284 |     }
285 | 
286 |     100% {
287 |         width: var(--linelength);
288 |     }
289 | }
290 | 
291 | @keyframes writeLine {
292 |     0% {
293 |         width:0;
294 |     }
295 | 
296 |     100% {
297 |         width: var(--linelength);
298 |     }
299 | }
300 | 
301 | @media screen and (max-width: 1000px) {
302 |     .container {
303 |       -webkit-transform: scale(.85);
304 |               transform: scale(.85);
305 |     }
306 |   }
307 | 
308 |   @media screen and (max-width: 850px) {
309 |     .container {
310 |       -webkit-transform: scale(.75);
311 |               transform: scale(.75);
312 |     }
313 |   }
314 | 
315 |   @media screen and (max-width: 775px) {
316 |     .container {
317 |       -ms-flex-wrap: wrap-reverse;
318 |           flex-wrap: wrap-reverse;
319 |       -webkit-box-align: inherit;
320 |           -ms-flex-align: inherit;
321 |               align-items: inherit;
322 |     }
323 |   }
324 | 
325 |   @media screen and (max-width: 370px) {
326 |     .container {
327 |         -webkit-transform: scale(.6);
328 |                 transform: scale(.6);
329 |       }
330 |   }


--------------------------------------------------------------------------------
/500/index.html:
--------------------------------------------------------------------------------
  1 | <meta charset="UTF-8">
  2 | <link rel="stylesheet" type="text/css" href="style.css">
  3 | <link rel="stylesheet" type="text/css" href="oxygen.fonts.css">
  4 | <div class="container">
  5 |         <div class="error">
  6 |             <h1>500</h1>
  7 |             <h2>error</h2>
  8 |             <p>Oh no, algo ha fallado. Intentalo de nuevo más tarde, si el problema continua, por favor, ponte en contacto con el administrador</p>
  9 |             <p class="subtitle">ERR_INTERNAL_SERVER_ERROR</p>
 10 |         </div>
 11 |         <div class="stack-container">
 12 |             <div class="card-container">
 13 |                 <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
 14 |                     <div class="card">
 15 |                         <div class="writing">
 16 |                             <div class="topbar">
 17 |                                 <div class="red"></div>
 18 |                                 <div class="yellow"></div>
 19 |                                 <div class="green"></div>
 20 |                             </div>
 21 |                             <div class="code">
 22 |                                 <ul>
 23 |                                 </ul>
 24 |                             </div>
 25 |                         </div>
 26 |                     </div>
 27 |                 </div>
 28 |             </div>
 29 |             <div class="card-container">
 30 |                 <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
 31 |                     <div class="card">
 32 |                         <div class="writing">
 33 |                             <div class="topbar">
 34 |                                 <div class="red"></div>
 35 |                                 <div class="yellow"></div>
 36 |                                 <div class="green"></div>
 37 |                             </div>
 38 |                             <div class="code">
 39 |                                 <ul>
 40 |                                 </ul>
 41 |                             </div>
 42 |                         </div>
 43 |                     </div>
 44 |                 </div>
 45 |             </div>
 46 |             <div class="card-container">
 47 |                 <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
 48 |                     <div class="card">
 49 |                         <div class="writing">
 50 |                             <div class="topbar">
 51 |                                 <div class="red"></div>
 52 |                                 <div class="yellow"></div>
 53 |                                 <div class="green"></div>
 54 |                             </div>
 55 |                             <div class="code">
 56 |                                 <ul>
 57 |                                 </ul>
 58 |                             </div>
 59 |                         </div>
 60 |                     </div>
 61 |                 </div>
 62 |             </div>
 63 |             <div class="card-container">
 64 |                 <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
 65 |                     <div class="card">
 66 |                         <div class="writing">
 67 |                             <div class="topbar">
 68 |                                 <div class="red"></div>
 69 |                                 <div class="yellow"></div>
 70 |                                 <div class="green"></div>
 71 |                             </div>
 72 |                             <div class="code">
 73 |                                 <ul>
 74 |                                 </ul>
 75 |                             </div>
 76 |                         </div>
 77 |                     </div>
 78 |                 </div>
 79 |             </div>
 80 |             <div class="card-container">
 81 |                 <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
 82 |                     <div class="card">
 83 |                         <div class="writing">
 84 |                             <div class="topbar">
 85 |                                 <div class="red"></div>
 86 |                                 <div class="yellow"></div>
 87 |                                 <div class="green"></div>
 88 |                             </div>
 89 |                             <div class="code">
 90 |                                 <ul>
 91 |                                 </ul>
 92 |                             </div>
 93 |                         </div>
 94 |                     </div>
 95 |                 </div>
 96 |             </div>
 97 |             <div class="card-container">
 98 |                 <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
 99 |                     <div class="card">
100 |                         <div class="writing">
101 |                             <div class="topbar">
102 |                                 <div class="red"></div>
103 |                                 <div class="yellow"></div>
104 |                                 <div class="green"></div>
105 |                             </div>
106 |                             <div class="code">
107 |                                 <ul>
108 |                                 </ul>
109 |                             </div>
110 |                         </div>
111 |                     </div>
112 |                 </div>
113 |             </div>
114 |         </div>
115 |     <footer>
116 |         <p class="copyright">©2020 Grupo Multimedios Argentina</p>
117 |     </footer>
118 |     </div>
119 |     <style>
120 |         footer {
121 |             position: fixed;
122 |             bottom:0;
123 |             height: 40px;
124 |             border-top-color:#33333342;
125 |             border-top-style:solid;
126 |             border-top-width:1px;
127 |             width: 100%;
128 |         }
129 | 
130 |         p.copyright {
131 |             position:absolute;
132 |             margin:0;
133 |             top: 9px;
134 |             width: 100%;
135 |             color: #000000a3;
136 |             font-size: 1em;
137 |             text-align: center;
138 |             bottom:0;
139 |         }
140 |     </style>
141 | 	<script type="text/javascript" src="script.js"></script>


--------------------------------------------------------------------------------
/500/oxygen.fonts.css:
--------------------------------------------------------------------------------
 1 | /* latin-ext */
 2 | @font-face {
 3 |   font-family: 'Oxygen';
 4 |   font-style: normal;
 5 |   font-weight: 400;
 6 |   font-display: swap;
 7 |   src: local('Oxygen Regular'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v9/2sDfZG1Wl4LcnbuKgE0mV0Q.woff2) format('woff2');
 8 |   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 9 | }
10 | /* latin */
11 | @font-face {
12 |   font-family: 'Oxygen';
13 |   font-style: normal;
14 |   font-weight: 400;
15 |   font-display: swap;
16 |   src: local('Oxygen Regular'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v9/2sDfZG1Wl4LcnbuKjk0m.woff2) format('woff2');
17 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
18 | }
19 | 


--------------------------------------------------------------------------------
/500/script.js:
--------------------------------------------------------------------------------
 1 | const stackContainer = document.querySelector('.stack-container');
 2 | const cardNodes = document.querySelectorAll('.card-container');
 3 | const consoleNodes = document.querySelectorAll('.writing');
 4 | const perspecNodes = document.querySelectorAll('.perspec');
 5 | const perspec = document.querySelector('.perspec');
 6 | const card = document.querySelector('.card');
 7 | 
 8 | let counter = stackContainer.children.length;
 9 | 
10 | //function to generate random number
11 | function randomIntFromInterval(min, max) {
12 |     return Math.floor(Math.random() * (max - min + 1) + min);
13 | }
14 | 
15 | //after tilt animation, fire the explode animation
16 | card.addEventListener('animationend', function () {
17 |     perspecNodes.forEach(function (elem, index) {
18 |         elem.classList.add('explode');
19 |     });
20 | });
21 | 
22 | //after explode animation do a bunch of stuff
23 | perspec.addEventListener('animationend', function (e) {
24 |     if (e.animationName === 'explode') {
25 |         cardNodes.forEach(function (elem, index) {
26 | 
27 |             //add hover animation class
28 |             elem.classList.add('pokeup');
29 | 
30 |             //add event listner to throw card on click
31 |             elem.addEventListener('click', function () {
32 |                 let updown = [800, -800]
33 |                 let randomY = updown[Math.floor(Math.random() * updown.length)];
34 |                 let randomX = Math.floor(Math.random() * 1000) - 1000;
35 |                 elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
36 |                 elem.style.transition = "transform 1s ease, opacity 2s";
37 |                 elem.style.opacity = "0";
38 |                 counter--;
39 |                 if (counter === 0) {
40 |                     stackContainer.style.width = "0";
41 |                     stackContainer.style.height = "0";
42 |                 }
43 |             });
44 | 
45 |             //generate random number of lines of code between 4 and 10 and add to each card
46 |             let numLines = randomIntFromInterval(5, 10);
47 | 
48 |             //loop through the lines and add them to the DOM
49 |             for (let index = 0; index < numLines; index++) {
50 |                 let lineLength = randomIntFromInterval(25, 97);
51 |                 var node = document.createElement("li");
52 |                 node.classList.add('node-' + index);
53 | 
54 |                 elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');
55 | 
56 |                 //draw lines of code 1 by 1
57 |                 if (index == 0) {
58 |                     elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
59 |                 } else {
60 |                     elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
61 |                         if(index == numLines-1){
62 |                             node.classList.add('errorLine');
63 |                             elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
64 |                             setTimeout(function() {
65 |                                 consoleNodes.forEach(function (elem, index) {
66 |                                     elem.classList.add('writing-error');
67 |                                 });
68 |                             }, 2000);
69 |                         }else{
70 |                             elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
71 |                         }
72 |                     });
73 |                 }
74 |             }
75 |         });
76 |     }
77 | 
78 | });


--------------------------------------------------------------------------------
/500/style.css:
--------------------------------------------------------------------------------
  1 | body,
  2 | html {
  3 |     padding: 0;
  4 |     margin: 0;
  5 |     font-family: 'Quicksand', sans-serif;
  6 |     font-weight: 400;
  7 |     overflow: hidden;
  8 | }
  9 | p {
 10 |     font-family: 'Oxygen', sans-serif;
 11 | }
 12 | .subtitle{
 13 |     font-size: 14px;
 14 |     color: #b3b3b3;
 15 | }
 16 | .writing {
 17 |     width: 320px;
 18 |     height: 200px;
 19 |     background-color: #3f3f3f;
 20 |     border: 1px solid #bbbbbb;
 21 |     border-radius: 6px 6px 4px 4px;
 22 |     position: relative;
 23 | }
 24 | 
 25 | .writing-error{
 26 |     width: 320px;
 27 |     height: 200px;
 28 |     border: 1px solid #bbbbbb;
 29 |     animation: glitchError 2.5s infinite;
 30 |     border-radius: 6px 6px 4px 4px;
 31 |     position: relative;
 32 | }
 33 | 
 34 | @keyframes glitchError {
 35 |     0% {
 36 |         transform: none;
 37 |         opacity: 1;
 38 |     }
 39 |     7% {
 40 |         transform: skew(-0.5deg, -0.9deg);
 41 |         opacity: 0.75;
 42 |     }
 43 |     10% {
 44 |         transform: none;
 45 |         opacity: 1;
 46 |     }
 47 |     27% {
 48 |         transform: none;
 49 |         opacity: 1;
 50 |     }
 51 |     30% {
 52 |         transform: skew(0.8deg, -0.1deg);
 53 |         opacity: 0.75;
 54 |     }
 55 |     35% {
 56 |         transform: none;
 57 |         opacity: 1;
 58 |     }
 59 |     52% {
 60 |         transform: none;
 61 |         opacity: 1;
 62 |     }
 63 |     55% {
 64 |         transform: skew(-1deg, 0.2deg);
 65 |         opacity: 0.75;
 66 |     }
 67 |     50% {
 68 |         transform: none;
 69 |         opacity: 1;
 70 |     }
 71 |     72% {
 72 |         transform: none;
 73 |         opacity: 1;
 74 |     }
 75 |     75% {
 76 |         transform: skew(0.4deg, 1deg);
 77 |         opacity: 0.75;
 78 |     }
 79 |     80% {
 80 |         transform: none;
 81 |         opacity: 1;
 82 |     }
 83 |     100% {
 84 |         transform: none;
 85 |         opacity: 1;
 86 |     }
 87 | }
 88 | 
 89 | .writing .topbar{
 90 |     position: absolute;
 91 |     width: 100%;
 92 |     height: 12px;
 93 |     background-color: #f1f1f1;
 94 |     border-top-left-radius: 4px;
 95 |     border-top-right-radius: 4px;
 96 | }
 97 | 
 98 | .writing .topbar div{
 99 |     height: 6px;
100 |     width: 6px;
101 |     border-radius: 50%;
102 |     margin: 3px;
103 |     float: left;
104 | }
105 | 
106 | .writing .topbar div.green{
107 |     background-color: #60d060;
108 | }
109 | .writing .topbar div.red{
110 |     background-color: red;
111 | }
112 | .writing .topbar div.yellow{
113 |     background-color: #e6c015;
114 | }
115 | 
116 | .writing .code {
117 |     padding: 15px;
118 | }
119 | 
120 | .writing .code ul {
121 |     list-style: none;
122 |     margin: 0;
123 |     padding: 0;
124 | }
125 | 
126 | .writing .code ul li {
127 |     background-color: #9e9e9e;
128 |     width: 0;
129 |     height: 7px;
130 |     border-radius: 6px;
131 |     margin: 10px 0;
132 | }
133 | 
134 | .errorLine{
135 |     background-color: #c7151e !important;
136 |     width: 0;
137 |     height: 7px;
138 |     border-radius: 6px;
139 |     margin: 10px 0;
140 | }
141 | 
142 | .container {
143 |     display: -webkit-box;
144 |     display: -ms-flexbox;
145 |     display: flex;
146 |     -webkit-box-align: center;
147 |         -ms-flex-align: center;
148 |             align-items: center;
149 |     -webkit-box-pack: center;
150 |         -ms-flex-pack: center;
151 |             justify-content: center;
152 |     height: 100vh;
153 |     width: 100%;
154 |     -webkit-transition: -webkit-transform .5s;
155 |     transition: -webkit-transform .5s;
156 |     transition: transform .5s;
157 |     transition: transform .5s, -webkit-transform .5s;
158 | }
159 | 
160 | .stack-container {
161 |     position: relative;
162 |     width: 420px;
163 |     height: 210px;
164 |     -webkit-transition: width 1s, height 1s;
165 |     transition: width 1s, height 1s;
166 | }
167 | 
168 | .pokeup {
169 |     -webkit-transition: all .3s ease;
170 |     transition: all .3s ease;
171 | }
172 | 
173 | .pokeup:hover {
174 |     -webkit-transform: translateY(-10px);
175 |             transform: translateY(-10px);
176 |     -webkit-transition: .3s ease;
177 |     transition: .3s ease;
178 | }
179 | 
180 | 
181 | .error {
182 |     width: 400px;
183 |     padding: 40px;
184 |     text-align: center;
185 | }
186 | 
187 | .error h1 {
188 |     font-size: 125px;
189 |     padding: 0;
190 |     margin: 0;
191 |     font-weight: 700;
192 | }
193 | 
194 | .error h2 {
195 |     margin: -30px 0 0 0;
196 |     padding: 0px;
197 |     font-size: 47px;
198 |     letter-spacing: 12px;
199 | }
200 | 
201 | .perspec {
202 |     -webkit-perspective: 1000px;
203 |             perspective: 1000px;
204 | }
205 | 
206 | .writeLine{
207 |     -webkit-animation: writeLine .4s linear forwards;
208 |             animation: writeLine .4s linear forwards;
209 | }
210 | 
211 | .explode{
212 |     -webkit-animation: explode .5s ease-in-out forwards;
213 |             animation: explode .5s ease-in-out forwards;
214 | }
215 | 
216 | .card {
217 |     -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
218 |             animation: tiltcard .5s ease-in-out 1s forwards;
219 |     position: absolute;
220 | }
221 | 
222 | @-webkit-keyframes tiltcard {
223 |     0% {
224 |         -webkit-transform: rotateY(0deg);
225 |                 transform: rotateY(0deg);
226 |     }
227 | 
228 |     100% {
229 |         -webkit-transform: rotateY(-30deg);
230 |                 transform: rotateY(-30deg);
231 |     }
232 | }
233 | 
234 | @keyframes tiltcard {
235 |     0% {
236 |         -webkit-transform: rotateY(0deg);
237 |                 transform: rotateY(0deg);
238 |     }
239 | 
240 |     100% {
241 |         -webkit-transform: rotateY(-30deg);
242 |                 transform: rotateY(-30deg);
243 |     }
244 | }
245 | 
246 | @-webkit-keyframes explode {
247 |     0% {
248 |         -webkit-transform: translate(0, 0) scale(1);
249 |                 transform: translate(0, 0) scale(1);
250 |     }
251 | 
252 |     100% {
253 |         -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
254 |                 transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
255 |     }
256 | }
257 | 
258 | @keyframes explode {
259 |     0% {
260 |         -webkit-transform: translate(0, 0) scale(1);
261 |                 transform: translate(0, 0) scale(1);
262 |     }
263 | 
264 |     100% {
265 |         -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
266 |                 transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
267 |     }
268 | }
269 | 
270 | @-webkit-keyframes writeLine {
271 |     0% {
272 |         width:0;
273 |     }
274 | 
275 |     100% {
276 |         width: var(--linelength);
277 |     }
278 | }
279 | 
280 | @keyframes writeLine {
281 |     0% {
282 |         width:0;
283 |     }
284 | 
285 |     100% {
286 |         width: var(--linelength);
287 |     }
288 | }
289 | 
290 | @media screen and (max-width: 1000px) {
291 |     .container {
292 |       -webkit-transform: scale(.85);
293 |               transform: scale(.85);
294 |     }
295 |   }
296 | 
297 |   @media screen and (max-width: 850px) {
298 |     .container {
299 |       -webkit-transform: scale(.75);
300 |               transform: scale(.75);
301 |     }
302 |   }
303 | 
304 |   @media screen and (max-width: 775px) {
305 |     .container {
306 |       -ms-flex-wrap: wrap-reverse;
307 |           flex-wrap: wrap-reverse;
308 |       -webkit-box-align: inherit;
309 |           -ms-flex-align: inherit;
310 |               align-items: inherit;
311 |     }
312 |   }
313 | 
314 |   @media screen and (max-width: 370px) {
315 |     .container {
316 |         -webkit-transform: scale(.6);
317 |                 transform: scale(.6);
318 |       }
319 |   }


--------------------------------------------------------------------------------
/503/index.html:
--------------------------------------------------------------------------------
  1 | <meta charset="UTF-8">
  2 | <link rel="stylesheet" type="text/css" href="style.css">
  3 | <link rel="stylesheet" type="text/css" href="oxygen.fonts.css">
  4 | <div class="container">
  5 |         <div class="error">
  6 |             <h1>503</h1>
  7 |             <h2>error</h2>
  8 |             <p>Oh no, este sitio está temporalmente no disponible. Intenta acceder nuevamente más tarde</p>
  9 |             <p class="subtitle">ERR_SERVICE_UNAVAILABLE</p>
 10 |         </div>
 11 |         <div class="stack-container">
 12 |             <div class="card-container">
 13 |                 <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
 14 |                     <div class="card">
 15 |                         <div class="writing">
 16 |                             <div class="topbar">
 17 |                                 <div class="red"></div>
 18 |                                 <div class="yellow"></div>
 19 |                                 <div class="green"></div>
 20 |                             </div>
 21 |                             <div class="code">
 22 |                                 <ul>
 23 |                                 </ul>
 24 |                             </div>
 25 |                         </div>
 26 |                     </div>
 27 |                 </div>
 28 |             </div>
 29 |             <div class="card-container">
 30 |                 <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
 31 |                     <div class="card">
 32 |                         <div class="writing">
 33 |                             <div class="topbar">
 34 |                                 <div class="red"></div>
 35 |                                 <div class="yellow"></div>
 36 |                                 <div class="green"></div>
 37 |                             </div>
 38 |                             <div class="code">
 39 |                                 <ul>
 40 |                                 </ul>
 41 |                             </div>
 42 |                         </div>
 43 |                     </div>
 44 |                 </div>
 45 |             </div>
 46 |             <div class="card-container">
 47 |                 <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
 48 |                     <div class="card">
 49 |                         <div class="writing">
 50 |                             <div class="topbar">
 51 |                                 <div class="red"></div>
 52 |                                 <div class="yellow"></div>
 53 |                                 <div class="green"></div>
 54 |                             </div>
 55 |                             <div class="code">
 56 |                                 <ul>
 57 |                                 </ul>
 58 |                             </div>
 59 |                         </div>
 60 |                     </div>
 61 |                 </div>
 62 |             </div>
 63 |             <div class="card-container">
 64 |                 <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
 65 |                     <div class="card">
 66 |                         <div class="writing">
 67 |                             <div class="topbar">
 68 |                                 <div class="red"></div>
 69 |                                 <div class="yellow"></div>
 70 |                                 <div class="green"></div>
 71 |                             </div>
 72 |                             <div class="code">
 73 |                                 <ul>
 74 |                                 </ul>
 75 |                             </div>
 76 |                         </div>
 77 |                     </div>
 78 |                 </div>
 79 |             </div>
 80 |             <div class="card-container">
 81 |                 <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
 82 |                     <div class="card">
 83 |                         <div class="writing">
 84 |                             <div class="topbar">
 85 |                                 <div class="red"></div>
 86 |                                 <div class="yellow"></div>
 87 |                                 <div class="green"></div>
 88 |                             </div>
 89 |                             <div class="code">
 90 |                                 <ul>
 91 |                                 </ul>
 92 |                             </div>
 93 |                         </div>
 94 |                     </div>
 95 |                 </div>
 96 |             </div>
 97 |             <div class="card-container">
 98 |                 <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
 99 |                     <div class="card">
100 |                         <div class="writing">
101 |                             <div class="topbar">
102 |                                 <div class="red"></div>
103 |                                 <div class="yellow"></div>
104 |                                 <div class="green"></div>
105 |                             </div>
106 |                             <div class="code">
107 |                                 <ul>
108 |                                 </ul>
109 |                             </div>
110 |                         </div>
111 |                     </div>
112 |                 </div>
113 |             </div>
114 |         </div>
115 |     <footer>
116 |         <p class="copyright">©2020 Grupo Multimedios Argentina</p>
117 |     </footer>
118 |     </div>
119 |     <style>
120 |         footer {
121 |             position: fixed;
122 |             bottom:0;
123 |             height: 40px;
124 |             border-top-color:#33333342;
125 |             border-top-style:solid;
126 |             border-top-width:1px;
127 |             width: 100%;
128 |         }
129 | 
130 |         p.copyright {
131 |             position:absolute;
132 |             margin:0;
133 |             top: 9px;
134 |             width: 100%;
135 |             color: #000000a3;
136 |             font-size: 1em;
137 |             text-align: center;
138 |             bottom:0;
139 |         }
140 |     </style>
141 | 	<script type="text/javascript" src="script.js"></script>


--------------------------------------------------------------------------------
/503/oxygen.fonts.css:
--------------------------------------------------------------------------------
 1 | /* latin-ext */
 2 | @font-face {
 3 |   font-family: 'Oxygen';
 4 |   font-style: normal;
 5 |   font-weight: 400;
 6 |   font-display: swap;
 7 |   src: local('Oxygen Regular'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v9/2sDfZG1Wl4LcnbuKgE0mV0Q.woff2) format('woff2');
 8 |   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 9 | }
10 | /* latin */
11 | @font-face {
12 |   font-family: 'Oxygen';
13 |   font-style: normal;
14 |   font-weight: 400;
15 |   font-display: swap;
16 |   src: local('Oxygen Regular'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v9/2sDfZG1Wl4LcnbuKjk0m.woff2) format('woff2');
17 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
18 | }
19 | 


--------------------------------------------------------------------------------
/503/script.js:
--------------------------------------------------------------------------------
 1 | const stackContainer = document.querySelector('.stack-container');
 2 | const cardNodes = document.querySelectorAll('.card-container');
 3 | const consoleNodes = document.querySelectorAll('.writing');
 4 | const perspecNodes = document.querySelectorAll('.perspec');
 5 | const perspec = document.querySelector('.perspec');
 6 | const card = document.querySelector('.card');
 7 | 
 8 | let counter = stackContainer.children.length;
 9 | 
10 | //function to generate random number
11 | function randomIntFromInterval(min, max) {
12 |     return Math.floor(Math.random() * (max - min + 1) + min);
13 | }
14 | 
15 | //after tilt animation, fire the explode animation
16 | card.addEventListener('animationend', function () {
17 |     perspecNodes.forEach(function (elem, index) {
18 |         elem.classList.add('explode');
19 |     });
20 | });
21 | 
22 | //after explode animation do a bunch of stuff
23 | perspec.addEventListener('animationend', function (e) {
24 |     if (e.animationName === 'explode') {
25 |         cardNodes.forEach(function (elem, index) {
26 | 
27 |             //add hover animation class
28 |             elem.classList.add('pokeup');
29 | 
30 |             //add event listner to throw card on click
31 |             elem.addEventListener('click', function () {
32 |                 let updown = [800, -800]
33 |                 let randomY = updown[Math.floor(Math.random() * updown.length)];
34 |                 let randomX = Math.floor(Math.random() * 1000) - 1000;
35 |                 elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
36 |                 elem.style.transition = "transform 1s ease, opacity 2s";
37 |                 elem.style.opacity = "0";
38 |                 counter--;
39 |                 if (counter === 0) {
40 |                     stackContainer.style.width = "0";
41 |                     stackContainer.style.height = "0";
42 |                 }
43 |             });
44 | 
45 |             //generate random number of lines of code between 4 and 10 and add to each card
46 |             let numLines = randomIntFromInterval(5, 10);
47 | 
48 |             //loop through the lines and add them to the DOM
49 |             for (let index = 0; index < numLines; index++) {
50 |                 let lineLength = randomIntFromInterval(25, 97);
51 |                 var node = document.createElement("li");
52 |                 node.classList.add('node-' + index);
53 | 
54 |                 elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');
55 | 
56 |                 //draw lines of code 1 by 1
57 |                 if (index == 0) {
58 |                     elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
59 |                 } else {
60 |                     elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
61 |                         if(index == numLines-1){
62 |                             node.classList.add('errorLine');
63 |                             elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
64 |                             setTimeout(function() {
65 |                                 consoleNodes.forEach(function (elem, index) {
66 |                                     elem.classList.add('writing-error');
67 |                                 });
68 |                             }, 2000);
69 |                         }else{
70 |                             elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
71 |                         }
72 |                     });
73 |                 }
74 |             }
75 |         });
76 |     }
77 | 
78 | });


--------------------------------------------------------------------------------
/503/style.css:
--------------------------------------------------------------------------------
  1 | body,
  2 | html {
  3 |     padding: 0;
  4 |     margin: 0;
  5 |     font-family: 'Quicksand', sans-serif;
  6 |     font-weight: 400;
  7 |     overflow: hidden;
  8 | }
  9 | p {
 10 |     font-family: 'Oxygen', sans-serif;
 11 | }
 12 | .subtitle{
 13 |     font-size: 14px;
 14 |     color: #b3b3b3;
 15 | }
 16 | .writing {
 17 |     width: 320px;
 18 |     height: 200px;
 19 |     background-color: #3f3f3f;
 20 |     border: 1px solid #bbbbbb;
 21 |     border-radius: 6px 6px 4px 4px;
 22 |     position: relative;
 23 | }
 24 | 
 25 | .writing-error{
 26 |     width: 320px;
 27 |     height: 200px;
 28 |     border: 1px solid #bbbbbb;
 29 |     animation: glitchError 2.5s infinite;
 30 |     border-radius: 6px 6px 4px 4px;
 31 |     position: relative;
 32 | }
 33 | 
 34 | @keyframes glitchError {
 35 |     0% {
 36 |         transform: none;
 37 |         opacity: 1;
 38 |     }
 39 |     7% {
 40 |         transform: skew(-0.5deg, -0.9deg);
 41 |         opacity: 0.75;
 42 |     }
 43 |     10% {
 44 |         transform: none;
 45 |         opacity: 1;
 46 |     }
 47 |     27% {
 48 |         transform: none;
 49 |         opacity: 1;
 50 |     }
 51 |     30% {
 52 |         transform: skew(0.8deg, -0.1deg);
 53 |         opacity: 0.75;
 54 |     }
 55 |     35% {
 56 |         transform: none;
 57 |         opacity: 1;
 58 |     }
 59 |     52% {
 60 |         transform: none;
 61 |         opacity: 1;
 62 |     }
 63 |     55% {
 64 |         transform: skew(-1deg, 0.2deg);
 65 |         opacity: 0.75;
 66 |     }
 67 |     50% {
 68 |         transform: none;
 69 |         opacity: 1;
 70 |     }
 71 |     72% {
 72 |         transform: none;
 73 |         opacity: 1;
 74 |     }
 75 |     75% {
 76 |         transform: skew(0.4deg, 1deg);
 77 |         opacity: 0.75;
 78 |     }
 79 |     80% {
 80 |         transform: none;
 81 |         opacity: 1;
 82 |     }
 83 |     100% {
 84 |         transform: none;
 85 |         opacity: 1;
 86 |     }
 87 | }
 88 | 
 89 | .writing .topbar{
 90 |     position: absolute;
 91 |     width: 100%;
 92 |     height: 12px;
 93 |     background-color: #f1f1f1;
 94 |     border-top-left-radius: 4px;
 95 |     border-top-right-radius: 4px;
 96 | }
 97 | 
 98 | .writing .topbar div{
 99 |     height: 6px;
100 |     width: 6px;
101 |     border-radius: 50%;
102 |     margin: 3px;
103 |     float: left;
104 | }
105 | 
106 | .writing .topbar div.green{
107 |     background-color: #60d060;
108 | }
109 | .writing .topbar div.red{
110 |     background-color: red;
111 | }
112 | .writing .topbar div.yellow{
113 |     background-color: #e6c015;
114 | }
115 | 
116 | .writing .code {
117 |     padding: 15px;
118 | }
119 | 
120 | .writing .code ul {
121 |     list-style: none;
122 |     margin: 0;
123 |     padding: 0;
124 | }
125 | 
126 | .writing .code ul li {
127 |     background-color: #9e9e9e;
128 |     width: 0;
129 |     height: 7px;
130 |     border-radius: 6px;
131 |     margin: 10px 0;
132 | }
133 | 
134 | .errorLine{
135 |     background-color: #c7151e !important;
136 |     width: 0;
137 |     height: 7px;
138 |     border-radius: 6px;
139 |     margin: 10px 0;
140 | }
141 | 
142 | .container {
143 |     display: -webkit-box;
144 |     display: -ms-flexbox;
145 |     display: flex;
146 |     -webkit-box-align: center;
147 |         -ms-flex-align: center;
148 |             align-items: center;
149 |     -webkit-box-pack: center;
150 |         -ms-flex-pack: center;
151 |             justify-content: center;
152 |     height: 100vh;
153 |     width: 100%;
154 |     -webkit-transition: -webkit-transform .5s;
155 |     transition: -webkit-transform .5s;
156 |     transition: transform .5s;
157 |     transition: transform .5s, -webkit-transform .5s;
158 | }
159 | 
160 | .stack-container {
161 |     position: relative;
162 |     width: 420px;
163 |     height: 210px;
164 |     -webkit-transition: width 1s, height 1s;
165 |     transition: width 1s, height 1s;
166 | }
167 | 
168 | .pokeup {
169 |     -webkit-transition: all .3s ease;
170 |     transition: all .3s ease;
171 | }
172 | 
173 | .pokeup:hover {
174 |     -webkit-transform: translateY(-10px);
175 |             transform: translateY(-10px);
176 |     -webkit-transition: .3s ease;
177 |     transition: .3s ease;
178 | }
179 | 
180 | 
181 | .error {
182 |     width: 400px;
183 |     padding: 40px;
184 |     text-align: center;
185 | }
186 | 
187 | .error h1 {
188 |     font-size: 125px;
189 |     padding: 0;
190 |     margin: 0;
191 |     font-weight: 700;
192 | }
193 | 
194 | .error h2 {
195 |     margin: -30px 0 0 0;
196 |     padding: 0px;
197 |     font-size: 47px;
198 |     letter-spacing: 12px;
199 | }
200 | 
201 | .perspec {
202 |     -webkit-perspective: 1000px;
203 |             perspective: 1000px;
204 | }
205 | 
206 | .writeLine{
207 |     -webkit-animation: writeLine .4s linear forwards;
208 |             animation: writeLine .4s linear forwards;
209 | }
210 | 
211 | .explode{
212 |     -webkit-animation: explode .5s ease-in-out forwards;
213 |             animation: explode .5s ease-in-out forwards;
214 | }
215 | 
216 | .card {
217 |     -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
218 |             animation: tiltcard .5s ease-in-out 1s forwards;
219 |     position: absolute;
220 | }
221 | 
222 | @-webkit-keyframes tiltcard {
223 |     0% {
224 |         -webkit-transform: rotateY(0deg);
225 |                 transform: rotateY(0deg);
226 |     }
227 | 
228 |     100% {
229 |         -webkit-transform: rotateY(-30deg);
230 |                 transform: rotateY(-30deg);
231 |     }
232 | }
233 | 
234 | @keyframes tiltcard {
235 |     0% {
236 |         -webkit-transform: rotateY(0deg);
237 |                 transform: rotateY(0deg);
238 |     }
239 | 
240 |     100% {
241 |         -webkit-transform: rotateY(-30deg);
242 |                 transform: rotateY(-30deg);
243 |     }
244 | }
245 | 
246 | @-webkit-keyframes explode {
247 |     0% {
248 |         -webkit-transform: translate(0, 0) scale(1);
249 |                 transform: translate(0, 0) scale(1);
250 |     }
251 | 
252 |     100% {
253 |         -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
254 |                 transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
255 |     }
256 | }
257 | 
258 | @keyframes explode {
259 |     0% {
260 |         -webkit-transform: translate(0, 0) scale(1);
261 |                 transform: translate(0, 0) scale(1);
262 |     }
263 | 
264 |     100% {
265 |         -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
266 |                 transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
267 |     }
268 | }
269 | 
270 | @-webkit-keyframes writeLine {
271 |     0% {
272 |         width:0;
273 |     }
274 | 
275 |     100% {
276 |         width: var(--linelength);
277 |     }
278 | }
279 | 
280 | @keyframes writeLine {
281 |     0% {
282 |         width:0;
283 |     }
284 | 
285 |     100% {
286 |         width: var(--linelength);
287 |     }
288 | }
289 | 
290 | @media screen and (max-width: 1000px) {
291 |     .container {
292 |       -webkit-transform: scale(.85);
293 |               transform: scale(.85);
294 |     }
295 |   }
296 | 
297 |   @media screen and (max-width: 850px) {
298 |     .container {
299 |       -webkit-transform: scale(.75);
300 |               transform: scale(.75);
301 |     }
302 |   }
303 | 
304 |   @media screen and (max-width: 775px) {
305 |     .container {
306 |       -ms-flex-wrap: wrap-reverse;
307 |           flex-wrap: wrap-reverse;
308 |       -webkit-box-align: inherit;
309 |           -ms-flex-align: inherit;
310 |               align-items: inherit;
311 |     }
312 |   }
313 | 
314 |   @media screen and (max-width: 370px) {
315 |     .container {
316 |         -webkit-transform: scale(.6);
317 |                 transform: scale(.6);
318 |       }
319 |   }


--------------------------------------------------------------------------------
/504/error_ico.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PecceG2/HTML_Template_http_codes/b45474b6882c53f05bdf1db728093d676f672247/504/error_ico.png


--------------------------------------------------------------------------------
/504/index.html:
--------------------------------------------------------------------------------
  1 | <meta charset="UTF-8">
  2 | <link rel="stylesheet" type="text/css" href="style.css">
  3 | <link rel="stylesheet" type="text/css" href="oxygen.fonts.css">
  4 | <div class="container">
  5 |     <div class="error">
  6 |         <h1>504</h1>
  7 |         <h2>error</h2>
  8 |         <p>Oh no, uno de nuestros servidores no ha respondido a tiempo. Por favor, intentalo de nuevo más tarde</p>
  9 |         <p class="subtitle">ERR_GATEWAY_TIMEOUT</p>
 10 |     </div>
 11 |     <div class="stack-container">
 12 |         <div id="server-network-connector">
 13 |             <img id="errorTag" src="error_ico.png">
 14 |         </div>
 15 |         <div class="card-container">
 16 |             <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
 17 |                 <div class="card">
 18 |                     <div class="writing">
 19 |                         <div class="topbar">
 20 |                             <div class="red"></div>
 21 |                             <div class="yellow"></div>
 22 |                             <div class="green"></div>
 23 |                         </div>
 24 |                         <div class="code">
 25 |                             <ul>
 26 |                             </ul>
 27 |                         </div>
 28 |                     </div>
 29 |                 </div>
 30 |             </div>
 31 |         </div>
 32 |         <div class="card-container">
 33 |             <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
 34 |                 <div class="card">
 35 |                     <div class="writing">
 36 |                         <div class="topbar">
 37 |                             <div class="red"></div>
 38 |                             <div class="yellow"></div>
 39 |                             <div class="green"></div>
 40 |                         </div>
 41 |                         <div class="code">
 42 |                             <ul>
 43 |                             </ul>
 44 |                         </div>
 45 |                     </div>
 46 |                 </div>
 47 |             </div>
 48 |         </div>
 49 | 
 50 |     </div>
 51 | 
 52 |     <div class="stack-container">
 53 |         <div class="card-container">
 54 |             <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
 55 |                 <div class="card">
 56 |                     <div class="writing">
 57 |                         <div class="topbar">
 58 |                             <div class="red"></div>
 59 |                             <div class="yellow"></div>
 60 |                             <div class="green"></div>
 61 |                         </div>
 62 |                         <div class="code">
 63 |                             <ul>
 64 |                             </ul>
 65 |                         </div>
 66 |                     </div>
 67 |                 </div>
 68 |             </div>
 69 |         </div>
 70 |         <div class="card-container">
 71 |             <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
 72 |                 <div class="card">
 73 |                     <div class="writing">
 74 |                         <div class="topbar">
 75 |                             <div class="red"></div>
 76 |                             <div class="yellow"></div>
 77 |                             <div class="green"></div>
 78 |                         </div>
 79 |                         <div class="code">
 80 |                             <ul>
 81 |                             </ul>
 82 |                         </div>
 83 |                     </div>
 84 |                 </div>
 85 |             </div>
 86 |         </div>
 87 |     </div>
 88 | 
 89 | 
 90 | 
 91 |     <footer>
 92 |         <p class="copyright">©2020 Grupo Multimedios Argentina</p>
 93 |     </footer>
 94 |     </div>
 95 |     <style>
 96 |         footer {
 97 |             position: fixed;
 98 |             bottom:0;
 99 |             height: 40px;
100 |             border-top-color:#33333342;
101 |             border-top-style:solid;
102 |             border-top-width:1px;
103 |             width: 100%;
104 |         }
105 | 
106 |         p.copyright {
107 |             position:absolute;
108 |             margin:0;
109 |             top: 9px;
110 |             width: 100%;
111 |             color: #000000a3;
112 |             font-size: 1em;
113 |             text-align: center;
114 |             bottom:0;
115 |         }
116 |     </style>
117 | 	<script type="text/javascript" src="script.js"></script>


--------------------------------------------------------------------------------
/504/oxygen.fonts.css:
--------------------------------------------------------------------------------
 1 | /* latin-ext */
 2 | @font-face {
 3 |   font-family: 'Oxygen';
 4 |   font-style: normal;
 5 |   font-weight: 400;
 6 |   font-display: swap;
 7 |   src: local('Oxygen Regular'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v9/2sDfZG1Wl4LcnbuKgE0mV0Q.woff2) format('woff2');
 8 |   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 9 | }
10 | /* latin */
11 | @font-face {
12 |   font-family: 'Oxygen';
13 |   font-style: normal;
14 |   font-weight: 400;
15 |   font-display: swap;
16 |   src: local('Oxygen Regular'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v9/2sDfZG1Wl4LcnbuKjk0m.woff2) format('woff2');
17 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
18 | }
19 | 


--------------------------------------------------------------------------------
/504/script.js:
--------------------------------------------------------------------------------
 1 | const stackContainer = document.querySelector('.stack-container');
 2 | const cardNodes = document.querySelectorAll('.card-container');
 3 | const consoleNodes = document.querySelectorAll('.writing');
 4 | const perspecNodes = document.querySelectorAll('.perspec');
 5 | const perspec = document.querySelector('.perspec');
 6 | const card = document.querySelector('.card');
 7 | 
 8 | let counter = stackContainer.children.length;
 9 | 
10 | //function to generate random number
11 | function randomIntFromInterval(min, max) {
12 |     return Math.floor(Math.random() * (max - min + 1) + min);
13 | }
14 | 
15 | //after tilt animation, fire the explode animation
16 | card.addEventListener('animationend', function () {
17 |     perspecNodes.forEach(function (elem, index) {
18 |         elem.classList.add('explode');
19 |     });
20 | });
21 | 
22 | //after explode animation do a bunch of stuff
23 | perspec.addEventListener('animationend', function (e) {
24 |     if (e.animationName === 'explode') {
25 |         cardNodes.forEach(function (elem, index) {
26 | 
27 |             //add hover animation class
28 |             elem.classList.add('pokeup');
29 | 
30 |             //generate random number of lines of code between 4 and 10 and add to each card
31 |             let numLines = randomIntFromInterval(5, 10);
32 |             document.getElementById("server-network-connector").style.width = '70%';
33 |             //loop through the lines and add them to the DOM
34 |             for (let index = 0; index < numLines; index++) {
35 |                 let lineLength = randomIntFromInterval(25, 97);
36 |                 var node = document.createElement("li");
37 |                 node.classList.add('node-' + index);
38 | 
39 |                 elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');
40 | 
41 |                 //draw lines of code 1 by 1
42 |                 if (index == 0) {
43 |                     elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
44 |                 } else {
45 |                     elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
46 |                         if(index == numLines-1){
47 |                             node.classList.add('errorLine');
48 |                             elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
49 |                             setTimeout(function() {
50 |                                 document.getElementById('errorTag').style.display = 'inline';
51 |                                 document.getElementById('errorTag').style.width = '50';
52 |                             }, 2000);
53 |                         }else{
54 |                             elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
55 |                         }
56 |                     });
57 |                 }
58 |             }
59 |         });
60 |     }
61 | 
62 | });


--------------------------------------------------------------------------------
/504/style.css:
--------------------------------------------------------------------------------
  1 | body,
  2 | html {
  3 |     padding: 0;
  4 |     margin: 0;
  5 |     font-family: 'Quicksand', sans-serif;
  6 |     font-weight: 400;
  7 |     overflow: hidden;
  8 | }
  9 | p {
 10 |     font-family: 'Oxygen', sans-serif;
 11 | }
 12 | .subtitle{
 13 |     font-size: 14px;
 14 |     color: #b3b3b3;
 15 | }
 16 | #server-network-connector{
 17 |     background-color: #9e9e9e;
 18 |     transition: width 3s ease 0s;
 19 |     position: relative;
 20 |     width: 0;
 21 |     height: 25px;
 22 |     top: 50%;
 23 |     left: 70%;
 24 | }
 25 | #errorTag{
 26 |     display:none;
 27 |     transition: width .6s;
 28 |     margin-top: -11px;
 29 |     width: 26%;
 30 |     padding-left: 27%;
 31 | }
 32 | .writing {
 33 |     width: 320px;
 34 |     height: 200px;
 35 |     background-color: #3f3f3f;
 36 |     border: 1px solid #bbbbbb;
 37 |     border-radius: 6px 6px 4px 4px;
 38 |     position: relative;
 39 | }
 40 | 
 41 | .errorLine{
 42 |     background-color: #9e9e9e;
 43 |     width: 0;
 44 |     height: 7px;
 45 |     border-radius: 6px;
 46 |     margin: 10px 0;
 47 |     animation: unloadError 2.5s infinite;
 48 | }
 49 | 
 50 | @keyframes unloadError {
 51 |     0% {
 52 |         --linelength: 10%;
 53 |     }
 54 |     25% {
 55 |         --linelength: 70%;
 56 |     }
 57 |     50% {
 58 |         --linelength: 46%;
 59 |     }
 60 |     75% {
 61 |         --linelength: 68%;
 62 |     }
 63 |     100% {
 64 |         --linelength: 10%;
 65 |     }
 66 | }
 67 | 
 68 | .writing .topbar{
 69 |     position: absolute;
 70 |     width: 100%;
 71 |     height: 12px;
 72 |     background-color: #f1f1f1;
 73 |     border-top-left-radius: 4px;
 74 |     border-top-right-radius: 4px;
 75 | }
 76 | 
 77 | .writing .topbar div{
 78 |     height: 6px;
 79 |     width: 6px;
 80 |     border-radius: 50%;
 81 |     margin: 3px;
 82 |     float: left;
 83 | }
 84 | 
 85 | .writing .topbar div.green{
 86 |     background-color: #60d060;
 87 | }
 88 | .writing .topbar div.red{
 89 |     background-color: red;
 90 | }
 91 | .writing .topbar div.yellow{
 92 |     background-color: #e6c015;
 93 | }
 94 | 
 95 | .writing .code {
 96 |     padding: 15px;
 97 | }
 98 | 
 99 | .writing .code ul {
100 |     list-style: none;
101 |     margin: 0;
102 |     padding: 0;
103 | }
104 | 
105 | .writing .code ul li {
106 |     background-color: #9e9e9e;
107 |     width: 0;
108 |     height: 7px;
109 |     border-radius: 6px;
110 |     margin: 10px 0;
111 | }
112 | 
113 | .container {
114 |     display: -webkit-box;
115 |     display: -ms-flexbox;
116 |     display: flex;
117 |     -webkit-box-align: center;
118 |         -ms-flex-align: center;
119 |             align-items: center;
120 |     -webkit-box-pack: center;
121 |         -ms-flex-pack: center;
122 |             justify-content: center;
123 |     height: 100vh;
124 |     width: 100%;
125 |     -webkit-transition: -webkit-transform .5s;
126 |     transition: -webkit-transform .5s;
127 |     transition: transform .5s;
128 |     transition: transform .5s, -webkit-transform .5s;
129 | }
130 | 
131 | .stack-container {
132 |     position: relative;
133 |     width: 420px;
134 |     height: 210px;
135 |     -webkit-transition: width 1s, height 1s;
136 |     transition: width 1s, height 1s;
137 | }
138 | 
139 | .pokeup {
140 |     -webkit-transition: all .3s ease;
141 |     transition: all .3s ease;
142 | }
143 | 
144 | .pokeup:hover {
145 |     -webkit-transform: translateY(-10px);
146 |             transform: translateY(-10px);
147 |     -webkit-transition: .3s ease;
148 |     transition: .3s ease;
149 | }
150 | 
151 | 
152 | .error {
153 |     width: 400px;
154 |     padding: 40px;
155 |     text-align: center;
156 | }
157 | 
158 | .error h1 {
159 |     font-size: 125px;
160 |     padding: 0;
161 |     margin: 0;
162 |     font-weight: 700;
163 | }
164 | 
165 | .error h2 {
166 |     margin: -30px 0 0 0;
167 |     padding: 0px;
168 |     font-size: 47px;
169 |     letter-spacing: 12px;
170 | }
171 | 
172 | .perspec {
173 |     -webkit-perspective: 1000px;
174 |             perspective: 1000px;
175 | }
176 | 
177 | .writeLine{
178 |     -webkit-animation: writeLine .4s linear forwards;
179 |             animation: writeLine .4s linear forwards;
180 | }
181 | 
182 | .explode{
183 |     -webkit-animation: explode .5s ease-in-out forwards;
184 |             animation: explode .5s ease-in-out forwards;
185 | }
186 | 
187 | .card {
188 |     -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
189 |             animation: tiltcard .5s ease-in-out 1s forwards;
190 |     position: absolute;
191 | }
192 | 
193 | @-webkit-keyframes tiltcard {
194 |     0% {
195 |         -webkit-transform: rotateY(0deg);
196 |                 transform: rotateY(0deg);
197 |     }
198 | 
199 |     100% {
200 |         -webkit-transform: rotateY(-30deg);
201 |                 transform: rotateY(-30deg);
202 |     }
203 | }
204 | 
205 | @keyframes tiltcard {
206 |     0% {
207 |         -webkit-transform: rotateY(0deg);
208 |                 transform: rotateY(0deg);
209 |     }
210 | 
211 |     100% {
212 |         -webkit-transform: rotateY(-30deg);
213 |                 transform: rotateY(-30deg);
214 |     }
215 | }
216 | 
217 | @-webkit-keyframes explode {
218 |     0% {
219 |         -webkit-transform: translate(0, 0) scale(1);
220 |                 transform: translate(0, 0) scale(1);
221 |     }
222 | 
223 |     100% {
224 |         -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
225 |                 transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
226 |     }
227 | }
228 | 
229 | @keyframes explode {
230 |     0% {
231 |         -webkit-transform: translate(0, 0) scale(1);
232 |                 transform: translate(0, 0) scale(1);
233 |     }
234 | 
235 |     100% {
236 |         -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
237 |                 transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
238 |     }
239 | }
240 | 
241 | @-webkit-keyframes writeLine {
242 |     0% {
243 |         width:0;
244 |     }
245 | 
246 |     100% {
247 |         width: var(--linelength);
248 |     }
249 | }
250 | 
251 | @keyframes writeLine {
252 |     0% {
253 |         width:0;
254 |     }
255 | 
256 |     100% {
257 |         width: var(--linelength);
258 |     }
259 | }
260 | 
261 | @media screen and (max-width: 1000px) {
262 |     .container {
263 |       -webkit-transform: scale(.85);
264 |               transform: scale(.85);
265 |     }
266 |   }
267 | 
268 |   @media screen and (max-width: 850px) {
269 |     .container {
270 |       -webkit-transform: scale(.75);
271 |               transform: scale(.75);
272 |     }
273 |   }
274 | 
275 |   @media screen and (max-width: 775px) {
276 |     .container {
277 |       -ms-flex-wrap: wrap-reverse;
278 |           flex-wrap: wrap-reverse;
279 |       -webkit-box-align: inherit;
280 |           -ms-flex-align: inherit;
281 |               align-items: inherit;
282 |     }
283 |   }
284 | 
285 |   @media screen and (max-width: 370px) {
286 |     .container {
287 |         -webkit-transform: scale(.6);
288 |                 transform: scale(.6);
289 |       }
290 |   }


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright (c) 2020 by Giuliano Peccetto (https://github.com/PecceG2) and Adam Quinlan (https://codepen.io/quinlo)
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [![Contributors][contributors-shield]][contributors-url]
  2 | [![Forks][forks-shield]][forks-url]
  3 | [![Stargazers][stars-shield]][stars-url]
  4 | [![Issues][issues-shield]][issues-url]
  5 | [![MIT License][license-shield]][license-url]
  6 | 
  7 | <br />
  8 | <p align="center">
  9 |   <a href="https://github.com/PecceG2/HTML_Template_http_codes">
 10 |     <img src="https://pecceg2.github.io/HTTP_Console_HTML_Template/logo.jpg" alt="Logo" width="100">
 11 |   </a>
 12 | 
 13 |   <h3 align="center">HTML Templates for HTTP status codes</h3>
 14 | 
 15 |   <p align="center">
 16 |     HTML Template HTTP Codes is a HTML templates to decorate your HTTP web server responses/errors
 17 | 	<br />
 18 | 	Change default nginx/apache templates for a responsive and more attractive design
 19 |     <br />
 20 |     <a href="https://github.com/PecceG2/"><strong>View all my projects »</strong></a>
 21 |     <br />
 22 |     <br />
 23 |     <a href="https://github.com/PecceG2/HTML_Template_http_codes/issues">Report Bug</a>
 24 |     ·
 25 |     <a href="https://github.com/PecceG2/HTML_Template_http_codes/blob/master/LICENSE.md">View License</a>
 26 |     ·
 27 |     <a href="https://github.com/PecceG2/HTML_Template_http_codes/issues">Request Feature</a>
 28 |   </p>
 29 | </p>
 30 | 
 31 | ## Screenshots ##
 32 | ![Screenshot](https://pecceg2.github.io/HTTP_Console_HTML_Template/readme-banner.png)
 33 | 
 34 | ## Templates demo ##
 35 | * [HTTP404](https://pecceg2.github.io/HTTP_Console_HTML_Template/404/)
 36 | * [HTTP500](https://pecceg2.github.io/HTTP_Console_HTML_Template/500/)
 37 | * [HTTP503](https://pecceg2.github.io/HTTP_Console_HTML_Template/503/)
 38 | * [HTTP504](https://pecceg2.github.io/HTTP_Console_HTML_Template/504/)
 39 | 
 40 | ## Usage ##
 41 | Just clone/download the git repository (The html files are included on error number folder, example "500/index.html" for 500 Internal Server Error)
 42 | 
 43 | ### NGINX Integration ###
 44 | 
 45 | [NGINX](http://nginx.org/en/docs/http/ngx_http_core_module.html#error_page) supports custom error-pages using multiple `error_page` directives.
 46 | 
 47 | File: [`nginx.conf`](https://www.nginx.com/resources/wiki/start/topics/examples/full/) (/etc/nginx/)
 48 | 
 49 | Example - assumes HttpErrorPages are located into `/var/html/www/ErrorPages`.
 50 | 
 51 | ```nginx
 52 | server {
 53 |     listen      80;
 54 |     server_name localhost;
 55 |     root        /var/html/www;
 56 |     index       index.html;
 57 |     
 58 |     location / {
 59 |         try_files $uri $uri/ =404;
 60 |         
 61 |         # add one directive for each http status code
 62 |         error_page 404 /ErrorPages/404/index.html;
 63 |         error_page 500 /ErrorPages/500/index.html;
 64 |         error_page 503 /ErrorPages/503/index.html;
 65 | 		error_page 503 /ErrorPages/504/index.html;
 66 |     }
 67 | 
 68 |     # redirect the virtual ErrorPages path the real path
 69 |     location /ErrorPages/ {
 70 |         alias /var/html/www/ErrorPages/;
 71 |         internal;
 72 |     }
 73 | ```
 74 | 
 75 | ## Apache Httpd Integration ##
 76 | [Apache Httpd 2.x](http://httpd.apache.org/) supports custom error-pages using multiple [ErrorDocument](http://httpd.apache.org/docs/2.4/mod/core.html#errordocument) directives.
 77 | 
 78 | File: `httpd.conf` or `.htaccess`
 79 | 
 80 | Example - assumes HttpErrorPages are located into your **document root** `/var/www/...docroot../ErrorPages`.
 81 | 
 82 | ```ApacheConf
 83 | ErrorDocument 404 /ErrorPages/404/index.html
 84 | ErrorDocument 500 /ErrorPages/500/index.html
 85 | ErrorDocument 503 /ErrorPages/503/index.html
 86 | ErrorDocument 504 /ErrorPages/504/index.html
 87 | ```
 88 | 
 89 | ## License
 90 | >You can check out the full license [here](https://github.com/PecceG2/HTML_Template_http_codes/blob/master/LICENSE.md)
 91 | 
 92 | This project is licensed under the terms of the **MIT** license.
 93 | 
 94 | [contributors-shield]: https://img.shields.io/github/contributors/PecceG2/HTML_Template_http_codes.svg?style=flat-square
 95 | [contributors-url]: https://github.com/PecceG2/HTML_Template_http_codes/graphs/contributors
 96 | [forks-shield]: https://img.shields.io/github/forks/PecceG2/HTML_Template_http_codes.svg?style=flat-square
 97 | [forks-url]: https://github.com/PecceG2/HTML_Template_http_codes/network/members
 98 | [stars-shield]: https://img.shields.io/github/stars/PecceG2/HTML_Template_http_codes.svg?style=flat-square
 99 | [stars-url]: https://github.com/PecceG2/HTML_Template_http_codes/stargazers
100 | [issues-shield]: https://img.shields.io/github/issues/PecceG2/HTML_Template_http_codes.svg?style=flat-square
101 | [issues-url]: https://github.com/PecceG2/HTML_Template_http_codes/issues
102 | [license-shield]: https://img.shields.io/github/license/PecceG2/HTML_Template_http_codes.svg?style=flat-square
103 | [license-url]: https://github.com/PecceG2/HTML_Template_http_codes/blob/master/LICENSE.md
104 | 


--------------------------------------------------------------------------------