Form login with background image changed style01

<!DOCTYPE html>
<html>
<head>
    <title>FORM LOGIN WITH BACKGROUND IMAGE CHANGED | 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="FORM LOGIN WITH BACKGROUND IMAGE CHANGED">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body class="body-login page-login">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center mx-auto">
            <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-xs-12 col-12">  
                <div class="card card-login">
                    <div class="row d-flex-bloc">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 col-12 text-center offset-xl-3 offset-lg-3 offset-md-3">
                            <img src="../../assets/imgs/logo/nglesson.png" class="img-fluid mt-3 p-2" alt="" title="" width="250px" height="auto">
                         </div>
                    </div>
                    <form action="" method="" class="p-3 mb-2">
                        <div class="form-group">
                          <label for="inputlogin">Login :</label>
                          <input 
                            type="email" 
                            class="form-control" 
                            placeholder="Entrez votre login" 
                            id="inputlogin" 
                            name="inputlogin"
                            maxlength="4" 
                            minlength="100"
                            pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
                            title="Votre format email est invalide" 
                            email required
                          >
                        </div>
                        <div class="form-group">
                          <label for="inputpass">Mot de passe :</label>
                          <input 
                            type="password" 
                            class="form-control" 
                            placeholder="Entrez votre mot de passe" 
                            id="inputpass" 
                            name="inputpass" 
                            maxlength="2" 
                            minlength="100"
                            pattern=".{2,100}"
                            required
                          >
                        </div>
                        <div class="form-group text-center mt-5">
                            <button type="submit" class="btn btn-success btn-md">
                                <i class="fa fa-sign-in"></i> Se connecter
                            </button>
                        </div>
                    </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.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>
@charset "utf-8";

/**************************
## Style Login
**************************/
.body-login{
    background-image: linear-gradient(90deg,rgb(0, 0, 0, 0.5) 100%, rgb(0, 0, 0, 0.5) 100%), url('../../assets/imgs/forcode/bkpage1.jpg');
    background-color: #292929;
    font-family: 'Ubuntu';
    overflow-x: hidden !important;
	width: 100%;
    height: 100%;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}
.card-login{
    margin-top: 30%;
    border: 1px solid #f1f1f1;
    background: rgba(255,255,255,0.9);
    box-shadow: 8px 7px 13px 0 rgba(0,0,0,.1);
}


@media (max-width: 650px) {
    .card-login{
        margin-top: 15%;
    }
}

$(document).ready(function () {
    changeBackgroundOne();
});

function changeBackgroundOne(){
    var headerone = $('.page-login');
    var backgroundsone = new Array(
        'linear-gradient(90deg,rgb(41, 41, 41, 0.5) 100%, rgb(41, 41, 41, 0.5) 100%), url(../../assets/imgs/forcode/bkpage1.jpg)', 
        'linear-gradient(90deg,rgb(41, 41, 41, 0.5) 100%, rgb(41, 41, 41, 0.5) 100%), url(../../assets/imgs/forcode/bkpage2.jpg)',
        'linear-gradient(90deg,rgb(41, 41, 41, 0.5) 100%, rgb(41, 41, 41, 0.5) 100%), url(../../assets/imgs/forcode/bkpage3.jpg)');
    var currentone = 0;
    function nextBackgroundone() {
        currentone++;
        currentone = currentone % backgroundsone.length;
        headerone.css('background-image', backgroundsone[currentone]);
    }
    setInterval(nextBackgroundone, 5000);
    headerone.css('background-image', backgroundsone[0]);
}

Alert Bootstrap4 style02

Alert Bootstrap4 style02

Bootstrap4 datepicker

Bootstrap4 datepicker

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Card Profile Style01

Card Profile Style01

Cards box with title

Cards box with title

Convertir une div en image

Convertir une div en image

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Form login 03

Form login 03

Image hover 03

Image hover 03

Menu aside style01 slide out

Menu aside style01 slide out

Profile page with b4

Profile page with b4

Timeline style01

Timeline style01