Moved it to bottom

Code4Community · Apr 16, 2024 · 475935c · 475935c
1 parent 7e871fd
commit 475935c
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -41,23 +41,7 @@
 
         <div id="Instructions">
           <div class="text-center">
-            <div style="display: flex;">
-              <div style="flex: 1;">
-                <h3 style="padding: 0px; margin: 0px;"><b>Instructions:</b></h3>
-                  <div style="background-color: lightgrey; margin-bottom: 10px; margin-left: 10px; border-radius: 10px; padding: 5px;">
-                      <p style="padding-top: 0px;">Use the code box to code movements left, right, up, and down to move your robber and steal the jewel!</p>
-                      <p>Type <b>'moveRight()'</b> to move to the right, <b>'moveLeft()'</b> to move to the left, <b>'moveDown()'</b> to move down, and <b>'moveUp()'</b> to move up.</p>
-                  </div>
-              </div>
-              <div style="flex: 1;">
-                <h3 style="padding: 0px; margin: 0px;"><b> Tips:</b></h3>
-                  <div style="background-color: lightgrey; margin-left: 10px; margin-right: 10px; border-radius: 10px; padding: 5px; ">
-                      <p style="padding-top: 10px;"><b>Tip:</b> Use loops to decrease the amount of code you have to write!</p>
-                      <p>Use loop syntax: [#times ... end] with # being a number.</p>
-                      <p><b>Tip:</b> Click 'Toggle Arrow Keys' to be able to use your arrow keys.</p>
-                    </div>
-              </div>
-          </div>  
+
             <button id="respawn" type="button" class="btn btn-danger">Respawn</button>
             &nbsp;
             <button id="nextLevel" type="button" class="btn btn-success">Next Level</button>
@@ -77,5 +61,25 @@ <h3 style="padding: 0px; margin: 0px;"><b> Tips:</b></h3>
           <div id="game" class="w-100"></div>
           <div id="mytest" class = "w-100"></div>
         </div>
+        <div id="Instructions">
+          <div class="text-center">
+            <div style="display: flex;">
+              <div style="flex: 1;">
+                <h3 style="padding: 0px; margin: 0px;"><b>Instructions:</b></h3>
+                  <div style="background-color: lightgrey; margin-bottom: 10px; margin-left: 10px; border-radius: 10px; padding: 5px;">
+                      <p style="padding-top: 0px;">Use the code box to code movements left, right, up, and down to move your robber and steal the jewel!</p>
+                      <p>Type <b>'moveRight()'</b> to move to the right, <b>'moveLeft()'</b> to move to the left, <b>'moveDown()'</b> to move down, and <b>'moveUp()'</b> to move up.</p>
+                  </div>
+              </div>
+              <div style="flex: 1;">
+                <h3 style="padding: 0px; margin: 0px;"><b> Tips:</b></h3>
+                  <div style="background-color: lightgrey; margin-left: 10px; margin-right: 10px; border-radius: 10px; padding: 5px; ">
+                      <p style="padding-top: 10px;"><b>Tip:</b> Use loops to decrease the amount of code you have to write!</p>
+                      <p>Use loop syntax: [#times ... end] with # being a number.</p>
+                      <p><b>Tip:</b> Click 'Toggle Arrow Keys' to be able to use your arrow keys.</p>
+                    </div>
+              </div>
+          </div>  
       </body>
+
 </html>