login page green one
<!DOCTYPE html>
<html>
<head>
<title>LOGIN PAGE GREEN ONE | 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="keyword" content="LOGIN PAGE GREEN ONE">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bk-login3">
<div class="container-fluid">
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-xs-4 col-4 img-logo-login logo-left text-left pt-2">
<img src="https://mindbodymoms.com/wp-content/uploads/2018/06/Your-Logo-here.png" class="img-fluid"
alt="" title="" width="200px" height="auto">
</div>
</div>
</div>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center mx-auto mt-5">
<div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-xs-12 col-12 mt-5">
<div class="card-login3">
<h3 class="text-center">S'authentifier</h3>
<form action="" method="" class="p-3 mt-3 mb-2">
<div class="form-group">
<input
type="email"
class="form-control inputlogin"
placeholder="Entrez votre login"
id="inputlogin"
name="inputlogin"
maxlength="100"
minlength="4"
value=""
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
title="Votre format email est invalide"
email required
>
</div>
<div class="form-group mt-5">
<input
type="password"
class="form-control inputpass"
placeholder="Entrez votre mot de passe"
id="inputpass"
name="inputpass"
maxlength="20"
minlength="6"
pattern=".{6,20}"
value=""
required
>
</div>
<div class="form-group text-center mt-5">
<button type="submit" class="btn btn-green btn-lg">
<i class="fa fa-sign-in"></i> Se connecter
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="curve-green"
viewBox="0 0 1440 68" enable-background="new 0 0 1440 68">
<path d="m1622.3 1937.7c0 0-410.7 169.1-913.4 75.5-502.7-93.6-977.7 56.3-977.7 56.3v440h1891.1v-571.8"
fill="#007732"
transform="translate(0-1977)">
</path>
</svg>
</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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
* {
margin:0px;
padding:0px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.bg-green{
background-color: #33b35a;
}
.btn-green {
color: #FFF;
background-color: #33b35a;
border-color: #33b35a;
}
.btn-green:hover {
color: #33b35a;
background-color: #FFF;
border-color: #33b35a;
}
.bold {
font-weight: bold;
}
.space1 {
letter-spacing: 1px;
}
.body-login3{
background-color: #FFF;
font-family: 'Roboto', sans-serif;
overflow-x: hidden !important;
width: 100%;
height: 100%;
}
.card-login3{
margin-top: 15%;
background: #FFF;
}
.card-login3 .form-control{
border: none;
border-radius: 0px;
border-bottom: 1px solid #292929;
}
.card-login3 .inputlogin{
background: url('icons/user.png') no-repeat scroll 7px 9px;
padding-left:30px;
}
.card-login3 .inputpass{
background: url('icons/padlock.png') no-repeat scroll 7px 9px;
padding-left:30px;
}
.curve-green{
position: fixed;
bottom: 0px;
width: 100%;
left: 0;
right: 0;
height: 200px;
z-index: -1;
}
$(document).ready(function(){
$('#inputlogin').val('');
$('#inputpass').val('');
});
