[ { "path": ".vscode/settings.json", "content": "{\n \"liveServer.settings.port\": 5501\n}" }, { "path": "README.md", "content": "Simple website created using HTML, CSS & Javascript with smooth scroll effect\n\nWatch the full tutorial on how I built this website on my Youtube @Brian Design https://youtu.be/3-2Pj5hxwrw\n\n" }, { "path": "app.js", "content": "const menu = document.querySelector('#mobile-menu');\nconst menuLinks = document.querySelector('.navbar__menu');\nconst navLogo = document.querySelector('#navbar__logo');\n\n// Display Mobile Menu\nconst mobileMenu = () => {\n menu.classList.toggle('is-active');\n menuLinks.classList.toggle('active');\n};\n\nmenu.addEventListener('click', mobileMenu);\n\n// Show active menu when scrolling\nconst highlightMenu = () => {\n const elem = document.querySelector('.highlight');\n const homeMenu = document.querySelector('#home-page');\n const aboutMenu = document.querySelector('#about-page');\n const servicesMenu = document.querySelector('#services-page');\n let scrollPos = window.scrollY;\n // console.log(scrollPos);\n\n // adds 'highlight' class to my menu items\n if (window.innerWidth > 960 && scrollPos < 600) {\n homeMenu.classList.add('highlight');\n aboutMenu.classList.remove('highlight');\n return;\n } else if (window.innerWidth > 960 && scrollPos < 1400) {\n aboutMenu.classList.add('highlight');\n homeMenu.classList.remove('highlight');\n servicesMenu.classList.remove('highlight');\n return;\n } else if (window.innerWidth > 960 && scrollPos < 2345) {\n servicesMenu.classList.add('highlight');\n aboutMenu.classList.remove('highlight');\n return;\n }\n\n if ((elem && window.innerWIdth < 960 && scrollPos < 600) || elem) {\n elem.classList.remove('highlight');\n }\n};\n\nwindow.addEventListener('scroll', highlightMenu);\nwindow.addEventListener('click', highlightMenu);\n\n// Close mobile Menu when clicking on a menu item\nconst hideMobileMenu = () => {\n const menuBars = document.querySelector('.is-active');\n if (window.innerWidth <= 768 && menuBars) {\n menu.classList.toggle('is-active');\n menuLinks.classList.remove('active');\n }\n};\n\nmenuLinks.addEventListener('click', hideMobileMenu);\nnavLogo.addEventListener('click', hideMobileMenu);\n" }, { "path": "index.html", "content": "\n\n \n \n \n Scroll Website\n \n \n \n \n \n \n\n \n
\n
\n

Choose your colors

\n

Unlimited Possibilities

\n \n
\n
\n\n \n
\n
\n
\n
\n
\n
\n

What do we do?

\n

We help businesses scale

\n

Schedule a call to learn more about our services

\n \n
\n
\n
\n\n \n
\n

Our Services

\n
\n
\n

Custom Colorways

\n

AI Powered technology

\n
\n
\n
\n

Are you Ready?

\n

Take the lepa

\n
\n
\n
\n

Full Gradients

\n

100 Combinations

\n
\n
\n
\n

Infinite Choices

\n

1000's of colors

\n
\n
\n
\n
\n\n \n
\n
\n
\n

Join Our Team

\n

Sign Up Today

\n

See what makes us different

\n \n
\n
\n
\n \n
\n
\n
\n
\n\n \n
\n
\n
\n
\n

About Us

\n How it works Testimonials\n Careers Terms of Service\n
\n
\n

Contact Us

\n Contact Support\n Destinations\n
\n
\n
\n
\n

Videos

\n Submit Video Ambassadors\n Agency\n
\n
\n

Social Media

\n Instagram Facebook\n Youtube Twitter\n
\n
\n
\n
\n
\n
\n COLOR\n
\n

© COLOR 2020. All rights reserved

\n
\n \n \n \n \n \n
\n
\n
\n
\n\n \n \n\n" }, { "path": "styles.css", "content": "* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Kumbh Sans', sans-serif;\n scroll-behavior: smooth;\n}\n\n.navbar {\n background: #131313;\n height: 80px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 1.2rem;\n position: sticky;\n top: 0;\n z-index: 999;\n}\n\n.navbar__container {\n display: flex;\n justify-content: space-between;\n height: 80px;\n z-index: 1;\n width: 100%;\n max-width: 1300px;\n margin: 0 auto;\n padding: 0 50px;\n}\n\n#navbar__logo {\n background-color: #ff8177;\n background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);\n background-size: 100%;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n font-size: 2rem;\n}\n\n.navbar__menu {\n display: flex;\n align-items: center;\n list-style: none;\n}\n\n.navbar__item {\n height: 80px;\n}\n\n.navbar__links {\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 125px;\n text-decoration: none;\n height: 100%;\n transition: all 0.3s ease;\n}\n\n.navbar__btn {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0 1rem;\n width: 100%;\n}\n\n.button {\n display: flex;\n justify-content: center;\n align-items: center;\n text-decoration: none;\n padding: 10px 20px;\n height: 100%;\n width: 100%;\n border: none;\n outline: none;\n border-radius: 4px;\n background: #833ab4;\n background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);\n background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);\n color: #fff;\n transition: all 0.3s ease;\n}\n\n.navbar__links:hover {\n color: #9518fc;\n transition: all 0.3s ease;\n}\n\n@media screen and (max-width: 960px) {\n .navbar__container {\n display: flex;\n justify-content: space-between;\n height: 80px;\n z-index: 1;\n width: 100%;\n max-width: 1300px;\n padding: 0;\n }\n\n .navbar__menu {\n display: grid;\n grid-template-columns: auto;\n margin: 0;\n width: 100%;\n position: absolute;\n top: -1000px;\n opacity: 1;\n transition: all 0.5s ease;\n z-index: -1;\n }\n\n .navbar__menu.active {\n background: #131313;\n top: 100%;\n opacity: 1;\n transition: all 0.5s ease;\n z-index: 99;\n height: 60vh;\n font-size: 1.6rem;\n }\n\n #navbar__logo {\n padding-left: 25px;\n }\n\n .navbar__toggle .bar {\n width: 25px;\n height: 3px;\n margin: 5px auto;\n transition: all 0.3s ease-in-out;\n background: #fff;\n }\n\n .navbar__item {\n width: 100%;\n }\n\n .navbar__links {\n text-align: center;\n padding: 2rem;\n width: 100%;\n display: table;\n }\n\n .navbar__btn {\n padding-bottom: 2rem;\n }\n\n .button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80%;\n height: 80px;\n margin: 0;\n }\n\n #mobile-menu {\n position: absolute;\n top: 20%;\n right: 5%;\n transform: translate(5%, 20%);\n }\n\n .navbar__toggle .bar {\n display: block;\n cursor: pointer;\n }\n\n #mobile-menu.is-active .bar:nth-child(2) {\n opacity: 0;\n }\n\n #mobile-menu.is-active .bar:nth-child(1) {\n transform: translateY(8px) rotate(45deg);\n }\n\n #mobile-menu.is-active .bar:nth-child(3) {\n transform: translateY(-8px) rotate(-45deg);\n }\n}\n\n/* Hero Section */\n.hero {\n background: #000000;\n background: linear-gradient(to right, #161616, #000000);\n padding: 200px 0;\n}\n\n.hero__container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n height: 90%;\n text-align: center;\n padding: 30px;\n}\n\n.hero__heading {\n font-size: 100px;\n margin-bottom: 24px;\n color: #fff;\n}\n\n.hero__heading span {\n background: #ee0979; /* fallback for old browsers */\n background: -webkit-linear-gradient(\n to right,\n #ff6a00,\n #ee0979\n ); /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(\n to right,\n #ff6a00,\n #ee0979\n ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n background-size: 100%;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -mo-text-fill-color: transparent;\n}\n\n.hero__description {\n font-size: 60px;\n background: #da22ff; /* fallback for old browsers */\n background: -webkit-linear-gradient(\n to right,\n #9114ff,\n #da22ff\n ); /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(\n to right,\n #8f0eff,\n #da22ff\n ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n background-size: 100%;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n}\n\n.highlight {\n border-bottom: 4px solid rgb(132, 0, 255);\n}\n\n@media screen and (max-width: 768px) {\n .hero__heading {\n font-size: 60px;\n }\n\n .hero__description {\n font-size: 40px;\n }\n}\n\n/* About Section */\n.main {\n background-color: #131313;\n padding: 10rem 0;\n}\n\n.main__container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n height: 90%;\n z-index: 1;\n width: 100%;\n max-width: 1300px;\n padding: 0 50px;\n}\n\n.main__content {\n color: #fff;\n width: 100%;\n}\n\n.main__content h1 {\n font-size: 2rem;\n background-color: #fe3b6f;\n background-image: linear-gradient(to top, #ff087b 0%, #ed1a52 100%);\n background-size: 100%;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n text-transform: uppercase;\n margin-bottom: 32px;\n}\n\n.main__content h2 {\n font-size: 4rem;\n background: #ff8177; /* fallback for old browsers */\n background: -webkit-linear-gradient(\n to right,\n #9114ff,\n #da22ff\n ); /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(\n to right,\n #8f0eff,\n #da22ff\n ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n background-size: 100%;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n}\n\n.main__content p {\n margin-top: 1rem;\n font-size: 2rem;\n font-weight: 700;\n}\n\n.main__btn {\n font-size: 1.8rem;\n background: #833ab4;\n background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);\n background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);\n padding: 20px 60px;\n border: none;\n border-radius: 4px;\n margin-top: 2rem;\n cursor: pointer;\n position: relative;\n transition: all 0.35s;\n outline: none;\n}\n\n.main__btn a {\n position: relative;\n z-index: 2;\n color: #fff;\n text-decoration: none;\n}\n\n.main__btn:after {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background: #ff1ead;\n transition: all 0.35s;\n border-radius: 4px;\n}\n\n.main__btn:hover {\n color: #fff;\n}\n\n.main__btn:hover:after {\n width: 100%;\n}\n\n.main__img--container {\n text-align: center;\n}\n\n.main__img--card {\n margin: 10px;\n height: 500px;\n width: 500px;\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n color: #fff;\n background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);\n}\n\n.fa-layer-group,\n.fa-users {\n font-size: 14rem;\n}\n\n#card-2 {\n background: #ff512f;\n background: -webkit-linear-gradient(to right, #dd2476, #ff512f);\n background: linear-gradient(to right, #dd2476, #ff512f);\n}\n\n/* Mobile Responsive */\n@media screen and (max-width: 1100px) {\n .main__container {\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n justify-content: center;\n width: 100%;\n margin: 0 auto;\n height: 90%;\n }\n\n .main__img--container {\n display: flex;\n justify-content: center;\n }\n\n .main__img--card {\n height: 425px;\n width: 425px;\n }\n\n .main__content {\n text-align: center;\n margin-bottom: 4rem;\n }\n\n .main__content h1 {\n font-size: 2.5rem;\n margin-top: 2rem;\n }\n\n .main__content h2 {\n font-size: 3rem;\n }\n\n .main__content p {\n margin-top: 1rem;\n font-size: 1.5rem;\n }\n}\n\n@media screen and (max-width: 480px) {\n .main__img--card {\n width: 250px;\n height: 250px;\n }\n\n .fa-users,\n .fa-layer-group {\n font-size: 4rem;\n }\n\n .main__content h1 {\n font-size: 2rem;\n margin-top: 3rem;\n }\n .main__content h2 {\n font-size: 2rem;\n }\n\n .main__content p {\n margin-top: 2rem;\n }\n\n .main__btn {\n padding: 12px 36px;\n margin: 2.5rem 0;\n }\n}\n\n/* Services Section */\n.services {\n background: #131313;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n padding: 10rem 0;\n}\n\n.services h1 {\n background-color: #ff8177;\n background-image: linear-gradient(to right, #ff0844 0%, #f7673c 100%);\n background-size: 100%;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n margin-bottom: 5rem;\n font-size: 2.5rem;\n}\n\n.services__wrapper {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n grid-template-rows: 1fr;\n}\n\n.services__card {\n margin: 10px;\n height: 425px;\n width: 300px;\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n color: #fff;\n background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);\n transition: 0.3s ease-in;\n}\n\n.services__card:nth-child(2) {\n background: #1fa2ff; /* fallback for old browsers */\n background: -webkit-linear-gradient(\n to right,\n #a6ffcb,\n #12d8fa,\n #1fa2ff\n ); /* Chrome 10-25, Safari 5.1-6 */\n background: linear-gradient(\n to right,\n #a6ffcb,\n #12d8fa,\n #1fa2ff\n ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */\n}\n\n.services__card:nth-child(3) {\n background-image: linear-gradient(\n -225deg,\n #231557 0%,\n #44107a 29%,\n #ff1361 67%,\n #fff800 100%\n );\n}\n\n.services__card h2 {\n text-align: center;\n}\n\n.services__card p {\n text-align: center;\n margin-top: 24px;\n font-size: 20px;\n}\n\n.services__btn {\n display: flex;\n justify-content: center;\n margin-top: 16px;\n}\n\n.services__card button {\n color: #fff;\n padding: 14px 24px;\n border: none;\n outline: none;\n border-radius: 4px;\n background: #131313;\n font-size: 1rem;\n}\n\n.services__card button:hover {\n cursor: pointer;\n}\n\n.services__card:hover {\n transform: scale(1.075);\n transition: 0.3s ease-in;\n cursor: pointer;\n}\n\n@media screen and (max-width: 1300px) {\n .services__wrapper {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n@media screen and (max-width: 768px) {\n .services__wrapper {\n grid-template-columns: 1fr;\n }\n}\n\n/* Footer CSS */\n.footer__container {\n background-color: #131313;\n padding: 5rem 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n#footer__logo {\n color: #fff;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n font-size: 2rem;\n}\n\n.footer__links {\n width: 100%;\n max-width: 1000px;\n display: flex;\n justify-content: center;\n}\n\n.footer__link--wrapper {\n display: flex;\n}\n\n.footer__link--items {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n margin: 16px;\n text-align: left;\n width: 160px;\n box-sizing: border-box;\n}\n\n.footer__link--items h2 {\n margin-bottom: 16px;\n color: #fff;\n}\n\n.footer__link--items a {\n color: #fff;\n text-decoration: none;\n margin-bottom: 0.5rem;\n transition: 0.3 ease-out;\n}\n\n.footer__link--items a:hover {\n color: #e9e9e9;\n transition: 0.3 ease-out;\n}\n\n.social__icon--link {\n color: #fff;\n font-size: 24px;\n}\n\n.social__media {\n max-width: 1000px;\n width: 100%;\n}\n\n.social__media--wrap {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 90%;\n max-width: 1000px;\n margin: 40px auto 0 auto;\n}\n\n.social__icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 240px;\n}\n\n.website__rights {\n color: #fff;\n}\n\n@media screen and (max-width: 820px) {\n .footer__links {\n padding-top: 2rem;\n }\n\n #footer__logo {\n margin-bottom: 2rem;\n }\n\n .website__rights {\n margin-bottom: 2rem;\n }\n\n .footer__link--wrapper {\n flex-direction: column;\n }\n\n .social__media--wrap {\n flex-direction: column;\n }\n}\n\n@media screen and (max-width: 480px) {\n .footer__link--items {\n margin: 0;\n padding: 10px;\n width: 100%;\n }\n}\n" } ]