From 6d0e6b65700cfe83f957487f5530f733cce0539c Mon Sep 17 00:00:00 2001 From: Alcaraz Yannick Date: Fri, 4 Dec 2020 01:35:28 +0100 Subject: [PATCH] modif des formulaires connexion et inscriptions --- .idea/workspace.xml | 27 ++++++++++++++-- connexion.html | 18 +++++------ css/connexion.css | 44 +++++++++++++------------- css/creation.html | 39 ----------------------- css/{creation.css => inscription.css} | 45 +++++++++++++-------------- inscription.html | 40 ++++++++++++++++++++++++ 6 files changed, 118 insertions(+), 95 deletions(-) delete mode 100644 css/creation.html rename css/{creation.css => inscription.css} (86%) create mode 100644 inscription.html diff --git a/.idea/workspace.xml b/.idea/workspace.xml index dfef31d..d4239eb 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -1,7 +1,14 @@ - + + + + + + + + + + + + + @@ -49,11 +61,22 @@ + + + \ No newline at end of file diff --git a/connexion.html b/connexion.html index 8d2c017..e472b30 100644 --- a/connexion.html +++ b/connexion.html @@ -8,25 +8,25 @@ - + -
-
+
+

Se connecter

-

Créer un compte

+

Créer un compte

- - - + + +
- diff --git a/css/connexion.css b/css/connexion.css index a280900..c42c508 100644 --- a/css/connexion.css +++ b/css/connexion.css @@ -40,7 +40,7 @@ h2 { padding: 20px; } -#formContent { +#contenu { background: #fff; padding: 30px; @@ -53,7 +53,7 @@ h2 { text-align: center; } -#formFooter { +#pied { background-color: #f6f6f6; border-top: 1px solid #dce8f1; padding: 25px; @@ -133,7 +133,7 @@ input[type=text]:focus { border-bottom: 2px solid #5fbae9; } -input[type=text]:placeholder { +input[type=text]::placeholder { color: #cccccc; } @@ -142,16 +142,16 @@ input[type=text]:placeholder { /* ANIMATIONS */ /* Simple CSS3 Fade-in-down Animation */ -.fadeInDown { - -webkit-animation-name: fadeInDown; - animation-name: fadeInDown; +.fonduBas { + -webkit-animation-name: fonduBas; + animation-name: fonduBas; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } -@-webkit-keyframes fadeInDown { +@-webkit-keyframes fonduBas { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); @@ -164,7 +164,7 @@ input[type=text]:placeholder { } } -@keyframes fadeInDown { +@keyframes fonduBas { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); @@ -178,15 +178,15 @@ input[type=text]:placeholder { } /* Simple CSS3 Fade-in Animation */ -@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } -@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } -@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } +@-webkit-keyframes fondu { from { opacity:0; } to { opacity:1; } } +@-moz-keyframes fondu { from { opacity:0; } to { opacity:1; } } +@keyframes fondu { from { opacity:0; } to { opacity:1; } } -.fadeIn { +.fondu { opacity:0; - -webkit-animation:fadeIn ease-in 1; - -moz-animation:fadeIn ease-in 1; - animation:fadeIn ease-in 1; + -webkit-animation:fondu ease-in 1; + -moz-animation:fondu ease-in 1; + animation:fondu ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; @@ -197,32 +197,32 @@ input[type=text]:placeholder { animation-duration:1s; } -.fadeIn.first { +.fondu.premier { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } -.fadeIn.second { +.fondu.deuxieme { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; } -.fadeIn.third { +.fondu.troisieme { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; animation-delay: 0.8s; } -.fadeIn.fourth { +.fondu.quatrieme { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; } /* Simple CSS3 Fade-in Animation */ -.underlineHover:after { +.souligne:after { display: block; left: 0; bottom: -10px; @@ -233,11 +233,11 @@ input[type=text]:placeholder { transition: width 0.2s; } -.underlineHover:hover { +.souligne:hover { color: #0d0d0d; } -.underlineHover:hover:after{ +.souligne:hover:after{ width: 100%; } diff --git a/css/creation.html b/css/creation.html deleted file mode 100644 index 5323fa0..0000000 --- a/css/creation.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - Accueil - - - - - -
-
- -

Se connecter

-

Créer un compte

- - - - -
- - - -
- - - - -
-
- - - - - \ No newline at end of file diff --git a/css/creation.css b/css/inscription.css similarity index 86% rename from css/creation.css rename to css/inscription.css index a280900..91a48ad 100644 --- a/css/creation.css +++ b/css/inscription.css @@ -40,8 +40,7 @@ h2 { padding: 20px; } -#formContent { - +#contenu { background: #fff; padding: 30px; width: 90%; @@ -53,7 +52,7 @@ h2 { text-align: center; } -#formFooter { +#pied { background-color: #f6f6f6; border-top: 1px solid #dce8f1; padding: 25px; @@ -133,7 +132,7 @@ input[type=text]:focus { border-bottom: 2px solid #5fbae9; } -input[type=text]:placeholder { +input[type=text]::placeholder { color: #cccccc; } @@ -142,16 +141,16 @@ input[type=text]:placeholder { /* ANIMATIONS */ /* Simple CSS3 Fade-in-down Animation */ -.fadeInDown { - -webkit-animation-name: fadeInDown; - animation-name: fadeInDown; +.fonduBas { + -webkit-animation-name: fonduBas; + animation-name: fonduBas; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } -@-webkit-keyframes fadeInDown { +@-webkit-keyframes fonduBas { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); @@ -164,7 +163,7 @@ input[type=text]:placeholder { } } -@keyframes fadeInDown { +@keyframes fonduBas { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); @@ -178,15 +177,15 @@ input[type=text]:placeholder { } /* Simple CSS3 Fade-in Animation */ -@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } -@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } -@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } +@-webkit-keyframes fondu { from { opacity:0; } to { opacity:1; } } +@-moz-keyframes fondu { from { opacity:0; } to { opacity:1; } } +@keyframes fondu { from { opacity:0; } to { opacity:1; } } -.fadeIn { +.fondu { opacity:0; - -webkit-animation:fadeIn ease-in 1; - -moz-animation:fadeIn ease-in 1; - animation:fadeIn ease-in 1; + -webkit-animation:fondu ease-in 1; + -moz-animation:fondu ease-in 1; + animation:fondu ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; @@ -197,32 +196,32 @@ input[type=text]:placeholder { animation-duration:1s; } -.fadeIn.first { +.fondu.premier { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } -.fadeIn.second { +.fondu.deuxieme { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; } -.fadeIn.third { +.fondu.troisieme { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; animation-delay: 0.8s; } -.fadeIn.fourth { +.fondu.quatrieme { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; } /* Simple CSS3 Fade-in Animation */ -.underlineHover:after { +.souligne:after { display: block; left: 0; bottom: -10px; @@ -233,11 +232,11 @@ input[type=text]:placeholder { transition: width 0.2s; } -.underlineHover:hover { +.souligne:hover { color: #0d0d0d; } -.underlineHover:hover:after{ +.souligne:hover:after{ width: 100%; } diff --git a/inscription.html b/inscription.html new file mode 100644 index 0000000..c9b456f --- /dev/null +++ b/inscription.html @@ -0,0 +1,40 @@ + + + + + + + Accueil + + + + + +
+
+ +

Se connecter

+

Créer un compte

+ + +
+ + + +
+ + + + +
+
+ + + + + + + +