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();
});
Timeline style08

Timeline style08

Timeline style07

Timeline style07

Timeline style06

Timeline style06

Table Responsive with css 01

Table Responsive with css 01

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Simple Table With UIKIT

Simple Table With UIKIT

Nav Menu style01

Nav Menu style01

Loading style book loader

Loading style book loader

Image hover effects style

Image hover effects style

Form login with background image changed style01

Form login with background image changed style01

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table