<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Digital clock</
title
>
<
style
>
/* Link for Google font */
@import url(
body {
/* Set background color of body */
background-color: #afd275;
/* Place item to center */
align-items: center;
display: flex;
justify-content: center;
/* Specify the vertical height */
height: 100vh;
overflow-y: hidden;
}
.clock {
position: absolute;
/* Put the clock content on
center of the screen */
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: white;
font-size: 60px;
font-family: Orbitron;
/* Provide space between letter of clock */
letter-spacing: 7px;
align-items: center;
border-radius: 50px;
display: flex;
justify-content: center;
margin-right: 4rem;
height: 500px;
width: 550px;
/* Set the neumorphism effect to
the body of clock */
background-color: #afd275;
box-shadow: inset 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
inset -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
id
=
"MyClockDisplay"
class
=
"clock"
onload
=
"showTime()"
>
</
div
>
</
div
>
<
script
src
=
"index.js"
></
script
>
</
body
>
</
html
>