HTML UI Clock Design

Beautiful bare minimum design for your website HTML CSS JS

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>

 



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.