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/boxicons@latest/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>

 


Find out about the update of this script first in our telegram channel: https://t.me/proweblabxyz