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('');
});
login page green one

login page green one

Triangle Background css 01

Triangle Background css 01

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Nav Menu style02

Nav Menu style02

Loading style water animation

Loading style water animation

Input range slider HTML style02

Input range slider HTML style02

Header Aside Footer Admin

Header Aside Footer Admin

Form login 03

Form login 03

Carousel Bootstrap3

Carousel Bootstrap3

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Blog post card 01

Blog post card 01

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire