birthday_ars

birthday_ars.markdown

birthday_ars

A Pen by Ilya on CodePen.

License.

index.html

<div class="wrap">
	<img class="img" src="https://sun9-27.userapi.com/c10742/v10742322/ce3/wakNqGFNc6U.jpg" alt="">
<div class="txt">
		<h1 class="countdown-title">До 30-ки осталось...</h1>
		<div id="countdown">
			<div class="countdown-number">
				<span class="days countdown-time"></span>
				<span class="countdown-text">Дней</span>
			</div>
			<div class="countdown-number">
				<span class="hours countdown-time"></span>
				<span class="countdown-text">Hours</span>
			</div>
			<div class="countdown-number">
				<span class="minutes countdown-time"></span>
				<span class="countdown-text">Minutes</span>
			</div>
			<div class="countdown-number">
				<span class="seconds countdown-time"></span>
				<span class="countdown-text">Seconds</span>
			</div>
		</div>
	</div><!-- txt -->
</div><!-- wrap --> 

script.js

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
 
function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');
 
  function updateClock() {
    var t = getTimeRemaining(endtime);
 
    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
 
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }
 
  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

initializeClock('countdown', '2020-01-23');

style.css

.wrap {
	display: flex;	
	justify-content: center;
	align-items: center;
/* 	flex-wrap: wrap; */
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background:
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
background-color: #840b2a;
}

.img {
	display: block;
	max-width: 700px;
	width: 100%;
	clip-path: circle(33% at 33% 45%);
}
.txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 6em;
	font-family: monospace;
	color: #fff;	
}

.countdown-title {
  font-weight: 100;
  margin: 40px 0px 20px;
}
 
.countdown {
  font-family: monospace;
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
}
 
.countdown-number {
  padding: 10px;
  border-radius: 3px;
  background: #00bf96;
  display: inline-block;
}
 
.countdown-time {
  padding: 15px;
  border-radius: 3px;
  background: #00816a;
  display: inline-block;
}
 
.countdown-text {
  display: block;
  padding-top: 5px;
  font-size: 16px;
	text-align: center;
}

@media screen and (max-width: 1560px) {
	.wrap {
		flex-direction: column;
	}
	.txt {
		font-size: 3em;
	}
	.img {
		position: relative;
		left: 8%;
	}
	
}
@media screen and (max-width: 440px) {
		.txt {
		font-size: 1em;
	}
}