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

                                    
Timeline style04

Timeline style04

Table Responsive with css 01

Table Responsive with css 01

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Input range slider HTML style02

Input range slider HTML style02

Input range slider HTML style01

Input range slider HTML style01

Image hover 01

Image hover 01

Form login b4 01

Form login b4 01

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Compteur avec b4

Compteur avec b4

Carousel Bootstrap4

Carousel Bootstrap4

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery