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

toggle switch style02

Triangle Background css 01

Triangle Background css 01

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Nav Menu style02

Nav Menu style02

Menu aside style01 slide out

Menu aside style01 slide out

Header Aside Footer Admin

Header Aside Footer Admin

Google Style Login

Google Style Login

Form Création de compte style animée

Form Création de compte style animée

Dropdown right aligned B4

Dropdown right aligned B4

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery