From fc011d1fb1281e97a8405087cd83cb3bcd0cc7c6 Mon Sep 17 00:00:00 2001 From: Vinyla Date: Mon, 1 Mar 2021 15:50:30 +0100 Subject: [PATCH] errors resolved --- app.js | 77 +++-- index.html | 2 +- style.css | 898 ++++++++++++++++++++++++++++------------------------- 3 files changed, 511 insertions(+), 466 deletions(-) diff --git a/app.js b/app.js index 9fa6102..5006cfe 100644 --- a/app.js +++ b/app.js @@ -4,55 +4,54 @@ const navLogo = document.querySelector('#navbar__logo'); //Display Mobile Menu const mobileMenu = () => { - menu.classList.toggle('is-active'); - menuLinks.classList.toggle('active'); -} + menu.classList.toggle('is-active'); + menuLinks.classList.toggle('active'); +}; menu.addEventListener('click', mobileMenu); //Show active menu when scrolling const highlightMenu = () => { - const elem = document.querySelector('.highlight') - const homeMenu = document.querySelector('#home-page') - const aboutMenu = document.querySelector('#about-page') - const knowledgeMenu = document.querySelector('#knowledge-page') - let scrollPos = window.scrollY - // console.log(scrollPos); - - //adds 'highlight' class to my menu items - - if(window.innerWidth > 960 && scrollPos < 600) { - homeMenu.classList.add('highlight') - aboutMenu.classList.remove('highlight') - return - } else if (window.innerWidth > 960 && scrollPos < 1400) { - aboutMenu.classList.add('highlight') - homeMenu.classList.remove('highlight') - knowledgeMenu.classList.remove('highlight') - return - } else if (window.innerWidth > 960 && scrollPos < 2345) { - aboutMenu.classList.remove('highlight') - knowledgeMenu.classList.add('highlight') - return - } - if((elem && window.innerWidth < 960 && scrollPos < 600) || elem ) { - elem.classList.remove('highlight') - } -} - window.addEventListener('scroll', highlightMenu); - window.addEventListener('click', highlightMenu); + const elem = document.querySelector('.highlight'); + const homeMenu = document.querySelector('#home-page'); + const aboutMenu = document.querySelector('#about-page'); + const knowledgeMenu = document.querySelector('#knowledge-page'); + let scrollPos = window.scrollY; + // console.log(scrollPos); + + //adds 'highlight' class to my menu items + + if (window.innerWidth > 960 && scrollPos < 600) { + homeMenu.classList.add('highlight'); + aboutMenu.classList.remove('highlight'); + return; + } else if (window.innerWidth > 960 && scrollPos < 1400) { + aboutMenu.classList.add('highlight'); + homeMenu.classList.remove('highlight'); + knowledgeMenu.classList.remove('highlight'); + return; + } else if (window.innerWidth > 960 && scrollPos < 2345) { + aboutMenu.classList.remove('highlight'); + knowledgeMenu.classList.add('highlight'); + return; + } + if ((elem && window.innerWidth < 960 && scrollPos < 600) || elem) { + elem.classList.remove('highlight'); + } +}; +window.addEventListener('scroll', highlightMenu); +window.addEventListener('click', highlightMenu); //Close mobile menu on click const hideMobileMenu = () => { - const menuBars = document.querySelector('.is-active') - if(window.innerWidth <= 768 && menuBars) { - menu.classList.toggle('is-active') - menuLinks.classList.remove('active') - } -} + const menuBars = document.querySelector('.is-active'); + if (window.innerWidth <= 768 && menuBars) { + menu.classList.toggle('is-active'); + menuLinks.classList.remove('active'); + } +}; menuLinks.addEventListener('click', hideMobileMenu); navLogo.addEventListener('click', hideMobileMenu); - diff --git a/index.html b/index.html index dbe3392..ed4059d 100644 --- a/index.html +++ b/index.html @@ -102,7 +102,7 @@

React

- + diff --git a/style.css b/style.css index c42bbff..2e5834c 100644 --- a/style.css +++ b/style.css @@ -1,223 +1,236 @@ * { - box-sizing: border-box; - margin: 0; - padding: 0; - font-family: 'Roboto', sans-serif; - scroll-behavior: smooth; + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + scroll-behavior: smooth; } /*Navigation menu*/ .navbar { - background: #131313; - height: 80px; - display: flex; - justify-content: center; - align-items: center; - font-size: 1.2rem; - position: sticky; - top: 0; - z-index: 999; + background: #131313; + height: 80px; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.2rem; + position: sticky; + top: 0; + z-index: 999; } .navbar__container { - display: flex; - justify-content: space-between; - height: 80px; - z-index: 1; - width: 100%; - max-width: 1300px; - margin: 0 auto; - padding: 0 50px; + display: flex; + justify-content: space-between; + height: 80px; + z-index: 1; + width: 100%; + max-width: 1300px; + margin: 0 auto; + padding: 0 50px; } #navbar__logo { - background: rgb(70,159,88); - background: linear-gradient(90deg, rgba(70,159,88,1) 15%, rgba(15,115,138,1) 49%, rgba(5,168,201,1) 100%); - background-size: 100%; - -webkit-background-clip: text; - -moz-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-text-fill-color: transparent; - display: flex; - align-items: center; - cursor: pointer; - text-decoration: none; - font-size: 2rem; - font-weight: 700; + background: rgb(70, 159, 88); + background: linear-gradient( + 90deg, + rgba(70, 159, 88, 1) 15%, + rgba(15, 115, 138, 1) 49%, + rgba(5, 168, 201, 1) 100% + ); + background-size: 100%; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; + font-size: 2rem; + font-weight: 700; } .navbar__menu { - display: flex; - align-items: center; - list-style: none; + display: flex; + align-items: center; + list-style: none; } .navbar__item { - height: 80px; + height: 80px; } .navbar__links { - color: #fff; - display: flex; - align-items: center; - justify-content: center; - width: 125px; - text-decoration: none; - height: 100%; - + color: #fff; + display: flex; + align-items: center; + justify-content: center; + width: 125px; + text-decoration: none; + height: 100%; } .navbar__btn { - display: flex; - justify-content: center; - align-items: center; - padding: 1rem; - width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 1rem; + width: 100%; } .button { - display: flex; - justify-content: center; - align-items: center; - text-decoration: none; - padding: 10px 20px; - height: 100%; - width: 100%; - border: none; - outline: none; - border-radius: 4px; - background: rgb(70,159,88); - background: linear-gradient(90deg, rgba(70,159,88,1) 15%, rgba(15,115,138,1) 49%, rgba(5,168,201,1) 100%); - color: #fff; - transition: all 0.3s ease; + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + padding: 10px 20px; + height: 100%; + width: 100%; + border: none; + outline: none; + border-radius: 4px; + background: rgb(70, 159, 88); + background: linear-gradient( + 90deg, + rgba(70, 159, 88, 1) 15%, + rgba(15, 115, 138, 1) 49%, + rgba(5, 168, 201, 1) 100% + ); + color: #fff; + transition: all 0.3s ease; } .navbar__links:hover { - color: #11998e; - transition: all 0.3s ease; + color: #11998e; + transition: all 0.3s ease; } .highlight { - border-bottom: 4px solid rgb(70,159,88); + border-bottom: 4px solid rgb(70, 159, 88); } /*Toggle mobile menu*/ @media screen and (max-width: 960px) { - .navbar__container { - display: flex; - justify-content: space-between; - height: 80px; - z-index: 1; - width: 100%; - max-width: 1300px; - padding: 0; - } - .navbar__menu { - display: grid; - grid-template-columns: auto; - margin: 0; - width: 100%; - position: absolute; - top: -1000px; - opacity: 1; - transition: all 0.5s ease; - z-index: -1; - /* background: #131313; */ - } - .navbar__menu.active { - background: #131313; - top: 100%; - opacity: 1; - transition: all 0.5s ease; - z-index: 99; - height: 60vh; - font-size: 1.6rem; - } - #navbar__logo { - padding-left: 25px; - } - .navbar__toggle .bar { - width: 25px; - height: 3px; - margin: 5px auto; - transition: all 0.3s ease-in-out; - background: #fff; - } - .navbar__item { - width: 100%; - } - .navbar__links { - text-align: center; - padding: 2rem; - width: 100%; - display: table; - } - .navbar__btn { - padding-bottom: 2rem; - } - .button { - display: flex; - justify-content: center; - align-items: center; - width: 40%; - height: 60px; - margin: 0; - } - #mobile-menu { - position: absolute; - top: 20%; - right: 5%; - transform: translate(5%, 20%); - } - .navbar__toggle .bar { - display: block; - cursor: pointer; - } - #mobile-menu.is-active .bar:nth-child(2) { - opacity: 0; - } - #mobile-menu.is-active .bar:nth-child(1) { - transform: translateY(-8px) rotate(-45deg); - } + .navbar__container { + display: flex; + justify-content: space-between; + height: 80px; + z-index: 1; + width: 100%; + max-width: 1300px; + padding: 0; + } + .navbar__menu { + display: grid; + grid-template-columns: auto; + margin: 0; + width: 100%; + position: absolute; + top: -1000px; + opacity: 1; + transition: all 0.5s ease; + z-index: -1; + /* background: #131313; */ + } + .navbar__menu.active { + background: #131313; + top: 100%; + opacity: 1; + transition: all 0.5s ease; + z-index: 99; + height: 60vh; + font-size: 1.6rem; + } + #navbar__logo { + padding-left: 25px; + } + .navbar__toggle .bar { + width: 25px; + height: 3px; + margin: 5px auto; + transition: all 0.3s ease-in-out; + background: #fff; + } + .navbar__item { + width: 100%; + } + .navbar__links { + text-align: center; + padding: 2rem; + width: 100%; + display: table; + } + .navbar__btn { + padding-bottom: 2rem; + } + .button { + display: flex; + justify-content: center; + align-items: center; + width: 40%; + height: 60px; + margin: 0; + } + #mobile-menu { + position: absolute; + top: 20%; + right: 5%; + transform: translate(5%, 20%); + } + .navbar__toggle .bar { + display: block; + cursor: pointer; + } + #mobile-menu.is-active .bar:nth-child(2) { + opacity: 0; + } + #mobile-menu.is-active .bar:nth-child(1) { + transform: translateY(-8px) rotate(-45deg); + } } - /*First section*/ .first__section { - background: #131313; - background: linear-gradient(to right, #161616, #000000); - padding: 200px 0; + background: #131313; + background: linear-gradient(to right, #161616, #000000); + padding: 200px 0; } .first__container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - max-width: 1200px; - margin: 0 auto; - height: 90%; - text-align: center; - padding: 30px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + max-width: 1200px; + margin: 0 auto; + height: 90%; + text-align: center; + padding: 30px; } .first__heading { - font-size: 100px; - margin-bottom: 24px; - color: #fff; + font-size: 100px; + margin-bottom: 24px; + color: #fff; } .first__heading span { - background: rgb(70,159,88); - background: linear-gradient(90deg, rgba(70,159,88,1) 15%, rgba(15,115,138,1) 49%, rgba(5,168,201,1) 100%); - background-size: 100%; - -webkit-background-clip: text; - -moz-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-text-fill-color: transparent; + background: rgb(70, 159, 88); + background: linear-gradient( + 90deg, + rgba(70, 159, 88, 1) 15%, + rgba(15, 115, 138, 1) 49%, + rgba(5, 168, 201, 1) 100% + ); + background-size: 100%; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; } .first__description { - font-size: 60px; - color: #fff; + font-size: 60px; + color: #fff; } /* .highlight { @@ -225,347 +238,380 @@ } */ /*First section media screen*/ -@media screen and max-width (max-width: 768px) { - .first__heading { - font-size: 60px; - } - first__description { - font-size: 40px; - } +@media screen and (max-width: 768px) { + .first__heading { + font-size: 60px; + } + first__description { + font-size: 40px; + } } /*About section*/ .main { - background: #131313; - background: linear-gradient(to right, #161616, #000000); - padding: 10rem 0; + background: #131313; + background: linear-gradient(to right, #161616, #000000); + padding: 10rem 0; } .main__container { - display: grid; - grid-template-columns: 1fr 1fr; - align-items: center; - justify-content: center; - margin: 0 auto; - height: 90%; - z-index: 1; - width: 100%; - max-width: 1300px; - padding: 0 50px; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-content: center; + margin: 0 auto; + height: 90%; + z-index: 1; + width: 100%; + max-width: 1300px; + padding: 0 50px; } .main__content { - color: #fff; - width: 100%; + color: #fff; + width: 100%; } .main__content h1 { - font-size: 2rem; - color: #fff; - text-transform: uppercase; - margin-bottom: 32px; + font-size: 2rem; + color: #fff; + text-transform: uppercase; + margin-bottom: 32px; } .main__content h2 { - font-size: 4rem; - background: rgb(70,159,88); - background: linear-gradient(90deg, rgba(70,159,88,1) 15%, rgba(15,115,138,1) 49%, rgba(5,168,201,1) 100%); - background-size: 100%; - -webkit-background-clip: text; - -moz-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-text-fill-color: transparent; + font-size: 4rem; + background: rgb(70, 159, 88); + background: linear-gradient( + 90deg, + rgba(70, 159, 88, 1) 15%, + rgba(15, 115, 138, 1) 49%, + rgba(5, 168, 201, 1) 100% + ); + background-size: 100%; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; } .main__content p { - margin-top: 1rem; - font-size: 2rem; - font-weight: 700; + margin-top: 1rem; + font-size: 2rem; + font-weight: 700; } .main__btn { - font-size: 1.8rem; - background: rgb(70,159,88); - background: linear-gradient(90deg, rgba(70,159,88,1) 15%, rgba(15,115,138,1) 49%, rgba(5,168,201,1) 100%); padding: 20px 40px; - padding: 20px 60px; - border: none; - border-radius: 4px; - margin-top: 2rem; - cursor: pointer; - position: relative; - transition: all 0.35s; - outline: none; + font-size: 1.8rem; + background: rgb(70, 159, 88); + background: linear-gradient( + 90deg, + rgba(70, 159, 88, 1) 15%, + rgba(15, 115, 138, 1) 49%, + rgba(5, 168, 201, 1) 100% + ); + padding: 20px 40px; + padding: 20px 60px; + border: none; + border-radius: 4px; + margin-top: 2rem; + cursor: pointer; + position: relative; + transition: all 0.35s; + outline: none; } .main__btn a { - position: relative; - z-index: 2; - color: #fff; - text-decoration: none; + position: relative; + z-index: 2; + color: #fff; + text-decoration: none; } .main__btn:after { - position: absolute; - content: ''; - top: 0; - left: 0; - width: 0; - height: 100%; - background: rgb(70,159,88); - transition: all 0.35s; - border-radius: 4px; + position: absolute; + content: ''; + top: 0; + left: 0; + width: 0; + height: 100%; + background: rgb(70, 159, 88); + transition: all 0.35s; + border-radius: 4px; } .main__btn:hover { - color: #fff; + color: #fff; } .main__btn:hover:after { - width: 100%; + width: 100%; } .img__container { - text-align: center; + text-align: center; } .img__card { - margin: 10px; - height: 500px; - width: 500px; - border-radius: 4px; - display: flex; - flex-direction: column; - justify-content: center; - color: #fff; - background: rgb(70,159,88); - background-image: linear-gradient(90deg, rgba(70,159,88,1) 15%, rgba(15,115,138,1) 49%, rgba(5,168,201,1) 100%); + margin: 10px; + height: 500px; + width: 500px; + border-radius: 4px; + display: flex; + flex-direction: column; + justify-content: center; + color: #fff; + background: rgb(70, 159, 88); + background-image: linear-gradient( + 90deg, + rgba(70, 159, 88, 1) 15%, + rgba(15, 115, 138, 1) 49%, + rgba(5, 168, 201, 1) 100% + ); } .fa-cat { - font-size: 14rem; + font-size: 14rem; } /*Mobile Responsive*/ @media screen and (max-width: 1100px) { - .main__container{ - display: grid; - grid-template-columns: 1fr; - align-items: center; - justify-content: center; - width: 100%; - margin: 0 auto; - height: 90%; - } - .img__container{ - display: flex; - justify-content: center; - } - .img__card { - height: 425px; - width: 425px; - } - .main__content { - text-align: center; - margin-bottom: 4rem; - } - .main__content h1{ - font-size: 2.5rem; - margin-top: 2rem; - } - .main__content h2 { - font-size: 3rem; - } - .main__content p { - margin-top: 1rem; - font-size: 1.5rem; - } - } - - @media screen and (max-width: 480px) { - .img__card { - height: 255px; - width: 250px; - } - .fa-cat { - font-size: 4rem; - } - .main__content h1 { - font-size: 2rem; - margin-top: 3rem; - } - .main__content h2 { - font-size: 3rem; - } - .main__content p { - margin-top: 2rem; - } - .main__btn { - padding: 12px 36px; - margin: 2.5rem 0; - } - } - - /*Knowledge Section*/ - -.knowledge { - background: #131313; - background: linear-gradient(to right, #161616, #000000); + .main__container { + display: grid; + grid-template-columns: 1fr; + align-items: center; + justify-content: center; + width: 100%; + margin: 0 auto; + height: 90%; + } + .img__container { display: flex; - flex-direction: column; justify-content: center; - align-items: center; - height: 100%; - padding: 10rem 0; + } + .img__card { + height: 425px; + width: 425px; + } + .main__content { + text-align: center; + margin-bottom: 4rem; + } + .main__content h1 { + font-size: 2.5rem; + margin-top: 2rem; + } + .main__content h2 { + font-size: 3rem; + } + .main__content p { + margin-top: 1rem; + font-size: 1.5rem; + } +} + +@media screen and (max-width: 480px) { + .img__card { + height: 255px; + width: 250px; + } + .fa-cat { + font-size: 4rem; + } + .main__content h1 { + font-size: 2rem; + margin-top: 3rem; + } + .main__content h2 { + font-size: 3rem; + } + .main__content p { + margin-top: 2rem; + } + .main__btn { + padding: 12px 36px; + margin: 2.5rem 0; + } +} + +/*Knowledge Section*/ + +.knowledge { + background: #131313; + background: linear-gradient(to right, #161616, #000000); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + padding: 10rem 0; } .knowledge h1 { - background: rgb(70,159,88); - background: linear-gradient(90deg, rgba(70,159,88,1) 15%, rgba(15,115,138,1) 49%, rgba(5,168,201,1) 100%); - background-size: 100%; - -webkit-background-clip: text; - -moz-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-text-fill-color: transparent; - margin-bottom: 5rem; - font-size: 2.5rem; + background: rgb(70, 159, 88); + background: linear-gradient( + 90deg, + rgba(70, 159, 88, 1) 15%, + rgba(15, 115, 138, 1) 49%, + rgba(5, 168, 201, 1) 100% + ); + background-size: 100%; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; + margin-bottom: 5rem; + font-size: 2.5rem; } - + .knowledge__wrapper { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr; } .knowledge__card { - margin: 10px; - height: 400px; - width: 300px; - border-radius: 4px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - color: #fff; - background: rgb(20,127,149); - background: radial-gradient(circle, rgba(20,127,149,1) 28%, rgba(64,156,82,1) 100%); + margin: 10px; + height: 400px; + width: 300px; + border-radius: 4px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: #fff; + background: rgb(20, 127, 149); + background: radial-gradient( + circle, + rgba(20, 127, 149, 1) 28%, + rgba(64, 156, 82, 1) 100% + ); } .knowledge__card:nth-of-type(odd) { - background: rgb(64,156,82); - background: radial-gradient(circle, rgba(64,156,82,1) 22%, rgba(20,127,149,1) 100%); + background: rgb(64, 156, 82); + background: radial-gradient( + circle, + rgba(64, 156, 82, 1) 22%, + rgba(20, 127, 149, 1) 100% + ); } .knowledge__card h2 { - font-size: 2rem; + font-size: 2rem; } .knowledge__card p { - margin-top: 10px; - font-size: 1.2rem; - color: #131313; + margin-top: 10px; + font-size: 1.2rem; + color: #131313; } .knowledge__btn { - display: flex; - justify-content: center; - margin-top: 15px; + display: flex; + justify-content: center; + margin-top: 15px; } .knowledge__card button { - color: #fff; - padding: 14px 24px; - border: none; - outline: none; - border-radius: 4px; - background-color: #131313; - font-size: 1rem; + color: #fff; + padding: 14px 24px; + border: none; + outline: none; + border-radius: 4px; + background-color: #131313; + font-size: 1rem; } .knowledge__card button:hover { - cursor: pointer; + cursor: pointer; } .knowledge__card:hover { - transform: scale(1.075); - transition: 0.3s ease-in; - cursor: pointer; + transform: scale(1.075); + transition: 0.3s ease-in; + cursor: pointer; } - + /*Media screen responsive*/ @media screen and (max-width: 1300px) { - .knowledge__wrapper { - grid-template-columns: 1fr 1fr; - } + .knowledge__wrapper { + grid-template-columns: 1fr 1fr; + } } - + @media screen and (max-width: 768px) { - .knowledge__wrapper { - grid-template-columns: 1fr; - } + .knowledge__wrapper { + grid-template-columns: 1fr; + } } - + /*Footer*/ .footer__container { - background-color: #131313; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 0.5rem 0; -} - #footer__logo { - background: rgb(70,159,88); - background: linear-gradient(90deg, rgba(70,159,88,1) 15%, rgba(15,115,138,1) 49%, rgba(5,168,201,1) 100%); - background-size: 100%; - -webkit-background-clip: text; - -moz-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-text-fill-color: transparent; - display: flex; - align-items: center; - cursor: pointer; - text-decoration: none; - font-size: 2rem; - } - - .social__media { - max-width: 1000px; - width: 100%; - } - .media__wrapper { - display: flex; - justify-content: space-between; - align-items: center; - width: 90%; - max-width: 1000px; - color: #fff; -} - .social__link { - color: #fff; - font-size: 24px; - } - .social__icons { - display: flex; - justify-content: space-between; - align-items: center; - width: 240px; - } + background-color: #131313; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0.5rem 0; +} +#footer__logo { + background: rgb(70, 159, 88); + background: linear-gradient( + 90deg, + rgba(70, 159, 88, 1) 15%, + rgba(15, 115, 138, 1) 49%, + rgba(5, 168, 201, 1) 100% + ); + background-size: 100%; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; + font-size: 2rem; +} + +.social__media { + max-width: 1000px; + width: 100%; +} +.media__wrapper { + display: flex; + justify-content: space-between; + align-items: center; + width: 90%; + max-width: 1000px; + color: #fff; +} +.social__link { + color: #fff; + font-size: 24px; +} +.social__icons { + display: flex; + justify-content: space-between; + align-items: center; + width: 240px; +} @media screen and (max-width: 820px) { - #footer__logo { - margin-bottom: 1rem; - } - .media__wrapper { - flex-direction: column; - } - .social__icons { - margin-top: 1rem; - } - + #footer__logo { + margin-bottom: 1rem; + } + .media__wrapper { + flex-direction: column; + } + .social__icons { + margin-top: 1rem; + } } @media screen and (max-width: 480px) { - .media__wrapper { - width: 100%; - } - .social__icons { - font-size: 12px; - } -} \ No newline at end of file + .media__wrapper { + width: 100%; + } + .social__icons { + font-size: 12px; + } +}