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();
});
toggle switch style02

toggle switch style02

bootstrap4 tabs

bootstrap4 tabs

Vers le haut

Vers le haut

Timeline style06

Timeline style06

Tablet style code texte

Tablet style code texte

Pie Charts

Pie Charts

Image hover 05

Image hover 05

Form Step With B4 Style01

Form Step With B4 Style01

Css Page grid layout

Css Page grid layout

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery