Banner Responsiveness

Added the description to the banner and made the banner work for smaller screen sizes.

CSS/index.css

@@ -19,9 +19,6 @@ body {
     height:100%; margin:0; padding:0;
 }
 
-
-
-
 /* Better Scroll Bar */
 
 body::-webkit-scrollbar {
@@ -38,10 +35,6 @@ body::-webkit-scrollbar-thumb {
     border-radius: 10px;
 }
 
-
-
-
-
 /* header portion */
 .main-header {
     margin: 0 auto;
@@ -53,7 +46,6 @@ body::-webkit-scrollbar-thumb {
     top: 0;
 }
 
-
 header {
     text-align: center;
 }
@@ -124,58 +116,6 @@ header{
 	border-radius: 10px;
 }
 
-
-@media (max-width: 800px){
-	.toggle-button {
-		display: flex;
-	}
-	.navbar-links {
-		display: none;
-		width: 100%;
-	}
-
-	.navbar {
-		flex-direction: column;
-		align-items: flex-start;
-	}
-
-	.navbar-links ul{
-		flex-direction: column;
-		width: 100%;
-	}
-
-	.navbar-links li {
-		border-top: 1px solid rgba(255, 255, 255, .3);
-		text-align: center;
-	}
-
-	.navbar-links li a {
-		padding: 0.5rem 1rem;
-	}
-
-	.navbar-links.active {
-		display: flex;
-	}
-
-    .brand-name {
-        /* class for band name: should be centered wherever it is */
-        text-align: center;
-        /* heading elements like h1 all have margins: let the margins be 0 */
-        margin: 0; 
-        font-size: .8em;
-        /* changing the everything tag's font set on the heading to be different  */
-        font-family: Rajdhani, sans-serif, poppins;
-        /*
-        Since heading are by default bolded, the font-weight can be changed to 
-        normalize the bolded text
-        */
-        font-weight: normal;
-        /* All band names should be white */
-        color: white;
-    }
-}
-
-
 .navbar-links li {
 	list-style: none;
 }
@@ -191,7 +131,6 @@ header{
 	background-color: rgba(255, 255, 255, 0.5)
 }
 
-
 .navbar-links ul {
 	margin:0;
 	padding:0;
@@ -210,15 +149,16 @@ header{
 }
 
 .banner-area h2 {
-    padding: 8%;
+    padding: 5%;
-    font-size: 70px;
+    font-size: 50px;
     font-family: sans-serif, poppins;
     text-transform: uppercase;
     color: #fff;
 }
 
 .content-area {
-    width: 100%;
+    padding-top: 5px;
+    width: 100vw;
     height: auto;
     margin-top: 100px;
     position: relative;
@@ -226,6 +166,13 @@ header{
     background-color: rgb(41, 42, 48);
 }
 
+.content-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
 footer {
     background-color: rgb(41, 42, 48);
 }
@@ -238,8 +185,6 @@ footer{
     background-color: rgb(41, 42, 48);
 }
 
-
-
 /* I have no clue */
 
 .loginbtn {
@@ -247,6 +192,7 @@ footer{
     scale: 1.2;
     border-radius: 10%;
 }
+
 .loginbtn:hover {
     color: #377aea;
 }
@@ -350,3 +296,82 @@ footer{
 }
 
 
+/* FIT TO SMALLER SCREEN */
+
+@media (max-width: 800px) {
+
+	.toggle-button {
+		display: flex;
+	}
+
+	.navbar-links {
+		display: none;
+		width: 100%;
+	}
+
+	.navbar {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.navbar-links ul {
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.navbar-links li {
+		border-top: 1px solid rgba(255, 255, 255, .3);
+		text-align: center;
+	}
+
+	.navbar-links li a {
+		padding: 0.5rem 1rem;
+	}
+
+	.navbar-links.active {
+		display: flex;
+	}
+
+    .brand-name {
+        /* class for band name: should be centered wherever it is */
+        text-align: center;
+        /* heading elements like h1 all have margins: let the margins be 0 */
+        margin: 0; 
+        font-size: .8em;
+        /* changing the everything tag's font set on the heading to be different  */
+        font-family: Rajdhani, sans-serif, poppins;
+        /*
+        Since heading are by default bolded, the font-weight can be changed to 
+        normalize the bolded text
+        */
+        font-weight: normal;
+        /* All band names should be white */
+        color: white;
+    }
+
+    .banner-area {
+        width: 100%;
+        height: 500px;
+        position: fixed;
+        top: 100px;
+        background-image: url('https://github.com/ION606/selmer-bot-website/blob/main/assets/Header%20BK.gif?raw=true');  
+        background-size: cover; 
+        background-repeat: no-repeat;
+        background-position: center center;
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    .banner-area h2 {
+        padding: 8%;
+        font-size: 40px;
+        font-family: sans-serif, poppins;
+        text-transform: uppercase;
+        color: #fff;
+        
+        justify-content: space-between;
+        align-content: center;
+    }
+}
+

HTML/test.html

@@ -182,11 +182,11 @@
 
 
 <body>
+
     <div class="box-area">
         <header>
             <div class="main-header">
                 <nav class="navigation">
-
                     <div class="logo">
                         <a class="navbar-brand" href="/">
                             <img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;">
@@ -222,13 +222,14 @@
                 </nav>
             </div>
             <div class="banner-area">
-                <h2>this is banner</h2>
+                <h2>WELCOME TO THE SELMER BOT DASHBOARD</h2>
+                <h2>Music, Games, an Economy System, and More!</h2>
             </div>
         </header>
 
 
-        <!-- Page Content -->
+
-        <section class="content-area">
+
 
         <div class="row custom-alert" style="display: none;" id="alertrow">
             <div class="alert alert-warning alert-dismissible" id="banner" style="text-align: center" role="alert">
@@ -237,23 +238,27 @@
             </div>
         </div>
 
-            <!-- <div style="text-align: center; align-content: center;">
 
-                <!- <h2 style="color:wheat">Based off a real Professor of Logic!</h2> ->
 
-                <img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="outline-style: dashed; border-radius: 50%; outline-color: green;">	
+
-            </div> -->
+
+
+        <!-- Page Content -->
+        <section class="content-area">
 
 
             <!-- Adds margins to the page -->
             <div class="container">
 
+
                 <div id="music" class="row pb-md-5 mt-md-5">
+
+
                     <div class="col-xxl-4 col-xl-4 col-lg-5 col-md-12">
-                        <img class="img-responsive" style="border-style: dashed; border-color:rgb(11, 189, 189);" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Audio1.png?raw=true">
+                        <img class="img-responsive" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Audio1.png?raw=true">
-                        <!-- <img class="img-responsive overlay-content" style="border-style: dashed; border-color:rgb(11, 189, 189); transform: rotate(25deg); margin-bottom: 20%; margin-left: 45%;" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Audio2.png?raw=true"> -->
                     </div>
 
+
                     <div class="col-xxl-4 col-xl-4 col-lg-5 col-md-6">
                         <div class="container desctext">
                             <p style="white-space: pre-line;">
@@ -274,6 +279,7 @@
                             </ul>
                         </div>
                     </div>
+
                 </div>
 
 
@@ -456,6 +462,8 @@
             </div>
         </section>
         
+
+
         <!-- <script type="module" src="./main.js", type="application/json"></script> -->
         <footer class="footer-area">
             <!-- Footer -->
@@ -467,6 +475,10 @@
                 </li>
             </ul>
         </footer>
+
+
+
     </div>
+
 </body>
 </html>