<header>
<h3>Your time is limited, so don't waste it living someone else's life.</h3>
</header>
<p id="quoteAuthor">Steve Jobs</p>
<div class="container">
<div class="section">
<div class="content clearfix">
<div class="card effect hourEf" data-id="1">
<div class="front">
<span class="hour time">front</span>
</div>
<div class="back">
<span class="hour time">back</span>
</div>
</div><!-- /card -->
<div class="card effect minuteEf" data-id="1">
<div class="front">
<span class="minute time">front</span>
</div>
<div class="back">
<span class="minute time">back</span>
</div>
</div><!-- /card -->
<div class="card effect secondEf" data-id="1">
<div class="front">
<span class="second time">front</span>
</div>
<div class="back">
<span class="second time">back</span>
</div>
</div><!-- /card -->
</div><!-- /section -->
</div>
body {
background: #1d1d1e;
}
header{
font-family: 'Architects Daughter', cursive;
font-size:25px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: rgba(128,128,128,1);
text-shadow: 1px 1px 0 rgba(140,140,140,0.6) , -1px -1px 1px rgba(0,0,0,0.67) ;
}
#quoteAuthor{
font-family: 'Architects Daughter', cursive;
font-size:25px;
color: rgba(58,58,58,1);
text-shadow: 1px 1px 0 rgba(140,140,140,0.6) , -1px -1px 1px rgba(0,0,0,0.67) ;
text-align:right;
padding-right: 15%;
}
.content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-bottom: 5%
}
/**
* The cards
*
* Each card plays home to a front and back. I've set them up as squares here
* by using the padding technique, but you may set them up in any dimensions
* you like based on your site design.
*/
.card {
position: relative;
float: left;
padding-bottom: 35%;
width: 25%;
text-align: center;
perspective: 600px;
}
.front,
.back {
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-shadow: 5px 5px 11px 0px rgba(0,0,0,0.59);
-moz-box-shadow: 5px 5px 11px 0px rgba(0,0,0,0.59);
box-shadow: 5px 5px 11px 0px rgba(0,0,0,0.59);
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
.back {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.time{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 20px;
font-family: 'Rationale', sans-serif;
font-size:15vw;
line-height: 20px;
color:white; }
.card.effect.flipped .front {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition-timing-function: linear;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.card.effect.flipped .back {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition-timing-function: linear;
-webkit-transform: rotateX(10deg);
transform: rotateX(-359deg);
}
/*
*By Suleyman Tekin 02/07.2017
*/
var minute, hour, sec;
function setup(){
var date = new Date();
sec = addZero(date.getSeconds());
minute = addZero(date.getMinutes());
hour = addZero(date.getHours());
showSecond();
if(sec==00){
showMinute();
if(minute == 59){
showHour();
}
}
}
function showSecond(){
$('.card.effect.secondEf').hasClass( "flipped" ) === true ? $('.card.effect.secondEf').removeClass("flipped") : $('.card.effect.secondEf').addClass("flipped");
$('.second').text(sec);
}
function showMinute(){
$('.card.effect.minuteEf').hasClass( "flipped" ) === true ? $('.card.effect.minuteEf').removeClass("flipped") : $('.card.effect.minuteEf').addClass("flipped");
if($('.minuteEf .front').is(':visible')) {
$('.back .minute').text(minute);
$('.front .minute').text(addZero(minute-1));
}else{
$('.front .minute').text(minute);
$('.back .minute').text(addZero(minute-1));
}
}
function showHour(){
$('.card.effect.hourEf').hasClass( "flipped" ) === true ? $('.card.effect.hourEf').removeClass("flipped") : $('.card.effect.hourEf').addClass("flipped");
$('.hour').text(hour);
}
setup();
setInterval(setup, 500);
showSecond();
showMinute();
showHour();
function addZero(a){
if(a == -1){return "00";}
if(a <10){
return "0" + a;
}
return a;
}
Also see: Tab Triggers