Moved buttons above Title

Dominic-wells · Aug 25, 2023 · ffb0662 · ffb0662
1 parent a394bad
commit ffb0662
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 32 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -4,35 +4,10 @@ body {
     height: 100%
 }
 
-#myBtn,
-#music-toggle {
-    position: fixed;
-    top: 20px;
-    z-index: 9999;
-}
-
-#myBtn {
-    right: 130px;
-}
-
-#music-toggle {
-    right: 20px;
-}
-
-@media (max-width:576px) {
-
-    /* Button */
-    #myBtn {
-        right: 363px;
-        top: 26px;
-    }
-
-    /* Music toggle */
-    #music-toggle {
-        right: 12px;
-        top: 28px;
-    }
-
+.button-bar {
+    width: 100%;
+    text-align: center;
+    padding-bottom: 20px;
 }
 
 #myVideo {
@@ -51,6 +26,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
 }
 
 h1 {

diff --git a/index.html b/index.html
@@ -33,17 +33,18 @@
     <video autoplay muted loop id="myVideo">
         <source src="assets/video/background3.mp4" type="video/mp4">
     </video>
-    <button id="myBtn" onclick="myFunction()">Pause</button>
-
 
     <!--The Music-->
     <audio id="background-music">
         <source src="assets/sounds/nexus-img-main-version-22138-02-54.mp3" type="audio/mpeg">
         Your browser does not support the audio element.
     </audio>
-    <button id="music-toggle">Toggle Music</button>
 
     <header class="viewport-header">
+        <div class="button-bar">
+            <button id="myBtn" onclick="myFunction()">Pause</button>
+            <button id="music-toggle">Toggle Music</button>
+        </div>
         <h1>
             Learn Nmap with
             <span>N-Mappy</span>