├── LICENSE
├── README.md
├── assets
    ├── css
    │   └── styles.css
    ├── img
    │   └── ghost-img.png
    ├── js
    │   ├── main.js
    │   └── scrollreveal.min.js
    └── scss
    │   ├── base
    │       └── _base.scss
    │   ├── components
    │       ├── _breakpoints.scss
    │       ├── _header.scss
    │       └── _home.scss
    │   ├── config
    │       └── _variables.scss
    │   ├── layout
    │       └── _layout.scss
    │   └── styles.scss
├── index.html
└── preview.png


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Bedimcode
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 👻 Responsive 404 Page
 2 | ## [Watch it on youtube](https://youtu.be/WG2l4ER3_Qc)
 3 | ### 👻 Responsive 404 Page
 4 | 
 5 | - Responsive 404 Page Using HTML CSS & JavaScript
 6 | - Contains CSS animations.
 7 | - Developed first with the Mobile First methodology, then for desktop.
 8 | - Compatible with all mobile devices and with a beautiful and pleasant user interface.
 9 | 
10 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode)
11 | 
12 | ![preview img](/preview.png)
13 | 


--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
  1 | /*=============== GOOGLE FONTS ===============*/
  2 | @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");
  3 | 
  4 | /*=============== VARIABLES CSS ===============*/
  5 | :root {
  6 |   --header-height: 3.5rem;
  7 | 
  8 |   /*========== Colors ==========*/
  9 |   /*Color mode HSL(hue, saturation, lightness)*/
 10 |   --first-color: hsl(38, 69%, 59%);
 11 |   --text-color: hsl(38, 8%, 8%);
 12 | 
 13 |   /*========== Font and typography ==========*/
 14 |   /*.5rem = 8px | 1rem = 16px ...*/
 15 |   --body-font: 'Space Grotesk', sans-serif;
 16 |   --biggest-font-size: 2.375rem;
 17 |   --normal-font-size: .938rem;
 18 |   --smaller-font-size: .75rem;
 19 | }
 20 | 
 21 | /* Responsive typography */
 22 | @media screen and (min-width: 1024px) {
 23 |   :root {
 24 |     --biggest-font-size: 5rem;
 25 |     --normal-font-size: 1rem;
 26 |     --smaller-font-size: .813rem;
 27 |   }
 28 | }
 29 | 
 30 | /*=============== BASE ===============*/
 31 | * {
 32 |   box-sizing: border-box;
 33 |   padding: 0;
 34 |   margin: 0;
 35 | }
 36 | 
 37 | body {
 38 |   font-family: var(--body-font);
 39 |   font-size: var(--normal-font-size);
 40 |   font-weight: 500;
 41 |   color: var(--text-color);
 42 | }
 43 | 
 44 | ul {
 45 |   list-style: none;
 46 | }
 47 | 
 48 | a {
 49 |   text-decoration: none;
 50 | }
 51 | 
 52 | img {
 53 |   max-width: 100%;
 54 |   height: auto;
 55 | }
 56 | 
 57 | /*=============== REUSABLE CSS CLASSES ===============*/
 58 | .container {
 59 |   max-width: 1024px;
 60 |   margin-left: 1.5rem;
 61 |   margin-right: 1.5rem;
 62 | }
 63 | 
 64 | .main {
 65 |   overflow: hidden; /* For the animations ScrollReveal */
 66 | }
 67 | 
 68 | /*=============== HEADER & NAV ===============*/
 69 | .header {
 70 |   position: fixed;
 71 |   width: 100%;
 72 |   background-color: transparent;
 73 |   top: 0;
 74 |   left: 0;
 75 |   z-index: 100;
 76 | }
 77 | 
 78 | .nav {
 79 |   height: var(--header-height);
 80 |   display: flex;
 81 |   justify-content: space-between;
 82 |   align-items: center;
 83 | }
 84 | 
 85 | .nav__logo, 
 86 | .nav__toggle {
 87 |   color: var(--text-color);
 88 |   display: inline-flex;
 89 | }
 90 | 
 91 | .nav__logo {
 92 |   font-weight: 700;
 93 | }
 94 | 
 95 | .nav__toggle {
 96 |   font-size: 1.25rem;
 97 |   cursor: pointer;
 98 | }
 99 | 
100 | @media screen and (max-width: 767px) {
101 |   .nav__menu {
102 |     position: fixed;
103 |     background-color: var(--first-color);
104 |     left: 0;
105 |     top: -100%;
106 |     width: 100%;
107 |     padding: 5rem 0 4rem;
108 |     border-radius: 0 0 1.5rem 1.5rem;
109 |     box-shadow: 0 2px 4px hsla(38, 4%, 15%, .15);
110 |     transition: .4s;
111 |   }
112 | }
113 | 
114 | .nav__list {
115 |   text-align: center;
116 |   display: flex;
117 |   flex-direction: column;
118 |   row-gap: 2rem;
119 | }
120 | 
121 | .nav__link {
122 |   color: var(--text-color);
123 | }
124 | 
125 | .nav__close {
126 |   position: absolute;
127 |   top: 1rem;
128 |   right: 1.5rem;
129 |   font-size: 1.5rem;
130 |   color: var(--text-color);
131 |   cursor: pointer;
132 | }
133 | 
134 | /* Show menu */
135 | .show-menu {
136 |   top: 0;
137 | }
138 | 
139 | /*=============== HOME ===============*/
140 | .home {
141 |   background-color: var(--first-color);
142 |   padding: 9rem 0 2rem;
143 |   height: 100vh;
144 |   display: grid;
145 | }
146 | 
147 | .home__container {
148 |   display: grid;
149 |   align-content: center;
150 |   row-gap: 2.5rem;
151 | }
152 | 
153 | .home__data {
154 |   text-align: center;
155 | }
156 | 
157 | .home__title {
158 |   font-size: var(--biggest-font-size);
159 |   margin: .75rem 0;
160 | }
161 | 
162 | .home__button {
163 |   margin-top: 2rem;
164 |   display: inline-block;
165 |   background-color: var(--text-color);
166 |   color: #fff;
167 |   padding: .80rem 1.5rem;
168 |   border-radius: 3rem;
169 |   transition: .4s;
170 | }
171 | 
172 | .home__button:hover {
173 |   box-shadow: 0 4px 12px hsla(38, 69%, 8%, .2);
174 | }
175 | 
176 | .home__img img {
177 |   width: 230px;
178 |   animation: floaty 1.8s infinite alternate;
179 | }
180 | 
181 | .home__img {
182 |   justify-self: center;
183 | }
184 | 
185 | .home__shadow {
186 |   width: 130px;
187 |   height: 24px;
188 |   background-color: hsla(38, 21%, 19%, .16);
189 |   margin: 0 auto;
190 |   border-radius: 50%;
191 |   filter: blur(7px);
192 |   animation: shadow 1.8s infinite alternate;
193 | }
194 | 
195 | .home__footer {
196 |   display: flex;
197 |   justify-content: center;
198 |   column-gap: .5rem;
199 |   font-size: var(--smaller-font-size);
200 |   align-self: flex-end;
201 | }
202 | 
203 | /* Animate ghost */
204 | @keyframes floaty {
205 |   0% {
206 |     transform: translateY(0);
207 |   }
208 |   100% {
209 |     transform: translateY(15px);
210 |   }
211 | }
212 | 
213 | @keyframes shadow {
214 |   0% {
215 |     transform: scale(1, 1);
216 |   }
217 |   100% {
218 |     transform: scale(.85, .85);
219 |   }
220 | }
221 | 
222 | /*=============== BREAKPOINTS ===============*/
223 | /* For small devices */
224 | @media screen and (max-width: 320px) {
225 |   .home {
226 |     padding-top: 7rem;
227 |   }
228 | }
229 | 
230 | /* For medium devices */
231 | @media screen and (min-width: 767px) {
232 |   .nav {
233 |     height: calc(var(--header-height) + 1.5rem);
234 |   }
235 |   .nav__toggle, 
236 |   .nav__close {
237 |     display: none;
238 |   }
239 |   .nav__list {
240 |     flex-direction: row;
241 |     column-gap: 3.5rem;
242 |   }
243 | }
244 | 
245 | /* For large devices */
246 | @media screen and (min-width: 1024px) {
247 |   .home__container {
248 |     grid-template-columns: repeat(2, 1fr);
249 |     align-items: center;
250 |     column-gap: 2rem;
251 |   }
252 |   .home__data {
253 |     text-align: initial;
254 |   }
255 |   .home__img img {
256 |     width: 400px;
257 |   }
258 |   .home__shadow {
259 |     width: 250px;
260 |     height: 40px;
261 |   }
262 | }
263 | 
264 | @media screen and (min-width: 1048px) {
265 |   .container {
266 |     margin-left: auto;
267 |     margin-right: auto;
268 |   }
269 | }
270 | 
271 | /* For 2K resolutions (2048 x 1152, 2048 x 1536) */
272 | @media screen and (min-width: 2048px) {
273 |   body {
274 |     zoom: 1.7;
275 |   }
276 | 
277 |   .home {
278 |     height: initial;
279 |     row-gap: 4rem;
280 |   }
281 | }
282 | 
283 | /* For 4K resolutions (3840 x 2160, 4096 x 2160) */
284 | @media screen and (min-width: 3840px) {
285 |   body {
286 |     zoom: 3.1;
287 |   }
288 | }


--------------------------------------------------------------------------------
/assets/img/ghost-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-404-page/f7dd1ddefd4a2d112733764ed8b4f6de74397a0a/assets/img/ghost-img.png


--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
 1 | /*=============== SHOW MENU ===============*/
 2 | const navMenu = document.getElementById('nav-menu'),
 3 |       navToggle = document.getElementById('nav-toggle'),
 4 |       navClose = document.getElementById('nav-close')
 5 | 
 6 | /*===== MENU SHOW =====*/
 7 | /* Validate if constant exists */
 8 | if(navToggle){
 9 |     navToggle.addEventListener('click', () =>{
10 |         navMenu.classList.add('show-menu')
11 |     })
12 | }
13 | 
14 | /*===== MENU HIDDEN =====*/
15 | /* Validate if constant exists */
16 | if(navClose){
17 |     navClose.addEventListener('click', () =>{
18 |         navMenu.classList.remove('show-menu')
19 |     })
20 | }
21 | 
22 | /*=============== REMOVE MENU MOBILE ===============*/
23 | const navLink = document.querySelectorAll('.nav__link')
24 | 
25 | function linkAction(){
26 |     const navMenu = document.getElementById('nav-menu')
27 |     // When we click on each nav__link, we remove the show-menu class
28 |     navMenu.classList.remove('show-menu')
29 | }
30 | navLink.forEach(n => n.addEventListener('click', linkAction))
31 | 
32 | /*=============== SCROLL REVEAL ANIMATION ===============*/
33 | const sr = ScrollReveal({
34 |     distance: '90px',
35 |     duration: 3000,
36 | })
37 | 
38 | sr.reveal(`.home__data`, {origin: 'top', delay: 400})
39 | sr.reveal(`.home__img`, {origin: 'bottom', delay: 600})
40 | sr.reveal(`.home__footer`, {origin: 'bottom', delay: 800})


--------------------------------------------------------------------------------
/assets/js/scrollreveal.min.js:
--------------------------------------------------------------------------------
 1 | /*! @license ScrollReveal v4.0.9
 2 | 
 3 | 	Copyright 2021 Fisssion LLC.
 4 | 
 5 | 	Licensed under the GNU General Public License 3.0 for
 6 | 	compatible open source projects and non-commercial use.
 7 | 
 8 | 	For commercial sites, themes, projects, and applications,
 9 | 	keep your source code private/proprietary by purchasing
10 | 	a commercial license from https://scrollrevealjs.org/
11 | */
12 | var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",function(){document.body.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0<n--;)t[n]=arguments[n+1];if(this.constructor.debug&&console){var i="%cScrollReveal: "+e;t.forEach(function(e){return i+="\n — "+e}),console.log(i,"color: #ea654b;")}}function t(){var n=this,i={active:[],stale:[]},t={active:[],stale:[]},r={active:[],stale:[]};try{f(u("[data-sr-id]"),function(e){var t=parseInt(e.getAttribute("data-sr-id"));i.active.push(t)})}catch(e){throw e}f(this.store.elements,function(e){-1===i.active.indexOf(e.id)&&i.stale.push(e.id)}),f(i.stale,function(e){return delete n.store.elements[e]}),f(this.store.elements,function(e){-1===r.active.indexOf(e.containerId)&&r.active.push(e.containerId),e.hasOwnProperty("sequence")&&-1===t.active.indexOf(e.sequence.id)&&t.active.push(e.sequence.id)}),f(this.store.containers,function(e){-1===r.active.indexOf(e.id)&&r.stale.push(e.id)}),f(r.stale,function(e){var t=n.store.containers[e].node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate),delete n.store.containers[e]}),f(this.store.sequences,function(e){-1===t.active.indexOf(e.id)&&t.stale.push(e.id)}),f(t.stale,function(e){return delete n.store.sequences[e]})}function N(e){if(e.constructor!==Array)throw new TypeError("Expected array.");if(16===e.length)return e;if(6!==e.length)throw new RangeError("Expected array with either 6 or 16 values.");var t=z();return t[0]=e[0],t[1]=e[1],t[4]=e[2],t[5]=e[3],t[12]=e[4],t[13]=e[5],t}function z(){for(var e=[],t=0;t<16;t++)t%5==0?e.push(1):e.push(0);return e}function F(e,t){for(var n=N(e),i=N(t),r=[],o=0;o<4;o++)for(var s=[n[o],n[o+4],n[o+8],n[o+12]],a=0;a<4;a++){var c=4*a,l=[i[c],i[c+1],i[c+2],i[c+3]],d=s[0]*l[0]+s[1]*l[1]+s[2]*l[2]+s[3]*l[3];r[o+c]=d}return r}function D(e,t){var n=z();return n[0]=e,n[5]="number"==typeof t?t:e,n}var S=function(){var n={},i=document.documentElement.style;function e(e,t){if(void 0===t&&(t=i),e&&"string"==typeof e){if(n[e])return n[e];if("string"==typeof t[e])return n[e]=e;if("string"==typeof t["-webkit-"+e])return n[e]="-webkit-"+e;throw new RangeError('Unable to find "'+e+'" style property.')}throw new TypeError("Expected a string.")}return e.clearCache=function(){return n={}},e}();function p(e){var t=window.getComputedStyle(e.node),n=t.position,i=e.config,r={},o=(e.node.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[];r.computed=o?o.map(function(e){return e.trim()}).join("; ")+";":"",r.generated=o.some(function(e){return e.match(/visibility\s?:\s?visible/i)})?r.computed:o.concat(["visibility: visible"]).map(function(e){return e.trim()}).join("; ")+";";var s,a,c,l,d,u,f,h,p,m,y,v,g,b=parseFloat(t.opacity),w=isNaN(parseFloat(i.opacity))?parseFloat(t.opacity):parseFloat(i.opacity),E={computed:b!==w?"opacity: "+b+";":"",generated:b!==w?"opacity: "+w+";":""},j=[];if(parseFloat(i.distance)){var T="top"===i.origin||"bottom"===i.origin?"Y":"X",k=i.distance;"top"!==i.origin&&"left"!==i.origin||(k=/^-/.test(k)?k.substr(1):"-"+k);var O=k.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g),x=O[0];switch(O[1]){case"em":k=parseInt(t.fontSize)*x;break;case"px":k=x;break;case"%":k="Y"===T?e.node.getBoundingClientRect().height*x/100:e.node.getBoundingClientRect().width*x/100;break;default:throw new RangeError("Unrecognized or missing distance unit.")}"Y"===T?j.push((c=k,(l=z())[13]=c,l)):j.push((s=k,(a=z())[12]=s,a))}i.rotate.x&&j.push((d=i.rotate.x,u=Math.PI/180*d,(f=z())[5]=f[10]=Math.cos(u),f[6]=f[9]=Math.sin(u),f[9]*=-1,f)),i.rotate.y&&j.push((h=i.rotate.y,p=Math.PI/180*h,(m=z())[0]=m[10]=Math.cos(p),m[2]=m[8]=Math.sin(p),m[2]*=-1,m)),i.rotate.z&&j.push((y=i.rotate.z,v=Math.PI/180*y,(g=z())[0]=g[5]=Math.cos(v),g[1]=g[4]=Math.sin(v),g[4]*=-1,g)),1!==i.scale&&(0===i.scale?j.push(D(2e-4)):j.push(D(i.scale)));var R={};if(j.length){R.property=S("transform"),R.computed={raw:t[R.property],matrix:function(e){if("string"==typeof e){var t=e.match(/matrix(3d)?\(([^)]+)\)/);if(t)return N(t[2].split(", ").map(parseFloat))}return z()}(t[R.property])},j.unshift(R.computed.matrix);var q=j.reduce(F);R.generated={initial:R.property+": matrix3d("+q.join(", ")+");",final:R.property+": matrix3d("+R.computed.matrix.join(", ")+");"}}else R.generated={initial:"",final:""};var A={};if(E.generated||R.generated.initial){A.property=S("transition"),A.computed=t[A.property],A.fragments=[];var P=i.delay,L=i.duration,M=i.easing;E.generated&&A.fragments.push({delayed:"opacity "+L/1e3+"s "+M+" "+P/1e3+"s",instant:"opacity "+L/1e3+"s "+M+" 0s"}),R.generated.initial&&A.fragments.push({delayed:R.property+" "+L/1e3+"s "+M+" "+P/1e3+"s",instant:R.property+" "+L/1e3+"s "+M+" 0s"}),A.computed&&!A.computed.match(/all 0s|none 0s/)&&A.fragments.unshift({delayed:A.computed,instant:A.computed});var I=A.fragments.reduce(function(e,t,n){return e.delayed+=0===n?t.delayed:", "+t.delayed,e.instant+=0===n?t.instant:", "+t.instant,e},{delayed:"",instant:""});A.generated={delayed:A.property+": "+I.delayed+";",instant:A.property+": "+I.instant+";"}}else A.generated={delayed:"",instant:""};return{inline:r,opacity:E,position:n,transform:R,transition:A}}function m(r,e){e.split(";").forEach(function(e){var t=e.split(":"),n=t[0],i=t.slice(1);n&&i&&(r.style[n.trim()]=i.join(":"))})}function y(e){var i,r=this;try{f(u(e),function(e){var t=e.getAttribute("data-sr-id");if(null!==t){i=!0;var n=r.store.elements[t];n.callbackTimer&&window.clearTimeout(n.callbackTimer.clock),m(n.node,n.styles.inline.generated),e.removeAttribute("data-sr-id"),delete r.store.elements[t]}})}catch(e){return h.call(this,"Clean failed.",e.message)}if(i)try{t.call(this)}catch(e){return h.call(this,"Clean failed.",e.message)}}function v(n){for(var e=[],t=arguments.length-1;0<t--;)e[t]=arguments[t+1];if(s(n))return f(e,function(e){f(e,function(e,t){s(e)?(n[t]&&s(n[t])||(n[t]={}),v(n[t],e)):n[t]=e})}),n;throw new TypeError("Target must be an object literal.")}function g(e){return void 0===e&&(e=navigator.userAgent),/Android|iPhone|iPad|iPod/i.test(e)}var e,b=(e=0,function(){return e++});function w(){var n=this;t.call(this),f(this.store.elements,function(e){var t=[e.styles.inline.generated];e.visible?(t.push(e.styles.opacity.computed),t.push(e.styles.transform.generated.final),e.revealed=!0):(t.push(e.styles.opacity.generated),t.push(e.styles.transform.generated.initial),e.revealed=!1),m(e.node,t.filter(function(e){return""!==e}).join(" "))}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.addEventListener("scroll",n.delegate),t.addEventListener("resize",n.delegate)}),this.delegate(),this.initTimeout=null}function c(e,t){void 0===t&&(t={});var n=t.pristine||this.pristine,i="always"===e.config.useDelay||"onload"===e.config.useDelay&&n||"once"===e.config.useDelay&&!e.seen,r=e.visible&&!e.revealed,o=!e.visible&&e.revealed&&e.config.reset;return t.reveal||r?function(e,t){var n=[e.styles.inline.generated,e.styles.opacity.computed,e.styles.transform.generated.final];t?n.push(e.styles.transition.generated.delayed):n.push(e.styles.transition.generated.instant);e.revealed=e.seen=!0,m(e.node,n.filter(function(e){return""!==e}).join(" ")),a.call(this,e,t)}.call(this,e,i):t.reset||o?function(e){var t=[e.styles.inline.generated,e.styles.opacity.generated,e.styles.transform.generated.initial,e.styles.transition.generated.instant];e.revealed=!1,m(e.node,t.filter(function(e){return""!==e}).join(" ")),a.call(this,e)}.call(this,e):void 0}function a(e,t){var n=this,i=t?e.config.duration+e.config.delay:e.config.duration,r=e.revealed?e.config.beforeReveal:e.config.beforeReset,o=e.revealed?e.config.afterReveal:e.config.afterReset,s=0;e.callbackTimer&&(s=Date.now()-e.callbackTimer.start,window.clearTimeout(e.callbackTimer.clock)),r(e.node),e.callbackTimer={start:Date.now(),clock:window.setTimeout(function(){o(e.node),e.callbackTimer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&y.call(n,e.node)},i-s)}}function l(e,t){if(void 0===t&&(t=this.pristine),!e.visible&&e.revealed&&e.config.reset)return c.call(this,e,{reset:!0});var n=this.store.sequences[e.sequence.id],i=e.sequence.index;if(n){var r=new d(n,"visible",this.store),o=new d(n,"revealed",this.store);if(n.models={visible:r,revealed:o},!o.body.length){var s=n.members[r.body[0]],a=this.store.elements[s];if(a)return j.call(this,n,r.body[0],-1,t),j.call(this,n,r.body[0],1,t),c.call(this,a,{reveal:!0,pristine:t})}if(!n.blocked.head&&i===[].concat(o.head).pop()&&i>=[].concat(r.body).shift())return j.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return j.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function E(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=b(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t<o.body[0]?o.head.push(t):o.foot.push(t))})}function j(e,t,n,i){var r=this,o=["head",null,"foot"][1+n],s=e.members[t+n],a=this.store.elements[s];e.blocked[o]=!0,setTimeout(function(){e.blocked[o]=!1,a&&l.call(r,a,i)},e.interval)}function i(e,a,t){var c=this;void 0===a&&(a={}),void 0===t&&(t=!1);var l,d=[],n=a.interval||r.interval;try{n&&(l=new E(n));var i=u(e);if(!i.length)throw new Error("Invalid reveal target.");f(i.reduce(function(e,t){var n={},i=t.getAttribute("data-sr-id");i?(v(n,c.store.elements[i]),m(n.node,n.styles.inline.computed)):(n.id=b(),n.node=t,n.seen=!1,n.revealed=!1,n.visible=!1);var r=v({},n.config||c.defaults,a);if(!r.mobile&&g()||!r.desktop&&!g())return i&&y.call(c,n),e;var o,s=u(r.container)[0];if(!s)throw new Error("Invalid container.");return s.contains(t)&&(null===(o=function(t){var e=[],n=arguments.length-1;for(;0<n--;)e[n]=arguments[n+1];var i=null;return f(e,function(e){f(e,function(e){null===i&&e.node===t&&(i=e.id)})}),i}(s,d,c.store.containers))&&(o=b(),d.push({id:o,node:s})),n.config=r,n.containerId=o,n.styles=p(n),l&&(n.sequence={id:l.id,index:l.members.length},l.members.push(n.id)),e.push(n)),e},[]),function(e){(c.store.elements[e.id]=e).node.setAttribute("data-sr-id",e.id)})}catch(e){return h.call(this,"Reveal failed.",e.message)}f(d,function(e){c.store.containers[e.id]={id:e.id,node:e.node}}),l&&(this.store.sequences[l.id]=l),!0!==t&&(this.store.history.push({target:e,options:a}),this.initTimeout&&window.clearTimeout(this.initTimeout),this.initTimeout=window.setTimeout(w.bind(this),0))}var T,k=Math.sign||function(e){return(0<e)-(e<0)||+e},O=(T=Date.now(),function(e){var t=Date.now();16<t-T?e(T=t):setTimeout(function(){return O(e)},0)}),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||O;function R(e,t){for(var n=t?e.node.clientHeight:e.node.offsetHeight,i=t?e.node.clientWidth:e.node.offsetWidth,r=0,o=0,s=e.node;isNaN(s.offsetTop)||(r+=s.offsetTop),isNaN(s.offsetLeft)||(o+=s.offsetLeft),s=s.offsetParent;);return{bounds:{top:r,right:o+i,bottom:r+n,left:o},height:n,width:i}}function q(e,t){var i=this;void 0===e&&(e={type:"init"}),void 0===t&&(t=this.store.elements),x(function(){var n="init"===e.type||"resize"===e.type;f(i.store.containers,function(e){n&&(e.geometry=R.call(i,e,!0));var t=function(e){var t,n;return n=e.node===document.documentElement?(t=window.pageYOffset,window.pageXOffset):(t=e.node.scrollTop,e.node.scrollLeft),{top:t,left:n}}.call(i,e);e.scroll&&(e.direction={x:k(t.left-e.scroll.left),y:k(t.top-e.scroll.top)}),e.scroll=t}),f(t,function(e){(n||void 0===e.geometry)&&(e.geometry=R.call(i,e)),e.visible=function(e){void 0===e&&(e={});var t=this.store.containers[e.containerId];if(t){var n=Math.max(0,Math.min(1,e.config.viewFactor)),i=e.config.viewOffset,r=e.geometry.bounds.top+e.geometry.height*n,o=e.geometry.bounds.right-e.geometry.width*n,s=e.geometry.bounds.bottom-e.geometry.height*n,a=e.geometry.bounds.left+e.geometry.width*n,c=t.geometry.bounds.top+t.scroll.top+i.top,l=t.geometry.bounds.right+t.scroll.left-i.right,d=t.geometry.bounds.bottom+t.scroll.top-i.bottom,u=t.geometry.bounds.left+t.scroll.left+i.left;return r<d&&u<o&&c<s&&a<l||"fixed"===e.styles.position}}.call(i,e)}),f(t,function(e){e.sequence?l.call(i,e):c.call(i,e)}),i.pristine=!1})}var A,P,L,M,I,C,W,Y,$="4.0.9";function H(e){var t;if(void 0===e&&(e={}),void 0===this||Object.getPrototypeOf(this)!==H.prototype)return new H(e);if(!H.isSupported())return h.call(this,"Instantiation failed.","This browser is not supported."),n.failure();try{t=v({},C||r,e)}catch(e){return h.call(this,"Invalid configuration.",e.message),n.failure()}try{if(!u(t.container)[0])throw new Error("Invalid container.")}catch(e){return h.call(this,e.message),n.failure()}return!(C=t).mobile&&g()||!C.desktop&&!g()?(h.call(this,"This device is disabled.","desktop: "+C.desktop,"mobile: "+C.mobile),n.failure()):(n.success(),this.store={containers:{},elements:{},history:[],sequences:{}},this.pristine=!0,A=A||q.bind(this),P=P||function(){var n=this;f(this.store.elements,function(e){m(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id")}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate)}),this.store={containers:{},elements:{},history:[],sequences:{}}}.bind(this),L=L||i.bind(this),M=M||y.bind(this),I=I||function(){var t=this;f(this.store.history,function(e){i.call(t,e.target,e.options,!0)}),w.call(this)}.bind(this),Object.defineProperty(this,"delegate",{get:function(){return A}}),Object.defineProperty(this,"destroy",{get:function(){return P}}),Object.defineProperty(this,"reveal",{get:function(){return L}}),Object.defineProperty(this,"clean",{get:function(){return M}}),Object.defineProperty(this,"sync",{get:function(){return I}}),Object.defineProperty(this,"defaults",{get:function(){return C}}),Object.defineProperty(this,"version",{get:function(){return $}}),Object.defineProperty(this,"noop",{get:function(){return!1}}),Y||(Y=this))}return H.isSupported=function(){return("transform"in(t=document.documentElement.style)||"WebkitTransform"in t)&&("transition"in(e=document.documentElement.style)||"WebkitTransition"in e);var e,t},Object.defineProperty(H,"debug",{get:function(){return W||!1},set:function(e){return W="boolean"==typeof e?e:W}}),H(),H}();
13 | 


--------------------------------------------------------------------------------
/assets/scss/base/_base.scss:
--------------------------------------------------------------------------------
 1 | /*=============== BASE ===============*/
 2 | *{
 3 |     box-sizing: border-box;
 4 |     padding: 0;
 5 |     margin: 0;
 6 | }
 7 | 
 8 | body{
 9 |     font-family: var(--body-font);
10 |     font-size: var(--normal-font-size);
11 |     font-weight: 500;
12 |     color: var(--text-color);
13 | }
14 | 
15 | ul{
16 |     list-style: none;
17 | }
18 | 
19 | a{
20 |     text-decoration: none;
21 | }
22 | 
23 | img{
24 |     max-width: 100%;
25 |     height: auto;
26 | }


--------------------------------------------------------------------------------
/assets/scss/components/_breakpoints.scss:
--------------------------------------------------------------------------------
 1 | /*=============== BREAKPOINTS ===============*/
 2 | /* For small devices */
 3 | @media screen and (max-width: 320px){
 4 |     .home{
 5 |         padding-top: 7rem;
 6 |     }
 7 | }
 8 | 
 9 | /* For medium devices */
10 | @media screen and (min-width: 767px){
11 |     .nav{
12 |         height: calc(var(--header-height) + 1.5rem);
13 | 
14 |         &__toggle,
15 |         &__close{
16 |             display: none;
17 |         }
18 |         &__list{
19 |             flex-direction: row;
20 |             column-gap: 3.5rem;
21 |         }
22 |     }
23 | }
24 | 
25 | /* For large devices */
26 | @media screen and (min-width: 1024px){
27 |     .home{
28 |         &__container{
29 |             grid-template-columns: repeat(2, 1fr);
30 |             align-items: center;
31 |             column-gap: 2rem;
32 |         }
33 |         &__data{
34 |             text-align: initial;
35 |         }
36 |         &__img img{
37 |             width: 400px;
38 |         }
39 |         &__shadow{
40 |             width: 250px;
41 |             height: 40px;
42 |         }
43 |     }
44 | }
45 | 
46 | @media screen and (min-width: 1048px){
47 |     .container{
48 |         margin-left: auto;
49 |         margin-right: auto;
50 |     }
51 | }
52 | 
53 | /* For 2K resolutions (2048 x 1152, 2048 x 1536) */
54 | @media screen and (min-width: 2048px) {
55 |     body {
56 |       zoom: 1.7;
57 |     }
58 |     .home{
59 |         height: initial;
60 |         row-gap: 4rem;
61 |     }
62 | }
63 |   
64 | /* For 4K resolutions (3840 x 2160, 4096 x 2160) */
65 | @media screen and (min-width: 3840px) {
66 |     body {
67 |       zoom: 3.1;
68 |     }
69 | }


--------------------------------------------------------------------------------
/assets/scss/components/_header.scss:
--------------------------------------------------------------------------------
 1 | /*=============== HEADER & NAV ===============*/
 2 | .header{
 3 |     position: fixed;
 4 |     width: 100%;
 5 |     background-color: transparent;
 6 |     top: 0;
 7 |     left: 0;
 8 |     z-index: 100;
 9 | }
10 | 
11 | .nav{
12 |     height: var(--header-height);
13 |     display: flex;
14 |     justify-content: space-between;
15 |     align-items: center;
16 | 
17 |     &__logo,
18 |     &__toggle{
19 |         color: var(--text-color);
20 |         display: inline-flex;
21 |     }
22 |     &__logo{
23 |         font-weight: 700;
24 |     }
25 |     &__toggle{
26 |         font-size: 1.25rem;
27 |         cursor: pointer;
28 |     }
29 |     &__menu{
30 |         @media screen and (max-width: 767px){
31 |             position: fixed;
32 |             background-color: var(--first-color);
33 |             left: 0;
34 |             top: -100%;
35 |             width: 100%;
36 |             padding: 5rem 0 4rem;
37 |             border-radius: 0 0 1.5rem 1.5rem;
38 |             box-shadow: 0 2px 4px hsla(38, 4%, 15%, .15);
39 |             transition: .4s;
40 |         }
41 |     }
42 |     &__list{
43 |         text-align: center;
44 |         display: flex;
45 |         flex-direction: column;
46 |         row-gap: 2rem;
47 |     }
48 |     &__link{
49 |         color: var(--text-color);
50 |     }
51 |     &__close{
52 |         position: absolute;
53 |         top: 1rem;
54 |         right: 1.5rem;
55 |         font-size: 1.5rem;
56 |         color: var(--text-color);
57 |         cursor: pointer;
58 |     }
59 | }
60 | 
61 | /* Show menu */
62 | .show-menu{
63 |     top: 0 ;
64 | }


--------------------------------------------------------------------------------
/assets/scss/components/_home.scss:
--------------------------------------------------------------------------------
 1 | /*=============== HOME ===============*/
 2 | .home{
 3 |     background-color: var(--first-color);
 4 |     padding: 9rem 0 2rem;
 5 |     height: 100vh;
 6 |     display: grid;
 7 | 
 8 |     &__container{
 9 |         display: grid;
10 |         align-content: center;
11 |         row-gap: 2.5rem;
12 |     }
13 |     &__data{
14 |         text-align: center;
15 |     }
16 |     &__title{
17 |         font-size: var(--biggest-font-size);
18 |         margin: .75rem 0;
19 |     }
20 |     &__button{
21 |         margin-top: 2rem;
22 |         display: inline-block;
23 |         background-color: var(--text-color);
24 |         color: #fff;
25 |         padding: .80rem 1.5rem;
26 |         border-radius: 3rem;
27 |         transition: .4s;
28 | 
29 |         &:hover{
30 |             box-shadow: 0 4px 12px hsla(38, 69%, 8%, .2);
31 |         }
32 |     }
33 |     &__img img{
34 |         width: 230px;
35 |         animation: floaty 1.8s infinite alternate;
36 |     }
37 |     &__img{
38 |         justify-self: center;
39 |     }
40 |     &__shadow{
41 |         width: 130px;
42 |         height: 24px;
43 |         background-color: hsla(38, 21%, 19%, .16);
44 |         margin: 0 auto;
45 |         border-radius: 50%;
46 |         filter: blur(7px);
47 |         animation: shadow 1.8s infinite alternate;
48 |     }
49 |     &__footer{
50 |         display: flex;
51 |         justify-content: center;
52 |         column-gap: .5rem;
53 |         font-size: var(--smaller-font-size);
54 |         align-self: flex-end;
55 |     }
56 | }
57 | 
58 | /* Animate ghost */
59 | @keyframes floaty{
60 |     0%{
61 |         transform: translateY(0);
62 |     }
63 |     100%{
64 |         transform: translateY(15px);
65 |     }
66 | }
67 | 
68 | @keyframes shadow{
69 |     0%{
70 |         transform: scale(1, 1);
71 |     }
72 |     100%{
73 |         transform: scale(.85, .85);
74 |     }
75 | }


--------------------------------------------------------------------------------
/assets/scss/config/_variables.scss:
--------------------------------------------------------------------------------
 1 | /*=============== GOOGLE FONTS ===============*/
 2 | @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');
 3 | 
 4 | /*=============== VARIABLES CSS ===============*/
 5 | :root{
 6 |     --header-height: 3.5rem;
 7 | 
 8 |     /*========== Colors ==========*/
 9 |     /*Color mode HSL(hue, saturation, lightness)*/
10 |     --first-color: hsl(38, 69%, 59%);
11 |     --text-color: hsl(38, 8%, 8%);
12 | 
13 |     /*========== Font and typography ==========*/
14 |     /*.5rem = 8px | 1rem = 16px ...*/
15 |     --body-font: 'Space Grotesk', sans-serif;
16 | 
17 |     --biggest-font-size: 2.375rem;
18 |     --normal-font-size: .938rem;
19 |     --smaller-font-size: .75rem;
20 | 
21 |     // Responsive typography
22 |     @media screen and (min-width: 1024px){
23 |         --biggest-font-size: 5rem;
24 |         --normal-font-size: 1rem;
25 |         --smaller-font-size: .813rem;
26 |     }
27 | }


--------------------------------------------------------------------------------
/assets/scss/layout/_layout.scss:
--------------------------------------------------------------------------------
 1 | /*=============== REUSABLE CSS CLASSES ===============*/
 2 | .container{
 3 |     max-width: 1024px;
 4 |     margin-left: 1.5rem;
 5 |     margin-right: 1.5rem;
 6 | }
 7 | 
 8 | .main{
 9 |     overflow: hidden; /* For the animations ScrollReveal */
10 | }


--------------------------------------------------------------------------------
/assets/scss/styles.scss:
--------------------------------------------------------------------------------
1 | @import 'config/variables';
2 | @import 'base/base';
3 | @import 'layout/layout';
4 | @import 'components/header';
5 | @import 'components/home';
6 | @import 'components/breakpoints';


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |     <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 
 7 |         <!--=============== BOXICONS ===============-->
 8 |         <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 9 | 
10 |         <!--=============== CSS ===============-->
11 |         <link rel="stylesheet" href="assets/css/styles.css">
12 | 
13 |         <title>Responsive 404 website - Bedimcode</title>
14 |     </head>
15 |     <body>
16 |         <!--==================== HEADER ====================-->
17 |         <header class="header">
18 |             <nav class="nav container">
19 |                 <a href="#" class="nav__logo">
20 |                     XCOMPANY
21 |                 </a>
22 | 
23 |                 <div class="nav__menu" id="nav-menu">
24 |                     <ul class="nav__list">
25 |                         <li class="nav__item">
26 |                             <a href="#" class="nav__link">Home</a>
27 |                         </li>
28 |                         <li class="nav__item">
29 |                             <a href="#" class="nav__link">About</a>
30 |                         </li>
31 |                         <li class="nav__item">
32 |                             <a href="#" class="nav__link">Contact</a>
33 |                         </li>
34 |                     </ul>
35 | 
36 |                     <div class="nav__close" id="nav-close">
37 |                         <i class='bx bx-x'></i>
38 |                     </div>
39 |                 </div>
40 | 
41 |                 <!-- Toggle button -->
42 |                 <div class="nav__toggle" id="nav-toggle">
43 |                     <i class='bx bx-grid-alt'></i>
44 |                 </div>
45 |             </nav>
46 |         </header>
47 | 
48 |         <!--==================== MAIN ====================-->
49 |         <main class="main">
50 |             <!--==================== HOME ====================-->
51 |             <section class="home">
52 |                 <div class="home__container container">
53 |                     <div class="home__data">
54 |                         <span class="home__subtitle">Error 404</span>
55 |                         <h1 class="home__title">Hey Buddy</h1>
56 |                         <p class="home__description">
57 |                             We can't seem to find the page <br> you are looking for.
58 |                         </p>
59 |                         <a href="#" class="home__button">
60 |                             Go Home
61 |                         </a>
62 |                     </div>
63 | 
64 |                     <div class="home__img">
65 |                         <img src="assets/img/ghost-img.png" alt="">
66 |                         <div class="home__shadow"></div>
67 |                     </div>
68 |                 </div>
69 | 
70 |                 <footer class="home__footer">
71 |                     <span>(554) 987-654</span>
72 |                     <span>|</span>
73 |                     <span>info@company.com</span>
74 |                 </footer>
75 |             </section>
76 |         </main>
77 | 
78 |         <!--=============== SCROLLREVEAL ===============-->
79 |         <script src="assets/js/scrollreveal.min.js"></script>
80 | 
81 |         <!--=============== MAIN JS ===============-->
82 |         <script src="assets/js/main.js"></script>
83 |     </body>
84 | </html>


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-404-page/f7dd1ddefd4a2d112733764ed8b4f6de74397a0a/preview.png


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