diff --git a/index.html b/index.html index 1da4876..024e1be 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,12 @@
-
-
0
+
000
+
diff --git a/styles.css b/styles.css index 94bfce2..079105d 100644 --- 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;