<div id="content">
<div id="login_form">
<div class="message">
<p>Votre compte à bien été crée !</p>
</div>
<form>
<h2>Login</h2>
<input type="text" name="username" value="" placeholder="identifiant"/>
<input type="password" name="password" value="" placeholder="Mot de passe" />
<input type="submit" name="submit" value="Se connecter" />
</form>
</div>
</div>
#login_form {
width:90%;
background-color: #bdd2ff;
border: 1px solid white;
margin: 50px auto 0;
padding: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
input[type=text], input[type=password] {
text-align:center;
display: block;
margin: 0 auto 1em auto;
width: 90%;
border: 1px solid #818181;
padding: 5px;
}
@keyframes cssAnimation {
0% {opacity: 1; height: 100%;}
90% {opacity: 1;; height: 50%;}
100% {opacity: 0; height: 0px;}
}
.message{
margin: 0 auto 1em auto;
border: 1px solid black;
border-radius: 5px;
background-color: #15cf46;
width: 30%;
animation: cssAnimation 3s forwards;
}
.message p{
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.