From d430594908077170e87266bc92e6fa2be5292b97 Mon Sep 17 00:00:00 2001 From: jyoti Date: Sun, 30 Oct 2022 13:23:29 +0530 Subject: [PATCH] Added a simple website which displays a digital clock --- Digital_clock_website/README.md | 5 ++++ Digital_clock_website/main.html | 45 +++++++++++++++++++++++++++++++++ Digital_clock_website/style.css | 30 ++++++++++++++++++++++ 3 files changed, 80 insertions(+) create mode 100644 Digital_clock_website/README.md create mode 100644 Digital_clock_website/main.html create mode 100644 Digital_clock_website/style.css diff --git a/Digital_clock_website/README.md b/Digital_clock_website/README.md new file mode 100644 index 0000000..32327a1 --- /dev/null +++ b/Digital_clock_website/README.md @@ -0,0 +1,5 @@ +A simple web project, in which a Digital Working Clock is created using HTML and CSS, and which displays the realtime on the webpage. +This is a real-time digital clock, which means you can see time in number with hour, minutes, and seconds. + +![Screenshot (107)](https://user-images.githubusercontent.com/83575900/162805210-721e89c1-4f25-437c-a727-6fe3de74cc7f.png) + diff --git a/Digital_clock_website/main.html b/Digital_clock_website/main.html new file mode 100644 index 0000000..6861eb2 --- /dev/null +++ b/Digital_clock_website/main.html @@ -0,0 +1,45 @@ + + + + + + + + + +

DIGITAL CLOCK

+ +
+
+
+
+ + + + diff --git a/Digital_clock_website/style.css b/Digital_clock_website/style.css new file mode 100644 index 0000000..c4d8676 --- /dev/null +++ b/Digital_clock_website/style.css @@ -0,0 +1,30 @@ +@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +html,body{ + height: 100%; +} +body{ + display: grid; + place-items: center; + background: #deb3ff; +} +.clock{ + background: #6937de; + height: 120px; + + line-height: 120px; + text-align: center; + padding: 0 30px; + box-shadow: -3px -3px 7px rgba(255,255,255,0.05), + 3px 3px 5px rgba(0,0,0,0.5); +} +.clock .display{ + font-size: 60px; + color: #dcbbfa; + letter-spacing: 5px; + font-family: 'Orbitron', sans-serif; +}