Digital Clock Project with Html, Css and Javascript (Part 2)

on
Hello Friends, We are going to built Client site real time Digital clock with the help of Html, CSS and Javascript.

So, Let's get started.

Digital Clock

Real Time Digital Clock

CSS Section;

In this section we will Style our Html elements with the help of CSS.

Styling Our Title:

At this point we are styling our Html h1 title tag with CSS.

h1 {
text-transform: uppercase;
letter-spacing: 4px;
font-size: 35px;
text-align: center;
opacity: .8px;
}

Styling Our Time Counters:

Here we are styling and managing our Hours, Minutes and Seconds counters and lables. Also our am/pm tags.

.clock {
display: flex;
position: relative;
}

.clock div {
margin: 10px;
position: relative;
}

.clock div span {
width: 100px;
height: 80px;
background: rgb(8, 25, 235);
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
opacity: .8px;
}

.clock .text {
height: 30px;
font-size: 15px;
text-transform: uppercase;
background: #000;
letter-spacing: 2px;
opacity: .8px;
}

.clock #ampm {
position: absolute;
bottom: 0;
height: 40px;
width: 60px;
font-size: 30px;
background: rgb(4, 237, 245);
}


Styling Our date and Day:

In this section we are styling and position our date and day.

.dmy {
margin: 10px;
}

.dmy div {
margin: 10px;
position: relative;
/* background: rgb(4, 237, 245); */
}

.dmy div span {
width: 300px;
height: 60px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
opacity: .8px;
}

.dmy #dates {
display: block;
justify-content: center;
position: relative;
text-align: center;
height: 60px;
width: 300px;
font-size: 30px;
font-style:italic;
}

Javascript Section



Comments

Post a Comment