Repository: rammcodes/WowFolio Branch: main Commit: a18a1635363c Files: 6 Total size: 40.3 KB Directory structure: gitextract_mogiryrx/ ├── .vscode/ │ └── settings.json ├── LICENSE ├── README.md ├── index.html ├── script.js └── style.css ================================================ FILE CONTENTS ================================================ ================================================ FILE: .vscode/settings.json ================================================ { "liveServer.settings.port": 5501 } ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2023 Ram Maheshwari Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # Wowfolio 🦄 ## A Simple & Clean Portfolio Template For Developers 👨‍💻
Wowfolio Demo

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

**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. ```css :root { --themeColor: 29, 161, 242; /* Theme Color in (R,G,B) format */ } ```
---
## Technologies used 🛠️ - **HTML** 💀 - **CSS** 🌈 - **JavaScript** 🧠
---
## Drop a Star ⭐ If you like this project then drop a **Github** star by pressing the **Star** button ⭐
---
## Author 👨‍💻 **Ram Maheshwari ⚡** Support me by giving me a Follow/Subscribe on my Social Accounts 🔥 [![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)
================================================ FILE: index.html ================================================ WowFolio - A Simple & Clean Portfolio Template For Developers
logo Image

John Anderson

theme color tester

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

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

My Story

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

My Skills

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

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

1
Project Image

Project Name

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

Project Image

Project Name

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

2
3
Project Image

Project Name

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

Project Image

Project Name

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

4

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

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