Page construction avec compte à rebours style02

<!DOCTYPE html>
<html>
<head>
<title>PAGE CONSTRUCTION WITH COUNTER</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 WITH COUNTER">
<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="container">
  <div class="row mx-auto text-center">
      <header class="col-lg-12 col-12">
        <div class="img-logo text-center">
          <img src="../../assets/imgs/logo/nglesson.png" width="30%" height="auto" alt="NGLESSON" title="NGLESSON">
        </div>
        <h1 class="text-center mt-5 bold">NGLESSON.COM</h1>
      </header>
      <section class="col-lg-12 col-12 mt-5">
        <article class="mt-5">
          <h2>Site en construction ...</h2>
          <br> 
          <div class="demo2 pt-5 pb-5"></div>
          <br> 
        </article>
        <article class="mt-5 mb-5">
            <p class="text-center bold"> 
              Nous vous informons que le site NGLESSON est en cours de construction. <br> 
              Certains contenus sont manquants et seront mis à jour prochainement.<br><br>
              Pour plus d'information, contactez-nous sur : .... .
            </p>
        </article>
      </section>
      <footer class="col-lg-12 col-12 mt-5">
        <p class="bold" title="Mezgani said">© 2021 &nbsp;NGLESSON. All rights reserved</p>
      </footer>
  </div>
<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>
body {
	margin: 0;
	font-family: 'PT Sans', sans-serif;
  background: linear-gradient( rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)),url(../../assets/imgs/forcode/bkpage2.jpg) center center no-repeat fixed;
	background-size: cover;
  color: #FFF;
}
.bold{
  font-weight: bold;
}
.demo-2 .main-title {
	font-weight: normal;
	font-size: 8em;
	padding-left: 10px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.img-logo{
  	width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 16px;
}
/***********************************************************dscountdown*********************************************************/
.dsCountDown:after{
	content:'';
  clear: both;
}
.dsCountDown{
  display:inline-block;
	display: inline;
	zoom: 1;
	
}
/* ------------------------- White Theme ------------------------- */
.dsCountDown.ds-white {
	color: #000;
	position: relative;
	font-size: 1em;
	padding: 10px;
	border: 1px solid #dedede;
	border-radius: 2px;
	background: #ffffff; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#ededed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */
}
.ds-white .ds-element {
	float: left;
	margin-right: 10px;
	text-align: center;
	border-right: 1px solid #dedede;
	padding-right: 10px;
}
.dsCountDown.ds-white > .ds-element.ds-element-seconds {
	margin-right: 0;
	padding-right: 0;
	border-right: 0;
}
.ds-white .ds-element-title {
	font-size: 0.8em;
	text-transform: lowercase;
}
.ds-white .ds-element-value {
	font-size: 2.5em;
	color: #333;
	text-shadow: 2px 2px 0px #fff;
}
/* ------------------------- Black Theme ------------------------- */
.dsCountDown.ds-black {
    color: #fff;
    position: relative;
    width: 100%;
    margin: 6% 0 0;
}
.ds-black .ds-element {
    float: left;
    text-align: center;
    width: 23%;
    margin: 0 7px;
    padding: 1em 0;
}
.ds-black .ds-element-title {
    font-size: 0.9em;
	  text-transform: uppercase;
    color: #FFF;
    font-family: 'Keania One', cursive;
    /*border: 1px dashed #fff;*/
    border-radius: 19px;
    width: 50%;
    margin: 0 auto 1em;
	  padding: 10px;
	  letter-spacing: 1px;
}
.ds-black .ds-element-value {
    font-size: 4em;
    color: #fff;
    letter-spacing: 2px;
	  line-height: 1.2em;
	  font-family: 'Keania One', cursive;
}
/* ------------------------- Red Theme ------------------------- */
.dsCountDown.ds-red {
	color: #fff;
	position: relative;
	font-size: 1em;
	padding: 10px;
	border: 1px solid #A80000;
	border-radius: 2px;
	background: #ff0000; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiYzAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ff0000 0%, #bc0000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#bc0000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff0000 0%,#bc0000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ff0000 0%,#bc0000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff0000 0%,#bc0000 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ff0000 0%,#bc0000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#bc0000',GradientType=0 ); /* IE6-8 */
}
.ds-red .ds-element {
	float: left;
	margin-right: 10px;
	text-align: center;
	border-right: 1px solid #BC0000;
	padding-right: 10px;
}
.dsCountDown.ds-red > .ds-element.ds-element-seconds{
	margin-right: 0;
	padding-right: 0;
	border-right: 0;
}
.ds-red .ds-element-title {
	font-size: 0.8em;
	text-transform: lowercase;
}
.ds-red .ds-element-value {
	font-size: 2.5em;
	color: #fff;
	text-shadow: 0px -1px 0px #555;
}
/* ------------------------- Flat Theme ------------------------- */
.dsCountDown.ds-flat {
	color: #000;
	position: relative;
	font-size: 1em;
	border: 1px solid #cdcdcd;
	background: #efefef;
	box-shadow: 4px 4px 4px #888;
}
.ds-flat .ds-element {
	float: left;
	text-align: center;
	border-right: 1px solid #dedede;
	padding: 7px 17px;
}
.dsCountDown.ds-flat > .ds-element.ds-element-seconds {
	border-right: 0;
}
.ds-flat .ds-element-title {
	font-size: 0.8em;
	text-transform: lowercase;
	color: #666;
}
.ds-flat .ds-element-value {
	font-size: 2.5em;
	color: #000;
}
/*-- responsive media queries --*/
@media screen and (max-width: 1366px){
	.ds-black .ds-element {
		margin: 0 6px;
	}
}
@media screen and (max-width: 1280px){
	.ds-black .ds-element-value {
		font-size: 3.7em;
	}
}
@media screen and (max-width: 1050px){
	.ds-black .ds-element {
       width: 22%;
	}
}
@media screen and (max-width: 800px){
	.ds-black .ds-element-value {
		font-size: 2.7em;
	}	
}	
@media screen and (max-width: 768px){
	.ds-black .ds-element-value {
		font-size: 2.5em;
	}
	.ds-black .ds-element-value {
		font-size: 2.4em;
	}
	.ds-black .ds-element {
  		width: 21%;
	}
	.ds-black .ds-element-title {
		width: 55%;
	}
}	
@media screen and (max-width: 667px){
	.ds-black .ds-element-value {
		font-size: 2.3em
	}
	.ds-black .ds-element-title {
		width: 63%;
	}
	
}
@media screen and (max-width: 600px){
	.ds-black .ds-element {
		width: 22%;
	}
}
@media screen and (max-width: 568px){
	.ds-black .ds-element {
		width: 45%;
	}
	.ds-element {
		margin: 1em 0;
	}
	.ds-black .ds-element-title {
		width: 52%;
	}
	
}
@media screen and (max-width: 480px){
	.ds-black .ds-element-value {
		font-size: 2.2em;
		padding:0 10px;
	}
}
/*!
	dsCountDown v1.0
	jQuery count down plugin
	(c) 2013 I Wayan Wirka - http://iwayanwirka.duststone.com/dscountdown/
	license: http://www.opensource.org/licenses/mit-license.php
*/
(function (e) { e.fn.dsCountDown = function (t) { var n = this; var r = 1e3, i = null, s = false, o = 0, u = 1, a = 0, f = 0, l = 0, c = 0, h = 0, p = null, d = null, v = null, m = null; var g = { startDate: new Date, endDate: null, elemSelDays: "", elemSelHours: "", elemSelMinutes: "", elemSelSeconds: "", theme: "white", titleDays: "Jours", titleHours: "Heures", titleMinutes: "Minutes", titleSeconds: "Secondes", onBevoreStart: null, onClocking: null, onFinish: null }; var y = e.extend({}, g, t); if (this.length > 1) { this.each(function () { e(this).dsCountDown(t) }); return this } var b = function () { if (!y.elemSelSeconds) { n.prepend('<div class="ds-element ds-element-seconds">							<div class="ds-element-title">' + y.titleSeconds + '</div>							<div class="ds-element-value ds-seconds">00</div>						</div>'); m = n.find(".ds-seconds") } else { m = n.find(y.elemSelSeconds) } if (!y.elemSelMinutes) { n.prepend('<div class="ds-element ds-element-minutes">							<div class="ds-element-title">' + y.titleMinutes + '</div>							<div class="ds-element-value ds-minutes">00</div>						</div>'); v = n.find(".ds-minutes") } else { v = n.find(y.elemSelMinutes) } if (!y.elemSelHours) { n.prepend('<div class="ds-element ds-element-hours">							<div class="ds-element-title">' + y.titleHours + '</div>							<div class="ds-element-value ds-hours">00</div>						</div>'); d = n.find(".ds-hours") } else { d = n.find(y.elemSelHours) } if (!y.elemSelDays) { n.prepend('<div class="ds-element ds-element-days">							<div class="ds-element-title">' + y.titleDays + '</div>							<div class="ds-element-value ds-days">00</div>						</div>'); p = n.find(".ds-days") } else { p = n.find(y.elemSelDays) } n.addClass("dsCountDown"); n.addClass("ds-" + y.theme); if (y.startDate && y.endDate) { a = y.endDate.getTime() - y.startDate.getTime(); if (a > 0) { var e = a / 1e3; var t = e % 86400; var r = t % 3600; o = e; h = Math.floor(e / 86400); c = Math.floor(t / 3600); l = Math.floor(r / 60); f = Math.floor(r % 60) } } E() }; var w = function (e) { if (s) { clearInterval(i); s = false } if (e) { e(n) } }; var E = function () { if (!s) { if (o > 0) { if (y.onBevoreStart) { y.onBevoreStart(n) } i = setInterval(function () { if (o > 0) { o -= u; f -= u; if (f <= 0 && (l > 0 || c > 0 || h > 0)) { l--; f = 60 } if (l <= 0 && (c > 0 || h > 0)) { c--; l = 60 } if (c <= 0 && h > 0) { h--; c = 24 } if (p) p.html(h < 10 ? "0" + h : h); if (d) d.html(c < 10 ? "0" + c : c); if (v) v.html(l < 10 ? "0" + l : l); if (m) m.html(f < 10 ? "0" + f : f); if (y.onClocking) { y.onClocking(n) } } else { w(y.onFinish) } }, r); s = true } else { if (y.onFinish) { y.onFinish(n) } } } }; b() } })(jQuery)

/**************************End dsCountDown******************/
addEventListener("load", function () {
    setTimeout(hideURLbar, 0);
}, false);

function hideURLbar() {
    window.scrollTo(0, 1);
}
jQuery(document).ready(function ($) {
    $('.demo2').dsCountDown({
        endDate: new Date("Mars 31, 2021 00:00:00"),
        theme: 'black'
    });
});
Arrows Defense Game

Arrows Defense Game

Background overlay

Background overlay

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Input range slider HTML style02

Input range slider HTML style02

Organization Chart

Organization Chart

Table bootstrap with Datatable

Table bootstrap with Datatable

Table responsive avec css native

Table responsive avec css native

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Vidéo background en html5 style02

Vidéo background en html5 style02

input file récupérer le nom du fichier

input file récupérer le nom du fichier

toggle switch style01

toggle switch style01