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