Merge pull request #7 from priyanshi-git/Redesign

Redesign
uday03meh · Oct 12, 2022 · 9b111a3 · 9b111a3
2 parents 5d67fea + c545e57
commit 9b111a3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -24,11 +24,11 @@
   <div id="hands"></div>
       </div>
   <div id="result"></div>
-  <button id='endGameButton'>🔴</button>
+  <button id='endGameButton'>Again !</button>
   </div>
   </div>
 
   <script src="script.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/style.css b/style.css
@@ -1,8 +1,12 @@
+@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
+
 html, body {
+  font-family: 'Press Start 2P', sans-serif;
   height: 100%;
   width: 100%;
   padding: 0;
   margin:0;
+  box-sizing: border-box;
 }
 
 .wrapper {
@@ -31,8 +35,8 @@ html, body {
 
 .rpsButton:hover{
   background-color:#a7fbd4; 
-    border-width:4px;
-    border-color:#f8a0e5;
+  border-width:4px;
+  border-color:#f8a0e5;
 }
 
 .rpsButton:active {
@@ -42,16 +46,17 @@ html, body {
 }    
 
 #endGameButton{
-  height: 100px;
-  width: 100px;
-  margin-top:10px;
-  font-size: 48px;
-  border-radius: 30px;
+  border: none;
+  background-color: #eee;
+  color: #222;
+  font-size: 2rem;
+  font-family: inherit;
+  padding: 2rem 2rem;
   cursor: pointer; 
 }
 
 #endGameButton:hover{
-    background-color:#c3bbbb;
+    background-color:#e36666;
 }
 
 #endGameButton:active {
@@ -61,22 +66,27 @@ html, body {
 }    
 
 .resultContainer {
-  font-size: 2.5rem;
+  font-size: 2rem;
   text-align: center;
   margin: 30px auto;
 }
 
 #handsdiv{
-     height: 100px;
+  height: 100px;
   width: 100px;
   font-size: 48px;
   border-radius: 30px;
-    background-color:white
-    padding: auto;
-    margin:auto;
-    color:white
+  background-color:white
+  padding: auto;
+  margin:auto;
+  color:white
 }
 
 #scoreContainer{
-    display:flex;
-}
+  display:flex;
+  margin: 10px auto;
+}
+
+#result {
+  margin-bottom: 30px;
+}