HTML UI Clock Design
Beautiful bare minimum design for your website HTML CSS JS
Super
0
564
I came across a very nice HTML CSS clock design. Well suited for Smart Home projects or similar.
Thanks to the author of this video tutorial and for the source files of the project.
All files can be downloaded from the link below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--==================== BOXICONS ====================-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css">
<!--==================== CSS ==========-->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Clock Ui</title>
</head>
<body>
<section class="clock container">
<div class="clock__container grid">
<div class="clock__content grid">
<div class="clock__circle">
<span class="clock__twelve"></span>
<span class="clock__three"></span>
<span class="clock__six"></span>
<span class="clock__nine"></span>
<div class="clock__rounder"></div>
<div class="clock__hour" id="clock-hour"></div>
<div class="clock__minutes" id="clock-minutes"></div>
<div class="clock__seconds" id="clock-seconds"></div>
<!-- Dark/light button -->
<div class="clock__theme">
<i class='bx bxs-moon' id="theme-button"></i>
</div>
</div>
<div>
<div class="clock__text">
<div class="clock__text-hour" id="text-hour"></div>
<div class="clock__text-minutes" id="text-minutes"></div>
<div class="clock__text-ampm" id="text-ampm"></div>
</div>
<div class="clock__date">
<!-- <span id="date-day-week"></span> -->
<span id="date-day"></span>
<span id="date-month"></span>
<span id="date-year"></span>
</div>
</div>
</div>
<a href="https://www.youtube.com/c/Bedimcode/" target="_blank" class="clock__logo">Bedimcode</a>
</div>
</section>
<!--==================== MAIN JS ====================-->
<script src="assets/js/main.js"></script>
</body>
</html>
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
