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

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js

Ajouter une pagination1

Ajouter une pagination1

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02

Carousel Bootstrap3

Carousel Bootstrap3

Google Style Login

Google Style Login

Image hover 07

Image hover 07

Input range slider HTML style03

Input range slider HTML style03

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Tablet style code texte

Tablet style code texte

Timeline style04

Timeline style04

page scroll progress bar

page scroll progress bar

toggle switch style01

toggle switch style01