Skip to content

Instantly share code, notes, and snippets.

@yuxxeun

yuxxeun/countdown.html

Created September 13, 2020 18:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yuxxeun/e92efed27af6cab2c328f6269afd46e3 to your computer and use it in GitHub Desktop.
Save yuxxeun/e92efed27af6cab2c328f6269afd46e3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
countdown.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="countdown.css">
<title>Countdown</title>
</head>
<style>
</style>
<body>
<section class="px-3 py-5 mt-5 mb-4">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-md-2">
<!-- blank -->
</div>
<div class="card-asp col-md-8 py-5 bg-light">
<div class="form-row">
<div class="aspirasi input-group text-center">
<div class="col-md-12 col-xs-12 px-auto">
<div id="clock"></div>
</div>
</div>
<div class="col-md-11 text-center my-2 pt-5 mx-auto">
<h4 class="font-weight-bold">MENUJU MARS hehe :))</h4>
</div>
</div>
</div>
<div class="col-md-2">
<!-- blank -->
</div>
</div>
</div>
</section>
<script src="jquery/jquery.js"></script>
<script src="bootstrap/boostrap.min.js"></script>
<script src="countdown.js"></script>
<script>
$( '#clock' ).countdown( '2020/10/10', function(event){
var $this = $(this).html(event.strftime(''
+ '<div><span>%w</span><span>Minggu</span></div>'
+ '<div><span>%d</span><span>Hari</span></div>'
+ '<div><span>%H</span><span>Jam</span></div>'
+ '<div><span>%M</span><span>Menit</span></div>'
+ '<div><span>%S</span><span>Detik</span></div>'
))
})
</script>
</body>
</html>
<!-- Css -->
body
{
margin: 0;
padding: 0;
}
.center
{
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
h1
{
text-align: center;
font-size: 4em;
}
#clock
{
display: flex;
width: 570px;
margin: 0 auto;
}
#clock div
{
position: relative;
width: 100px;
padding: 20px;
margin: 0 5px;
background: skyblue;
color: #fff;
border: 2px solid transparent;
border-radius: 20px;
}
#clock div:last-child
{
background: #fd8ab0;
}
/* #clock div:before
{
content: '';
position: relative;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: rgba(255, 255, 255, .2);
} */
#clock div span
{
display: block;
text-align: center;
}
#clock div span:nth-child(1)
{
font-weight: 800;
font-size: 48px;
}
#clock div span:nth-child(2)
{
margin-top: -10px;
font-weight: 800;
font-size: 18px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment