Page construction avec compte à rebours style01

<!DOCTYPE html>
<html lang="fr" prefix="og: http://ogp.me/ns#">
<head>
	<title> PAGE CONSTRUCTION AVEC COMPTE À REBOURS | 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="PAGE CONSTRUCTION AVEC COMPTE À REBOURS">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<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>
<div id="countdown" class="mb-5">
	<section class="container">
		<div class="row text-center mx-auto">
			<div class="col-lg-12">
				<h1 class="text-center"><i class="fa fa-calendar"></i> Prochainement</h1>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-2 col-3 hidden-sm hidden-xs"></div>
			<div class="col-lg-2 col-md-2 col-sm-3 col-3">
				<span id="countdown_day" class="compterebour">--</span><br>
				<p>J</p>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-3 col-3">
				<span id="countdown_hour" class="compterebour">--</span><br>
				<p>H</p>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-3 col-3">	
				<span id="countdown_min" class="compterebour">--</span><br>
				<p>M</p>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-3 col-3">	
				<span id="countdown_sec" class="compterebour">--</span><br>
				<p>S</p>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-2 col-3 hidden-sm hidden-xs"></div>
		</div>
	</section>
</div>
<footer class="container mt-5">
    <div class="row text-center mx-auto">
		<div class="col-lg-12">
		<ul class="pull-right ulRS">
			<li><a href="" target="_blank" class="RSlien"><i class="fa fa-facebook"></i> #NGLESSON</a></li>
			<li><a href="" target="_blank" class="RSlien"><i class="fa fa-linkedin"></i> #NGLESSON</a></li>
			<li><a href="" target="_blank" class="RSlien"><i class="fa fa-twitter"></i> #NGLESSON</a></li>
			<li><a href="" target="_blank" class="RSlien"><i class="fa fa-youtube"></i> #NGLESSON</a></li>
		</ul>
		</div>
	</div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>	
</body>
</html>
*{margin:0;padding:0;}

body{
	width:100%;
	height:100%;
	background: linear-gradient( rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)),url("../../assets/imgs/forcode/bkpage1.jpg") center center no-repeat fixed;
	background-size: cover;
	color:#000;
}

section p{
	font-weight:bold;
	color:#fff;
	font-size: 20px;
}

#countdown{
	padding-top:3%;
	padding-bottom:3%;
	margin-top:10%;
	background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
}

#countdown h1{
	color:#FFF;
	text-transform:uppercase;
}

.compterebour {
	text-align:center;
	width: 70%;
    background: #FFF;
    color: #000;
    font-size: 25px;
    padding: 20%;
    margin-top: 10px;
    border-radius: 50%;
    margin-bottom: 10px;
    display: inline-block;
}

footer{
	margin-top: 30px;
	margin-bottom: 30px;
}
	
.ulRS li{
	list-style: none;
	color:#FFF;
	line-height: 25px;
}	
.ulRS li a{
	color:#FFF;
}	
countdownManager = {
    // Configuration
    //var end = new Date(end_date.replace(/-/g, '/'));
    //var end = moment(end_date, '2018-03-08 00:00:00').toDate();
    targetTime: new Date('2021/03/31 00:00:00'), // Date cible du compte à rebours (00:00:00)
    displayElement: { // Elements HTML où sont affichés les informations
        day:  null,
        hour: null,
        min:  null,
        sec:  null
    },
     
    // Initialisation du compte à rebours (à appeler 1 fois au chargement de la page)
    init: function(){
        // Récupération des références vers les éléments pour l'affichage
        // La référence n'est récupérée qu'une seule fois à l'initialisation pour optimiser les performances
        this.displayElement.day  = jQuery('#countdown_day');
        this.displayElement.hour = jQuery('#countdown_hour');
        this.displayElement.min  = jQuery('#countdown_min');
        this.displayElement.sec  = jQuery('#countdown_sec');
         
        // Lancement du compte à rebours
        this.tick(); // Premier tick tout de suite
        window.setInterval("countdownManager.tick();", 1000); // Ticks suivant, répété toutes les secondes (1000 ms)
    },
     
    // Met à jour le compte à rebours (tic d'horloge)
    tick: function(){
        // Instant présent
        var timeNow  = new Date();
         
        // On s'assure que le temps restant ne soit jamais négatif (ce qui est le cas dans le futur de targetTime)
        if( timeNow > this.targetTime ){
            timeNow = this.targetTime;
        }
         
        // Calcul du temps restant
        var diff = this.dateDiff(timeNow, this.targetTime);
         
        this.displayElement.day.text(  diff.day  );
        this.displayElement.hour.text( diff.hour );
        this.displayElement.min.text(  diff.min  );
        this.displayElement.sec.text(  diff.sec  );
    },
     
    // Calcul la différence entre 2 dates, en jour/heure/minute/seconde
    dateDiff: function(date1, date2){
        var diff = {}                           // Initialisation du retour
        var tmp = date2 - date1;
 
        tmp = Math.floor(tmp/1000);             // Nombre de secondes entre les 2 dates
        diff.sec = tmp % 60;                    // Extraction du nombre de secondes
        tmp = Math.floor((tmp-diff.sec)/60);    // Nombre de minutes (partie entière)
        diff.min = tmp % 60;                    // Extraction du nombre de minutes
        tmp = Math.floor((tmp-diff.min)/60);    // Nombre d'heures (entières)
        diff.hour = tmp % 24;                   // Extraction du nombre d'heures
        tmp = Math.floor((tmp-diff.hour)/24);   // Nombre de jours restants
        diff.day = tmp;
 
        return diff;
    }
};
 
jQuery(function($){
    // Lancement du compte à rebours au chargement de la page
    countdownManager.init();
});
Background overlay

Background overlay

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Card Profile Style01

Card Profile Style01

Convertir une div en image

Convertir une div en image

Elastic Content Slider

Elastic Content Slider

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Form login 02

Form login 02

Image hover 04

Image hover 04

Input range slider HTML style01

Input range slider HTML style01

Nav Menu style01

Nav Menu style01

Nav Menu style02

Nav Menu style02