updated styling

css/style.css

@@ -1,89 +1,143 @@
-body{
+body {
     color: white;
     font-weight: bolder;
     font-family: 'MedievalSharp', cursive;
-    display: flex;
-    justify-content: center;
-    position: relative;
     background-color: #005995;
-    flex-direction: column;
-    }
-.main-container{
-    margin-top: 1%;
+}
+
+.main-container {
     display: flex;
-    flex-direction: row;
-
+    justify-content: center;
 }
 
-canvas{
-    background-image: url("https://image.freepik.com/free-vector/old-stone-cartoon-castle-with-bridges-river-children-s-illustration_273525-160.jpg");
-    border: 1px solid black;
+.canvas-container {
+    display: flex;
+    justify-content: center;
     width: 50%;
-    height: 70vh;
-    background-color: aliceblue;
+    height: 65vh
+}
+
+canvas {
+    border-radius: 10%;
+    height: 100%;
+    width: 100%;
     position: relative;
-    background-size:cover;
+    background-size: cover;
     background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("https://image.freepik.com/free-vector/old-stone-cartoon-castle-with-bridges-river-children-s-illustration_273525-160.jpg");
+}
+
+.start-game-overlay {
+    height: 65vh;
+    width: 50%;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.55);
     border-radius: 10%;
-
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
+.start-game-overlay>button {
+    position: absolute;
+    color: #fff;
+    padding: 20px;
+    border-radius: 10%;
+    font-size: 1.5rem;
+    background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
+
+}
+
+
 .score {
     background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
-    position: relative;
-    width: 10%;
-    height: 100%;
-    font-size: 2em;
+    position: absolute;
+    right: 2%;
+    top: 10%;
+    width: 240px;
+    font-size: 1.5em;
     text-align: center;
     border-radius: 10%;
-    margin-top: 18%;
-    margin-right: 2%;
-
-}
-.footer{
-    width: 80%;
-    justify-content: center;
+    padding: 20px;
 }
 
-.instructions{
-    background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
+.instructions {
+    margin-top: 10px;
+    margin: 0 auto;
     position: relative;
-    height: 100%;
-    font-size: 1.5em;
+    z-index: 100;
+    width: 90%;
+    padding: 20px;
+    font-size: 1.3em;
     text-align: center;
-    border-radius: 10%;
-    margin-top: 2%;
-    margin-right: 2%;
+    margin-top: 1%;
+    z-index: 100;
+    background-color: #C2B280;
+    color: black;
+    border: solid 4px brown;
+    overflow: hidden;
+}
+
+#wasd {
+    position: absolute;
+    top: 110px;
+    right: 9%;
+    z-index: 10000;
+    height: 110px;
+    width: 120px;
+}
 
+#arrows {
+    position: absolute;
+    right: 10%;
+    top: 30px;
+    z-index: 10000;
+    height: 80px;
+    width: 100px;
 }
 
+
+
 .result {
     color: gold;
-    position: relative;
+    position: absolute;
     background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
-    width: 20%;
-    height: 100%;
-    font-size: 2em;
+    width: 240px;
+    padding: 20px;
+    font-size: 1.7rem;
     text-align: center;
     border-radius: 10%;
-    margin-top: 3%;
-    margin-left: 2%;
+    top: 30%;
+    right: 2%;
 }
 
-#source{
-    display: none;
+.result.active {
+    display: flex;
+    padding: 20px;
 }
 
-.reset {
-color:aliceblue;
-font-family: 'MedievalSharp', cursive;
-position: absolute;
-background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
-left: .1%;
-top: 10%;
-height: 20%;
-width: 10%;
-font-size: 2em;
-border-radius: 20%;
 
+.reset {
+    color: aliceblue;
+    font-family: 'MedievalSharp', cursive;
+    position: absolute;
+    left: 10%;
+    top: 15%;
+    background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
+    padding: 25px;
+    font-size: 1.6rem;
+    border-radius: 20%;
 }
+
+.how-to {
+    color: aliceblue;
+    font-family: 'MedievalSharp', cursive;
+    position: absolute;
+    left: 10%;
+    top: 29%;
+    background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
+    padding: 25px;
+    font-size: 1.6rem;
+    border-radius: 20%;
+}

index.html

@@ -9,23 +9,34 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/style.css">
-    <title>Canvas</title>
+    <title>PROTECT THE CASTLE</title>
 
 </head>
 <body>
     <div class = "main-container">
-
-    <div class = "score" id = "score"></div>
-    <canvas id= "canvas"></canvas>
-    <div class = "result" id = "result"></div>
-    <button class = "reset" id = "restart">restart game</button>
-    <img src = "https://github.com/lawrencesalinas/Project-1/blob/main/css/pngegg.png?raw=true" alt="shield"  id = "shield">
-
-
-    <script src = "js/script.js"></script>
+    <div class="canvas-container">
+        <canvas id= "canvas"></canvas>
+        <div class="start-game-overlay" id="overlay">
+                <button id="start">Play Now</button>
+        </div>
+        <div class = "score" id = "score"></div>
+        <div class="result-container">
+            <div class = "result" id = "result">
+                <span id="result-text"></span>
+            </div>
+        </div>
+    </div>
+
+    <button class = "reset" id = "restart">restart game</button> 
+    <button class = "how-to" id = "how-to">How to play</button> 
+
+    </div>        
+    <div class = "instructions" id = "instructions">
+        <span id="instructions-text"></span>
+        <img src="./css//wasd.png" alt="wasd-keys" id="wasd">
+        <img src="./css//arrows.png" alt="arrow-keys" id="arrows">
     </div>
-    <div class = "footer">
-    <div class = "instructions" id = "instructions"></div>
     </div>
+    <script src = "js/script.js"></script>
 </body>
 </html>