odpocet

by Petr Haluza

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;700&display=swap" rel="stylesheet"> 
</head>
<body>

<div id="BFram">

<div class="BForamovat">
  <h3>Odpočítáváme do startu</h3>
  <h2>Black friday</h2>
  <div class="shareMe"><span></span><b></b>Pro jistotu si zatím lajkni náš <a href="#"><img src="https://www.img4.cz/digitor/microsite/BlackFriday2020/fikon.png" style="height:1.4em; padding:0 .5em;"></a> a sdílej s přáteli<span></span></div>
  <div id="odpocet">
    <span id="xdni"></span>
    <span id="xhodin"></span>
    <span id="xminut"></span>
    <span id="xsekund"></span>
  </div>
</div>

</div>

<script>
var countDownDate = new Date("Nov 13, 2020 15:37:25").getTime();
var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  document.getElementById("xdni").innerHTML = days + "<b>dní</b>";
  document.getElementById("xhodin").innerHTML = hours + "<b>hod</b>";
  document.getElementById("xminut").innerHTML = minutes + "<b>min</b>";
  document.getElementById("xsekund").innerHTML = seconds + "<b>sek</b>";
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("odpocet").innerHTML = "Vítejte v Black Friday";
  }
}, 1000);
</script>

</body>
</html>

CSS

*, *::before, *::after {
	box-sizing: border-box;
  font-family: 'Oswald', sans-serif;
}

@keyframes rotate {
	100% { transform: rotate(1turn) }
}

#BFram { position:relative; background: url(https://www.img4.cz/digitor/microsite/BlackFriday2020/bg.webp) no-repeat center center; background-size:cover;}
#BFram:before {content:""; position:absolute; display:block;WIDTH:100%; height:100%; background:linear-gradient(to bottom, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.8) 80%); }

.BForamovat h3, 
.BForamovat h2,
.BForamovat { text-align:center; text-transform:uppercase; color:white; padding:0; margin:0}
.BForamovat h3 { font-size:1.5em;}
.BForamovat h2 { font-size:7em;}
#odpocet { display:flex} 
#odpocet span { width:25%
text-align: center;
  font-size: 5em;
  flex-grow:1;
  font-weight:800
}

#odpocet span b { font-size: 0.5em;display:block;font-weight:100}

.shareMe { display:flex}
.shareMe span { flex-grow:1; border-bottom:1px solid white; height:0.75em; margin:0 1em;}
.BForamovat {
	position: relative;
	z-index: 0;
	border-radius: 10px;
	overflow: hidden;
	padding: 2rem; }