<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Baumans&display=swap');
@font-face { font-family: Cactus; font-style: normal; font-weight: 400; src: url(https://www.fontrepo.com/font/3008/cactus-cuties.ttf) format('truetype'); }
#header { width: 960px; border: 1px solid #a9a9a9; border-radius: 15px/12px; display: flex; justify-content: space-between; width: 100%; height: auto; }
#header_left { width: 760px; border: 1px solid #a9a9a9; border-radius: 15px/12px; margin-bottom: 0; flex: 0 1 785px; }
#box-logo { position: relative; top: 51.5px; }
#C_f, #a_f, #c_f, #t_f, #u_f, #s_f, #C, #a, #c, #t, #u, #s { font-family: Cactus; font-weight: 700; font-size: 100px; }
#C, #a, #c, #t, #u, #s { color: hsl(120,100%,30%); display: inline-block; text-shadow: 3px 3px hsl(120,100%,20%), 3px -3px hsl(120,100%,20%), -3px 3px hsl(120,100%,20%), -3px -3px hsl(120,100%,20%), 3px 0 hsl(120,100%,20%), 0 3px hsl(120,100%,20%), -3px 0 hsl(120,100%,20%), 0 -3px hsl(120,100%,20%); }
#C_f { position: absolute; left: 55px; } #a_f { position: absolute; left: 167px; } #c_f { position: absolute; left: 291px; } #t_f { position: absolute; left: 403px; } #u_f { position: absolute; left: 515px; } #s_f { position: absolute; left: 634px; }
#C { position: absolute; left: 795px; } #a { position: absolute; left: 907px; } #c { position: absolute; left: 1031px; } #t { position: absolute; left: 1143px; } #u { position: absolute; left: 1255px; } #s { position: absolute; left: 1374px; }
#C_f, #a_f, #c_f, #t_f, #u_f, #s_f { color: hsl(120,30%,90%); opacity: 0.3; text-shadow: 3px 3px hsl(120, 20%,50%), 3px -3px hsl(120, 20%,50%), -3px 3px hsl(120, 20%,50%), -3px -3px hsl(120, 20%,50%), 3px 0 hsl(120, 20%,50%), 0 3px hsl(120, 20%,50%), -3px 0 hsl(120, 20%,50%), 0 -3px hsl(120, 20%,50%); }
@-webkit-keyframes motion_C { 0% { position: absolute; left: 795px; } 99.9% { position: absolute; left: 55px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 55px; -webkit-transform: rotate(0deg); } }
@-webkit-keyframes vibration_C { 0% { position: absolute; left: 55px; bottom: 0px; } 3.85% { position: absolute; left: 55px; bottom: 65px; } 7.7% { position: absolute; left: 55px; bottom: -60px; } 11.55% { position: absolute; left: 55px; bottom: 60px; } 15.4% { position: absolute; left: 55px; bottom: -55px; } 19.25% { position: absolute; left: 55px; bottom: 55px; } 23.1% { position: absolute; left: 55px; bottom: -50px; } 26.95% { position: absolute; left: 55px; bottom: 50px; } 30.8% { position: absolute; left: 55px; bottom: -45px; } 34.65% { position: absolute; left: 55px; bottom: 45px; } 38.5% { position: absolute; left: 55px; bottom: -40px; } 42.35% { position: absolute; left: 55px; bottom: 40px; } 46.2% { position: absolute; left: 55px; bottom: -35px; } 50.05% { position: absolute; left: 55px; bottom: 35px; } 53.9% { position: absolute; left: 55px; bottom: -30px; } 57.75% { position: absolute; left: 55px; bottom: 30px; } 61.6% { position: absolute; left: 55px; bottom: -25px; } 65.45% { position: absolute; left: 55px; bottom: 25px; } 69.3% { position: absolute; left: 55px; bottom: -20px; } 73.15% { position: absolute; left: 55px; bottom: 20px; } 77% { position: absolute; left: 55px; bottom: -15px; } 80.85% { position: absolute; left: 55px; bottom: 15px; } 84.7% { position: absolute; left: 55px; bottom: -10px; } 88.55% { position: absolute; left: 55px; bottom: 10px; } 92.4% { position: absolute; left: 55px; bottom: -5px; } 96.25% { position: absolute; left: 55px; bottom: 5px; } 100% { position: absolute; left: 55px; bottom: 0px; } }
@-webkit-keyframes pulsare { 0% { } } #C { position: absolute; left: 795px; bottom: 0; -webkit-animation: motion_C 0.9s linear 0s 1 normal forwards, vibration_C 0.7s linear 0.9s normal forwards, text-pulsare 2.4s linear 8.05s infinite; }
@-webkit-keyframes motion_a { 0% { position: absolute; left: 907px; } 99.9% { position: absolute; left: 167px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 167px; -webkit-transform: rotate(0deg); } } @-webkit-keyframes vibration_a { 0% { position: absolute; left: 167px; bottom: 0px; } 100% { position: absolute; left: 167px; bottom: 0px; } } @-webkit-keyframes pulsare { } #a { position: absolute; left: 907px; -webkit-animation: motion_a 0.9s linear 0.9s 1 normal forwards, text-pulsare 2.4s linear 8.05s infinite; }
@-webkit-keyframes motion_c { 0% { position: absolute; left: 1031px; } 99.9% { position: absolute; left: 291px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 291px; -webkit-transform: rotate(0deg); } } @-webkit-keyframes vibration_c { 0% { position: absolute; left: 291px; bottom: 0px; } 100% { position: absolute; left: 291px; bottom: 0px; } } @-webkit-keyframes pulsare { } } #c { position: absolute; left: 1031px; -webkit-animation: motion_c 0.9s linear 1.8s 1 normal forwards, text-pulsare 2.4s linear 8.05s infinite; }
@-webkit-keyframes motion_t { 0% { position: absolute; left: 1143px; } 99.9% { position: absolute; left: 403px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 403px; -webkit-transform: rotate(0deg); } } @-webkit-keyframes vibration_t { 0% { position: absolute; left: 403px; bottom: 0px; } 100% { position: absolute; left: 403px; bottom: 0px; } } @-webkit-keyframes pulsare { 0% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } 100% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } } #t { position: absolute; left: 1143px; -webkit-animation: motion_t 0.9s linear 2.7s 1 normal forwards, text-pulsare 2.4s linear 8.05s infinite; }
@-webkit-keyframes motion_u { 0% { position: absolute; left: 1255px; } 99.9% { position: absolute; left: 515px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 515px; -webkit-transform: rotate(0deg); } } @-webkit-keyframes vibration_u { 0% { position: absolute; left: 515px; bottom: 0px; } 100% { position: absolute; left: 515px; bottom: 0px; } } @-webkit-keyframes pulsare { 0% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } 100% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } } #u { position: absolute; left: 1255px; -webkit-animation: motion_u 0.9s linear 3.6s 1 normal forwards, text-pulsare 2.4s linear 8.05s infinite; }
@-webkit-keyframes motion_s { 0% { position: absolute; left: 1374px; } 99.9% { position: absolute; left: 634px; -webkit-transform: rotate(-1440deg); } 100% { position: absolute; left: 634px; -webkit-transform: rotate(0deg); } } @-webkit-keyframes vibration_s { 0% { position: absolute; left: 634px; bottom: 0px; } 100% { position: absolute; left: 634px; bottom: 0px; } } @-webkit-keyframes pulsare { 0% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } 100% { color: #008000; text-shadow: 2px 2px #235523, -2px 2px #235523, 2px -2px #235523, -2px -2px #235523; 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff; } } #s { position: absolute; left: 1374px; -webkit-animation: motion_s 0.9s linear 4.5s 1 normal forwards, text-pulsare 2.4s linear 8.05s infinite; }
#block_time-data {border: 1px solid #a9a9a9; border-radius: 15px/12px; margin: 0 0 0 5px; flex: 0 1 auto; }
#header-time { width: 150px; height: 37px; padding: 0px; background: ; color: hsl(120,100%,25%); text-align: center; font-family: 'Baumans', cursive; font-size: 30px; font-weight: bold; white-space: nowrap; border: 1px solid #a9a9a9; border-radius: 15px/12px; }
#header-date { width: 150px; padding: 0px; color: hsl(120,100%,25%); font-family: 'Baumans', cursive; font-weight: bold; font-size: 18px; height: 182px; margin-bottom: 0; border: 1px solid #a9a9a9; border-radius: 15px/12px; }
#header_day { padding: 0px; font: bold 18px serif; }
#header_date { padding: 0px; font-family: 'Baumans', cursive; font-weight: bold; font-size: 48px; }
#header_month { padding: 0px; font: bold 18px serif; }
#header_year { padding: 0px; font: bold 18px serif; }
#link-calendar { padding: 0px; font-weight: normal; font-size: 10px; font-family; serif; margin-bottom: 0; }
#link-calendar { color: hsl(210,100%,40%); }
div {
font: 14px serif;
padding: 5px;
margin-bottom: 5px;
text-align: center; }
#block_time-data {
display: inline-block;
white-spage: nowrap; }
span {
white-space: nowrap; }
#hours, #min, #sec { margin: 0 3px; padding-right: 2px; position: relative; top: 1.5px; }
.colon { position: relative; bottom: 2px; }
</style>
</head>
<body>
<div id="header">
<div id="header_left">
<div id="box-logo">
<span id="C_f">c</span><span id="a_f">a</span><span id="c_f">c</span><span id="t_f">t</span><span id="u_f">u</span><span id="s_f">s</span>
<span id="C">c</span><span id="a">a</span><span id="c">c</span><span id="t">t</span><span id="u">u</span><span id="s">s</span>
</div>
</div>
<div id="block_time-data">
<div id="header-time"><span id="hours"></span><span class="colon">:</span><span id="min"></span><span class="colon">:</span><span id="sec"></span></div>
<div id="header-date">
</div>
</div>
</div>
</body>
</html>
