IQBall
/
Application
Archived
5
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v2 login.css
continuous-integration/drone/push Build is passing Details

Browse Source
pull/1/head
Leo TUAILLON 2 years ago
parent d4e2b9f571
commit f215c6a07a
3 changed files with 114 additions and 7 deletions
Show Stats Download Patch File Download Diff File

BIN
www/img/background-login.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 568 KiB

19
www/login/index.html
Unescape View File

@ -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>

100
www/login/login.css
Unescape View File

@ -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;
}