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

up down tr in table with js

up down tr in table with js

bootstrap4 tabs

bootstrap4 tabs

Vidéo background en html5 style02

Vidéo background en html5 style02

Input range slider HTML style04

Input range slider HTML style04

Image hover style border top

Image hover style border top

Image hover Inspiration styles

Image hover Inspiration styles

Css Page grid layout

Css Page grid layout

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Card Bootstrap4 02

Card Bootstrap4 02

Alert Bootstrap4 style01

Alert Bootstrap4 style01

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery