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

                                    
up down tr in table with js

up down tr in table with js

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Scroll to div ID

Scroll to div ID

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Nav Menu style01

Nav Menu style01

Loading Style snake

Loading Style snake

Input file style01

Input file style01

Image hover 01

Image hover 01

Chercher un mot sur la liste

Chercher un mot sur la liste

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Bloc resizable with jquery

Bloc resizable with jquery