<div class="wrapper">
		<article class="counter">
			<div class="day"></div>
			<div class="hours"></div>
			<div class="minutes"></div>
			<div class="seconds"></div>
		</article>
	</div>
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,400;0,600;0,700;0,900;1,400;1,600;1,700;1,900&display=swap');



html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

* {
  box-sizing: border-box;
}

ul, p, b {
  margin:0;
  padding:0;
}


h1, h2, h3, h4, h5, h6 {
  /*font-family: 'Lato', sans-serif;*/
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  margin:0;
  font-weight: normal;
  color: var(--hcolor);
}

h1 {
  font-size: 5rem;
  line-height: 4.5rem;
}
h2 {
  font-size: 3.5rem;
}
h3 {
  font-size: 2.5rem;
}

a {
  /*font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;*/
  font-family: 'Source Sans Pro', sans-serif;
}
p {
  font-size: 1.363rem;
  /*font-family: 'Lato', sans-serif;*/
  line-height: 1.475em;
  color: var(--hcolor);
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}
.counter {
  display: flex;
  gap: 30px;
  margin: 200px auto;
  max-width: 500px; 
}
.counter > div {
  padding: 30px;
  background-color: #3F51B5;
  color: white;
  margin: auto;
  font-size: 2rem;
  font-weight: bold;
  border-radius: 70px 25px;
}
.wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
function updateClock() {
	const todaysDate = new Date().getTime();
	const futureDate = new Date(2022, 2, 31).getTime();
	const timeInMilliSecs = futureDate - todaysDate;
	const nDays  = Math.floor(timeInMilliSecs/1000/60/60/24);
	const nHours = Math.floor(((timeInMilliSecs/1000/60/60/24) - nDays)*24);
	const nMins  = Math.floor((((timeInMilliSecs/1000/60/60/24) - nDays)*24 - nHours)*60);
	const nSecs  = Math.floor(((((timeInMilliSecs/1000/60/60/24) - nDays)*24 - nHours)*60 -nMins)*60);
	document.querySelector(".day").innerHTML = nDays;
	document.querySelector(".hours").innerHTML = nHours;
	document.querySelector(".minutes").innerHTML = nMins;
	document.querySelector(".seconds").innerHTML = nSecs;
  setTimeout(updateClock, 1000);
}
updateClock(); 
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.