Coming Soon 1

by Alex Azuero

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div id="wrap">
    <div id="bg"><img src="http://shaysplaceforesthills.com/wp-content/uploads/2014/06/slider2.jpg" class="img-responsive" alt="Responsive image"></div>
    <div id="counter">
 <div class="col-md-12">
    <div class="col-md-3">
      <div id="dayCountdown" data-date="2016-02-18 13:00:00" style="width: 100%;"></div>
    </div>
    <div class="col-md-3">
      <div id="hourCountdown" data-date="2016-02-18 13:00:00" style="width: 100%;"></div>
    </div>
    <div class="col-md-3">
      <div id="minCountdown" data-date="2016-02-18 13:00:00" style="width: 100%;"></div>
    </div>
    <div class="col-md-3">
      <div id="secCountdown" data-date="2016-02-18 13:00:00" style="width: 100%;"></div>
    </div>

  </div>
    </div>


  </div>
</div>

CSS

body,html {  height: 100%;
  width: 100%;}

#wrap {
  position: relative;
  height: 100%;
  width: 100%;
}

#bg {
 position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

#counter {
 position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 150px;
}

JavaScript

$("#dayCountdown").TimeCircles({
  "animation": "smooth",
  "bg_width": 0.7,
  "fg_width": 0.04666666666666667,
  "circle_bg_color": "#8A7F71",
  "time": {
    "Days": {
      "text": "Days",
      "color": "#FFCC66",
      "show": true
    },
    "Hours": {
      "text": "Hours",
      "color": "#FFCC66",
      "show": false
    },
    "Minutes": {
      "text": "Minutes",
      "color": "#FFCC66",
      "show": false
    },
    "Seconds": {
      "text": "Seconds",
      "color": "#FFCC66",
      "show": false
    }
  }
});

$("#hourCountdown").TimeCircles({
  "animation": "smooth",
  "bg_width": 0.7,
  "fg_width": 0.04666666666666667,
  "circle_bg_color": "#8A7F71",
  "time": {
    "Days": {
      "text": "Days",
      "color": "#FFCC66",
      "show": false
    },
    "Hours": {
      "text": "Hours",
      "color": "#FFCC66",
      "show": true
    },
    "Minutes": {
      "text": "Minutes",
      "color": "#FFCC66",
      "show": false
    },
    "Seconds": {
      "text": "Seconds",
      "color": "#FFCC66",
      "show": false
    }
  }
});

$("#secCountdown").TimeCircles({
  "animation": "smooth",
  "bg_width": 0.7,
  "fg_width": 0.04666666666666667,
  "circle_bg_color": "#8A7F71",
  "time": {
    "Days": {
      "text": "Days",
      "color": "#FFCC66",
      "show": false
    },
    "Hours": {
      "text": "Hours",
      "color": "#FFCC66",
      "show": false
    },
    "Minutes": {
      "text": "Minutes",
      "color": "#FFCC66",
      "show": false
    },
    "Seconds": {
      "text": "Seconds",
      "color": "#FFCC66",
      "show": true
    }
  }
});

$("#minCountdown").TimeCircles({
  "animation": "smooth",
  "bg_width": 0.7,
  "fg_width": 0.04666666666666667,
  "circle_bg_color": "#8A7F71",
  "time": {
    "Days": {
      "text": "Days",
      "color": "#FFCC66",
      "show": false
    },
    "Hours": {
      "text": "Hours",
      "color": "#FFCC66",
      "show": false
    },
    "Minutes": {
      "text": "Minutes",
      "color":...