A Simple Wall Clock Using HTML And Neumorphism CSS

A Simple 24 Hours Wall Clock Using HTML And Neumorphism CSS

Reads 2,684

A Simple Wall Clock Using HTML And Neumorphism CSS

SOURCE CODE of A Simple Wall Clock Using HTML And Neumorphism CSS

Copy Code 


<!DOCTYPE html> 
<html lang="en">
  <title>Responsive Sticky Navigation Menu</title>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="clock">
        <div class="outer-clock-face">
          <div class="marking marking-one"></div>
          <div class="marking marking-two"></div>
          <div class="marking marking-three"></div>
          <div class="marking marking-four"></div>
          <div class="inner-clock-face">
            <div class="hand hour-hand"></div>
            <div class="hand min-hand"></div>
            <div class="hand second-hand"></div>
          </div>
        </div>
      </div>
  
</body>
</html>

CSS

Copy Code 


 html {
  background: #fff;
  text-align: center;
  font-size: 11px;
}

body {
  margin: 75px;
  font-size: 1rem;
  display: flex;
  min-height: 10vh;
  align-items: center;
  border-radius: 38px;
background: #f2f2f2;
box-shadow:  6px -6px 8px #a9a9a9,
             -6px 6px 8px #ffffff;
}

.clock {
  width: 30rem;
  height: 30rem;
  border-radius: 38px;
background: #f2f2f2;
box-shadow:  6px -6px 8px #a9a9a9,
             -6px 6px 8px #ffffff;
  border-radius: 70%;
  margin: 50px auto;
  position: relative;
  padding: 2rem;
  border-radius: 38px;
background: #f2f2f2;
box-shadow:  6px -6px 8px #a9a9a9,
             -6px 6px 8px #ffffff;
 
}

.outer-clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: #337bee;
  overflow: hidden;
  border-radius: 38px;
background: #f2f2f2;
box-shadow:  6px -6px 8px #a9a9a9,
             -6px 6px 8px #ffffff;
}

.outer-clock-face::after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg)
}

.outer-clock-face::before,
.outer-clock-face::after,
.outer-clock-face .marking{
  content: '';
  position: absolute;
  width: 5px;
  height: 100%;
  background: #337bee;
  z-index: 0;
  left: 49%;
  
}

.outer-clock-face .marking {
  background: #000;
  width: 3px;
  
}

.outer-clock-face .marking.marking-one {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  transform: rotate(30deg)
}

.outer-clock-face .marking.marking-two {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg)
}

.outer-clock-face .marking.marking-three {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  transform: rotate(120deg)
}

.outer-clock-face .marking.marking-four {
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  transform: rotate(150deg)
}

.inner-clock-face {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  z-index: 1;
  
}

.inner-clock-face::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 18px;
  margin-left: -9px;
  margin-top: -6px;
  background: #fff;
  z-index: 11;
}

.hand {
  width: 50%;
  right: 50%;
  height: 6px;
  background: #fff;
  position: absolute;
  top: 50%;
  border-radius: 6px;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
  border-radius: 38px;
background: #f2f2f2;
box-shadow:  6px -6px 8px #a9a9a9,
             -6px 6px 8px #ffffff;
}

.hand.hour-hand {
  width: 30%;
  z-index: 3;
}

.hand.min-hand {
  height: 3px;
  z-index: 10;
  width: 40%;
}

.hand.second-hand {
  background: #ee791a;
  width: 45%;
  height: 2px;
}

JAVASCRIPT

Copy Code 


 const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setDate, 1000);

setDate();

Please see the tweet I have embedded below if you wish to know how this is made.

If you are interested in learning you can start taking my free course on HTML, CSS, and JAVASCRIPT.

Founder & CEO of Swiftspeed Appcreator. I enjoy sharing my experiences in the digital world and helping businesses solve more problems with software development. Connect with me on LinkedIn @ Akinola Abdulakeem and Twitter @Kynsofficial

5 Comments

  1. Saw your tweet about the clock, it’s very impressive. Good work done bro. Some of us are still learning.

    Reply

  2. i am really enjoying the class

    Reply

  3. I hope by the time we finish the course I will be able to create a website like this🥺..

    Reply

Leave a Reply

Your email address will not be published.