Add files via upload

KaloKamo · Sep 4, 2024 · 2d6879a · 2d6879a
1 parent 0c4fd22
commit 2d6879a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -8,12 +8,12 @@
 
 <body>
     <div class="container">
-      <img src="Untitled-1.png" class="circ">
         <div class="counter">
             <button id="increment-btn">+</button>
-            <div id="counter-value">0</div>
+            <div id="counter-value">000</div>
             <button id="decrement-btn">-</button>
         </div>
+        <img src="Untitled-1.png" class="circ">
         <button id="reset">Reset</button>
     </div>
     <script src="app.js"></script>

diff --git a/styles.css b/styles.css
@@ -5,11 +5,14 @@
 }
 
 .circ {
+    z-index: 1;
     background-color: transparent;
-    margin-top: vh;
+    margin-top: s0vh;
+    margin-left: 3vw;
     position: absolute;
     width: 100vw;
     height: 80vh;
+    pointer-events: none;
 }
 
 .container {
@@ -24,7 +27,7 @@
 
 
 .counter {
-    margin-bottom: 5vh;
+    margin-bottom: 2vh;
     justify-content: center;
 }
 
@@ -40,31 +43,50 @@
     color: white;}
 
 #increment-btn {
-    margin-top: 0vh;
-    height: 20vh;
-    width: 85vw;
+    border-radius: 0px;
+    font-size:0;
+    margin-left: 1.5vw;
+    margin-top: -5vh;
+    height: 50vh;
+    width: 105vw;
+    transition: background-color 0.1s;
+
+}
+
+#increment-btn:active {
+    background-color: purple;
 }
 
 #decrement-btn {
-    margin-top: 3vh;
-    height: 20vh;
-    width: 85vw;
+    margin-left: 1.5vw;
+    height: 50vh;
+    width: 105vw;
+    transition: background-color 0.1s;
 }
 
+#decrement-btn:active {
+    background-color: red;
+}
 #reset {
-    padding: 0 20px;
-    font-size: 20px;
+    border-radius: 20px;
+    border: 5px solid white;
+    height: 140px;
+    width: 930px;
+    font-size: 100px;
 }
 
 #counter-value {
+    position: absolute;
+    z-index: 2;
     border: 1px solid white;
-    height: 50px;
-    min-width: 120px;
-    border-radius: 10px;
-    margin-top: 20px;
+    height: 1px;
+    background-color: transparent;
+    border: 0 !important;
+    margin-top: 7.5vh;
+    margin-left: 28.5vw;
     color: white;
-    font-family:Georgia, 'Times New Roman', Times, serif;
-    font-size: 30px;
+font-family: 'Courier New', Courier, monospace;
+    font-size: 400px;
     display: flex;
     justify-content: center;
     align-items: center;