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();
});
Alert Bootstrap4 style02

Alert Bootstrap4 style02

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Bootstrap4 datepicker

Bootstrap4 datepicker

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Form login 03

Form login 03

Form login b4 01

Form login b4 01

Image hover style border top

Image hover style border top

Input file style01

Input file style01

Input range slider HTML style01

Input range slider HTML style01

Planète animée style01

Planète animée style01

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css