Made the game fit in single screen

Made changes so that the entire game fits in a single screen (laptop/pc).
kunjgit · May 12, 2024 · 31a4729 · 31a4729
1 parent 3e34423
commit 31a4729
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/Games/Simon_Game_Challenge/index.html b/Games/Simon_Game_Challenge/index.html
@@ -23,9 +23,9 @@
   </head>
 
   <body>
-    <div style="text-align: left; margin-left: 40px;
-    margin-top: 30px;
-    font-size: 30px;
+    <div style="text-align: left; margin-left: 10px;
+    margin-top: 10px;
+    font-size: 40px;
     padding: 5px; "><a href="https://kunjgit.github.io/GameZone/"><i style="color:white;" class="fas fa-home home-icon"></i></a></div>
     <h1 id="level-title">Press Any Key to Start</h1>
     <h2 id="highest">Highest reached level : 0</h2>
@@ -58,7 +58,7 @@ <h2>All the best :)</h2>
       </div>
     </div>
 
-    <h1 id="play-button">
+    <h1 id="play-button" style="margin: 0%;">
       <i class="fa fa-regular fa-circle-play"></i>
     </h1>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

diff --git a/Games/Simon_Game_Challenge/styles.css b/Games/Simon_Game_Challenge/styles.css
@@ -9,12 +9,12 @@ body {
 #level-title {
   font-family: "Press Start 2P", cursive;
   font-size: 3rem;
-  margin: 5%;
+  margin: 1px;
   color: #fef2bf;
 }
 #play-button {
   font-family: "Press Start 2P", cursive;
-  font-size: 3rem;
+  font-size: 7rem;
   color: #fef2bf;
 }
 
@@ -36,18 +36,19 @@ body {
   display: flex;
   flex-direction: column;
   width: 70%;
-  margin: auto;
-  margin-left: 80px;
+  margin: 30px;
+  margin-left: 50px;
 }
 
 .instructions-section {
   background-color: #fef2bf;
-  font-size: 1.5rem;
+  font-size: medium;
+  font-weight: bold;
   flex: 1;
-  padding: 10px;
-  margin: 20px;
+  padding: 8px;
+  margin: 5px;
   display: flex;
-  flex-direction: column;
+  flex-direction:column;
   justify-content: center;
 }
 
@@ -59,17 +60,17 @@ body {
   .game-section,
   .instructions-section {
     width: 100%;
-    margin: 20px auto;
+    margin: 10px auto;
   }
 }
 
 .btn {
-  margin: 25px;
   display: inline-block;
-  height: 200px;
-  width: 200px;
+  height: 150px;
+  width: 150px;
   border: 5px solid black;
   border-radius: 10%;
+  margin: 5px;
 }
 
 .game-over {
@@ -142,3 +143,5 @@ body {
     font-size: 3.5rem;
   }
 }
+
+