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

texte animate effects style 01

texte animate effects style 01

Timeline style05

Timeline style05

Timeline style01

Timeline style01

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Compteur avec b4

Compteur avec b4

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Card Bootstrap4 01

Card Bootstrap4 01

Card 4 Product Style01

Card 4 Product Style01

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Ajouter une pagination1

Ajouter une pagination1

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js