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

login page green one

login page green one

bootstrap4 tabs

bootstrap4 tabs

Responsive image grid

Responsive image grid

Form login 03

Form login 03

Form contact avec validation en css

Form contact avec validation en css

Css Page grid layout

Css Page grid layout

Créer une input search animée

Créer une input search animée

Card 4 Product Style01

Card 4 Product Style01

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Animation 3d social icones avec css3

Animation 3d social icones avec css3

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select