<body onload="startTime()">
<div class="container">
<div class="card">
<div class="front">
<div class="contentfront">
<div class="month">
<table>
<tr class="orangeTr">
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
</tr>
<tr class="whiteTr">
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
<tr class="whiteTr">
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
</tr>
<tr class="whiteTr">
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
</tr>
<tr class="whiteTr">
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
</tr>
<tr class="whiteTr">
<th>28</th>
<th>29</th>
<th>30</th>
<th>31</th>
<th></th>
<th></th>
<th></th>
</tr>
</table>
</div>
<div class="date">
<div class="datecont">
<div id="date"></div>
<div id="day"></div>
<div id="month"></div>
<i class="fa fa-pencil edit" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="back">
<div class="contentback">
<div class="backcontainer">
</div>
</div>
</div>
</div>
</div>
</body>
body{
margin:0;
background-color:#010712;
background-image:url(https://static.pexels.com/photos/1526/dark-blur-blurred-gradient.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
height:100vh;
}
.container{
width:400px;
height:200px;
position:relative;
perspective: 1000;
-webkit-perspective: 1000;
left:calc(50% - 200px);
top:calc(50vh - 100px);
}
.card{
width:100%;
height:100%;
position:absolute;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
transition:transform 1s ease;
cursor:pointer;
}
.back, .front{
border-radius:6px;
position:absolute;
width:100%;
height:100%;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.contentfront{
width:100%;
height:100%;
float:left;
transform:translatez(60px);
-webkit-transform:translatez(60px);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
}
.contentback{
width:100%;
height:100%;
float:left;
transform:translatez(60px);
-webkit-transform:translatez(60px);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
}
.back{
transform:rotateY(180deg);
background-color:#232227;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.front{
text-transform:uppercase;
background-color:#232227;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.date{
height:100%;
width:130px;
float:left;
background-color:#E76642;
border-radius:0 6px 6px 0;
text-align:right;
padding:10px 30px;
box-sizing:border-box;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
}
.datecont{
height:100%;
transform:translatez(60px) scale(.9);
-webkit-transform:translatez(60px) scale(.9);
}
#date{
font-size:50px;
color:#ECECE7;
font-family: 'Montserrat', sans-serif;
font-weight:500;
float:right;
}
#day{
float:right;
font-size:14px;
color:#232227;
font-family: 'Montserrat', sans-serif;
font-weight:400;
}
#month{
float:right;
font-size:10px;
color:#232227;
font-family: 'Montserrat', sans-serif;
font-weight:200;
}
.date i{
color:#ECECE7;
position:absolute;
bottom:10px;
right:0;
}
.date i:hover{
color:#232227;
transition:.3s ease;
}
.month{
height:100%;
width:270px;
float:left;
padding:20px 30px;
box-sizing:border-box;
}
.month table{
width:100%;
}
.orangeTr{
color:#E76642;
}
.whiteTr{
color:#ECECE7;
}
.whiteTr th:hover{
color:#E76642;
transition:.3s ease;
}
.month tr{
height:24px;
}
.month th{
width:14%;
font-size:10px;
font-family: 'Montserrat', sans-serif;
font-weight:400;
}
.flipped{
transform:rotateY(-180deg);
/*height:400px;
width:200px;
left:calc(50% - 100px);
top:calc(50vh - 200px);*/
}
.backcontainer{
transform-style:preserve-3d;
width:calc(100% - 60px);
height:calc(100% - 40px);
float:left;
margin-left:30px;
margin-top:20px;
/*transform:translatez(60px) scale();*/
background-color:#E76642;
border-radius:6px;
padding:10px 30px;
box-sizing:border-box;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
}
let cardElement = document.querySelector(".card");
cardElement.addEventListener("click", flip);
function flip(){
cardElement.classList.toggle("flipped")
}
function startTime() {
var weekday = new Array();
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var d = today.getDate();
var y = today.getFullYear();
var wd = weekday[today.getDay()];
var mt = month[today.getMonth()];
m = checkTime(m);
s = checkTime(s);
document.getElementById('date').innerHTML =
d;
document.getElementById('day').innerHTML =
wd;
document.getElementById('month').innerHTML =
mt + "/" + y;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
This Pen doesn't use any external CSS resources.