Merge pull request #53 from paulinasiwko/navbar

Navbar
paulinasiwko · Jan 24, 2024 · f35a31e · f35a31e
2 parents c524522 + 3cfdf58
commit f35a31e
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 14 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -149,24 +149,38 @@ body {
 
 .navbar {
     background-color: var(--navblue);
-    height: 80px;
 }
 
-.landing-logo {
-    margin-top: -2px;
+.nav-buttons {
+    display: flex;
 }
 
-.catchphrase {
-    margin-left: -50px; 
+#dropdownMenuButton {
+    background-color: rgb(236, 170, 72); 
+    border-radius: 5px;
+    margin-right: 10px;
+    padding: 8px;
+    width: 100px;
+    justify-content: right;
+    color: black;
 }
 
-.btn {
+.getInTouchBtn {
     background-color: rgb(236, 170, 72); 
-    outline: none; 
     border-radius: 5px;
+    outline: black;
+    width: 100px;
     padding: 8px;
 }
 
+.landing-logo {
+    margin-top: -2px;
+}
+
+.catchphrase {
+    margin-left: -50px; 
+}
+
 #welcome-text {
     background-color: rgba(228, 170, 82, 0.5);
     padding: 40px;

diff --git a/landing.html b/landing.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,10 +9,12 @@
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   <!-- CSS -->
-  <link rel="stylesheet" href="./assets/css/styles.css"/>
+  <link rel="stylesheet" href="./assets/css/styles.css" />
   <title>Curio City</title>
 </head>
+
 <body>
+
   <!-- Navbar Code -->
   <nav class="navbar navbar-expand-lg fixed-top">
     <div class="container-fluid">
@@ -21,10 +24,51 @@
       <div class="collapse navbar-collapse">
         <h3>Embark on a Journey of Wonders with CurioCity!</h3>
       </div>
-      <button class="btn btn-sm" type="button">Get in touch</button>
-    </div>
+      <div class="nav-buttons">
+        <div class="dropdown">
+          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
+            aria-haspopup="true" aria-expanded="false">
+            Pages
+          </button>
+          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <a class="dropdown-item" href="#weather">Weather</a>
+            <a class="dropdown-item" href="#currency-exchange">Currency Exchange</a>
+            <a class="dropdown-item" href="#food">Recipes</a>
+            <a class="dropdown-item" href=".movies-card">Movies</a>
+          </div>
+        </div>
+        <button class="btn btn-sm" type="button" href="www.google.com">Get in touch</button>
+      </div>
   </nav>
-  <div class="b-example-divider"></div>
+
+  <!-- <nav class="navbar navbar-expand-lg navbar-light container-fluid">
+        <div class="container-fluid navbar">
+          <a class="landing-logo" href="index.html">
+            <img src="./assets/img/logo.png" alt="logo" width="70" class="d-inline-block align-text-top">
+          </a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="#weather">Weather</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#currency-exchange">Currency</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#food">Recipes</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#movies">Movies</a>
+              </li>
+            </ul>
+          </div>
+          <button class="btn btn-sm" type="button" href="www.google.com">Get in touch</button> 
+        </div>
+      </nav>
+
   <!-- Hero Section -->
   <section class="px-4 py-5 mt-5 text-center">
     <div class="d-flex flex-row">
@@ -46,15 +90,15 @@ <h3>Embark on a Journey of Wonders with CurioCity!</h3>
   <section class="px-4">
     <div class="d-flex flex-row">
       <div class="card w-50 me-4">
-        <div id="food" class="card-body">
-        </div>
+        <div id="food" class="card-body"></div>
       </div>
       <div class="card w-50 movies-card">
         <div class="card-body">
           <h5 class="card-title">Movies</h5>
           <div id="carousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
             <div class="carousel-indicators">
-              <button type="button" data-bs-target="#carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+              <button type="button" data-bs-target="#carousel" data-bs-slide-to="0" class="active" aria-current="true"
+                aria-label="Slide 1"></button>
               <button type="button" data-bs-target="#carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
               <button type="button" data-bs-target="#carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
             </div>