diff --git a/index.html b/index.html index 4c25ac7..d71a08d 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ - + @@ -36,6 +36,9 @@ On revient bientôt avec toujours plus de drags et de nerds !

En attendant tu peux aller voir
les sites et projets de nos copaines +

+ Si tu veux rejoindre la team,
+ n'hésite pas à nous contacter ^^

@@ -62,26 +65,13 @@ -
+

- artist — track + Nous contacter :

-
@@ -107,4 +97,4 @@ - \ No newline at end of file + diff --git a/js/main.js b/js/main.js index c955f2f..6327d58 100644 --- a/js/main.js +++ b/js/main.js @@ -5,9 +5,9 @@ import { themeSwitcher } from './theme.js'; const mainWindow = document.querySelector('main > #seeYouLater'); -//const playerWindow = document.querySelector('main > #musicPlayer'); +const contactWindow = document.querySelector('main > #contactSection'); makeItFloat(mainWindow); -//makeItFloat(playerWindow); +makeItFloat(contactWindow); -themeSwitcher(); \ No newline at end of file +themeSwitcher(); diff --git a/js/theme.js b/js/theme.js index 05b6563..58a458a 100644 --- a/js/theme.js +++ b/js/theme.js @@ -1,17 +1,20 @@ const container = document.querySelector('#colorBtnContainer'); const themeToggler = container.querySelector('.switch input'); const background = document.querySelector('aside > #gradient'); +const btn = document.querySelector('#webRing > a:first-child > img'); export function themeSwitcher(){ - container.style.visibility = 'visible' - console.log('selected switch', themeToggler); + container.style.visibility = 'visible'; + console.log('selected btn:', btn); themeToggler.addEventListener('change', (event) => { if (event.target.checked){ document.documentElement.setAttribute('data-theme', 'light'); background.style.filter = 'invert(1) saturate(333%) brightness(93%) hue-rotate(90deg)'; + btn.style.filter = 'invert(1) saturate(93%) brightness(233%) hue-rotate(90deg)'; }else{ document.documentElement.setAttribute('data-theme', 'dark'); background.style.filter = 'unset'; + btn.style.filter = 'unset'; } }) -} \ No newline at end of file +} diff --git a/style/animation.css b/style/animation.css index 8b0a1d1..717d5c4 100644 --- a/style/animation.css +++ b/style/animation.css @@ -10,11 +10,11 @@ @keyframes blinkBack { 0% { background-color: var(--accent-color);} - 15% { background-color: var(--main-color);} - 35% { background-color: var(--main-color);} + 15% { background-color: var(--neon-color);} + 35% { background-color: var(--neon-color);} 50% { background-color: var(--accent-color);} - 65% { background-color: var(--main-color);} - 85% { background-color: var(--main-color);} + 65% { background-color: var(--neon-color);} + 85% { background-color: var(--neon-color);} 100% { background-color: var(--accent-color);} } @@ -24,4 +24,4 @@ 50% { transform: translateY(-10px); } 65% { transform: translateY(1px); } 100% { transform: translateY(0px); } -} \ No newline at end of file +} diff --git a/style/common.css b/style/common.css index db86eec..aa80fa2 100644 --- a/style/common.css +++ b/style/common.css @@ -66,6 +66,32 @@ } } +.textBtn{ + background-color: var(--back-color); + border-color: var(--main-color); + border-style: solid; + border-radius: 22px; + border-width: thin thin thick thin; + + color: var(--main-color); + + font-family: 'velvelyne'; + font-weight: bold; + text-transform: uppercase; + font-size: 22px; + + display: flex; + align-items: center; + justify-content: space-around; + + animation: none; +} + +.textBtn:hover{ + color: var(--back-color); + animation: blinkBack 1.61s infinite; +} + .floating[data-window="selected"]{ z-index: 333 !important; border-color: var(--accent-color); @@ -73,10 +99,10 @@ h1{ background-color: var(--accent-color); } - + .iconBtn{ border-color: var(--accent-color); color: var(--accent-color); } - -} \ No newline at end of file + +} diff --git a/style/main.css b/style/main.css index dc42e30..ed4a7c0 100644 --- a/style/main.css +++ b/style/main.css @@ -2,15 +2,15 @@ :root[data-theme="dark"]{ --back-color: black; --main-color: white; - --accent-color: #3CFF00; - --neon-color: #3CFF00; + --accent-color: #05ff61; + --neon-color: #fe02c6; } :root[data-theme="light"]{ --back-color: white; --main-color: black; --accent-color: #FFA64D; - --neon-color: black; + --neon-color: skyblue; } /*==========================Background*/ html,body{ @@ -35,9 +35,9 @@ main{ position: absolute; z-index: 1; width: 444px; - height: 444px; + height: 377px; top:33px; - left:13.12px; + left:33px; div { padding: 13.12px; @@ -47,7 +47,7 @@ main{ font-size: 22px; color: var(--main-color) - + } strong{ @@ -57,32 +57,38 @@ main{ } } - #musicPlayer{ + #contactSection{ position: absolute; z-index: 1; width: 333px; height: 117px; - top:444px; - left:277px; - visibility: collapse; + top:400px; + left:13.12px; + nav{ width: 100%; height: 100%; + padding: 13.12px; + gap: 7.77px; + display: flex; flex-direction: row; align-items: center; justify-content: space-around; - .iconBtn{ - width: 33px; - height: 33px; + box-sizing: border-box; + + .textBtn{ + width: 66%; + height: 77%; } } } #colorBtnContainer{ + visibility: collapse; position:absolute; right: 13.12px; bottom: 117px; @@ -227,4 +233,4 @@ aside{ transition: 7.77s ease-in; } -} \ No newline at end of file +} diff --git a/style/responsive.css b/style/responsive.css index c595763..478f129 100644 --- a/style/responsive.css +++ b/style/responsive.css @@ -12,6 +12,6 @@ @media(min-width: 1300px){ main > footer{ grid-template-columns: repeat(9, 1fr); - min-height: 77px; + min-height: 99px; } }