Adding content to navigation

Added the website title and logo to the page making it work with the navigation. The rest of the icons must be added as well as a hamburger menu for smaller page sizes.

CSS/index.css

@@ -1,10 +1,15 @@
 *{
-    margin: 0;
+    margin: 0px;
-    padding: 0;
+    padding: 0px;
     box-sizing: border-box;
 }
 
-html { width:100%; height:100%; margin:0; padding:0; }
+html { 
+    width:100%; 
+    height:100%; 
+    margin:0; 
+    padding:0; 
+}
 
 body {
     background-color: rgb(41, 42, 48);
@@ -85,7 +90,6 @@ body {
     margin-bottom: 100px;
     background: #faf9f9;
     border:1px solid rgb(94, 104, 104);
-    
 }
 
 .carousel-control.right,
@@ -121,8 +125,7 @@ body {
 }
 
 
-.wrapper {
+.main-header {
-    width: 1170px;
     margin: 0 auto;
     background-color: black;
     height: 100px;
@@ -134,16 +137,45 @@ body {
 
 
 
-
-
 header{
     text-align: center;
 }
 
+.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: 1em;
+
+    /* 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;
+}
+
+.band-name-large {
+    font-size: 2em;
+}
+
+
 .logo{
-    width: 30%;
+    width: 50%;
     float: left;
     line-height: 100px;
+    display: flex;
+    align-items: center;
+    margin-left: 5%
 }
 
 .logo a{
@@ -168,6 +200,13 @@ nav a{
     color: #fff;
 }
 
+.navigation{
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-end;
+    width: 100%;
+}
+
 .banner-area{
     width: 100%;
     height: 500px;
@@ -189,6 +228,8 @@ nav a{
 
 .content-area {
     width: 100%;
+    height: auto;
+    margin-top: 100px;
     position: relative;
     top: 450px;
     background-color: rgb(41, 42, 48);
@@ -206,6 +247,3 @@ footer{
     background-color: rgb(41, 42, 48);
 }
 
-@media (min-width: 768px) {
-
-}

HTML/index.html

@@ -177,9 +177,7 @@
 	<!-- Nav Bar -->
 	<nav class="navbar navbar-expand-sm navbar-fixed-top">
 		<div class="container-fluid mx-auto">
-			<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;">
-			</a>
 			
 			<!-- <li class="nav-item">
 				<a href="index.html" style="color: white" class="nav-link"><i class="fa-solid fa-house-chimney", alt="Home" style="scale: 2;"></i></a>
@@ -207,7 +205,7 @@
 			</ul>
 		
 		<!-- <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">Hover over me!</button> -->
-			<div class="container" style="font-family: 'Rajdhani', sans-serif; color: white;"><h1>Selmer Bot Web Dashboard</h1></div>
+			<div class="container"><h1>Selmer Bot Web Dashboard</h1></div>
 
 			<span class="ms-auto" style="margin-right: 1%;">
 				<!-- <button id="login" class="loginbtn" onclick="window.location = getAPIRedirect()">Log Into Dashboard</button> -->

HTML/test.html

@@ -177,16 +177,14 @@
     <div class="box-area">
 
         <header>
-            <div class="wrapper">
+            <div class="main-header">
+                <nav class="navigation">
                     <div class="logo">
-                    <a href="#">Selmer Bot</a>
+                        <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;">
+                        </a>
+                        <a href="#"><h1 class="brand-name brand-name-large">Selmer Bot<h1></a>
                     </div>
-                <nav>
-                    <a href="#">Home</a>
-                    <a href="#">About</a>
-                    <a href="#">Portfolio</a>
-                    <a href="#">Services</a>
-                    <a href="#">Contact</a>
                 </nav>
             </div>
             <div class="banner-area">
@@ -194,10 +192,10 @@
             </div>
         </header>
 
-        <!-- Banner End -->
-
 
+        <!-- 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>
@@ -215,7 +213,6 @@
 
             <!-- Adds margins to the page -->
             <div class="container">
-                <div style="margin-top: 100px;"></div>
 
                 <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">
@@ -424,6 +421,7 @@
 
             </div>
         </section>
+        
         <!-- <script type="module" src="./main.js", type="application/json"></script> -->
         <footer class="footer-area">
             <!-- Footer -->