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'
    });
});
3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Drag and drop or upload input file

Drag and drop or upload input file

Form login with background image changed style01

Form login with background image changed style01

Input range slider HTML style02

Input range slider HTML style02

Scroll down button 01

Scroll down button 01

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Vidéo background en html5 style02

Vidéo background en html5 style02

bootstrap4 tabs

bootstrap4 tabs

input file récupérer le nom du fichier

input file récupérer le nom du fichier

toggle switch style02

toggle switch style02