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

Titre section avec une bande style01

Titre section avec une bande style01

Timeline style08

Timeline style08

Timeline style07

Timeline style07

Scroll down button 01

Scroll down button 01

Responsive image grid

Responsive image grid

Page 404 exemple 01

Page 404 exemple 01

Nav Menu style02

Nav Menu style02

Login Bootstrap3

Login Bootstrap3

Form Step With B4 Style01

Form Step With B4 Style01

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Calculatrice style01

Calculatrice style01

Blog post card 01

Blog post card 01