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