Author: | bedimcode |
---|---|
Views Total: | 2,567 views |
Official Page: | Go to website |
Last Update: | July 13, 2021 |
License: | MIT |
Preview:

Description:
A pretty clean, mobile-first, and Neumorphic style analog & digital clock UI with dark & light themes, built with JavaScript, CSS, and HTML.
How to use it:
1. The markup structure for the clock UI.
<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> </div> </section>
2. Load the necessary JavaScript and CSS files in the document. That’s it.
<link rel="stylesheet" href="assets/css/styles.css" /> <script src="assets/js/main.js"></script>
3. Customize the clock UI by overriding the default CSS variables.
:root { /*========== Colors ==========*/ --hue-color: 240; --first-color: hsl(var(--hue-color), 53%, 49%); --title-color: hsl(var(--hue-color), 53%, 15%); --text-color: hsl(var(--hue-color), 12%, 35%); --text-color-light: hsl(var(--hue-color), 12%, 65%); --white-color: #FFF; --body-color: hsl(var(--hue-color), 24%, 94%); /*========== Font and typography ==========*/ --body-font: 'Poppins', sans-serif; --biggest-font-size: 3rem; --small-font-size: .813rem; --smaller-font-size: .75rem; --tiny-font-size: .625rem; /*========== Font weight ==========*/ --font-medium: 500; /*========== Margenes Bottom ==========*/ --mb-0-25: .25rem; --mb-1: 1rem; --mb-1-5: 1.5rem; --mb-2-5: 2.5rem; /*========== z index ==========*/ --z-normal: 1; --z-tooltip: 10; }