diff --git a/Digital Clock/index.html b/Digital Clock/index.html
new file mode 100644
index 0000000..052006c
--- /dev/null
+++ b/Digital Clock/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ DIGITAL CLOCK
+
+
+
+
+
+
+
diff --git a/Digital Clock/script.js b/Digital Clock/script.js
new file mode 100644
index 0000000..2eccb5c
--- /dev/null
+++ b/Digital Clock/script.js
@@ -0,0 +1,22 @@
+let hr = document.getElementById('hour');
+let min = document.getElementById('min');
+let sec = document.getElementById('sec');
+let ampm = document.getElementById('ampm');
+
+function displayTime() {
+ let date = new Date();
+ let hh = date.getHours();
+ let mm = date.getMinutes();
+ let ss = date.getSeconds();
+
+ let period = hh >= 12 ? 'PM' : 'AM';
+ hh = hh % 12 || 12;
+
+ hr.innerHTML = String(hh).padStart(2, '0');
+ min.innerHTML = String(mm).padStart(2, '0');
+ sec.innerHTML = String(ss).padStart(2, '0');
+ ampm.innerHTML = period;
+}
+
+displayTime();
+setInterval(displayTime, 1000);
diff --git a/Digital Clock/style.css b/Digital Clock/style.css
new file mode 100644
index 0000000..8373260
--- /dev/null
+++ b/Digital Clock/style.css
@@ -0,0 +1,64 @@
+@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: "Doto", sans-serif;
+ color: greenyellow;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background-color: #212121;
+}
+
+.container {
+ padding: 40px 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #2e2e2e;
+ border: 2px solid #4d4d4d;
+ border-radius: 24px;
+ box-shadow: 0 0 30px rgba(173, 255, 47, 0.1),
+ 0 0 60px rgba(173, 255, 47, 0.05);
+}
+
+.clock {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.main-time {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 5rem;
+}
+
+.colon {
+ animation: blink 1s step-start infinite;
+ margin-bottom: 6px;
+}
+
+.side-info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 2px;
+ font-size: 1.6rem;
+ opacity: 0.85;
+ padding-bottom: 4px;
+ border-left: 1px solid #4d4d4d;
+ padding-left: 14px;
+}
+
+@keyframes blink {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0; }
+}