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('');
});
input file récupérer le nom du fichier

input file récupérer le nom du fichier

Vidéo background en html5 style01

Vidéo background en html5 style01

Simple Table With UIKIT

Simple Table With UIKIT

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Input range slider HTML style02

Input range slider HTML style02

Image hover Flip Flap Style

Image hover Flip Flap Style

Image hover 01

Image hover 01

Form login with background image changed style01

Form login with background image changed style01

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Ajouter multiple input dynamique

Ajouter multiple input dynamique