navbar with basic styling issue-#33

Ruby Friedman · Ruby Friedman · commit b17ce75a3a1a · 2025-02-20T02:30:35.000-05:00
Navbar Added with basic styling issue-#33
diff --git a/MeetDancers.html b/MeetDancers.html
@@ -8,6 +8,13 @@
   </head>
   <body>
   <div class="dancers">
+    <div id="navbar" class="navbar">
+      <ul>
+        <li><a href="index.html#home">Home Page</a></li>
+        <li><a href="MeetDancers.html">Meet the Dancers</a></li>
+      </ul>
+  </div>
+
     <h2 id="dancer-header">Meet the Dancers:</h2>
 
     <div class="flex-image">
diff --git a/index.html b/index.html
@@ -8,6 +8,13 @@
   </head>
   
   <body>
+    <div id="navbar" class="navbar">
+        <ul>
+          <li><a href="index.html#home">Home Page</a></li>
+          <li><a href="MeetDancers.html">Meet the Dancers</a></li>
+        </ul>
+    </div>
+  
     <h1>
       Feeling
       <span id = "blue-text"><a href="blue.html" target="_self">Blue?</a></span> 
diff --git a/stylesheet.css b/stylesheet.css
@@ -13,6 +13,46 @@
 }
 
 
+.navbar {
+    background-color: rgb(25, 173, 72);;
+  }
+
+  .navbar ul {
+    list-style: none;
+    width: 500px;
+    margin: 0 auto;
+
+    padding: 0;
+    /* 
+          For navbars use background color that stands out.
+    */
+    background-color: rgb(25, 173, 72);
+    text-align: center;
+  }
+  
+  /*  
+      Style individual list items.
+  */
+  .navbar li {
+    width: 150 px;
+    border: 2px solid rgb(32, 152, 70);
+    /* 
+          Show the navbar elements next to each other instead of on top of each 
+          other. 
+    */
+    padding: 9px;
+    display: inline-block;
+    line-height: 40px;
+  }
+  
+  /* 
+      Style links in navbar.
+  */
+  .navbar a {
+    color: #fff;
+    text-decoration: none;
+  }
+
 .flex-image{
     display: flex;
     flex-direction: row;
@@ -56,3 +96,4 @@ p {
     font-family: "Montserrat", serif;
     font-style: oblique;
 
+}
