typing speed test is updated

ANSHIKA-26 · Jul 27, 2023 · c96869a · c96869a
1 parent c0637b7
commit c96869a
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 2 deletions.
diff --git a/Games/Typing_Speed_Test_Game/index.html b/Games/Typing_Speed_Test_Game/index.html
@@ -8,6 +8,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
+    <header id="container">
+    <div class="heading">Simple Speed Typing</div>
+   </header>
     <div class="wrapper">
       <input type="text" class="input-field">
       <div class="content-box">
@@ -40,7 +43,12 @@
       font-size: 30px;
       padding: 5px; "><a href="https://kunjgit.github.io/GameZone/"><i style="color:black;" class="fas fa-home home-icon"></i></a></div>
     </div>
-
+    <div>
+      <!-- background -->
+      <div class="bg"></div>
+      <div class="bg bg2"></div>
+      <div class="bg bg3"></div>
+    </div>
     <script src="script.js"></script>
 
   </body>

diff --git a/Games/Typing_Speed_Test_Game/style.css b/Games/Typing_Speed_Test_Game/style.css
@@ -24,6 +24,8 @@ body{
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 10px 15px rgba(0,0,0,0.05);
+  margin-top:70px ;
+  margin-left: -753px;
 }
 .wrapper .input-field{
   opacity: 0;
@@ -181,4 +183,67 @@ li:not(:first-child) span{
   .content button{
     margin-top: 10px;
   }
-}
+}
+
+
+/* background */
+html {
+  height:100%;
+}
+
+body {
+  margin:0;
+}
+
+.bg {
+  animation:slide 3s ease-in-out infinite alternate;
+  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
+  bottom:0;
+  left:-50%;
+  opacity:.5;
+  position:fixed;
+  right:-50%;
+  top:0;
+  z-index:-1;
+}
+
+.bg2 {
+  animation-direction:alternate-reverse;
+  animation-duration:4s;
+}
+
+.bg3 {
+  animation-duration:5s;
+}
+
+.content123 {
+  background-color:rgba(255,255,255,.8);
+  border-radius:.25em;
+  box-shadow:0 0 .25em rgba(0,0,0,.25);
+  box-sizing:border-box;
+  left:50%;
+  padding:10vmin;
+  position:fixed;
+  text-align:center;
+  top:50%;
+  transform:translate(-50%, -50%);
+}
+
+@keyframes slide {
+  0% {
+    transform:translateX(-25%);
+  }
+  100% {
+    transform:translateX(25%);
+  }
+}
+.heading {
+  font-size: 3rem;
+  color: black;
+  background-color: rgba(255, 0, 0, 0.712);
+  border: #f5f5c6;
+  border-radius: 15px;
+  padding: 2px 120px 2px 120px;
+  margin-top: -290px;
+}
+