Style Markup Added

HetSolanki · Apr 2, 2024 · ab7b877 · ab7b877
1 parent 17a4d19
commit ab7b877
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -8,21 +8,24 @@
     <script src="script.js" defer></script>
 </head>
 <body>
-    <div class="board" id="board">
-        <div class="ceil" data-ceil></div>
-        <div class="ceil" data-ceil></div>
-        <div class="ceil" data-ceil></div>
-        <div class="ceil" data-ceil></div>
-        <div class="ceil" data-ceil></div>
-        <div class="ceil" data-ceil></div>
-        <div class="ceil" data-ceil></div>
-        <div class="ceil" data-ceil></div>
-        <div class="ceil" data-ceil></div>
-    </div>
-
-    <div class="winning-message" id="winningMessage">
-        <div data-winning-message-text></div>
-        <button id="restartButton">Restart</button>
+    <div class="game-board">
+        <h1>TicTacToe</h1>
+        <div class="board" id="board">
+            <div class="ceil" data-ceil></div>
+            <div class="ceil" data-ceil></div>
+            <div class="ceil" data-ceil></div>
+            <div class="ceil" data-ceil></div>
+            <div class="ceil" data-ceil></div>
+            <div class="ceil" data-ceil></div>
+            <div class="ceil" data-ceil></div>
+            <div class="ceil" data-ceil></div>
+            <div class="ceil" data-ceil></div>
+        </div>
+
+        <div class="winning-message" id="winningMessage">
+            <div data-winning-message-text></div>
+            <button id="restartButton">Restart</button>
+        </div>
     </div>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -10,7 +10,7 @@ body {
 
 .board {
     width: 100vw;
-    height: 100vh;
+    height: 60vh;
     display: grid;
     justify-content: center;
     align-content: center;
@@ -133,6 +133,15 @@ body {
     display: flex;
 }
 
+.game-board {
+    height: 100vh;
+    width: 100vw;
+    text-align: center;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}