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'
    });
});
Timeline style05

Timeline style05

Table responsive avec css native

Table responsive avec css native

Radio button style

Radio button style

Pagination with Jquery

Pagination with Jquery

Loading style water animation

Loading style water animation

Input file style01

Input file style01

Image hover Inspiration styles

Image hover Inspiration styles

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select