Form Création de compte

<!DOCTYPE html>
<html>
<head>
  <title>Formulaire - Créer un compte | 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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container">
    <div class="row mt-5 mb-5">
    <div class="col-lg-6">
      <div class="form-login text-center">
          <img src="location-pin.svg" height="120px" width="120px" class="text-center img-responsive">
        <h1 class="text-bleu mt-3">Créer un compte et accédez à nos services. <span class="text-success">100% Gratuit</span></h1>
        <ul class="list-unstyled text-left" style="line-height: 2">
          <li><span class="fa fa-check text-success"></span> Ajouter votre établissement</li>
          <li><span class="fa fa-check text-success"></span> Référencer vos produits</li>
          <li><span class="fa fa-check text-success"></span> Publier vos moments</li>
          <li><span class="fa fa-check text-success"></span> Gérer votre établissement</li>
        </ul>
      </div>
    </div>
      <div class="col-lg-6">
      <div class="form-login">
          <div class="form-login-triangle"></div>
          <h2 class="form-login-header">Créer un compte</h2>
          <form class="form-login-body">
            <p><input type="text" id="inputname" name="inputname" autocomplete="on"  placeholder="Saisissez votre nom complet" required></p>
            <p><input type="email" id="inputemail" name="inputemail" autocomplete="on" placeholder="Saisissez votre email" email required></p>
            <p><input type="password" id="inputpass" name="inputpass" autocomplete="on"  placeholder="Saisissez votre mot de passe" required></p>
            <p><input type="submit" value="Créer un compte"></p>
          </form>
       </div>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
</body>
</html>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  background: transparent;
  font-family: 'Open Sans', sans-serif;
}

.form-login {
  width: 100%;
  margin: 40px auto;
  font-size: 16px;
}

.form-login .text-bleu{color:#28d;}

/* Reset top and bottom margins from certain elements */
.form-login-header,
.form-login p {
  margin-top: 0;
  margin-bottom: 0;
}

/* The triangle form is achieved by a CSS hack */
.form-login-triangle {
  width: 0;
  margin-right: auto;
  margin-left: auto;
  border: 12px solid transparent;
  border-bottom-color: #28d;
}

.form-login-header {
  background: #28d;
  padding: 20px;
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.form-login-body {
  background: #ebebeb;
  padding: 12px;
}

/* Every row inside .form-login-body is defined with p tags */
.form-login p {
  padding: 12px;
}

.form-login input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 16px;
  outline: 0;
  font-family: inherit;
  font-size: 0.95em;
}

.form-login input[type="email"],
.form-login input[type="text"],
.form-login input[type="password"] {
  background: #fff;
  border-color: #bbb;
  color: #555;
}

/* Text fields' focus effect */
.form-login input[type="email"]:focus,
.form-login input[type="text"]:focus,
.form-login input[type="password"]:focus {
  border-color: #888;
}

.form-login input[type="submit"] {
  background: #28d;
  border-color: transparent;
  color: #fff;
  cursor: pointer;
}

.form-login input[type="submit"]:hover {
  background: #17c;
}

/* Buttons' focus effect */
.form-login input[type="submit"]:focus {
  border-color: #05a;
}

                                    
toggle switch style02

toggle switch style02

page scroll progress bar

page scroll progress bar

input radio checkbox b4 style

input radio checkbox b4 style

Timeline style06

Timeline style06

Timeline style02

Timeline style02

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Manual Slideshow

Manual Slideshow

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Drag and drop or upload input file

Drag and drop or upload input file

ChartJS style01

ChartJS style01

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery