done with the title and score table classes

blackwakhu · Jul 22, 2024 · 65f0c4f · 65f0c4f
1 parent ace273b
commit 65f0c4f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/App.css b/src/App.css
@@ -6,6 +6,15 @@ main {
 
 }
 
+/* title and score */
+.title{
+  text-align: center;
+}
+
+.score-table{
+  margin-left: 25%;
+}
+
 /* win message  */
 .win-msg{
   background: green;
@@ -28,8 +37,8 @@ main {
 
 /* keyboard related styles */
 .keyboard-div{
-  margin-left: 25%;
-  width: 50%;
+  margin-left: 20%;
+  width: 60%;
   text-align: center;
   border: outset;
   background: #606060;

diff --git a/src/App.tsx b/src/App.tsx
@@ -68,12 +68,12 @@ export default function App() {
   }
   return (
     <main>
-      <h1>Hangman Game</h1>
+      <h1 className="title">Hangman Game</h1>
       <div className={`play-div ${showgame ? 'hidden' : ''}`}>
         <button onClick={handleVisible}>Play</button>
       </div>
       <div className={`game-div ${showgame ? '' : 'hidden'}`}>
-        <h2>Score: {score}</h2>
+        <h2 className="score-table">Score: {score}</h2>
         <div className={`${win ? 'hidden': ''}`}>
           <p className="word_char">{word}</p>
           <div className="keyboard-div">