Form Création de compte style animée

<!DOCTYPE html>
<html>
<head>
    <title>Form-Création-de-compte-style-animée | Par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">    	
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body>
    <div class="container">
        <div class="row formBloc mt-5 mb-5">
          <div class="col-lg-5 fadeIn">
            <article class="d-block mx-auto formText">
              <h1 class="title">Welcome Back!</h1>
              <p class="msg">Enter your personal details and start journey with us</p>
            </article>
          </div>
          <div class="col-lg-7 ">
          <div class="wrapper fadeInDown zero-raduis">
              <div class="formContent">
                <div class="fadeIn first">
                  <h2 class="my-5 titre-box">Create account</h2>
                </div>
                <form>
                <input type="text" id="name" class="fadeIn second zero-raduis" name="nomc" placeholder="Nom complet" required>
                  <input type="email" id="email" class="fadeIn second zero-raduis" name="email" placeholder="email" email required>
                  <input type="password" id="password" class="fadeIn third zero-raduis" name="pass1" placeholder="password" required>
                  <input type="password" id="reppassword" class="fadeIn third zero-raduis" name="pass2" placeholder="Repeat password" required>
                  <input type="submit" class="fadeIn fourth zero-raduis" value="Create account">
                <br>
                  <h2><a href="login.html">Login</h2>
                <hr>
                <div class="col-lg-12 ">
                      <ul class="list-inline text-center">
                        <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#"><i class="fa fa-facebook"></i></a></li>
                        <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#"><i class="fa fa-twitter"></i></li>
                        <li class="list-inline-item"><a class="social-icon text-xs-center" target="_blank" href="#"><i class="fa fa-linkedin"></i></li>
                      </ul>		  
                </div>
                </form>
              </div>
          </div>	
          </div>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
.formBloc .formText{
  text-align: center;
  width: 100%;
margin-top:100px;
height: auto;
margin-bottom: 30px;
}

.formBloc .zero-raduis{
border-radius: 0px !important;
}

.formBloc a {
color: #92badd;
display:inline-block;
text-decoration: none;
font-weight: 400;
}

.formBloc h2 {
text-align: center;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
color: #56baed;
}

.formBloc .titre-box{
text-align: center;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
display:inline-block;
color: #56baed;
}



/* STRUCTURE */

.formBloc .wrapper {
display: flex;
flex-direction: column; 
justify-content: center;
width: 100%;
min-height: 100%;
}

.formBloc .formContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
padding: 30px;
width: 100%;
max-width: 100%;
position: relative;
padding: 0px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3);
text-align: center;
}

.formBloc #formFooter {
padding: 2px ;
text-align: right;
width: 90%;
}



/* TABS */

.formBloc h2.inactive {
color: #cccccc;
}

.formBloc h2.active {
color: #0d0d0d;
border-bottom: 2px solid #5fbae9;
}



/* FORM TYPOGRAPHY*/

.formBloc input[type=button], 
input[type=submit], input[type=reset]  {
background-color: #56baed;
border: none;
color: white;
width: 85%;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 16px;
cursor: pointer;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.formBloc input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
background-color: #39ace7;
}

.formBloc input[type=button]:active, input[type=submit]:active, input[type=reset]:active  {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}

.formBloc input[type=text], input[type=email], input[type=password] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border-bottom: 1px solid #47b75f;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

.formBloc input[type=text]:focus, input[type=email]:focus, input[type=password]:focus{
background-color: #fff;
border-bottom: 2px solid #47b75f;
}

.formBloc input[type=text]:placeholder, input[type=email]:placeholder, input[type=password]:placeholder {
color: #cccccc;
}



/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */
.formBloc .fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}
}

@keyframes fadeInDown {
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}
}

/* 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; } }

.formBloc .fadeIn {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}

.formBloc .fadeIn.first {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}

.formBloc .fadeIn.second {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}

.formBloc .fadeIn.third {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}

.formBloc .fadeIn.fourth {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}

/* Simple CSS3 Fade-in Animation */
.formBloc .underlineHover:after {
display: block;
width: 0;
height: 2px;
background-color: #56baed;
content: "";
transition: width 0.2s;
}

.formBloc .underlineHover:hover {
color: #0d0d0d;
}

.formBloc .underlineHover:hover:after{
width: 100%;
}



/* OTHERS */

*:focus {
  outline: none;
} 

.formBloc #icon {
width:30%;
}

                                    
Affichage des images aléatoire avec js

Affichage des images aléatoire avec js

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Chercher un mot sur la liste

Chercher un mot sur la liste

Form Step With B4 Style01

Form Step With B4 Style01

Input range slider HTML style04

Input range slider HTML style04

Input range slider HTML style05

Input range slider HTML style05

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Radio button style

Radio button style

Scroll to div ID

Scroll to div ID

up down tr in table with js

up down tr in table with js