[ { "path": ".vscode/settings.json", "content": "{\n \"liveServer.settings.port\": 5501\n}\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2023 Ram Maheshwari\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# Wowfolio 🦄\n\n## A Simple & Clean Portfolio Template For Developers 👨‍💻\n\n

\n $\"Wowfolio$ \n
\n

\n\n
\n\n---\n\n
\n\n## Test the template with different colours using the colour picker 🎨\n\nThis is very helpful for you as you can test the template with different\ncolours and see which colour fits your needs so you can use that colour for your own website.\n\n
\n\n

\n $\"Wowfolio$ \n
\n

\n\n
\n\n**Important Note**: Once you found the perfect colour for your site then just note the RGB value of the colour and then go inside this file called `style.css` on line number **9**, and replace the value of the **--themeColor** variable with your RGB value as shown in the below code example so you can see the colour change in your website.\n\n```css\n:root {\n --themeColor: 29, 161, 242; /* Theme Color in (R,G,B) format */\n}\n```\n\n
\n\n---\n\n
\n\n## Technologies used 🛠️\n\n- **HTML** 💀\n- **CSS** 🌈\n- **JavaScript** 🧠\n\n
\n\n---\n\n
\n\n## Drop a Star ⭐\n\nIf you like this project then drop a **Github** star by pressing the **Star** button ⭐\n\n
\n\n---\n\n
\n\n## Author 👨‍💻\n\n**Ram Maheshwari ⚡**\n\nSupport me by giving me a Follow/Subscribe on my Social Accounts 🔥\n\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin&logoColor=white)](https://linkedin.com/in/rammcodes) [![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?logo=Twitter&logoColor=white)](https://twitter.com/rammcodes) [![Instagram](https://img.shields.io/badge/Instagram-%23E4405F.svg?logo=Instagram&logoColor=white)](https://instagram.com/rammcodes_) [![YouTube](https://img.shields.io/badge/YouTube-%23FF0000.svg?logo=YouTube&logoColor=white)](https://youtube.com/@rammcodes)\n
\n" }, { "path": "index.html", "content": "\n\n\n\n \n \n \n \n \n \n \n \n WowFolio - A Simple & Clean Portfolio Template For Developers\n \n\n\n\n

\n

\n

\n \n

\n

John Anderson

\n

\n \n

\n

\n

\n

\n \n \n

\n\n \n

\n \n $\"theme$ \n

\n \n\n

\n

\n

\n

\n Hello 👋\n \n I'm John Anderson! A Web Developer Building Awesome Webapps And Websites That Powers The Internet\n \n

\n \n \n

\n

\n

\n

\n

\n

\n About 🦄\n \n Here you will find more information about me, what I do, and list of my current skills in programming\n

\n

\n

\n

\n

\n My Story\n

\n

\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Error, aliquid! Itaque corrupti magnam fugiat mollitia labore\n magni saepe veritatis voluptatum alias fugit. Explicabo\n ducimus sequi aut corporis odio repellendus? Lorem ipsum dolor\n sit amet\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Error, aliquid! Itaque corrupti magnam fugiat mollitia labore\n magni saepe veritatis voluptatum alias fugit. Explicabo\n ducimus sequi aut corporis odio repellendus? Lorem ipsum dolor\n sit amet\n \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Error, aliquid! Itaque corrupti magnam fugiat mollitia labore\n magni saepe veritatis voluptatum alias fugit. Explicabo\n ducimus sequi aut corporis odio repellendus? Lorem ipsum dolor\n sit amet\n \n

\n \n

\n

\n

\n My Skills\n

\n

html
css
javascript
react
node
git
vscode
linux
react
node
git
vscode
linux
javascript
react

\n

\n

\n

\n

\n

\n

\n

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

\n

\n

\n

\n

\n Projects 🛠️\n \n Here you will find some of the personal and clients projects that I created with the project details\n \n

\n

\n

\n

\n

\n 1 \n \n \n

\n

\n

\n $\"Project$ \n

\n

\n Project Name\n

\n \n\n

\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Error, aliquid! Itaque corrupti magnam fugiat mollitia\n labore magni saepe veritatis voluptatum alias fugit.\n Explicabo ducimus\n \n \n \n sapiente aut corporis odio repellendus? Lorem ipsum dolor\n sit amet, consectetur adipisicing elit\n \n

\n \n \n

\n

\n

\n

\n

\n $\"Project$ \n

\n

\n Project Name\n

\n \n\n

\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Error, aliquid! Itaque corrupti magnam fugiat mollitia\n labore magni saepe veritatis voluptatum alias fugit.\n Explicabo ducimus\n \n \n \n sapiente aut corporis odio repellendus? Lorem ipsum dolor\n sit amet, consectetur adipisicing elit\n \n

\n \n \n

\n

\n 2 \n \n \n

\n

\n

\n

\n 3 \n \n \n

\n

\n

\n $\"Project$ \n

\n

\n Project Name\n

\n \n\n

\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Error, aliquid! Itaque corrupti magnam fugiat mollitia\n labore magni saepe veritatis voluptatum alias fugit.\n Explicabo ducimus\n \n \n \n sapiente aut corporis odio repellendus? Lorem ipsum dolor\n sit amet, consectetur adipisicing elit\n \n

\n \n \n

\n

\n

\n

\n

\n $\"Project$ \n

\n

\n Project Name\n

\n \n\n

\n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n Error, aliquid! Itaque corrupti magnam fugiat mollitia\n labore magni saepe veritatis voluptatum alias fugit.\n Explicabo ducimus\n \n \n \n sapiente aut corporis odio repellendus? Lorem ipsum dolor\n sit amet, consectetur adipisicing elit\n \n

\n \n \n

\n

\n 4 \n \n \n

\n

\n

\n

\n

\n

\n

\n

\n

\n Contact 📞\n \n Feel free to Contact me by submitting the form below and I will get back to you as soon as possible\n \n

\n

\n

\n \n

\n

\n

\n

\n

\n \n \n\n\n" }, { "path": "script.js", "content": "const smMenuBtn = document.querySelector('.main-header__sm-scr-nav-btn')\nconst smMenu = document.querySelector('.main-header__sm-menu')\nconst smMenuCloseBtn = document.querySelector('.main-header__sm-menu-close')\n\nconst smMenuLinks = document.querySelectorAll('.main-header__sm-menu-link')\nconst smMenuLink1 = document.querySelector('.main-header__sm-menu-link--1')\nconst smMenuLink2 = document.querySelector('.main-header__sm-menu-link--2')\nconst smMenuLink3 = document.querySelector('.main-header__sm-menu-link--3')\nconst smMenuLink4 = document.querySelector('.main-header__sm-menu-link--4')\n\nsmMenuBtn.addEventListener('click', () => {\n smMenu.style.transitionDelay = '0s'\n smMenu.classList.add('main-header__sm-menu--active')\n\n smMenuLink1.style.transitionDelay = '.5s'\n smMenuLink1.style.transform = 'translateY(0)'\n smMenuLink1.style.opacity = '1'\n\n smMenuLink2.style.transitionDelay = '.8s'\n smMenuLink2.style.transform = 'translateY(0)'\n smMenuLink2.style.opacity = '1'\n\n smMenuLink3.style.transitionDelay = '1.1s'\n smMenuLink3.style.transform = 'translateY(0)'\n smMenuLink3.style.opacity = '1'\n\n smMenuLink4.style.transitionDelay = '1.4s'\n smMenuLink4.style.transform = 'translateY(0)'\n smMenuLink4.style.opacity = '1'\n})\n\nsmMenuLinks.forEach((ele) => {\n ele.addEventListener('click', () => {\n smMenuLink4.style.transitionDelay = '0s'\n smMenuLink4.style.transform = 'translateY(50px)'\n smMenuLink4.style.opacity = '0'\n\n smMenuLink3.style.transitionDelay = '.3s'\n smMenuLink3.style.transform = 'translateY(50px)'\n smMenuLink3.style.opacity = '0'\n\n smMenuLink2.style.transitionDelay = '.6s'\n smMenuLink2.style.transform = 'translateY(50px)'\n smMenuLink2.style.opacity = '0'\n\n smMenuLink1.style.transitionDelay = '.9s'\n smMenuLink1.style.transform = 'translateY(50px)'\n smMenuLink1.style.opacity = '0'\n\n smMenu.style.transitionDelay = '1.2s'\n smMenu.classList.remove('main-header__sm-menu--active')\n\n setTimeout(() => {\n document.getElementById(ele.name).scrollIntoView()\n }, 1300)\n })\n})\n\nsmMenuCloseBtn.addEventListener('click', () => {\n smMenuLink4.style.transitionDelay = '0s'\n smMenuLink4.style.transform = 'translateY(50px)'\n smMenuLink4.style.opacity = '0'\n\n smMenuLink3.style.transitionDelay = '.3s'\n smMenuLink3.style.transform = 'translateY(50px)'\n smMenuLink3.style.opacity = '0'\n\n smMenuLink2.style.transitionDelay = '.6s'\n smMenuLink2.style.transform = 'translateY(50px)'\n smMenuLink2.style.opacity = '0'\n\n smMenuLink1.style.transitionDelay = '.9s'\n smMenuLink1.style.transform = 'translateY(50px)'\n smMenuLink1.style.opacity = '0'\n\n smMenu.style.transitionDelay = '1.2s'\n smMenu.classList.remove('main-header__sm-menu--active')\n})\n\n\n\n\n\n// ---\nconst themeColorSelector = document.querySelector('.themeClrSelector')\nconst themeColorSelectorInput = document.querySelector(\n '.themeClrSelector__input'\n)\nconst root = document.documentElement;\n\n\n\nconst hexToRgb = (hex) => {\n let result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16),\n }\n : null\n}\n\nconst eventFire = (el, etype) => {\n if (el.fireEvent) {\n el.fireEvent('on' + etype)\n } else {\n let evObj = document.createEvent('Events')\n evObj.initEvent(etype, true, false)\n el.dispatchEvent(evObj)\n }\n}\n\nthemeColorSelector.addEventListener('click', () => {\n eventFire(themeColorSelectorInput, 'input')\n})\n\nconst setDynamicColor = (color) => {\n\n const { r, g, b } = hexToRgb(`${color}`)\n \n root.style.setProperty('--themeColor', `${r},${g},${b}`);\n //localStorage.setItem('color', color)\n}\n\nthemeColorSelectorInput.addEventListener('input', (e) => {\n setDynamicColor(e.target.value)\n})\n\n// if (localStorage.getItem('color')) {\n// let userSelectedColor = localStorage.getItem('color')\n// themeColorSelectorInput.value = userSelectedColor\n// setDynamicColor(userSelectedColor)\n// }\n\n// ---\nconst headerLogoConatiner = document.querySelector('.main-header__logo-container')\n\nheaderLogoConatiner.addEventListener('click', () => {\n location.href = 'index.html'\n})\n" }, { "path": "style.css", "content": "* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: inherit;\n}\n\n:root {\n --themeColor: 29, 161, 242;\n /* Theme Color in (R,G,B) format */\n}\n\nhtml {\n font-size: 62.5%;\n scroll-behavior: smooth;\n}\n\n/* 75em === 1200px */\n@media (max-width: 75em) {\n html {\n font-size: 60%;\n }\n}\n\n/* 56.25em === 900px */\n@media (max-width: 56.25em) {\n html {\n font-size: 58%;\n }\n}\n\n/* 37.5em === 600px */\n@media (max-width: 37.5em) {\n html {\n font-size: 56%;\n }\n}\n\n/* 112.5em === 1600px */\n/* @media (min-width: 112.5em) {\n html {\n font-size: 65%;\n }\n} */\n\nbody {\n font-family: 'PT Sans', sans-serif;\n}\n\nul {\n list-style: none;\n}\n\na {\n text-decoration: none;\n color: inherit;\n}\n\n/* Utils */\n\n.btn {\n font-family: inherit;\n letter-spacing: 1px;\n font-weight: 700;\n border: none;\n box-shadow: none;\n cursor: pointer;\n padding: 1.8rem 4rem;\n font-size: 1.8rem;\n border-radius: 5px;\n border: 2px solid rgba(var(--themeColor), 1);\n}\n\n@media (max-width: 37.5em) {\n .btn {\n padding: 2rem 4rem;\n }\n}\n\n.btn-theme {\n background: rgba(var(--themeColor), 1);\n color: #fff;\n box-shadow: 0 5px 15px 0 rgb(0 0 0 / 15%);\n}\n\n.btn-inv {\n color: rgba(var(--themeColor), 1);\n background: #fff;\n}\n\n.btn-sm {\n padding: 1.3rem 2rem;\n font-size: 1.6rem;\n border: none;\n}\n\n.main-container {\n max-width: 120rem;\n margin: auto;\n width: 90%;\n}\n\n.main-section {\n padding: 12rem 0;\n}\n\n.main-section__content {\n margin-top: 10rem;\n}\n\n@media (max-width: 37.5em) {\n .main-section {\n padding: 10rem 0;\n }\n\n .main-section__content {\n margin-top: 9rem;\n }\n}\n\n.heading-primary {\n font-size: 4.5rem;\n letter-spacing: 1px;\n line-height: 1.3;\n color: #000;\n font-weight: 400;\n}\n\n@media (max-width: 37.5em) {\n .heading-primary {\n font-size: 4rem;\n }\n}\n\n.heading-primary__sm {\n font-size: 2rem;\n display: block;\n margin-bottom: 2.5rem;\n}\n\n.heading-secondary {\n font-size: 4rem;\n letter-spacing: 1px;\n line-height: 1.3;\n color: #000;\n font-weight: 400;\n}\n\n.heading-secondary__sm {\n font-size: 1.8rem;\n display: block;\n margin-bottom: 2.5rem;\n}\n\n.heading-tertiary {\n font-size: 3.4rem;\n letter-spacing: 1px;\n line-height: 1.3;\n color: #000;\n font-weight: 400;\n}\n\n.heading-quaternary {\n font-size: 2.5rem;\n letter-spacing: 1px;\n line-height: 1.3;\n color: #000;\n font-weight: 400;\n}\n\n@media (max-width: 37.5em) {\n .heading-secondary {\n font-size: 3.7rem;\n }\n\n .heading-tertiary {\n font-size: 3rem;\n }\n}\n\n.text-primary {\n font-size: 1.9rem;\n color: #444;\n line-height: 1.6;\n}\n\n.text-primary span {\n margin-bottom: 1.5rem;\n display: block;\n}\n\n.text-primary span:last-child {\n margin-bottom: 0;\n}\n\n/* Animation ( Keyframes ) */\n\n@keyframes downToUp {\n 0% {\n opacity: 0;\n transform: translateY(50px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Main Header Stylings */\n\n.main-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 2.5rem;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n box-shadow: 0 10px 100px -5px #eee;\n z-index: 1000;\n background: #fff;\n}\n\n.main-header__logo-container {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.main-header__logo-img-cont {\n margin-right: 1.5rem;\n width: 4rem;\n height: 4rem;\n overflow: hidden;\n border-radius: 10rem;\n background: rgba(var(--themeColor), 1);\n}\n\n.main-header__sm-scr-nav-btn {\n padding: 1rem 1rem;\n display: none;\n cursor: pointer;\n}\n\n@media (max-width: 37.5em) {\n .main-header__sm-scr-nav-btn {\n display: block;\n }\n}\n\n.main-header__sm-scr-nav-btn-line {\n height: 1px;\n background: #000;\n width: 3rem;\n border-radius: 50px;\n}\n\n.main-header__sm-menu {\n background: #fff;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n min-height: 40rem;\n transform: translateX(-100%);\n transition: transform 0.5s;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.main-header__sm-menu-close {\n position: absolute;\n top: 3.3rem;\n right: 2.5rem;\n width: 3rem;\n height: 3rem;\n}\n\n.main-header__sm-menu-close:before,\n.main-header__sm-menu-close:after {\n position: absolute;\n content: ' ';\n height: 3rem;\n width: 1px;\n left: 50%;\n transform: translateX(-50%);\n background-color: #000;\n}\n\n.main-header__sm-menu-close:before {\n transform: rotate(45deg);\n}\n\n.main-header__sm-menu-close:after {\n transform: rotate(-45deg);\n}\n\n.main-header__sm-menu--active {\n transform: translateX(0);\n}\n\n.main-header__sm-menu-links {\n width: 90%;\n}\n\n.main-header__sm-menu-link {\n opacity: 0;\n transform: translateY(50px);\n transition: opacity 0.3s, transform 0.3s;\n font-size: 2.5rem;\n text-align: center;\n display: block;\n padding: 3rem;\n color: #555;\n}\n\n/* @keyframes smMenuLinkStartAnimation {\n 0% {\n transform: translateY(50px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes smMenuLinkEndAnimation {\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(50px);\n opacity: 0;\n }\n} */\n\n.main-header__sm-scr-nav-btn-line:first-child {\n margin-bottom: 8px;\n}\n\n@media (max-width: 37.5em) {\n .main-header {\n padding: 2.3rem 1.5rem;\n }\n\n .main-header__logo-img-cont {\n margin-right: 1rem;\n }\n}\n\n.main-header__logo-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.main-header__logo-text {\n font-size: 2.2rem;\n letter-spacing: 1px;\n color: #000;\n font-weight: 400;\n}\n\n.main-header__navigation-links {\n display: flex;\n align-items: center;\n}\n\n.main-header__navigation-link {\n padding: 1.3rem 2rem;\n font-size: 1.6rem;\n letter-spacing: 1px;\n color: #000;\n font-weight: 400;\n}\n\n@media (max-width: 56.25em) {\n .main-header__navigation-link {\n padding: 1.3rem 1.5rem;\n }\n}\n\n@media (max-width: 37.5em) {\n .main-header__navigation-links {\n display: none;\n }\n}\n\n/* Hero Section Stylings */\n\n.home-hero {\n display: flex;\n height: 100vh;\n min-height: 80rem;\n max-height: 120rem;\n}\n\n.home-hero__content {\n max-width: 120rem;\n margin: auto;\n width: 90%;\n\n animation: downToUp 0.8s;\n}\n\n@media (max-width: 37.5em) {\n .home-hero {\n height: unset;\n min-height: unset;\n max-height: unset;\n }\n\n .home-hero__content {\n margin: 0 auto;\n padding: 15rem 0 10rem 0;\n }\n}\n\n.home-hero__heading-primary {\n margin-bottom: 5rem;\n}\n\n.home-hero__btn-theme {\n margin-right: 2rem;\n}\n\n@media (max-width: 37.5em) {\n .home-hero__heading-primary {\n margin-bottom: 4.5rem;\n }\n\n .home-hero__btn-theme,\n .home-hero__btn-inv {\n width: 100%;\n }\n\n .home-hero__btn-theme {\n margin: 0 0 2rem 0;\n }\n}\n\n/* About */\n.about {\n background: rgb(252, 252, 252);\n}\n\n.about__info {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 8rem;\n}\n\n@media (max-width: 37.5em) {\n .about__info {\n grid-template-columns: 1fr;\n grid-gap: 6rem;\n }\n\n .about__btn-theme {\n width: 70%;\n }\n}\n\n.about__heading-quaternary {\n margin-bottom: 3rem;\n}\n\n.about__main-info {\n margin-bottom: 4rem;\n}\n\n.about__text-primary {\n margin-bottom: 4rem;\n}\n\n.about__info-heading {\n margin-bottom: 3rem;\n color: #555;\n}\n\n.about__skills {\n display: flex;\n flex-wrap: wrap;\n}\n\n.about__skill {\n font-size: 1.6rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n padding: 1.5rem 2rem;\n margin-right: 2rem;\n margin-bottom: 2rem;\n\n background: #eee;\n color: #666;\n border-radius: 5px;\n font-weight: 500;\n}\n\n/* Skills Showcase */\n\n.skills-showcase {\n background: rgba(247, 247, 247, 1);\n padding: 5rem 3rem;\n}\n\n.skills-showcase__list {\n display: flex;\n justify-content: space-around;\n}\n\n.skills-showcase__list-item {\n padding: 3rem;\n border-radius: 5px;\n background: #fff;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;\n}\n\n.skills-showcase__list-item i {\n color: rgba(var(--themeColor), 1);\n color: #999;\n font-size: 5rem;\n}\n\n@media (max-width: 75em) {\n .skills-showcase__list-item {\n padding: 1.5rem;\n border-radius: 5px;\n background: #fff;\n }\n\n .skills-showcase__list-item i {\n font-size: 5rem;\n }\n}\n\n@media (max-width: 56.25em) {\n .skills-showcase {\n padding: 5rem;\n }\n\n .skills-showcase__list {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 5rem;\n }\n\n .skills-showcase__list-item {\n text-align: center;\n }\n}\n\n@media (max-width: 37.5em) {\n .skills-showcase {\n padding: 4rem;\n }\n\n .skills-showcase__list {\n grid-template-columns: repeat(3, 1fr);\n grid-gap: 4rem;\n }\n}\n\n@media (max-width: 21.875em) {\n .skills-showcase__list-item i {\n font-size: 4rem;\n }\n}\n\n/* projects */\n\n.projects__list-item {\n display: grid;\n grid-template-columns: 45%;\n grid-gap: 4rem;\n margin-bottom: 8rem;\n}\n\n.projects__list-item--inv {\n justify-content: flex-end;\n}\n\n@media (max-width: 75em) {\n .projects__list-item {\n grid-template-columns: 60%;\n }\n}\n\n@media (max-width: 56.25em) {\n .projects__list-item {\n grid-template-columns: 100%;\n }\n}\n\n.projects__list-item:last-child {\n margin-bottom: 0;\n}\n\n.projects__list-item-count {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-height: 30rem;\n display: none;\n}\n\n.projects__list-item-count-num {\n font-size: 2rem;\n font-weight: 700;\n width: 5rem;\n height: 5rem;\n color: #fff;\n background: #000;\n display: block;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50px;\n}\n\n.projects__list-item-count-line {\n flex-grow: 1;\n width: 2px;\n background: #000;\n border-radius: 50px;\n}\n\n.projects__list-item-count-end-dot {\n width: 1rem;\n height: 1rem;\n border-radius: 50px;\n background: #000;\n}\n\n.projects__list-item--inv .projects__list-item-img-cont {\n margin: 0 0 0 auto;\n}\n\n.projects__list-item-img-cont {\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n}\n\n.projects__list-item-img {\n width: 100%;\n display: block;\n}\n\n.projects__list-item-heading-tertiary {\n margin: 5rem 0 3rem 0;\n}\n\n@media (max-width: 37.5em) {\n .projects__list-item-heading-tertiary {\n margin: 5rem 0 2.5rem 0;\n }\n}\n\n.projects__title-text-divider {\n height: 5px;\n width: 3rem;\n background: rgba(var(--themeColor), 1);\n margin-bottom: 3rem;\n border-radius: 100px;\n}\n\n.projects__list-item-text-primary {\n margin-bottom: 4rem;\n}\n\n@media (max-width: 37.5em) {\n .projects__list-item-text-primary {\n margin-bottom: 3.7rem;\n }\n}\n\n.projects__list-item-text-primary span {\n margin-bottom: 1.5rem;\n display: block;\n}\n\n.projects__list-item-text-primary span:last-child {\n margin-bottom: 0;\n}\n\n.projects__btn-theme {\n margin-right: 2rem;\n}\n\n@media (max-width: 37.5em) {\n .projects__btn-theme {\n margin: 0 0 2rem 0;\n }\n\n .projects__btn-theme,\n .projects__btn-inv {\n width: 70%;\n }\n}\n\n/* Contact */\n\n.contact {\n background: rgba(250, 250, 250, 1);\n}\n\n.contact__form-cont {\n border-radius: 5px;\n overflow: hidden;\n display: grid;\n grid-template-columns: 1.5fr 1fr;\n box-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);\n}\n\n.contact__form {\n background: #fff;\n padding: 5rem;\n}\n\n@media (max-width: 56.25em) {\n .contact__form-cont {\n grid-template-columns: 2fr 1fr;\n }\n}\n\n@media (max-width: 37.5em) {\n .contact__form-cont {\n grid-template-columns: 1fr;\n }\n\n .contact__form {\n padding: 3rem;\n }\n}\n\n.contact__form-field {\n margin-bottom: 3rem;\n}\n\n.contact__form-field-label {\n font-size: 1.6rem;\n text-transform: uppercase;\n color: #444;\n letter-spacing: 1px;\n display: block;\n margin-bottom: 1rem;\n}\n\n.contact__form-field-input {\n display: block;\n padding: 2rem;\n width: 100%;\n border: 1px solid rgba(225, 225, 225, 1);\n font-size: 1.6rem;\n resize: none;\n border-radius: 5px;\n font-weight: 400;\n letter-spacing: 1px;\n}\n\n/* Code for Modern Browsers */\n/* Code for WebKit, Blink, Edge */\n/* Code for Internet Explorer 10-11 */\n/* Code for Microsoft Edge */\n/* Code for Mozilla Firefox 4 to 18 */\n/* Code for Mozilla Firefox 19+ */\n\n\n.contact__form-field-input::placeholder {\n color: rgb(175, 175, 175);\n font-weight: 400;\n font-size: 1.6rem;\n}\n\n.contact__form-field-input::-webkit-input-placeholder {\n color: rgb(175, 175, 175);\n font-weight: 400;\n font-size: 1.6rem;\n}\n\n.contact__form-field-input:-ms-input-placeholder {\n color: rgb(175, 175, 175);\n font-weight: 400;\n font-size: 1.6rem;\n}\n\n.contact__form-field-input::-ms-input-placeholder {\n color: rgb(175, 175, 175);\n font-weight: 400;\n font-size: 1.6rem;\n}\n\n.contact__form-field-input:-moz-placeholder {\n opacity: 1;\n color: rgb(175, 175, 175);\n font-weight: 400;\n font-size: 1.6rem;\n}\n\n.contact__form-field-input::-moz-placeholder {\n opacity: 1;\n color: rgb(175, 175, 175);\n font-weight: 400;\n font-size: 1.6rem;\n}\n\n.contact__form-field-input:focus {\n outline: none;\n}\n\n.contact__form-submit {\n padding: 2rem;\n width: 100%;\n font-size: 1.6rem;\n border: none;\n letter-spacing: 1px;\n font-family: inherit;\n font-weight: 700;\n background: rgba(var(--themeColor), 1);\n color: #fff;\n margin-top: 4rem;\n display: block;\n border-radius: 5px;\n cursor: pointer;\n}\n\n.contact__form-visual {\n background-image: url('https://i.postimg.cc/mrHQw69n/contact-form-bg.jpg');\n background-position: bottom;\n background-size: cover;\n background-repeat: no-repeat;\n position: relative;\n z-index: 1;\n}\n\n@media (max-width: 37.5em) {\n .contact__form-visual {\n display: none;\n }\n}\n\n.contact__form-visual::after {\n content: '';\n position: absolute;\n z-index: 20;\n background: rgba(var(--themeColor), 0.5);\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n}\n\n/* Main Footer */\n\n.main-footer__upper {\n background: #000;\n padding: 10rem 0;\n}\n\n.main-footer__links {\n display: flex;\n max-width: 50rem;\n align-items: center;\n justify-content: space-between;\n margin: auto;\n}\n\n.main-footer__link a {\n color: #fff;\n font-size: 1.6rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: 500;\n}\n\n@media (max-width: 37.5em) {\n .main-footer__upper {\n padding: 7rem 0;\n }\n\n .main-footer__links {\n display: block;\n }\n\n .main-footer__link a {\n margin-bottom: 0.5rem;\n padding: 3rem 1.5rem;\n display: block;\n }\n}\n\n.main-footer__mid-line {\n background: grey;\n height: 1px;\n margin-top: 6rem;\n}\n\n.main-footer__socials {\n display: flex;\n align-content: center;\n justify-content: space-between;\n max-width: 25rem;\n margin: auto;\n margin-top: 6rem;\n}\n\n.main-footer__social-link-icon {\n width: 2.5rem;\n}\n\n.main-footer__bottom {\n padding: 5rem 2rem;\n background: #222;\n}\n\n.main-footer__bottom-txt {\n color: #eee;\n font-size: 1.3rem;\n word-spacing: 2px;\n text-align: center;\n}\n\n.main-footer__bottom-txt a {\n text-decoration: underline;\n color: #fff;\n font-weight: 700;\n}\n\n\n.themeClrSelector {\n position: fixed;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n z-index: 10;\n box-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n overflow: hidden;\n}\n\n@media only screen and (max-width: 37.5em) {\n .themeClrSelector {\n top: 100%;\n transform: translateY(-100%);\n }\n}\n\n.themeClrSelector__input {\n background: transparent;\n border: none;\n cursor: pointer;\n width: 5rem;\n height: 5rem;\n opacity: 0;\n position: relative;\n z-index: 10;\n}\n\n.themeClrSelector__img {\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n top: 0;\n left: 0;\n z-index: 1;\n}" } ]