diff --git a/100_projects/85-responsive-404-page-not-found/assets/css/styles.css b/100_projects/85-responsive-404-page-not-found/assets/css/styles.css new file mode 100644 index 0000000..cf2d2ce --- /dev/null +++ b/100_projects/85-responsive-404-page-not-found/assets/css/styles.css @@ -0,0 +1,241 @@ +/*=============== GOOGLE FONTS ===============*/ +@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap"); +:root { + --header-height: 3.5rem; + --first-color: #d5cabd; + --text-color: #2f4858; + --body-font: 'Space Grotesk', sans-serif; + --biggest-font-size: 2.375rem; + --normal-font-size: .938rem; + --smaller-font-size: .75rem; +} +@media screen and (min-width: 1024px) { + :root { + --biggest-font-size: 5rem; + --normal-font-size: 1rem; + --smaller-font-size: .813rem; + } +} +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} +body { + font-family: var(--body-font); + font-size: var(--normal-font-size); + font-weight: 500; + color: var(--text-color); +} +ul { + list-style: none; +} +a { + text-decoration: none; +} +img { + max-width: 100%; + height: auto; +} +.container { + max-width: 1024px; + margin-left: 1.5rem; + margin-right: 1.5rem; +} +.main { + overflow: hidden; /* For the animations ScrollReveal */ +} +.header { + position: fixed; + width: 100%; + background-color: transparent; + top: 0; + left: 0; + z-index: 100; +} +.nav { + height: var(--header-height); + display: flex; + justify-content: space-between; + align-items: center; +} +.nav__logo, +.nav__toggle { + color: var(--text-color); + display: inline-flex; +} +.nav__logo { + font-weight: 700; + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + font-size: 21px; + transition: .3s; +} +.nav__logo:hover{ + color:#fff; +} +.nav__toggle { + font-size: 1.25rem; + cursor: pointer; +} +@media screen and (max-width: 767px) { + .nav__menu { + position: fixed; + background-color: var(--first-color); + left: 0; + top: -100%; + width: 100%; + padding: 5rem 0 4rem; + border-radius: 0 0 1.5rem 1.5rem; + box-shadow: 0 2px 4px hsla(38, 4%, 15%, .15); + transition: .4s; + } +} +.nav__list { + text-align: center; + display: flex; + flex-direction: column; + row-gap: 2rem; +} +.nav__link { + color: var(--text-color); +} +.nav__close { + position: absolute; + top: 1rem; + right: 1.5rem; + font-size: 1.5rem; + color: var(--text-color); + cursor: pointer; +} +.show-menu { + top: 0; +} +.home { + background-color: var(--first-color); + padding: 9rem 0 2rem; + height: 100vh; + display: grid; +} +.home__container { + display: grid; + align-content: center; + row-gap: 2.5rem; +} +.home__data { + text-align: center; +} +.home__title { + font-size: var(--biggest-font-size); + margin: .75rem 0; +} +.home__button { + margin-top: 2rem; + display: inline-block; + background-color: var(--text-color); + color: #fff; + padding: .80rem 1.5rem; + border-radius: 3rem; + transition: .4s; +} +.home__button:hover { + box-shadow: 0 4px 12px hsla(38, 69%, 8%, .2); +} +.home__img img { + width: 230px; + animation: floaty 1.8s infinite alternate; +} +.home__img { + justify-self: center; +} +.home__shadow { + width: 130px; + height: 24px; + background-color: hsla(38, 21%, 19%, .16); + margin: 0 auto; + border-radius: 50%; + filter: blur(7px); + animation: shadow 1.8s infinite alternate; +} +.home__footer { + display: flex; + justify-content: center; + column-gap: .5rem; + font-size: var(--smaller-font-size); + align-self: flex-end; +} +@keyframes floaty { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(15px); + } +} + +@keyframes shadow { + 0% { + transform: scale(1, 1); + } + 100% { + transform: scale(.85, .85); + } +} +@media screen and (max-width: 320px) { + .home { + padding-top: 7rem; + } +} +@media screen and (min-width: 767px) { + .nav { + height: calc(var(--header-height) + 1.5rem); + } + .nav__toggle, + .nav__close { + display: none; + } + .nav__list { + flex-direction: row; + column-gap: 3.5rem; + } +} +@media screen and (min-width: 1024px) { + .home__container { + grid-template-columns: repeat(2, 1fr); + align-items: center; + column-gap: 2rem; + } + .home__data { + text-align: initial; + } + .home__img img { + width: 400px; + } + .home__shadow { + width: 250px; + height: 40px; + } +} +@media screen and (min-width: 1048px) { + .container { + margin-left: auto; + margin-right: auto; + } +} +@media screen and (min-width: 2048px) { + body { + zoom: 1.7; + } + + .home { + height: initial; + row-gap: 4rem; + } +} +@media screen and (min-width: 3840px) { + body { + zoom: 3.1; + } +} \ No newline at end of file diff --git a/100_projects/85-responsive-404-page-not-found/assets/img/ghost-img.png b/100_projects/85-responsive-404-page-not-found/assets/img/ghost-img.png new file mode 100644 index 0000000..1261dc1 Binary files /dev/null and b/100_projects/85-responsive-404-page-not-found/assets/img/ghost-img.png differ diff --git a/100_projects/85-responsive-404-page-not-found/assets/js/main.js b/100_projects/85-responsive-404-page-not-found/assets/js/main.js new file mode 100644 index 0000000..e968e49 --- /dev/null +++ b/100_projects/85-responsive-404-page-not-found/assets/js/main.js @@ -0,0 +1,37 @@ +/*=============== SHOW MENU ===============*/ +const navMenu = document.getElementById('nav-menu'), + navToggle = document.getElementById('nav-toggle'), + navClose = document.getElementById('nav-close') + +/*MENU SHOW*/ +if(navToggle){ + navToggle.addEventListener('click', () =>{ + navMenu.classList.add('show-menu') + }) +} + +/*MENU HIDDEN */ +if(navClose){ + navClose.addEventListener('click', () =>{ + navMenu.classList.remove('show-menu') + }) +} + +/*REMOVE MENU MOBILE*/ +const navLink = document.querySelectorAll('.nav__link') + +function linkAction(){ + const navMenu = document.getElementById('nav-menu') + // When we click on each nav__link, we remove the show-menu class + navMenu.classList.remove('show-menu') +} +navLink.forEach(n => n.addEventListener('click', linkAction)) + +/*SCROLL REVEAL ANIMATION*/ +const sr = ScrollReveal({ + distance: '90px', + duration: 3000, +}) +sr.reveal(`.home__data`, {origin: 'top', delay: 400}) +sr.reveal(`.home__img`, {origin: 'bottom', delay: 600}) +sr.reveal(`.home__footer`, {origin: 'bottom', delay: 800}) \ No newline at end of file diff --git a/100_projects/85-responsive-404-page-not-found/assets/js/scrollreveal.min.js b/100_projects/85-responsive-404-page-not-found/assets/js/scrollreveal.min.js new file mode 100644 index 0000000..5428bbd --- /dev/null +++ b/100_projects/85-responsive-404-page-not-found/assets/js/scrollreveal.min.js @@ -0,0 +1,12 @@ +/*! @license ScrollReveal v4.0.9 + + Copyright 2021 Fisssion LLC. + + Licensed under the GNU General Public License 3.0 for + compatible open source projects and non-commercial use. + + For commercial sites, themes, projects, and applications, + keep your source code private/proprietary by purchasing + a commercial license from https://scrollrevealjs.org/ +*/ +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=[].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 + + + + + + + Document + + +
+ +
+
+
+
+
+ Error 404 +

Hey Buddy

+

+ We can't seem to find the page
you are looking for. +

+ + Go Home + +
+ +
+ +
+
+
+
+ (554) 987-654 + | + info@company.com +
+
+
+ + + + \ No newline at end of file