edit: panneau contact + bug fix
This commit is contained in:
+10
-20
@@ -20,7 +20,7 @@
|
||||
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
<link rel="stylesheet" href="style/responsive.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="style/reduced.css">
|
||||
</head>
|
||||
<body>
|
||||
@@ -36,6 +36,9 @@
|
||||
On revient bientôt avec toujours plus de drags et de nerds !
|
||||
<br><br>
|
||||
En attendant tu peux aller voir<br>les sites et projets de nos copaines
|
||||
<br><br>
|
||||
Si tu veux rejoindre la team, <br>
|
||||
n'hésite pas à nous contacter ^^
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -62,26 +65,13 @@
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<section id="musicPlayer" class="floating">
|
||||
<section id="contactSection" class="floating">
|
||||
<h1>
|
||||
artist — track
|
||||
Nous contacter :
|
||||
</h1>
|
||||
<nav aria-hidden="true">
|
||||
<button class="iconBtn" id="previousTrack">
|
||||
<svg class="icon" viewBox="0 0 18.25 17.52">
|
||||
<polygon points="18.25 0 5.28 6.21 5.28 .23 0 .23 0 8.75 0 8.81 0 17.29 5.28 17.29 5.28 11.33 18.25 17.52 18.25 11.58 11.88 8.78 18.25 5.94 18.25 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="iconBtn" id="toggleMusic">
|
||||
<svg class="icon" viewBox="0 0 18.25 17.52">
|
||||
<path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="iconBtn">
|
||||
<svg class="icon" viewBox="0 0 18.25 17.52">
|
||||
<polygon points="12.97 .23 12.97 6.19 0 0 0 5.94 6.37 8.75 0 11.58 0 17.52 12.97 11.31 12.97 17.29 18.25 17.29 18.25 8.78 18.25 8.71 18.25 .23 12.97 .23"/>
|
||||
</svg>
|
||||
</button>
|
||||
<nav aria-label="informations de contact de la team drags and nerds">
|
||||
<a href="https://signal.me/#eu/jPBmn2MoCUWsKN0eJbWl_3w-HuPNu2SndVwaWZX3iC9HBnQEi4FPSZefIkfS86T8" class="textBtn" target="_blank">Vega</a>
|
||||
<a href="mailto:urazoriapro@gmail.com" class="textBtn" target="_blank">Urazoria</a>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
@@ -107,4 +97,4 @@
|
||||
|
||||
<script type="module" src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
+3
-3
@@ -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();
|
||||
themeSwitcher();
|
||||
|
||||
+6
-3
@@ -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';
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
+5
-5
@@ -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); }
|
||||
}
|
||||
}
|
||||
|
||||
+29
-3
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
+20
-14
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,6 +12,6 @@
|
||||
@media(min-width: 1300px){
|
||||
main > footer{
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
min-height: 77px;
|
||||
min-height: 99px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user