rocketacademy · purplekiwifruit · Feb 17, 2024 · Oct 12, 2024 · Oct 12, 2024
diff --git a/README.md b/README.md
@@ -1 +1,23 @@
 # Rocket Academy Coding Basics: Blackjack
+
+## Overview
+This project is a simple implementation of a card game inspired by Blackjack, built as part of Rocket Academy's Coding Fundamentals course. The game allows the player to compete against the computer by drawing cards, with the goal of reaching as close to 21 points as possible without exceeding it.
+
+## How to Play
+1. Click the "Play" button to start the game. Both the player and the computer will receive two cards each.
+2. The scores are calculated based on the values of the cards. If either player has a score of 21 (Blackjack), the game ends immediately, and the winner is declared.
+3. If neither player has a Blackjack, the player can choose to either:
+   - **Hit**: Draw another card to increase their score.
+   - **Stand**: End their turn and let the computer play.
+4. The computer will continue drawing cards until its score is 17 or more.
+5. The player and computer scores are compared, and the winner is determined based on who is closer to 21 without exceeding it.
+6. The player can restart the game at any time by clicking the "Restart" button.
+
+## Instructions
+1. Clone the repository.
+2. Open the index.html file in a browser.
+3. Start playing by clicking the "Play" button.
+
+## Game Screenshot
+![Game Screenshot](https://github.com/user-attachments/assets/6d508fa3-fa13-4147-b461-baf3d65d9998)
+![Game Screenshot 2](https://github.com/user-attachments/assets/52aa51c6-f2aa-4548-9975-6e5478591275)
diff --git a/images/__MACOSX/images/._aceOfClubs.jpg b/images/__MACOSX/images/._aceOfClubs.jpg
diff --git a/images/__MACOSX/images/._aceOfDiamonds.jpg b/images/__MACOSX/images/._aceOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._aceOfHearts.jpg b/images/__MACOSX/images/._aceOfHearts.jpg
diff --git a/images/__MACOSX/images/._aceOfSpades.jpg b/images/__MACOSX/images/._aceOfSpades.jpg
diff --git a/images/__MACOSX/images/._chip.png b/images/__MACOSX/images/._chip.png
diff --git a/images/__MACOSX/images/._eightOfClubs.jpg b/images/__MACOSX/images/._eightOfClubs.jpg
diff --git a/images/__MACOSX/images/._eightOfDiamonds.jpg b/images/__MACOSX/images/._eightOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._eightOfHearts.jpg b/images/__MACOSX/images/._eightOfHearts.jpg
diff --git a/images/__MACOSX/images/._eightOfSpades.jpg b/images/__MACOSX/images/._eightOfSpades.jpg
diff --git a/images/__MACOSX/images/._fiveOfClubs.jpg b/images/__MACOSX/images/._fiveOfClubs.jpg
diff --git a/images/__MACOSX/images/._fiveOfDiamonds.jpg b/images/__MACOSX/images/._fiveOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._fiveOfHearts.jpg b/images/__MACOSX/images/._fiveOfHearts.jpg
diff --git a/images/__MACOSX/images/._fiveOfSpades.jpg b/images/__MACOSX/images/._fiveOfSpades.jpg
diff --git a/images/__MACOSX/images/._fourOfClubs.jpg b/images/__MACOSX/images/._fourOfClubs.jpg
diff --git a/images/__MACOSX/images/._fourOfDiamonds.jpg b/images/__MACOSX/images/._fourOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._fourOfHearts.jpg b/images/__MACOSX/images/._fourOfHearts.jpg
diff --git a/images/__MACOSX/images/._fourOfSpades.jpg b/images/__MACOSX/images/._fourOfSpades.jpg
diff --git a/images/__MACOSX/images/._jackOfClubs.jpg b/images/__MACOSX/images/._jackOfClubs.jpg
diff --git a/images/__MACOSX/images/._jackOfDiamonds.jpg b/images/__MACOSX/images/._jackOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._jackOfHearts.jpg b/images/__MACOSX/images/._jackOfHearts.jpg
diff --git a/images/__MACOSX/images/._jackOfSpades.jpg b/images/__MACOSX/images/._jackOfSpades.jpg
diff --git a/images/__MACOSX/images/._kingOfDiamonds.jpg b/images/__MACOSX/images/._kingOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._kingOfHearts.jpg b/images/__MACOSX/images/._kingOfHearts.jpg
diff --git a/images/__MACOSX/images/._kingOfSpades.jpg b/images/__MACOSX/images/._kingOfSpades.jpg
diff --git a/images/__MACOSX/images/._kingofClubs.jpg b/images/__MACOSX/images/._kingofClubs.jpg
diff --git a/images/__MACOSX/images/._nineOfClubs.jpg b/images/__MACOSX/images/._nineOfClubs.jpg
diff --git a/images/__MACOSX/images/._nineOfDiamonds.jpg b/images/__MACOSX/images/._nineOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._nineOfHearts.jpg b/images/__MACOSX/images/._nineOfHearts.jpg
diff --git a/images/__MACOSX/images/._nineOfSpades.jpg b/images/__MACOSX/images/._nineOfSpades.jpg
diff --git a/images/__MACOSX/images/._queenOfClubs.jpg b/images/__MACOSX/images/._queenOfClubs.jpg
diff --git a/images/__MACOSX/images/._queenOfDiamonds.jpg b/images/__MACOSX/images/._queenOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._queenOfHearts.jpg b/images/__MACOSX/images/._queenOfHearts.jpg
diff --git a/images/__MACOSX/images/._queenOfSpades.jpg b/images/__MACOSX/images/._queenOfSpades.jpg
diff --git a/images/__MACOSX/images/._sevenOfClubs.jpg b/images/__MACOSX/images/._sevenOfClubs.jpg
diff --git a/images/__MACOSX/images/._sevenOfDiamonds.jpg b/images/__MACOSX/images/._sevenOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._sevenOfHearts.jpg b/images/__MACOSX/images/._sevenOfHearts.jpg
diff --git a/images/__MACOSX/images/._sevenOfSpades.jpg b/images/__MACOSX/images/._sevenOfSpades.jpg
diff --git a/images/__MACOSX/images/._sixOfClubs.jpg b/images/__MACOSX/images/._sixOfClubs.jpg
diff --git a/images/__MACOSX/images/._sixOfDiamonds.jpg b/images/__MACOSX/images/._sixOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._sixOfHearts.jpg b/images/__MACOSX/images/._sixOfHearts.jpg
diff --git a/images/__MACOSX/images/._sixOfSpades.jpg b/images/__MACOSX/images/._sixOfSpades.jpg
diff --git a/images/__MACOSX/images/._tenOfClubs.jpg b/images/__MACOSX/images/._tenOfClubs.jpg
diff --git a/images/__MACOSX/images/._tenOfDiamonds.jpg b/images/__MACOSX/images/._tenOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._tenOfHearts.jpg b/images/__MACOSX/images/._tenOfHearts.jpg
diff --git a/images/__MACOSX/images/._tenOfSpades.jpg b/images/__MACOSX/images/._tenOfSpades.jpg
diff --git a/images/__MACOSX/images/._threeOfClubs.jpg b/images/__MACOSX/images/._threeOfClubs.jpg
diff --git a/images/__MACOSX/images/._threeOfDiamonds.jpg b/images/__MACOSX/images/._threeOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._threeOfHearts.jpg b/images/__MACOSX/images/._threeOfHearts.jpg
diff --git a/images/__MACOSX/images/._threeOfSpades.jpg b/images/__MACOSX/images/._threeOfSpades.jpg
diff --git a/images/__MACOSX/images/._twoOfClubs.jpg b/images/__MACOSX/images/._twoOfClubs.jpg
diff --git a/images/__MACOSX/images/._twoOfDiamonds.jpg b/images/__MACOSX/images/._twoOfDiamonds.jpg
diff --git a/images/__MACOSX/images/._twoOfHearts.jpg b/images/__MACOSX/images/._twoOfHearts.jpg
diff --git a/images/__MACOSX/images/._twoOfSpades.jpg b/images/__MACOSX/images/._twoOfSpades.jpg
diff --git a/images/aceOfClubs.jpg b/images/aceOfClubs.jpg
diff --git a/images/aceOfDiamonds.jpg b/images/aceOfDiamonds.jpg
diff --git a/images/aceOfHearts.jpg b/images/aceOfHearts.jpg
diff --git a/images/aceOfSpades.jpg b/images/aceOfSpades.jpg
diff --git a/images/chip.png b/images/chip.png
diff --git a/images/eightOfClubs.jpg b/images/eightOfClubs.jpg
diff --git a/images/eightOfDiamonds.jpg b/images/eightOfDiamonds.jpg
diff --git a/images/eightOfHearts.jpg b/images/eightOfHearts.jpg
diff --git a/images/eightOfSpades.jpg b/images/eightOfSpades.jpg
diff --git a/images/fiveOfClubs.jpg b/images/fiveOfClubs.jpg
diff --git a/images/fiveOfDiamonds.jpg b/images/fiveOfDiamonds.jpg
diff --git a/images/fiveOfHearts.jpg b/images/fiveOfHearts.jpg
diff --git a/images/fiveOfSpades.jpg b/images/fiveOfSpades.jpg
diff --git a/images/fourOfClubs.jpg b/images/fourOfClubs.jpg
diff --git a/images/fourOfDiamonds.jpg b/images/fourOfDiamonds.jpg
diff --git a/images/fourOfHearts.jpg b/images/fourOfHearts.jpg
diff --git a/images/fourOfSpades.jpg b/images/fourOfSpades.jpg
diff --git a/images/images/aceOfClubs.jpg b/images/images/aceOfClubs.jpg
diff --git a/images/images/aceOfDiamonds.jpg b/images/images/aceOfDiamonds.jpg
diff --git a/images/images/aceOfHearts.jpg b/images/images/aceOfHearts.jpg
diff --git a/images/images/aceOfSpades.jpg b/images/images/aceOfSpades.jpg
diff --git a/images/images/chip.png b/images/images/chip.png
diff --git a/images/images/eightOfClubs.jpg b/images/images/eightOfClubs.jpg
diff --git a/images/images/eightOfDiamonds.jpg b/images/images/eightOfDiamonds.jpg
diff --git a/images/images/eightOfHearts.jpg b/images/images/eightOfHearts.jpg
diff --git a/images/images/eightOfSpades.jpg b/images/images/eightOfSpades.jpg
diff --git a/images/images/fiveOfClubs.jpg b/images/images/fiveOfClubs.jpg
diff --git a/images/images/fiveOfDiamonds.jpg b/images/images/fiveOfDiamonds.jpg
diff --git a/images/images/fiveOfHearts.jpg b/images/images/fiveOfHearts.jpg
diff --git a/images/images/fiveOfSpades.jpg b/images/images/fiveOfSpades.jpg
diff --git a/images/images/fourOfClubs.jpg b/images/images/fourOfClubs.jpg
diff --git a/images/images/fourOfDiamonds.jpg b/images/images/fourOfDiamonds.jpg
diff --git a/images/images/fourOfHearts.jpg b/images/images/fourOfHearts.jpg
diff --git a/images/images/fourOfSpades.jpg b/images/images/fourOfSpades.jpg
diff --git a/images/images/jackOfClubs.jpg b/images/images/jackOfClubs.jpg
diff --git a/images/images/jackOfDiamonds.jpg b/images/images/jackOfDiamonds.jpg
diff --git a/images/images/jackOfHearts.jpg b/images/images/jackOfHearts.jpg
diff --git a/images/images/jackOfSpades.jpg b/images/images/jackOfSpades.jpg
diff --git a/images/images/kingOfDiamonds.jpg b/images/images/kingOfDiamonds.jpg
diff --git a/images/images/kingOfHearts.jpg b/images/images/kingOfHearts.jpg
diff --git a/images/images/kingOfSpades.jpg b/images/images/kingOfSpades.jpg
diff --git a/images/images/kingofClubs.jpg b/images/images/kingofClubs.jpg
diff --git a/images/images/nineOfClubs.jpg b/images/images/nineOfClubs.jpg
diff --git a/images/images/nineOfDiamonds.jpg b/images/images/nineOfDiamonds.jpg
diff --git a/images/images/nineOfHearts.jpg b/images/images/nineOfHearts.jpg
diff --git a/images/images/nineOfSpades.jpg b/images/images/nineOfSpades.jpg
diff --git a/images/images/queenOfClubs.jpg b/images/images/queenOfClubs.jpg
diff --git a/images/images/queenOfDiamonds.jpg b/images/images/queenOfDiamonds.jpg
diff --git a/images/images/queenOfHearts.jpg b/images/images/queenOfHearts.jpg
diff --git a/images/images/queenOfSpades.jpg b/images/images/queenOfSpades.jpg
diff --git a/images/images/sevenOfClubs.jpg b/images/images/sevenOfClubs.jpg
diff --git a/images/images/sevenOfDiamonds.jpg b/images/images/sevenOfDiamonds.jpg
diff --git a/images/images/sevenOfHearts.jpg b/images/images/sevenOfHearts.jpg
diff --git a/images/images/sevenOfSpades.jpg b/images/images/sevenOfSpades.jpg
diff --git a/images/images/sixOfClubs.jpg b/images/images/sixOfClubs.jpg
diff --git a/images/images/sixOfDiamonds.jpg b/images/images/sixOfDiamonds.jpg
diff --git a/images/images/sixOfHearts.jpg b/images/images/sixOfHearts.jpg
diff --git a/images/images/sixOfSpades.jpg b/images/images/sixOfSpades.jpg
diff --git a/images/images/tenOfClubs.jpg b/images/images/tenOfClubs.jpg
diff --git a/images/images/tenOfDiamonds.jpg b/images/images/tenOfDiamonds.jpg
diff --git a/images/images/tenOfHearts.jpg b/images/images/tenOfHearts.jpg
diff --git a/images/images/tenOfSpades.jpg b/images/images/tenOfSpades.jpg
diff --git a/images/images/threeOfClubs.jpg b/images/images/threeOfClubs.jpg
diff --git a/images/images/threeOfDiamonds.jpg b/images/images/threeOfDiamonds.jpg
diff --git a/images/images/threeOfHearts.jpg b/images/images/threeOfHearts.jpg
diff --git a/images/images/threeOfSpades.jpg b/images/images/threeOfSpades.jpg
diff --git a/images/images/twoOfClubs.jpg b/images/images/twoOfClubs.jpg
diff --git a/images/images/twoOfDiamonds.jpg b/images/images/twoOfDiamonds.jpg
diff --git a/images/images/twoOfHearts.jpg b/images/images/twoOfHearts.jpg
diff --git a/images/images/twoOfSpades.jpg b/images/images/twoOfSpades.jpg
diff --git a/images/jackOfClubs.jpg b/images/jackOfClubs.jpg
diff --git a/images/jackOfDiamonds.jpg b/images/jackOfDiamonds.jpg
diff --git a/images/jackOfHearts.jpg b/images/jackOfHearts.jpg
diff --git a/images/jackOfSpades.jpg b/images/jackOfSpades.jpg
diff --git a/images/kingOfDiamonds.jpg b/images/kingOfDiamonds.jpg
diff --git a/images/kingOfHearts.jpg b/images/kingOfHearts.jpg
diff --git a/images/kingOfSpades.jpg b/images/kingOfSpades.jpg
diff --git a/images/kingofClubs.jpg b/images/kingofClubs.jpg
diff --git a/images/nineOfClubs.jpg b/images/nineOfClubs.jpg
diff --git a/images/nineOfDiamonds.jpg b/images/nineOfDiamonds.jpg
diff --git a/images/nineOfHearts.jpg b/images/nineOfHearts.jpg
diff --git a/images/nineOfSpades.jpg b/images/nineOfSpades.jpg
diff --git a/images/queenOfClubs.jpg b/images/queenOfClubs.jpg
diff --git a/images/queenOfDiamonds.jpg b/images/queenOfDiamonds.jpg
diff --git a/images/queenOfHearts.jpg b/images/queenOfHearts.jpg
diff --git a/images/queenOfSpades.jpg b/images/queenOfSpades.jpg
diff --git a/images/sevenOfClubs.jpg b/images/sevenOfClubs.jpg
diff --git a/images/sevenOfDiamonds.jpg b/images/sevenOfDiamonds.jpg
diff --git a/images/sevenOfHearts.jpg b/images/sevenOfHearts.jpg
diff --git a/images/sevenOfSpades.jpg b/images/sevenOfSpades.jpg
diff --git a/images/sixOfClubs.jpg b/images/sixOfClubs.jpg
diff --git a/images/sixOfDiamonds.jpg b/images/sixOfDiamonds.jpg
diff --git a/images/sixOfHearts.jpg b/images/sixOfHearts.jpg
diff --git a/images/sixOfSpades.jpg b/images/sixOfSpades.jpg
diff --git a/images/tenOfClubs.jpg b/images/tenOfClubs.jpg
diff --git a/images/tenOfDiamonds.jpg b/images/tenOfDiamonds.jpg
diff --git a/images/tenOfHearts.jpg b/images/tenOfHearts.jpg
diff --git a/images/tenOfSpades.jpg b/images/tenOfSpades.jpg
diff --git a/images/threeOfClubs.jpg b/images/threeOfClubs.jpg
diff --git a/images/threeOfDiamonds.jpg b/images/threeOfDiamonds.jpg
diff --git a/images/threeOfHearts.jpg b/images/threeOfHearts.jpg
diff --git a/images/threeOfSpades.jpg b/images/threeOfSpades.jpg
diff --git a/images/twoOfClubs.jpg b/images/twoOfClubs.jpg
diff --git a/images/twoOfDiamonds.jpg b/images/twoOfDiamonds.jpg
diff --git a/images/twoOfHearts.jpg b/images/twoOfHearts.jpg
diff --git a/images/twoOfSpades.jpg b/images/twoOfSpades.jpg
diff --git a/index.html b/index.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -8,148 +7,182 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Favicon configuration -->
-    <link rel="apple-touch-icon" sizes="180x180" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/apple-touch-icon.png?v=2">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-32x32.png?v=2">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-16x16.png?v=2">
-    <link rel="manifest" href="/site.webmanifest?v=2">
-    <link rel="mask-icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/safari-pinned-tab.svg?v=2" color="#e73c3e">
-    <link rel="shortcut icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon.ico?v=2">
-    <meta name="apple-mobile-web-app-title" content="Rocket Academy">
-    <meta name="application-name" content="Rocket Academy">
-    <meta name="msapplication-TileColor" content="#2b5797">
-    <meta name="theme-color" content="#ffffff">
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/apple-touch-icon.png?v=2"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-32x32.png?v=2"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-16x16.png?v=2"
+    />
+    <link rel="manifest" href="/site.webmanifest?v=2" />
+    <link
+      rel="mask-icon"
+      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/safari-pinned-tab.svg?v=2"
+      color="#e73c3e"
+    />
+    <link
+      rel="shortcut icon"
+      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon.ico?v=2"
+    />
+    <meta name="apple-mobile-web-app-title" content="Rocket Academy" />
+    <meta name="application-name" content="Rocket Academy" />
+    <meta name="msapplication-TileColor" content="#2b5797" />
+    <meta name="theme-color" content="#ffffff" />
 
     <!-- sharing configuration -->
     <!-- Primary Meta Tags -->
     <title>Blackjack - Basics - Rocket Academy</title>
-    <meta name="title" content="YOURNAME's BlackJack Game!">
-    <meta name="description" content="A fun card game I made myself! 😄💪🌈">
+    <meta name="title" content="YOURNAME's BlackJack Game!" />
+    <meta name="description" content="A fun card game I made myself! 😄💪🌈" />
 
     <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
-    <meta property="og:title" content="YOURNAME's BlackJack Game!">
-    <meta property="og:description" content="A fun card game I made myself! 😄💪🌈">
-    <meta property="og:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:url"
+      content="https://rocketacademy.github.io/basics-blackjack/index.html"
+    />
+    <meta property="og:title" content="YOURNAME's BlackJack Game!" />
+    <meta
+      property="og:description"
+      content="A fun card game I made myself! 😄💪🌈"
+    />
+    <meta
+      property="og:image"
+      content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg"
+    />
 
     <!-- Twitter -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
-    <meta name="twitter:title" content="YOURNAME's BlackJack Game!">
-    <meta name="twitter:description" content="A fun card game I made myself! 😄💪🌈">
-    <meta name="twitter:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">
-    <meta name="twitter:site" content="@rocketacademyco">
-    <meta name="twitter:creator" content="@rocketacademyco">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:url"
+      content="https://rocketacademy.github.io/basics-blackjack/index.html"
+    />
+    <meta name="twitter:title" content="YOURNAME's BlackJack Game!" />
+    <meta
+      name="twitter:description"
+      content="A fun card game I made myself! 😄💪🌈"
+    />
+    <meta
+      name="twitter:image"
+      content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg"
+    />
+    <meta name="twitter:site" content="@rocketacademyco" />
+    <meta name="twitter:creator" content="@rocketacademyco" />
 
     <!-- fonts -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Open+Sans"
+    />
 
     <!-- CSS -->
     <style>
-      * {
-        box-sizing: border-box;
+      #table {
+        display: flex;
+        justify-content: space-evenly;
       }
-
-      body {
-        font-family: 'Open Sans', sans-serif;
-        margin-left: 30px;
-        margin-right: 30px;
-        background-color:white;
-        color: black; /* sets the font color */
-        background-image: url(""); /* The image used */
-        background-position: center; /* Center the image */
-        background-repeat: no-repeat; /* Do not repeat the image */
-        background-size: cover; /* Resize the background image to cover the entire container */
+      .player {
+        border: 1px solid rgb(158, 112, 52);
+        border-radius: 10px;
+        padding: 10px;
+        margin: 10px;
+        width: 50%;
+        height: 300px;
       }
-
-      #output-div img{
-        display:block;
-        max-width:100%;
-        max-height:200px;
-      }
-      .header {
-        text-align: center;
-        font-size: 1.1rem;
-        margin-bottom: 3rem;
-      }
-
-      #container {
-        background-color: pink;
-        margin: 40px auto;
-        max-width: 800px;
-        padding: 38px 31px;
-      }
-
-      input {
-        font-size: 21px;
-        line-height: 33px;
-        margin: 0 0 23px 0;
-        padding: 0 9px;
-        width: 100%;
+      #buttons {
+        display: flex;
+        justify-content: center;
       }
-
       button {
-        font-size: 21px;
-        line-height: 33px;
-        margin: 0 0 23px 0;
-        padding: 0 6px;
-      }
+        background-color: bisque;
+        border: none;
+        color: black;
+        font-family: cursive;
+        padding: 15px 32px;
+        text-align: center;
+        text-decoration: none;
 
-      #output-div {
-        background-color: lightgrey;
-        margin: 20px auto;
-        padding: 20px;
-        width: 100%;
+        font-size: 16px;
+        margin: 6px 2px 4px 10px;
+        cursor: pointer;
+        border-radius: 10px;
+        width: 140px;
       }
-
-      .logo-img {
-        height: 49px;
-        position: relative;
-        top: 22px;
+      .p-card,
+      .c-card {
+        width: 170px;
       }
 
-      /* increase header font size on wider screens */
-      @media screen and (min-width: 600px) {
-        .header {
-          font-size: 2rem;
-        }
+      #output {
+        height: 110px;
+        font-family: cursive;
+        font-size: large;
+        text-align: center;
       }
     </style>
-
   </head>
 
   <body>
-    <h1 class="header">
-      <img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
-      Rocket Academy
-      <img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
-    </h1>
-    <h1 class="header">♣️ Basics - Blackjack ♠️</h1>
-    <div id="container">
-      <p>Input:</p>
-      <input id="input-field" />
-      <br />
-      <button id="submit-button">Submit</button>
-      <p>Output:</p>
-      <div id="output-div"></div>
+    <h1 style="text-align: center; color: chocolate">BlackJack Game</h1>
+    <h3
+      style="text-align: center; color: rgb(158, 112, 52); font-family: cursive"
+    >
+      Hello, welcome to the BlackJack Game. <br />
+      Please click the "Play" button to start the game.
+    </h3>
+    <div id="table">
+      <div class="player">
+        <p
+          style="
+            text-align: center;
+            color: chocolate;
+            font-family: cursive;
+            font-size: larger;
+          "
+        >
+          Computer
+        </p>
+        <img class="c-card" id="card1" src="" alt="" />
+        <img class="c-card" id="card2" src="" alt="" />
+        <img class="c-card" id="card3" src="" alt="" />
+        <img class="c-card" id="card4" src="" alt="" />
+        <img class="c-card" id="card5" src="" alt="" />
+      </div>
+      <div class="player">
+        <p
+          style="
+            text-align: center;
+            color: chocolate;
+            font-family: cursive;
+            font-size: larger;
+          "
+        >
+          Player
+        </p>
+        <img class="p-card" id="card1" src="" alt="" />
+        <img class="p-card" id="card2" src="" alt="" />
+        <img class="p-card" id="card3" src="" alt="" />
+        <img class="p-card" id="card4" src="" alt="" />
+        <img class="p-card" id="card5" src="" alt="" />
+      </div>
+    </div>
+    <p id="output">Game Result</p>
+    <div id="buttons">
+      <button id="play-button">Play</button>
+      <button id="hit-button">Hit</button>
+      <button id="stand-button">Stand</button>
+      <button id="restart-button">Restart</button>
     </div>
-    <!-- Import program logic -->
     <script src="script.js"></script>
-    <!-- Define button click functionality -->
-    <script>
-      var button = document.querySelector("#submit-button");
-      button.addEventListener("click", function () {
-        // Set result to input value
-        var input = document.querySelector("#input-field");
-        var result = main(input.value);
-
-        // Display result in output element
-        var output = document.querySelector("#output-div");
-        output.innerHTML = result;
-
-        // Reset input value
-        input.value = "";
-      });
-    </script>
   </body>
 </html>