Flip clock
<div class="clock"> <div class="timer"></div> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css"> <style> body { background-color: #abe9cd; background-image: linear-gradient(315deg, #abe9cd 0%, #3eadcf 74%); } .clock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} </style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script> <script> var clock = $('.timer').FlipClock({ clockFace: 'TwelveHourClock', }) </script>