v2 login.css

2 years ago · f215c6a07a
parent d4e2b9f571
commit f215c6a07a
3 changed files with 114 additions and 7 deletions
--- a/www/img/background-login.jpg
+++ b/www/img/background-login.jpg
--- a/www/login/index.html
+++ b/www/login/index.html
@ -10,14 +10,14 @@
 <body>
    <div class="container">
        <form action="#" method="POST">
-            <h3>S'identifier</h3>
+            <h3>Se connecter :</h3>
            <div class="Input">
                <span>Identifiant (eMail)</span>
                <div class="box">
                    <div class="icon">
                        <ion-icon name="person-circle-outline"></ion-icon>
                    </div>
-                    <input type="text" name="username" required>
+                    <input type="input" class="form__field" placeholder="email" name="name" id='name' required />
                </div>
            </div>
            <div class="Input">
@ -26,11 +26,20 @@
                    <div class="icon">
                        <ion-icon name="lock-closed"></ion-icon>
                    </div>
-                    <input type="password" name="password" required>
+                    <input type="password" class="form__field" placeholder="mot de passe" name="password" id="password" required>
                </div>
            </div>
-            <a href="#" class="forgot">Mot de passe oublié</a>
-            <br><a href="register.html" class="register">S'inscrire</a>
+            <label>
+                <input type="checkbox">Se souvenir de moi
+            </label>
+            <div class="Input">
+                <div class="box">
+                    <input type="submit" value="Se connecter" >
+                </div>
+            </div>
+
+            <a href="#" class="forgot">J'ai oublier mon mot de passe</a>
+            <br><a href="register.html" class="register">Je n'ai pas encore de compte</a>
        </form>
    </div>
 </body>
--- a/www/login/login.css
+++ b/www/login/login.css
@ -13,7 +13,10 @@ body{
    justify-content: center;
    align-items: center;
    min-height: 100vh;
-    background: #585858;
+    background-image: url("../img/background-login.jpg");
+    -webkit-backdrop-filter: blur(15px); /* assure la compatibilité avec safari */
+    backdrop-filter: blur(35px);
+    background-color: rgba(182, 182, 182, 0.2);
 }

 .container{
@ -22,4 +25,99 @@ body{
    min-height: 550px;
    justify-content: center;
    align-items: center;
+    background: #F2561D;
+    box-shadow: 25px 25px 75px rgba(0,0,0,0.25), 10px 10px 70px rgba(0,0,0,0.5);
+    border-radius: 30px;
+    padding: 50px;
 }
+
+form{
+    position: relative;
+    width: 100%;
+}
+
+.container h3{
+    color: #0D0D0D;
+    font-weight: 600;
+    font-size: 2em;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 30px;
+    letter-spacing: 1px;
+}
+container a:link{
+    color: #0D0D0D;
+}
+container a:visited{
+    color: #0D0D0D;
+}
+
+container a:hover{
+    color: #0D0D0D;
+}
+.Input{
+    position: relative;
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.Input span{
+    display: inline-block;
+    color: #0D0D0D;
+    margin-bottom: 10px;
+    letter-spacing: 1px;
+    font-size: 1.25em;
+    border-left: 4px solid #FF8444;
+    padding-left: 4px;
+    line-height: 1em;
+}
+.Input .box{
+    display: flex;
+}
+
+.Input .box .icon{
+    position: relative;
+    min-width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    margin-right: 10px;
+    color: #0D0D0D;
+    font-size: 1.15em;
+    box-shadow: 5px 5px 7px rgba(0,0,0,0.25);
+}
+
+.Input .box input{
+    position: relative;
+    width: 100%;
+    border: none;
+    outline: none;
+    padding: 10px 20px;
+    border-radius: 30px;
+    font-size: 0.85em;
+    box-shadow: 5px 5px 7px rgba(0,0,0,0.25);
+}
+
+.Input .box input[type="submit"]{
+    background-color: #0D0D0D;
+    box-shadow: 5px 5px 7px rgba(0,0,0,0.25);
+    color: #FF8444;
+    cursor:pointer;
+    letter-spacing: 2px;
+    font-weight: 600;
+    margin-top: 10px;
+}
+label{
+    color: #0D0D0D;
+    letter-spacing: 1px;
+    font-size: 0.95em;
+    display: flex;
+    align-items: center;
+}
+
+label input{
+    margin-right: 5px;
+}
+