Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="description" content="">
- <meta name="keywords" content="">
- <meta name="author" content="Pragmatic Mates s.r.o. - http://pragmaticmates.com">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css">
- <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
- <script src="https://code.jquery.com/jquery.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
- <script src="http://final-countdown.pragmaticmates.com/jquery.final-countdown.js"></script>
- <style>
- html, body {
- height: 100%;
- }
- html {
- background-image: url('http://final-countdown.pragmaticmates.com/demo/img/sample.jpg');
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- }
- body {
- background-color: rgba(44,62,80 , 0.6 );
- background-image: url('http://final-countdown.pragmaticmates.com/demo/img/pattern.png');
- background-position: center;
- background-repeat: repeat;
- font-family: 'Raleway', 'Arial', sans-serif;
- }
- .countdown-container {
- position: relative;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- transform: translateY(-50%);
- }
- .clock-item .inner {
- height: 0px;
- padding-bottom: 100%;
- position: relative;
- width: 100%;
- }
- .clock-canvas {
- background-color: rgba(255, 255, 255, .1);
- border-radius: 50%;
- height: 0px;
- padding-bottom: 100%;
- }
- .text {
- color: #fff;
- font-size: 30px;
- font-weight: bold;
- margin-top: -50px;
- position: absolute;
- top: 50%;
- text-align: center;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
- width: 100%;
- }
- .text .val {
- font-size: 50px;
- }
- .text .type-time {
- font-size: 20px;
- }
- @media (min-width: 768px) and (max-width: 991px) {
- .clock-item {
- margin-bottom: 30px;
- }
- }
- @media (max-width: 767px) {
- .clock-item {
- margin: 0px 30px 30px 30px;
- }
- }
- </style>
- <title>jQuery Final Countdown Plugin</title>
- </head><body>
- <div class="countdown countdown-container container"
- data-start="1362139200"
- data-end="1388461320"
- data-now="1387461319"
- data-border-color="rgba(255, 255, 255, .8)">
- <div class="clock row">
- <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
- <div class="wrap">
- <div class="inner">
- <div id="canvas-days" class="clock-canvas"></div>
- <div class="text">
- <p class="val">0</p>
- <p class="type-days type-time">DAYS</p>
- </div><!-- /.text -->
- </div><!-- /.inner -->
- </div><!-- /.wrap -->
- </div><!-- /.clock-item -->
- <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
- <div class="wrap">
- <div class="inner">
- <div id="canvas-hours" class="clock-canvas"></div>
- <div class="text">
- <p class="val">0</p>
- <p class="type-hours type-time">HOURS</p>
- </div><!-- /.text -->
- </div><!-- /.inner -->
- </div><!-- /.wrap -->
- </div><!-- /.clock-item -->
- <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
- <div class="wrap">
- <div class="inner">
- <div id="canvas-minutes" class="clock-canvas"></div>
- <div class="text">
- <p class="val">0</p>
- <p class="type-minutes type-time">MINUTES</p>
- </div><!-- /.text -->
- </div><!-- /.inner -->
- </div><!-- /.wrap -->
- </div><!-- /.clock-item -->
- <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
- <div class="wrap">
- <div class="inner">
- <div id="canvas-seconds" class="clock-canvas"></div>
- <div class="text">
- <p class="val">0</p>
- <p class="type-seconds type-time">SECONDS</p>
- </div><!-- /.text -->
- </div><!-- /.inner -->
- </div><!-- /.wrap -->
- </div><!-- /.clock-item -->
- </div><!-- /.clock -->
- </div><!-- /.countdown-wrapper -->
- <script>
- $('.countdown').final_countdown();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement