CodePen Embed - Wall Clock

<body>
    <div class="container">

        <div class="box">
            <div class="box-mid-up"></div>
            <div class="box-mid-down"></div>
            <div class="box-left"></div>
            <div class="box-right"></div>
            <div class="patch-left-up"></div>
            <div class="patch-left-bottom"></div>
            <div class="patch-right-up"></div>
            <div class="patch-right-bottom"></div>
            <div class="inner-box">
                <div class="inner-box-left"></div>
                <div class="inner-box-right"></div>
                <div class="time1">1</div>
                <div class="time2">2</div>
                <div class="time3">3</div>
                <div class="time4">4</div>
                <div class="time5">5</div>
                <div class="time6">6</div>
                <div class="time7">7</div>
                <div class="time8">8</div>
                <div class="time9">9</div>
                <div class="time10">10</div>
                <div class="time11">11</div>
                <div class="time12">12</div>
                <div class="time1-dot"></div>
                <div class="time2-dot"></div>
                <div class="time3-dot"></div>
                <div class="time4-dot"></div>
                <div class="time5-dot"></div>
                <div class="time6-dot"></div>
                <div class="time7-dot"></div>
                <div class="time8-dot"></div>
                <div class="time9-dot"></div>
                <div class="time10-dot"></div>
                <div class="time11-dot"></div>
                <div class="time12-dot"></div>

                <div class="ajanta">Ajanta</div>
                <div class="quartz">QUARTZ</div>
                <div class="ajanta-dot">
                    <div class="ajanta-inner-dot"></div>
                </div>
                <div class="about">SINCE 1971</div>
                <div class="hour-pointer" id="hour-pointer"></div>
                <div class="minute-pointer" id="minute-pointer"></div>
                <div class="second-pointer" id="second-pointer"></div>
                <div class="second-pointer-down" id="second-pointer-down"></div>
                <div class="mid-pointer-1"></div>
                <div class="mid-pointer-2"></div>
            </div>
        </div>


    </div>
</body>

:root {
    --pointer: black;
    --primary-color: #f4e5a7;
    --inner-box: #fef3c7;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(231, 198, 203);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(1.5);
}

.box {
    width: 100px;
    height: 200px;
    background-color: var(--primary-color);
    position: relative;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-radius: 3px;
    box-shadow: 16px 16px 95px black;
}

.box-mid-up {
    width: 50px;
    height: 14px;
    background-image: linear-gradient(to right, #723911, #e7ba48);
    position: absolute;
    border-radius: 6px;
    top: -6px;
    left: 25px;
}

.box-mid-down {
    width: 50px;
    height: 14px;
    background-image: linear-gradient(to right, #262626, #5a4614);
    position: absolute;
    border-radius: 6px;
    bottom: -5px;
    left: 25px;
}

.box-left {
    width: 30px;
    height: 200px;
    background-color: var(--primary-color);
    position: absolute;
    left: -26px;
    top: -2px;
    border-radius: 100% 0% 0% 100% / 50% 46% 54% 50%;
    border-left: 2px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

.box-right {
    width: 30px;
    height: 200px;
    background-color: var(--primary-color);
    position: absolute;
    right: -26px;
    top: -2px;
    border-radius: 0% 100% 100% 0% / 50% 46% 54% 50%;
    border-right: 2px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

.patch-left-up {
    width: 8px;
    height: 25px;
    position: absolute;
    background-color: var(--primary-color);
}

.patch-left-bottom {
    width: 8px;
    height: 22px;
    position: absolute;
    bottom: 1px;
    background-color: var(--primary-color);
}

.patch-right-up {
    width: 8px;
    height: 25px;
    position: absolute;
    right: 0;
    background-color: var(--primary-color);
}

.patch-right-bottom {
    width: 8px;
    height: 22px;
    position: absolute;
    bottom: 1px;
    right: 1px;
    z-index: 1;
    background-color: var(--primary-color);
}


.inner-box {
    z-index: 1;
    width: 70px;
    height: 150px;
    background-color: var(--inner-box);
    position: absolute;
    top: 25px;
    left: 15px;
    border-top: 1px solid rgb(213, 187, 187);
    border-bottom: 1px solid rgb(213, 187, 187);
}

.inner-box-left {
    width: 20px;
    height: 150px;
    background-color: var(--inner-box);
    position: absolute;
    left: -20px;
    top: -1px;
    border-radius: 100% 0% 0% 100% / 50% 30% 70% 50%;
    border-left: 1px solid rgb(213, 187, 187);
    border-top: 1px solid rgb(213, 187, 187);
    border-bottom: 1px solid rgb(213, 187, 187);
}

.inner-box-right {
    width: 20px;
    height: 150px;
    background-color: var(--inner-box);
    position: absolute;
    right: -20px;
    top: -1px;
    border-radius: 0% 100% 100% 0% / 50% 46% 54% 50%;
    border-right: 1px solid rgb(213, 187, 187);
    border-top: 1px solid rgb(213, 187, 187);
    border-bottom: 1px solid rgb(213, 187, 187);
}

.time1 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 15px;
    right: -3px;
}

.time1-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 30px;
    right: 9px;
}

.time2 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 40px;
    right: -8px;
}

.time2-dot {
    width: 1.5px;
    height: 2px;
    border-radius: 60%;
    background-color: black;
    position: absolute;
    top: 50px;
    right: 5px;
}

.time3 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 65px;
    right: -8px;
}

.time3-dot {
    width: 1.5px;
    height: 2px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 73px;
    right: 4px;
}

.time4 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 89px;
    right: -8px;
}

.time4-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 95px;
    right: 6px;
}

.time5 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 115px;
    right: 0px;
}

.time5-dot {
    width: 1.7px;
    height: 2px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 113px;
    right: 13px;
}

.time6 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 130px;
    right: 30px;
}

.time6-dot {
    width: 1.9px;
    height: 2px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 128px;
    right: 34px;
}

.time7 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 115px;
    left: 0px;
}

.time7-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 113px;
    left: 11px;
}

.time8 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 89px;
    left: -8px;
}

.time8-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 94px;
    left: 5px;
}

.time9 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 65px;
    left: -8px;
}

.time9-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 73px;
    left: 4px;
}

.time10 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 40px;
    left: -12px;
}

.time10-dot {
    width: 2px;
    height: 1.8px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 50px;
    left: 5px;
}

.time11 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 15px;
    left: -5px;
}

.time11-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 30px;
    left: 9px;
}

.time12 {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 3px;
    right: 32px;

}

.time12-dot {
    width: 2px;
    height: 1.5px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 20px;
    right: 32px;
}

.ajanta {
    position: absolute;
    top: 30px;
    left: 23px;
    font-size: 10px;
}

.quartz {
    position: absolute;
    top: 40px;
    left: 33px;
    font-size: 4px;
}

.ajanta-dot {
    position: absolute;
    top: 29px;
    left: 47px;
    height: 4.4px;
    width: 4px;
    border-radius: 50%;
    border: 0.8px solid black;
}

.ajanta-inner-dot {
    position: absolute;
    top: 0.7px;
    left: 0.5px;
    height: 1px;
    width: 1px;
    border-radius: 50%;
    background-color: black;
}

.about {
    font-size: 3px;
    position: absolute;
    top: 120px;
    right: 28px;
}

.mid-pointer-1 {
    font-size: 3px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 70px;
    right: 31px;
}

.mid-pointer-2 {
    font-size: 3px;
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color: #FFD700;
    position: absolute;
    top: 72.5px;
    right: 33.3px;
}

.hour-pointer {
    font-size: 3px;
    height: 24px;
    width: 3px;
    background-color: black;
    position: absolute;
    top: 50px;
    right: 34px;
    border-radius: 2px 2px 0px 0px;
    transform-origin: bottom;
    /* animation: motion 43200s infinite; */
}

.minute-pointer {
    font-size: 3px;
    height: 46px;
    width: 2px;
    background-color: black;
    position: absolute;
    top: 28.5px;
    right: 34.3px;
    background-color: black;
    border-radius: 2px 2px 0px 0px;
    transform-origin: bottom;
    /* animation: motion 3600s infinite; */
}

.second-pointer {
    font-size: 3px;
    height: 37px;
    width: 1px;
    background-color: black;
    position: absolute;
    top: 37px;
    right: 34.5px;
    border-radius: 2px 2px 0px 0px;
    transform-origin: bottom;
    animation: motion 60s infinite;
}

.second-pointer-down {
    font-size: 3px;
    height: 8px;
    width: 3px;
    background-color: black;
    position: absolute;
    top: 74px;
    right: 33.5px;
    transform-origin: top;
    animation: motion 60s infinite;
    border-radius: 5px 5px 0px 0px;
}

@keyframes motion {

    0% {
        /* transform: rotate(0deg); */
    }

    1.67% {
        transform: rotate(6deg);
    }

    3.34% {
        transform: rotate(12deg);
    }

    5.01% {
        transform: rotate(18deg);
    }

    6.68% {
        transform: rotate(24deg);
    }

    8.35% {
        transform: rotate(30deg);
    }

    10.02% {
        transform: rotate(36deg);
    }

    11.69% {
        transform: rotate(42deg);
    }

    13.36% {
        transform: rotate(48deg);
    }

    15.03% {
        transform: rotate(54deg);
    }

    16.7% {
        transform: rotate(60deg);
    }

    18.37% {
        transform: rotate(66deg);
    }

    20.04% {
        transform: rotate(72deg);
    }

    21.71% {
        transform: rotate(78deg);
    }

    23.38% {
        transform: rotate(84deg);
    }

    25.05% {
        transform: rotate(90deg);
    }

    26.72% {
        transform: rotate(96deg);
    }

    28.39% {
        transform: rotate(102deg);
    }

    30.06% {
        transform: rotate(108deg);
    }

    31.73% {
        transform: rotate(114deg);
    }

    33.4% {
        transform: rotate(120deg);
    }

    35.07% {
        transform: rotate(126deg);
    }

    36.74% {
        transform: rotate(132deg);
    }

    38.41% {
        transform: rotate(138deg);
    }

    40.08% {
        transform: rotate(144deg);
    }

    41.71% {
        transform: rotate(150deg);
    }

    43.42% {
        transform: rotate(156deg);
    }

    45.09% {
        transform: rotate(162deg);
    }

    46.76% {
        transform: rotate(168deg);
    }

    48.43% {
        transform: rotate(174deg);
    }

    50.1% {
        transform: rotate(180deg);
    }

    51.77% {
        transform: rotate(186deg);
    }

    53.44% {
        transform: rotate(192deg);
    }

    55.11% {
        transform: rotate(198deg);
    }

    56.78% {
        transform: rotate(204deg);
    }

    58.45% {
        transform: rotate(210deg);
    }

    60.12% {
        transform: rotate(216deg);
    }

    61.79% {
        transform: rotate(222deg);
    }

    63.46% {
        transform: rotate(228deg);
    }

    65.15% {
        transform: rotate(234deg);
    }

    66.8% {
        transform: rotate(240deg);
    }

    68.47% {
        transform: rotate(246deg);
    }

    70.14% {
        transform: rotate(252deg);
    }

    71.81% {
        transform: rotate(258deg);
    }

    73.48% {
        transform: rotate(264deg);
    }

    75.15% {
        transform: rotate(270deg);
    }

    76.82% {
        transform: rotate(276deg);
    }

    78.49% {
        transform: rotate(282deg);
    }

    80.16% {
        transform: rotate(288deg);
    }

    81.83% {
        transform: rotate(294deg);
    }

    83.5% {
        transform: rotate(300deg);
    }

    85.17% {
        transform: rotate(306deg);
    }

    86.84% {
        transform: rotate(312deg);
    }

    88.51% {
        transform: rotate(318deg);
    }

    90.10% {
        transform: rotate(324deg);
    }

    91.85% {
        transform: rotate(330deg);
    }

    93.52% {
        transform: rotate(336deg);
    }

    95.19% {
        transform: rotate(342deg);
    }

    96.86% {
        transform: rotate(348deg);
    }

    98.53% {
        transform: rotate(354deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media screen and (max-width:600px) {
    .container {
        transform: scale(1.5);
    }
}

document.addEventListener("DOMContentLoaded", getExactTime)
var hour_pointer = document.querySelector("#hour-pointer");
var minute_pointer = document.querySelector("#minute-pointer");
var second_pointer = document.querySelector("#second-pointer");


function getExactTime() {
    var hour_full = new Date().getHours();

    if (hour_full >= 12) {
        var hour = hour_full - 12;
    } else {
        var hour = hour_full;
    }
    var minute = new Date().getMinutes();
    var rotate_hour = hour;
    var angle_rotation_hour = rotate_hour * 30;
    var angle_rotation_minute = minute * 6;
    const deg_hour = angle_rotation_hour;
    var deg_hour_minute = 0;
    if (minute != 60) {
        var deg_hour_minute = minute * 0.5;
    }
    const deg_minute = angle_rotation_minute;
    const degree_hour = deg_hour + deg_hour_minute;
    hour_pointer.style.transform = 'rotate(' + degree_hour + 'deg)';
    minute_pointer.style.transform = 'rotate(' + deg_minute + 'deg)';
}

setTimeout(function () {
    window.location.reload(1);
}, 60000);

This Pen is owned by Niket Kumar Mishra on CodePen.

See more by @niketmishra on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.