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

page scroll progress bar

page scroll progress bar

Triangle Background css 01

Triangle Background css 01

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Image hover 03

Image hover 03

Image hover 02

Image hover 02

Form Step With B4 Style01

Form Step With B4 Style01

Form Création de compte style animée

Form Création de compte style animée

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu