Merge pull request #21 from PranjaliBhardwaj/main

[UI fixed]: The position of slider is fixed in Kviz app issue #2

index.html

@@ -17,7 +17,7 @@ <h1>Kviz</h1>
       </div>
     </div>
 
-    <div>
+    <div class="box">
     <input type="checkbox" class="checkbox" id="checkbox">
     <label for="checkbox" class="label">
       <i class="fas fa-moon"></i>
@@ -31,3 +31,8 @@ <h1>Kviz</h1>
 
   </body>
 </html>
+
+<script src="toggle.js"></script>
+
+  </body>
+</html>

style.css

@@ -49,7 +49,6 @@ h3 {
   box-sizing: border-box;
 }
 body {
-  display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
@@ -61,9 +60,15 @@ body.dark {
 }
 .checkbox {
   opacity: 0;
-  position: relative;
-  margin-left: -12rem;
-  margin-top: 65rem;
+}
+.box {
+  z-index: 5;
+  margin-right: 0rem;
+  position: absolute;
+  margin-left :1333px;
+  top: 0;
+  right: 0;
+  margin-top: 5rem;
 }
 
 .label {
@@ -80,14 +85,20 @@ body.dark {
 }
 
 .ball {
+  position: absolute;
+  cursor: pointer;
+  margin-top: 0.3rem;
+  margin-left: 0.3rem;
   width: 20px;
   height: 20px;
-  background-color: white;
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  border-radius: 50%;
-  transition: transform 0.2s linear;
+  border-radius: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #fff;
+  -webkit-transition: .2s;
+  transition: .2s;
 }
 
 /*  target the elemenent after the label*/
@@ -106,16 +117,17 @@ body.dark {
 /* UTILITIES */
 
 .container {
-  width: 100vw;
+  width: 100vh;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   max-width: 80rem;
-  margin: 0 auto;
+  margin-left: 38rem ;
   padding: 0rem;
   padding-left: 1rem;
   padding-right: 1rem;
+  z-index: -1;
 }
 
 .container > * {
@@ -181,7 +193,7 @@ form {
 
 input {
   margin-bottom: 1rem;
-  width: 20rem;
+  width: 10rem;
   padding: 1.5rem;
   font-size: 1.8rem;
   border: none;
@@ -190,4 +202,4 @@ input {
 
 input::placeholder {
   color: #aaa;
-}
+}