From 6deb9230109b3cdc37379521b714d3a5c0c45887 Mon Sep 17 00:00:00 2001
From: nitishkhobragade <nitishkhobragade89@gmail.com>
Date: Wed, 21 Feb 2024 22:59:57 +0530
Subject: [PATCH] 10_digital_clock_01 css style updated

---
 10_digital_clock_01/index.html |  7 ++--
 10_digital_clock_01/styles.css | 59 ++++++++++++++++++++++++++++++----
 2 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/10_digital_clock_01/index.html b/10_digital_clock_01/index.html
index 289c492..331414b 100644
--- a/10_digital_clock_01/index.html
+++ b/10_digital_clock_01/index.html
@@ -11,11 +11,12 @@
         <div class="digitalClock">
             <h1 id="day">MON</h1>
             <h1 id="hour">04</h1>
-            <h1 id="bar1">|</h1>
+            <h1 id="bar1">.</h1>
             <h1 id="minute">20</h1>
-            <h1 id="bar2">|</h1>
-            <h1 id="ampm">PM</h1>
+            <h1 id="bar2">.</h1>
             <h1 id="seconds">60</h1>
+            <h1 id="bar3">-</h1>
+            <h1 id="ampm">PM</h1>
         </div>
     </div>
     <script src="./app.js"></script>
diff --git a/10_digital_clock_01/styles.css b/10_digital_clock_01/styles.css
index 8970756..9bb3c33 100644
--- a/10_digital_clock_01/styles.css
+++ b/10_digital_clock_01/styles.css
@@ -19,34 +19,81 @@ body {
 }
 
 .container{
-    border: 1px solid black;
     width: 95%;
     height: 97vh;
     margin: auto;
     display: flex;
-    align-items: center;justify-content: center;
+    align-items: center;
+    justify-content: center;
+
+    perspective: 1000px;
 }
 
 .digitalClock{
-    border: 1px solid black;
 
     width: fit-content;
     margin: auto;
     padding: 10px;
-    border-radius: 2px;
+    border-radius: 20px;
     color: #fff;
     background: rgba(0,0,0,0.1);
+
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
 }
 
 .digitalClock h1 {
     display: inline-block;
     margin: 0 10px;
     font-weight: bold;
-    font-size: 5rem;
+    font-size: 4rem;
+
+    transition: transform 0.3s ease;
+}
+
+.digitalClock h1 {
+    text-transform: uppercase;
+    font-weight: 700;
+    color: #f5f5f5;
+    text-shadow: 1px 1px 1px #919191,
+        1px 2px 1px #919191,
+        1px 3px 1px #919191,
+        1px 4px 1px #919191,
+        1px 5px 1px #919191,
+        1px 6px 1px #919191,
+        1px 7px 1px #919191,
+        1px 8px 1px #919191,
+        1px 9px 1px #919191,
+        1px 10px 1px #919191,
+    1px 18px 6px rgba(16,16,16,0.4),
+    1px 22px 10px rgba(16,16,16,0.2),
+    1px 25px 35px rgba(16,16,16,0.2),
+    1px 30px 60px rgba(16,16,16,0.4);
 }
 
+
+
 @media(max-width: 768px) {
-    #bar1, #bar2 {
+    .container{
+        border: none;
+        width: 95%;
+        height: 97vh;
+        margin: auto;
+        display: flex;
+        align-items: center;justify-content: center;
+    }
+    
+    .digitalClock{
+        border: none;
+    
+        width: fit-content;
+        margin: auto;
+        padding: 10px;
+        color: #fff;
+        background: rgba(0,0,0,0.1);
+    }
+    
+
+    #bar1, #bar2, #bar3 {
         display: none;
     }