From 7cd8671b22376a7e2a74f83511bda64eb882a7f7 Mon Sep 17 00:00:00 2001 From: "foulou.salle224-15" Date: Mon, 15 Jan 2024 13:00:11 +0100 Subject: [PATCH] =?UTF-8?q?Premi=C3=A8re=20version=20de=20la=20page=20d'ac?= =?UTF-8?q?ceuil=20mais=20probl=C3=A8me=20avec=20le=20bouton=20connexion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- background.jpg | Bin 0 -> 13875 bytes index.html | 85 ++++++++++++++++ script.js | 22 ++++ style.css | 265 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 372 insertions(+) create mode 100644 background.jpg create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/background.jpg b/background.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6490334db80fa84bd354631ca1a3b82953b04a50 GIT binary patch literal 13875 zcmex=oIr{vTiv$6#!=LAFy|bfurFa_`yFIx9Q!`4_AOskt zYTv&3!N4HfcYx&w4a^@kax?@+Ltr!nMnhmU1V%$(Gz3ONU^E0qLtr!nMnhmU1V%$( zGz3ONU^E0qLtr!nMnhmU1V%$(Gz3ONU^E0qLtr!nMnhmU1V%$(Gz3ONU^E0qLtr!n zMnhmU1V%$(Gz3ONU^E0qLtr!ns1O2HOZ6vR^a{E*^Hay|8J#nG-M-(F>ovGE<#hDD zs|VWyr)96$`qqB4@XN<imBOsYj1LCO^D*>U?(ov#7nI z^S)hiIa2O;0;M?vMBT`^fa+ zuO_uSdjyX^jhBha6}`5s_K{Rk#g}zf=?Al;S)T`9m3?hD`DaD_MEN@Poj=+lIzC?8 z@4?da`r)GwUwyvri}}^LH9K#{l3$hQ{??d0D=7Rakzc11wNo>0b<&n2?>0Ucmb$+` zzrc+dH(k~Yp%5GQaiTA0oOWhZz70;Jlwmx*x)h)lOj{Nek zxOwE^gZ<(Yr%%ofesXK$?PKM8ufN{Wzd%8*O{YdL^)a7R>fvd3SDWn*iKjRJD3hvD;j@!ICZu`sLU*X#;?!V$-mDy)o5H;<1sWX!Kn%TL&{#?l4 z{VK=nQjYz}jR_Q+@qNDhvwppbt;up$XA9pK@4R#C-e&t}`)3%29z0zA{O88Xqy6Id zwt4)W(a+Hz`KiO}Qt`ctkIjV=kE*uH726em`SgYL&+qH=yDTk~vis#;=h*MuZ|gqg z{ntM;p8RJ>d;Fh4>OaHnkRQhP`zNoLIri1i(Du>Ahij{Z=Y2aUk(Rt@`)v1o&KVv5 z8LlwbxBh2XJ^x|+?^J0Y%lF4mnlIb6D{b%N+GVEy8FCK3OFo?QXZ5AYtD{>Z*4LKL z=>Pn=V%pl3nM+rjZcPssmJ{0DKkw)2lY6&bjk5_ey}iXZ@koug%@N<%-KvXB#r9cj z-EaAsJuvd{hi=#3emPsWDqqtU-uWvp;dzwi$IQL^d2=J@S9G-O-2CK8%Iv3mZe9MD zWvh5!eQI5}&y!^qGy0E4Wu7&nAZJ)XQUgzKSVxm7<4UgQH zXBJgUy85bf`<(3Sangz1vuBIxPqj5aF8gTvn&^0c_cMR??0g*+mmL+pCv0oi_1EhI z64%|n^7>%@k=5C0$LE<_Yzo>d_RGcP`1R^u_1}K}n`&p5{*0}yll}hi(R+4dbGdCx z)3zPY`)j@?YWLSGKm2#7cbz$M#^sewweIt<{OV|K zu4g~p*5tVHkIaZQ{#VcOg~i!DmR-E;e%H2+t?93YZ}6$f%={Vg(&PPAVdICQ9q)I3 z>&?&J{B&KO{t=_#54UY|OdH4!h3Wi1{h?f0CPz`%C4K`4je<_6{jTIDCInQOJo`;xBc UmLpMn&A#`4l4(E~%>4f*0NyquNB{r; literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..f7c4444 --- /dev/null +++ b/index.html @@ -0,0 +1,85 @@ + + + + + + Pegasus + + + + + +
+ + +
+
+ + + + + +
+

S'inscrire

+
+
+ + + + + +
+
+ + + +
+
+ + + +
+
+ +
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..c21935c --- /dev/null +++ b/script.js @@ -0,0 +1,22 @@ +const wrapper = document.querySelector('.wrapper'); +const loginLink = document.querySelector('.login-link'); +const registerLink = document.querySelector('.register-link'); +const btnPopup = document.querySelector('.btnLogin-popup'); +const iconClose = document.querySelector('.icon-close'); + + +registerLink.addEventListener('click', ()=> { + wrapper.classList.add('active'); +}); + +loginLink.addEventListener('click', ()=> { + wrapper.classList.remove('active'); +}); + +btnPopup.addEventListener('click', ()=> { + wrapper.classList.add('active-popup'); +}); + +iconClose.addEventListener('click', ()=> { + wrapper.classList.remove('active-popup'); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..55e0987 --- /dev/null +++ b/style.css @@ -0,0 +1,265 @@ + { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; + +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: url('background.jpg') no-repeat; + background-size: cover; + background-position: center; +} + +header { + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 20px 100px; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 99; +} + +.logo { + font-size: 2em; + color: #fff; + user-select: none; +} + +.navigation a { + position: relative; + font-size: 1.1em; + color: #fff; + text-decoration: none; + font-weight: 500; + margin-left: 40px; +} +.navigation a::after { + content: ''; + position: absolute; + left: 0; + bottom: -6px; + width: 100%; + height: 3px; + background: #fff; + border-radius: 5px; + transform-origin: right; + transform: scaleX(0); + transition: transform .5s; + +} +.navigation a:hover::after { + transform-origin: left; + transform: scaleX(1); + +} + +.navigation .btnLogin-popup { + width: 130px; + height: 50px; + background: transparent; + border: 2px solid #fff; + outline: none; + border-radius: 6px; + cursor: pointer; + font-size: 1.1em; + color: #fff; + font-weight: 500; + margin-left: 40px; + transition: .5s; +} + +.navigation .btnLogin-popup:hover { + background: #fff; + color: #162938; + +} + +.wrapper { + position: relative; + width: 400px; + height: 440px; + background: transparent; + border: 2px solid rgba(255, 255, 255, .5); + border-radius: 20px; + backdrop-filter: blur(20px); + box-shadow: 0 0 30px rgba(0, 0, 0, .5); + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + transform: scale(0); + transition: transform .5s ease, height .2s ease; +} + +.wrapper.active-popup { + transform: scale(1); + +} + +.wrapper.active { + height: 520px; + +} + +.wrapper .form-box { + width: 100%; + padding: 40px; +} + +.wrapper .form-box.login { + transition: transform .18s ease; + transform: translateX(0); +} + +.wrapper.active .form-box.login { + transition: none; + transform: translateX(-400px); +} + +.wrapper .form-box.register { + position: absolute; + transition: none; + transform: translateX(400px); +} + +.wrapper.active .form-box.register { + transition: transform .18s ease; + transform: translateX(0); +} + +.wrapper .icon-close { + position: absolute; + top: 0; + right: 0; + width: 45px; + height: 45px; + background: #162938; + font-size: 2em; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + border-bottom-left-radius: 20px; + cursor: pointer; + z-index: 1; + +} + +.form-box h2 { + font-size: 2em; + color: white; + text-align: center; +} + +.input-box { + position: relative; + width: 100%; + height: 50px; + border-bottom: 2px solid whitesmoke; + margin: 30px 0; +} + +.input-box label { + position: absolute; + top: 50%; + left: 5px; + transform: translateY(-50%); + font-size: 1em; + color: whitesmoke; + font-weight: 500; + pointer-events: none; + transition: .5s; +} + +.input-box input:focus~label, +.input-box input:valid~label { + top: -5px; +} + + +.input-box input { + width: 100%; + height: 100%; + background: transparent; + border: none; + outline: none; + font-size: 1em; + color:whitesmoke; + font-weight: 600; + padding: 0 35px 0 5px; + +} + +.input-box .icon { + position: absolute; + right: 8px; + font-size: 1.2em; + line-height: 57px; +} + +.remember-forgot { + font-size: .9em; + color: whitesmoke; + font-weight: 500; + margin: -15px 0 15px; + display: flex; + justify-content: space-between; + +} + +.remember-forgot label input { + accent-color: purple; + margin-right: 3px; +} + +.remember-forgot a { + color: #162938; + text-decoration: none; +} + +.remember-forgot a:hover { + text-decoration:underline +} + +.btn { + width: 100%; + height: 45px; + background: #162938; + border: none; + outline: none; + border-radius: 6px; + cursor: pointer; + font-size: 1em; + color: #fff; +} + +.login-register { + font-size: .9em; + color: #FBFCFC; + text-align: center; + font-weight: 500; + margin: 25px 0 10px; +} + +.login-register p a { + color: #162938; + text-decoration: none; + font-weight: 600; +} + +.login-register p a:hover { + text-decoration: underline; + +} + + +