10_digital_clock_01 css style updated

nitishkhobragade · Feb 21, 2024 · 6deb923 · 6deb923
1 parent 861c8e3
commit 6deb923
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 9 deletions.
diff --git 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
@@ -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;
     }