diff --git a/Website/index.html b/Website/index.html index fa6ba1d6b..4d357da86 100644 --- a/Website/index.html +++ b/Website/index.html @@ -1,135 +1,214 @@ + + + + + Drifty + + + + + + + + + + + + + - - - - - Drifty - - - - - - - - - - - - + +
+
+
+ + + +
+
- -
-
-
- - - -
-
+
+
+
+

DRIFTY

+

+ Drifty is an open-source interactive File Downloader system built + with java. It takes the link to the file, the directory where it + needs to be saved and the filename of the downloaded file as input + and downloads it in the given directory with the given filename. +

+ More Info + Demo +
-
-
-
-

DRIFTY

-

- Drifty is an open-source interactive File Downloader system built with java. - It takes the link to the file, the directory where it needs to be saved and the filename - of the downloaded file as input and downloads it in the given directory with the given filename. -

- More Info - Demo -
- -
- ... - ... - ... - ... - ... - ... -
-
-
+ +
+ ... + ... + ... + ... + ... + ... +
+
+
-
-
-
-

More Information About Drifty

-

It is currently available in CLI (Command Line Interface) mode and the GUI (Graphical User Interface) - version is under active development. We believe in team work. Any contribution that brings value to - the project is highly appreciated. You may contribute to this project here.

+
+
+
+

More Information About Drifty

+

+ It is currently available in CLI (Command Line Interface) mode and + the GUI (Graphical User Interface) version is under active + development. We believe in team work. Any contribution that brings + value to the project is highly appreciated. You may contribute to + this project here. +

+
+
+

Be a part of Drifty Family!

+
+ Contribute to Drifty +
+
+
-
-
-

Be a part of Drifty Family!

-
-
- - Contribute to Drifty -
-
-
+
-
+
+

✨Download Here✨

+
+ Download Now + Download Now +
-
-

✨Download Here✨

- +
+
+

Demonstration of Drifty

+

Here is a quick demo of using Drifty.

+
+ +
+
-
-
-

Demonstration of Drifty

-

Here is a quick demo of using Drifty.

-
- -
-
+ +
+

Contact Us

+
+ + Support + + Twitter + Email +
+
- -
-

Contact Us

-
- Support - Twitter - - Email -
-
- + - - - - - \ No newline at end of file + +
+

+ +

Dark

+

+
+ + + + + + diff --git a/Website/script.js b/Website/script.js index 5978e84cb..8d7960172 100644 --- a/Website/script.js +++ b/Website/script.js @@ -10,16 +10,27 @@ const menu = document.getElementById("menu"); const toggleBtn = document.querySelector("#menu>i"); const miniNav = document.querySelector("nav"); const links = document.querySelectorAll(".nav-links > li"); +const darkTxt = document.querySelector(".Txt"); +const symb = document.getElementById("symb"); const enableDarkMode = () => { document.body.classList.add('darkmode'); darkModeToggle.checked = true; // Check only if the darkmode is on + symb.classList.remove("fa-moon"); + symb.classList.add("fa-sun"); + darkTxt.innerHTML= "Light" + localStorage.setItem('darkMode', 'enabled'); } const disableDarkMode = () => { document.body.classList.remove('darkmode'); darkModeToggle.checked = false; + darkTxt.innerHTML= "Dark" + symb.classList.add("fa-moon"); + symb.classList.remove("fa-sun"); + + localStorage.setItem('darkMode', null); } @@ -28,6 +39,8 @@ if (darkMode === 'enabled') darkModeToggle.addEventListener('click', () => { darkMode = localStorage.getItem('darkMode'); + // darkTxt.innerHTML= "Dark" + if (darkMode !== 'enabled') enableDarkMode(); else diff --git a/Website/style.css b/Website/style.css index 6c445c7f7..fe47fa2c3 100644 --- a/Website/style.css +++ b/Website/style.css @@ -1,680 +1,685 @@ -@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Silkscreen&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); /* Global styles */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } html { - font-family: "Rubik", sans-serif; - color: var(--black); - scroll-behavior: smooth; + font-family: "Rubik", sans-serif; + color: var(--black); + scroll-behavior: smooth; } li, a, button { - font-family: "Poppins", sans-serif; - font-weight: 500; - font-size: 1rem; - color: var(--font-color); - text-decoration: none; + font-family: "Poppins", sans-serif; + font-weight: 500; + font-size: 1rem; + color: var(--font-color); + text-decoration: none; } -body{ - overflow-x: hidden !important; +body { + overflow-x: hidden !important; } .hidden { - display: none !important; + display: none !important; } /* Variables */ :root { - --background-color: #E8F9FD; - --text-color: #0AA1DD; - --primary-color: #79DAE8; - --background-color1: #79DAE8; - - --black: black; - --maroon: maroon; + --background-color: #e8f9fd; + --text-color: #0aa1dd; + --primary-color: #79dae8; + --background-color1: #79dae8; - --button-background: #1c0099; - --button-onhover-background: yellow; - --button-onhover-shadow: black; - --button-text: white; - --button-onhover-text: black; + --black: black; + --maroon: maroon; - --nav-bg: transparent; - --nav-bg2: #1a2035; + --button-background: #1c0099; + --button-onhover-background: yellow; + --button-onhover-shadow: black; + --button-text: white; + --button-onhover-text: black; - --font-color: #1a2035; - --font-color: #fff; + --nav-bg: transparent; + --nav-bg2: #1a2035; - --black-col: #151515; - --dark-col: #1a2035; - --m-deep-col: #0a5a97; - --m-dark-col: #1572e8; - --main-col: #3697e1; - --m-light-col: #48abf7; + --font-color: #1a2035; + --font-color: #fff; - --ascent-col-1: #ff9e27; - --ascent-col-1l: #ffad46; - --ascent-col-2: #ea4d56; - --ascent-col-2l: #f25961; + --black-col: #151515; + --dark-col: #1a2035; + --m-deep-col: #0a5a97; + --m-dark-col: #1572e8; + --main-col: #3697e1; + --m-light-col: #48abf7; - --grad: radial-gradient( circle farthest-corner at 22.4% 21.7%, rgba(4,189,228,1) 0%, rgba(2,83,185,1) 100.2% ); + --ascent-col-1: #ff9e27; + --ascent-col-1l: #ffad46; + --ascent-col-2: #ea4d56; + --ascent-col-2l: #f25961; + --grad: radial-gradient( + circle farthest-corner at 22.4% 21.7%, + rgba(4, 189, 228, 1) 0%, + rgba(2, 83, 185, 1) 100.2% + ); } /* Scrollbar */ body::-webkit-scrollbar { - width: 0.25rem; + width: 0.25rem; } body::-webkit-scrollbar-track { - background: var(--background-color); + background: var(--background-color); } body::-webkit-scrollbar-thumb { - background: var(--background-color1); - border-radius: 10px; + background: var(--background-color1); + border-radius: 10px; } - /* Darkmode */ .darkmode { - --background-color: #041C32; - --background-color1: #064663; - - --black: #ECB365; - --maroon: #F1D00A; - - --button-background: #064663; - --button-onhover-background: #ECB365; - --button-onhover-shadow: #F1D00A; - --button-text: white; - --button-onhover-text: black; - - - --grad: linear-gradient( - to left top, - var(--black-col), - var(--black-col), - var(--black-col), - var(--black-col), - var(--black-col), - var(--dark-col), - var(--dark-col), - var(--dark-col), - var(--dark-col), - var(--dark-col), - var(--dark-col), - var(--m-deep-col), - var(--m-deep-col), - var(--main-col), - var(--main-col), - var(--m-light-col) - ); -} - -.temp-color{ - background-color: #1a2035 !important; + --background-color: #041c32; + --background-color1: #064663; + + --black: #ecb365; + --maroon: #f1d00a; + + --button-background: #064663; + --button-onhover-background: #ecb365; + --button-onhover-shadow: #f1d00a; + --button-text: white; + --button-onhover-text: black; + + --grad: linear-gradient( + to left top, + var(--black-col), + var(--black-col), + var(--black-col), + var(--black-col), + var(--black-col), + var(--dark-col), + var(--dark-col), + var(--dark-col), + var(--dark-col), + var(--dark-col), + var(--dark-col), + var(--m-deep-col), + var(--m-deep-col), + var(--main-col), + var(--main-col), + var(--m-light-col) + ); +} + +.temp-color { + background-color: #1a2035 !important; } .text-gradient-blue { - background: linear-gradient( - -45deg, - var(--main-col), - var(--m-light-col) - ) !important; - background-clip: text; - -webkit-background-clip: text !important; - -webkit-text-fill-color: transparent !important; + background: linear-gradient( + -45deg, + var(--main-col), + var(--m-light-col) + ) !important; + background-clip: text; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; } .text-gradient-ry { - background: linear-gradient( - -45deg, - var(--ascent-col-2l), - var(--ascent-col-1l) - ) !important; - background-clip: text; - -webkit-background-clip: text !important; - -webkit-text-fill-color: transparent !important; + background: linear-gradient( + -45deg, + var(--ascent-col-2l), + var(--ascent-col-1l) + ) !important; + background-clip: text; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; } .text-gradient-yellow { - background: linear-gradient( - -45deg, - var(--ascent-col-1), - var(--ascent-col-1l) - ) !important; - background-clip: text; - -webkit-background-clip: text !important; - -webkit-text-fill-color: transparent !important; + background: linear-gradient( + -45deg, + var(--ascent-col-1), + var(--ascent-col-1l) + ) !important; + background-clip: text; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; } /* TEXTURE LAYER */ .texture { - z-index: 100; - position: absolute; - width: 100vw; - height: 100vh; - background-image: url("Resources/grain-dark.webp"); - opacity: 0.5; - overflow: hidden; - pointer-events: none; + z-index: 100; + position: absolute; + width: 100vw; + height: 100vh; + background-image: url("Resources/grain-dark.webp"); + opacity: 0.5; + overflow: hidden; + pointer-events: none; } /* Navbar */ .nav-container { - width: 100%; - overflow: hidden; - display: flex; - justify-content: center; + width: 100%; + overflow: hidden; + display: flex; + justify-content: center; } .nav-bar { - z-index: 100; - display: flex; - align-items: center; - justify-content: flex-end; - position: absolute; - width: 100vw; - padding: 32px 10vw; - background: transparent; - transition: padding 0.3s ease-out; + z-index: 100; + display: flex; + align-items: center; + justify-content: flex-end; + position: absolute; + width: 100vw; + padding: 32px 10vw; + background: transparent; + transition: padding 0.3s ease-out; } .nav-bar * { - color: white; - + color: white; } .nav-sticky { - position: fixed; - padding: 10px 10vw; - background: var(--nav-bg2); - box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3); - transition: padding 0.3s ease-out; + position: fixed; + padding: 10px 10vw; + background: var(--nav-bg2); + box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3); + transition: padding 0.3s ease-out; } -.nav-bar > a{ - margin-right: auto ; +.nav-bar > a { + margin-right: auto; } .logo { - cursor: pointer; - width: 50px; - height: 50px; + cursor: pointer; + width: 50px; + height: 50px; } .nav-links { - list-style: none; - display: flex; - justify-content: center !important; - align-items: center; + list-style: none; + display: flex; + justify-content: center !important; + align-items: center; } .nav-links li { - display: inline-block; - padding: 0 20px; + display: inline-block; + padding: 0 20px; } .nav-links li:last-child { - margin-top: 8px; + margin-top: 8px; } .nav-links li a { - text-decoration: none; - transition: all 0.3s ease; + text-decoration: none; + transition: all 0.3s ease; } .nav-links li a:hover { - color: #0aa1dd; - animation: blink 0.5s ease infinite; + color: #0aa1dd; + animation: blink 0.5s ease infinite; } .button { - border: none; - cursor: pointer; - padding: 6px 16px; - border-radius: 50px; - background: linear-gradient( - -45deg, - var(--background-color1), - var(--text-color) - ) !important; - transition: all 0.3s ease; + border: none; + cursor: pointer; + padding: 6px 16px; + border-radius: 50px; + background: linear-gradient( + -45deg, + var(--background-color1), + var(--text-color) + ) !important; + transition: all 0.3s ease; } .button:hover { - animation: blink 3s ease infinite; + animation: blink 3s ease infinite; } #menu { - display: none; - font-size: 20px; - margin: 0; + display: none; + font-size: 20px; + margin: 0; } @keyframes blink { - 0% { - filter: brightness(1.2); - } - 70% { - filter: brightness(1); - } - 100% { - filter: brightness(1.2); - } + 0% { + filter: brightness(1.2); + } + 70% { + filter: brightness(1); + } + 100% { + filter: brightness(1.2); + } } - .buttons { - display: flex; - flex-direction: row; - width: 40%; - justify-content: space-around; + display: flex; + flex-direction: row; + width: 40%; + justify-content: space-around; } .btn2 { - margin: 0; - transition: 0.25s ease-out; - cursor: pointer; + margin: 0; + transition: 0.25s ease-out; + cursor: pointer; } .btn2 > a { - color: var(--maroon) + color: var(--maroon); } .btn2:hover a { - animation: slide_underline 0.2s ease-out; - text-decoration: underline var(--maroon) wavy; + animation: slide_underline 0.2s ease-out; + text-decoration: underline var(--maroon) wavy; } #btn1 { - width:80px; - height: 60px; + width: 80px; + height: 60px; } - /* Header */ .header-container > h1 { - font-family: "Poppins", sans-serif; - font-size: 52px; - font-weight: bold; - margin-bottom: 32px; - line-height: 1.05; + font-family: "Poppins", sans-serif; + font-size: 52px; + font-weight: bold; + margin-bottom: 32px; + line-height: 1.05; } .header-container > p { - font-size: 22px; - line-height: 1.6; - font-weight: 500; - text-align: justify; + font-size: 22px; + line-height: 1.6; + font-weight: 500; + text-align: justify; } .header-container > .btn { - margin: 32px 10px 32px 0px; - display: inline-block; - font-size: 20px; - font-weight: 600; - background-color: var(--button-background); - color: var(--button-text); - padding: 16px 32px; - border-radius: 9px; - transition: 0.5s; + margin: 32px 10px 32px 0px; + display: inline-block; + font-size: 20px; + font-weight: 600; + background-color: var(--button-background); + color: var(--button-text); + padding: 16px 32px; + border-radius: 9px; + transition: 0.5s; } .header-container > .btn:hover { - background-color: var(--button-onhover-background); - color: var(--button-onhover-text); - box-shadow: 5px 5px 1px var(--button-onhover-shadow); + background-color: var(--button-onhover-background); + color: var(--button-onhover-text); + box-shadow: 5px 5px 1px var(--button-onhover-shadow); } .header-container { - width: 40%; - transform: translateX(-50%); - z-index: 1; - color: var(--black); + width: 40%; + transform: translateX(-50%); + z-index: 1; + color: var(--black); } -header img { - position: absolute; - aspect-ratio: 1; +header img { + position: absolute; + aspect-ratio: 1; } @keyframes move { - 0%{ - transform: translateZ(0px) scale(1) ; - filter: blur(2px) brightness(100%) hue-rotate(360deg); - } - - 100%{ - transform: translateZ(-100px) scale(1.5); - filter: blur(0px) brightness(150%); - } + 0% { + transform: translateZ(0px) scale(1); + filter: blur(2px) brightness(100%) hue-rotate(360deg); + } + + 100% { + transform: translateZ(-100px) scale(1.5); + filter: blur(0px) brightness(150%); + } } .img-layer { - position: absolute; - pointer-events: none; - display: inherit; - margin-left: 10rem; - align-items: center; - transform: rotateX(0deg) rotateY(335deg); - transform-style: preserve-3d; + position: absolute; + pointer-events: none; + display: inherit; + margin-left: 10rem; + align-items: center; + transform: rotateX(0deg) rotateY(335deg); + transform-style: preserve-3d; } .img-layer > img:nth-child(1) { - animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s infinite alternate; + animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s infinite alternate; } .img-layer > img:nth-child(2) { - animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.25s infinite alternate; + animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.25s infinite alternate; } .img-layer > img:nth-child(3) { - animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s infinite alternate; + animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s infinite alternate; } .img-layer > img:nth-child(4) { - animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.75s infinite alternate; + animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.75s infinite alternate; } .img-layer > img:nth-child(5) { - animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1s infinite alternate; + animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1s infinite alternate; } .img-layer > img:nth-child(6) { - animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.25s infinite alternate; + animation: move 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.25s infinite alternate; } header { - perspective: 500px; - width: 100%; - height: 100vh; - padding: 10rem 0; - background: var(--background-color); - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - background: var(--grad); - background-repeat: no-repeat !important; + perspective: 500px; + width: 100%; + height: 100vh; + padding: 10rem 0; + background: var(--background-color); + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background: var(--grad); + background-repeat: no-repeat !important; } /* Contributors */ -.contrib{ - background:var(--nav-bg2); - color: white; - padding: 2rem 4rem; - box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; - -webkit-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; - -moz-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; +.contrib { + background: var(--nav-bg2); + color: white; + padding: 2rem 4rem; + box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; + -webkit-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; + -moz-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; } .contrib-container { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-evenly; - gap: 50px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + gap: 50px; } .contrib-container .content { - display: flex; - justify-content: center; - flex-direction: column; - align-items: flex-start; - padding: 2.5rem; - gap: 28px; - flex: 1; - transition: all 0.3s ease; + display: flex; + justify-content: center; + flex-direction: column; + align-items: flex-start; + padding: 2.5rem; + gap: 28px; + flex: 1; + transition: all 0.3s ease; } -.contrib-container:nth-child(1){ -text-align: start !important; -line-height: 1.6 !important; +.contrib-container:nth-child(1) { + text-align: start !important; + line-height: 1.6 !important; } .contrib-container:nth-child(1) { - text-align: start !important; - line-height: 1.6 !important; + text-align: start !important; + line-height: 1.6 !important; } .contrib-container p { - font-size: 24px; + font-size: 24px; } .contrib-container h2 { - font-family: "Poppins", sans-serif; - font-weight: bold; - font-size: 40px; + font-family: "Poppins", sans-serif; + font-weight: bold; + font-size: 40px; } .contrib-container .btn4 { - font-size: 16px; - margin: 0 !important; - background-color: transparent; - border: solid white 2px; - box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; - -webkit-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; - -moz-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; + font-size: 16px; + margin: 0 !important; + background-color: transparent; + border: solid white 2px; + box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; + -webkit-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; + -moz-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; } .contrib-container .btn4:hover { - margin: 0 !important; - box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; - -webkit-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; - -moz-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; + margin: 0 !important; + box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; + -webkit-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; + -moz-box-shadow: 0px 10px 15px 3px rgba(0, 0, 0, 0.3) inset; } -.contributors{ - display: flex; - flex-direction: row; - justify-content: start; - align-items: flex-start; - flex-wrap: wrap; - gap: 5px; +.contributors { + display: flex; + flex-direction: row; + justify-content: start; + align-items: flex-start; + flex-wrap: wrap; + gap: 5px; } - /* Info */ .info { - background-color: var(--background-color1); - padding: 2rem 5rem; - color: var(--black); + background-color: var(--background-color1); + padding: 2rem 5rem; + color: var(--black); } - /* Download */ .download { - display: flex; - flex-direction: column; - text-align: center; - background-color: var(--background-color); - color: var(--black); + display: flex; + flex-direction: column; + text-align: center; + background-color: var(--background-color); + color: var(--black); } .download > h2 { - font-family: Lora, sans-serif; - font-style: italic; - color: var(--maroon); - margin-top: 2rem; + font-family: Lora, sans-serif; + font-style: italic; + color: var(--maroon); + margin-top: 2rem; } /* -Download section- */ .download_section { - margin: 1rem auto 2rem; - display: flex; - flex-direction: row; - justify-content: center; + margin: 1rem auto 2rem; + display: flex; + flex-direction: row; + justify-content: center; } /* -Dowload demo- */ .demo { - display: grid; - grid-template-columns: repeat(12, calc(100%/12)); - margin: 0 2rem 2rem 2rem; - align-items: center; + display: grid; + grid-template-columns: repeat(12, calc(100% / 12)); + margin: 0 2rem 2rem 2rem; + align-items: center; } .demo > .text { - grid-column-start: 1; - grid-column-end: 5; - text-align: left; + grid-column-start: 1; + grid-column-end: 5; + text-align: left; } .demo .text > h2 { - font-size: 3.25rem; + font-size: 3.25rem; } .demo .text > p { - font-size: 1.5rem; + font-size: 1.5rem; } .demo > video { - grid-column-start: 5; - grid-column-end: 13; - width: 100%; + grid-column-start: 5; + grid-column-end: 13; + width: 100%; } .demo_section { - margin: 1rem auto 2rem; - display: flex; - flex-direction: row; - justify-content: center; + margin: 1rem auto 2rem; + display: flex; + flex-direction: row; + justify-content: center; } /* Contact */ .contact_section { - width: 100%; - display: flex; - flex-direction: row; - justify-content: center; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; } .btn4 { - font-size: 20px; - font-weight: 600; - - background-color: var(--button-background); - color: var(--button-text); - - margin: 1rem; - padding: 16px 32px; - border-radius: 500px; - transition: 0.5s; + font-size: 20px; + font-weight: 600; + + background-color: var(--button-background); + color: var(--button-text); + + margin: 1rem; + padding: 16px 32px; + border-radius: 500px; + transition: 0.5s; } .btn4:hover { - background-color: var(--button-onhover-background); - color: var(--button-onhover-text); - box-shadow: 5px 5px 1px var(--button-onhover-shadow); + background-color: var(--button-onhover-background); + color: var(--button-onhover-text); + box-shadow: 5px 5px 1px var(--button-onhover-shadow); } #contact { - background-color: var(--background-color1); - color: var(--black); - font-family: Lora, sans-serif; - font-style: italic; -} -.contact-container{ - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - margin: 0px 10px; - gap: 10px; - padding: 20px 0 ; - text-align: center; -} -.contact-container a{ - width: auto; - padding: 20px; - font-size: 20px; - font-style: normal; - background-color: var(--text-color); - border-radius: 5rem; - margin: 0 0 34px 0 ; -} -.contact-container a:hover{ - filter: brightness(1.2); -} -.contact-container i{ - line-height: none; - padding: 0; - margin: 0; + background-color: var(--background-color1); + color: var(--black); + font-family: Lora, sans-serif; + font-style: italic; +} +.contact-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 0px 10px; + gap: 10px; + padding: 20px 0; + text-align: center; +} +.contact-container a { + width: auto; + padding: 20px; + font-size: 20px; + font-style: normal; + background-color: var(--text-color); + border-radius: 5rem; + margin: 0 0 34px 0; +} +.contact-container a:hover { + filter: brightness(1.2); +} +.contact-container i { + line-height: none; + padding: 0; + margin: 0; } #contact > h2 { - font-family: "Poppins", sans-serif !important; - font-style: normal; - text-align: center; - padding: 1rem; - font-size: 2rem; + font-family: "Poppins", sans-serif !important; + font-style: normal; + text-align: center; + padding: 1rem; + font-size: 2rem; } /* Footer */ .footer { - padding: 40px 0; - background-color: var(--background-color); - text-align: center; + padding: 40px 0; + background-color: var(--background-color); + text-align: center; } .footer .social { - text-align: center; - padding-bottom: 25px; + text-align: center; + padding-bottom: 25px; } .footer .social a { - font-size: 30px; - color: var(--black); - - border: 1px solid black; - width: 60px; - aspect-ratio: 1; - - line-height: 58px; - text-align: center; - display: inline-block; - border-radius: 50%; - margin: 0 10px; - - opacity: 0.75; - transition: all 0.25s linear; + font-size: 30px; + color: var(--black); + + border: 1px solid black; + width: 60px; + aspect-ratio: 1; + + line-height: 58px; + text-align: center; + display: inline-block; + border-radius: 50%; + margin: 0 10px; + + opacity: 0.75; + transition: all 0.25s linear; } .footer .social a:hover { - color: var(--maroon); - opacity: 1; - box-shadow: 2px 2px 10px var(--maroon), 2px -2px 10px var(--maroon), -2px -2px 10px var(--maroon), -2px 2px 10px var(--maroon); + color: var(--maroon); + opacity: 1; + box-shadow: 2px 2px 10px var(--maroon), 2px -2px 10px var(--maroon), + -2px -2px 10px var(--maroon), -2px 2px 10px var(--maroon); } .footer > p { - color: var(--black); - font-size: 15px; + color: var(--black); + font-size: 15px; } /* Dark mode toggle */ -.btn-toggle { +/* .btn-toggle { + position: fixed; + bottom: 10%; + right: 3%; + background: #0FACF3; + width: 180px; + height: 45px; + line-height: 45px; + text-align: center; + border-radius: 3px; + box-shadow: 4px 4px 4px #0a78aa; + cursor: pointer; position: relative; appearance: none; -webkit-appearance: none; - width: 50px; - height: 25px; - background-image: url("Resources/Day.webp"); background-size: cover; border-radius: 50px; @@ -704,88 +709,126 @@ line-height: 1.6 !important; transform: translate(100%); transition: all .9s; background-color: #ECF0F3; -} +} */ /* Animations */ @keyframes slide_underline { - 0% { - text-underline-offset: 100%; - } + 0% { + text-underline-offset: 100%; + } - 50% { - text-underline-offset: 55%; - } + 50% { + text-underline-offset: 55%; + } - 100% { - text-underline-offset: 10%; - } + 100% { + text-underline-offset: 10%; + } } /* Media Queries */ @media screen and (max-width: 750px) { - .header-container { - padding-top: 30px; - margin: 5rem 2rem 2rem; - z-index: 1; - } - .header-container > .btn{ - margin: 10px 0px; - } - .contrib-container{ - display: block; - padding: 2.5rem 0; - } - .contrib-container .btn4 { - text-align: center; - } - .contrib{ - padding: 0; - } - .contrib-container .content { - padding: 1.5rem 2rem !important; - transition: all 0.3s ease; - } - + .header-container { + padding-top: 30px; + margin: 5rem 2rem 2rem; + z-index: 1; + } + .header-container > .btn { + margin: 10px 0px; + } + .contrib-container { + display: block; + padding: 2.5rem 0; + } + .contrib-container .btn4 { + text-align: center; + } + .contrib { + padding: 0; + } + .contrib-container .content { + padding: 1.5rem 2rem !important; + transition: all 0.3s ease; + } } @media screen and (max-width: 864px) { - .contrib-container{ - display: block; - padding: 2.5rem 0; - transition: all 0.3s ease; - } - .contrib-container .btn4 { - text-align: center; - } + .contrib-container { + display: block; + padding: 2.5rem 0; + transition: all 0.3s ease; + } + .contrib-container .btn4 { + text-align: center; + } } @media screen and (max-width: 1345px) { - .demo { - display: flex; - flex-direction: column; - } - - .demo > .text { - text-align: center; - } - - .demo > .text > h2 { - font-size: 36px; - } - - .demo > .text > p { - font-size: 20px; - margin-bottom: 1rem; - } - - .buttons { - width: min(100%, 700px); - column-gap: 1rem; - font-size: min(4vw, 24px); - } - - .btn4 { - font-size: min(2vw, 30px); - } -} \ No newline at end of file + .demo { + display: flex; + flex-direction: column; + } + + .demo > .text { + text-align: center; + } + + .demo > .text > h2 { + font-size: 36px; + } + + .demo > .text > p { + font-size: 20px; + margin-bottom: 1rem; + } + + .buttons { + width: min(100%, 700px); + column-gap: 1rem; + font-size: min(4vw, 24px); + } + + .btn4 { + font-size: min(2vw, 30px); + } +} + +/* dark button */ + +.btn-toggle { + position: fixed; + bottom: 6%; + right: 3%; + background: #0facf3; + width: 70px; + height: 70px; + text-align: center; + border-radius: 50%; + box-shadow: 2px 2px 2px #0a78aa; + cursor: pointer; +} + +.btn-toggle p { + text-transform: uppercase; + font-family: arial; + font-weight: 900; + color: #fff; + position: relative; + top: 20px; +} + +.fb { + font-size: 1.3rem; +} + +.Txt { + font-size: small; +} +.darkTxt { + display: none; +} + +.lightTxt { + display: none; +}