Summer In The City Countdown

In this example below you will see how to do a Summer In The City Countdown with some HTML / CSS and Javascript

ONLY 160 DAYS! Forked from Tom Mclean's Pen Summer In The City Countdown.

Thumbnail
This awesome code was written by aDevildog, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright aDevildog ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Summer In The City Countdown</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="intro">
  When Is SITC starting?
  <div id="countdown">-- Days --Hrs -- Mins -- Secs</div>
</div>
<div class="image"></div>
<div class="footer">
  #FF: <a href="https://twitter.com/Mclean_Tom_" target="_blank">@Mclean_Tom_</a>
  <a href="https://twitter.com/Jacklesmith" target="_blank">@Jacklesmith</a>
  <a href="https://twitter.com/SummerInTheCity" target="_blank">@SummerInTheCity</a>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/aDevildog/summer-in-the-city-countdown-ABCzu */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,900,700italic,900italic);
* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
  transition:all 0.5s;
  font-family:Roboto;
}
body {
  height:100%;
  width:100%;
  margin:0px;
}
.image {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
    background: url("https://static.tumblr.com/wi7jggm/Bvzn0lkt6/23.jpg") no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index:-1;
  opacity:1;
  -webkit-animation: imageIntro 3s;
}
#intro {
  position:fixed;
  top:50%;
  left:50%;
  width:600px;
  margin-left:-300px;
  margin-top:-40px;
  text-align:center;
  color:#ffffff;
  font-size:40px;
  font-weight:100;
}
.footer {
  position:fixed;
  bottom:0px;
  left:0px;
  color:#ffffff;
  font-size:12px;
}
.footer a {
  color:#ffffff;
}

/*Downloaded from https://www.codeseek.co/aDevildog/summer-in-the-city-countdown-ABCzu */
   CountDownTimer('09/8/2014 11:0 AM', 'countdown');

    function CountDownTimer(dt, id)
    {
        var end = new Date(dt);

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById(id).innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById(id).innerHTML = days + ' days ';
            document.getElementById(id).innerHTML += hours + ' hrs ';
            document.getElementById(id).innerHTML += minutes + ' mins ';
            document.getElementById(id).innerHTML += seconds + ' secs';
        }

        timer = setInterval(showRemaining, 1000);
    }

Comments