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

Card 4 Product Style01

Card 4 Product Style01

Card Bootstrap4 02

Card Bootstrap4 02

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Css Page grid layout

Css Page grid layout

Google Style Login

Google Style Login

Lightbox gallery style01

Lightbox gallery style01

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Table Responsive with css 01

Table Responsive with css 01

input radio checkbox b4 style

input radio checkbox b4 style