Vintage Clock
XII
I
II
III
IIII
V
VI
VII
VIII
IX
X
XI
Google Fonts - Imbue.
The clock is fully responsive—a media query changes the font-size.
You also need a sound file called tick.mp3 and some sort of light-coloured grungy foreground texture called texture.jpg which is used as a semi-transparent layer positioned between the hands and the clock face.
PHP
$ticks=''; for($i=0;$i<60;$i++){ if($i % 5 == 0){ $class='majortick'; } else { $class='tick'; } $ticks .= '<div class="'.$class.'" style="transform:rotate(' . $i*6 . 'deg) "></div>'; } $romans=['XII','I','II','III','IIII','V','VI','VII','VIII','IX','X','XI']; $numbers=''; for($i=0;$i<12;$i++){ $numbers .= '<div class="number" style="transform:rotate(' . $i*30 . 'deg) ">' . $romans[$i] . '</div>'; }
HTML
<!-- INLINE CSS --> <style> h2 {font-size:3em;} #clockContainer { position: relative; margin: auto; height: 80vw; width: 80vw; max-height:500px; max-width:500px; background:moccasin; border-radius:50%; margin-top:10%; } #hour, #minute, #second {position: absolute; border-radius: 4px; } #hour { background: black; width: 1.5%; height: 25%; transform-origin: 50% 100%; top: 25%; left: 49.25%; } #minute { background: black; width: 1%; height: 40%; transform-origin: 50% 100%; top: 10%; left: 49.5%; } #second { background: red; width: 0.3%; height: 55%; transform-origin: 50% 80.5%; top: 5.5%; left: 49.85%; transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.7); } #middle {border:2px solid red; background:black; width:6%; height:6%; position:absolute; left:47%; top:47%; border-radius:50%; } .shadow {box-shadow:0 0 8px #333; } .tick {position: absolute; background: black; width: 0.2%; height: 3%; transform-origin: 50% 1665%; top: 0; left: 49.9%; } .majortick {position: absolute; background: black; width: 1.6%; height: 3%; transform-origin: 50% 1665%; top: 0; left: 49.4%; } #outercircle {border:1px solid black; width:94%; height:94%; position:absolute; left:3%; top:3%; border-radius:50%; } .number {position: absolute; color:Black; width: 20%; height: 10%; transform-origin: 50% 500%; top:0; left: 40%; text-align:center; font-size:600%; line-height:115%; letter-spacing:-0.1em; padding-right:2%; } #textureoverlay {position:absolute; width:100%; height:100%; background: url(texture.jpg) no-repeat; background-size: 100%; opacity:0.6; border-radius:50%; } @media only screen and (max-width: 400px) { .number {font-size:400%; } } </style> <!-- HTML --> <h2 id="date" style="text-align:center; color:Orange; ">Date</h2> <div id="clockContainer" class="shadow"> {$ticks} {$numbers} <div id="outercircle"></div> <div id="textureoverlay"></div> <div id="hour" class="shadow" ></div> <div id="minute" class="shadow" ></div> <div id="second" class="shadow" ></div> <div id="middle"></div> </div> <!-- JAVASCRIPT --> <script> var options = { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric' }; var audio = new Audio('tick.mp3'); audio.volume = 0.15; audio.playbackRate = 2; function doclock(){ d = new Date(); hr = d.getHours(); min = d.getMinutes(); sec = d.getSeconds(); bigsec = Math.round(d.getTime() / 1000) % (60 * 60 * 24); if(hr % 24 == 0){ document.getElementById("date").innerHTML = d.toLocaleDateString("en-UK", options); } hr_rotation = 30 * hr + min / 2; sec_rotation = 6 * bigsec; min_rotation = 6 * min + sec / 10; hour.style.transform = 'rotate(' + hr_rotation.toString() + 'deg)'; minute.style.transform = 'rotate(' + min_rotation.toString() + 'deg)'; second.style.transform = 'rotate(' + sec_rotation.toString() + 'deg)'; audio.play(); } doclock(); document.getElementById("date").innerHTML = d.toLocaleDateString("en-UK", options); setInterval(doclock,1000); </script>