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 {
@@ -29,7 +26,7 @@ body::-webkit-scrollbar {
     height: .7rem;
 }
 
-body::-webkit-scrollbar-track{
+body::-webkit-scrollbar-track {
     background-color: rgb(50,50,50);
 }
 
@@ -38,10 +35,6 @@ body::-webkit-scrollbar-thumb {
     border-radius: 10px;
 }
 
-
-
-
-
 /* header portion */
 .main-header {
     margin: 0 auto;
@@ -53,8 +46,7 @@ body::-webkit-scrollbar-thumb {
     top: 0;
 }
 
-
+header {
-header{
     text-align: center;
 }
 
@@ -81,7 +73,7 @@ header{
 }
 
 
-.logo{
+.logo {
     width: 50%;
     float: left;
     line-height: 100px;
@@ -90,7 +82,7 @@ header{
     margin-left: 5%
 }
 
-.logo a{
+.logo a {
     text-decoration: none;
     font-size: 30px;
     font-family: poppins, sans-serif;
@@ -99,14 +91,14 @@ header{
 }
 
 
-.navigation{
+.navigation {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
     width: 100%;
 }
 
-.toggle-button{
+.toggle-button {
 	position: absolute;
 	top: 3rem;
 	right: 3rem;
@@ -124,59 +116,7 @@ header{
 	border-radius: 10px;
 }
 
-
+.navbar-links li {
-@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,14 +131,13 @@ header{
 	background-color: rgba(255, 255, 255, 0.5)
 }
 
-
+.navbar-links ul {
-.navbar-links ul{
 	margin:0;
 	padding:0;
 	display: flex;
 }
 
-.banner-area{
+.banner-area {
     width: 100%;
     height: 500px;
     position: fixed;
@@ -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,7 +166,14 @@ header{
     background-color: rgb(41, 42, 48);
 }
 
-footer{
+.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;
 }
@@ -317,7 +263,7 @@ footer{
     border:1px solid rgb(94, 104, 104);
 }
 
-.carousel-control.right,
+.carousel-control.right, 
 .carousel-control.left {
     background-image: none;
 }
@@ -345,8 +291,87 @@ footer{
     text-shadow: none;
 }
 
-.item{
+.item {
     position: relative;
 }
 
 
+/* 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,38 +222,43 @@
                 </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>
 
 
+
+
+
+        <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">
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                <strong class="mx-auto">Logged In Successfully!</strong> <!-- This alert box could indicate a successful or positive action. -->
+            </div>
+        </div>
+
+
+
+
+
+
         <!-- 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">
-                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
-                    <strong class="mx-auto">Logged In Successfully!</strong> <!-- This alert box could indicate a successful or positive action. -->
-                </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> -->
-
 
             <!-- 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>