final changes

LeanneCodes · Dec 8, 2023 · 080e654 · 080e654
1 parent 4a1a01f
commit 080e654
Show file tree

Hide file tree

Showing 14 changed files with 71 additions and 43 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
   "workbench.colorCustomizations": {},
-  "liveServer.settings.port": 5501
+  "liveServer.settings.port": 5502
 }
diff --git a/CSS/theme.css b/CSS/theme.css
@@ -30,6 +30,34 @@ body {
   background-color: var(--color-bg);
   color: var(--color-fg);
 }
-.nav-link {
-  color: #404146;
+.nav-link, .fa-user {
+  color: #c0ac7a !important;
 }
+
+.button {
+  border-radius: 12px; 
+  flex-wrap: var(--color-bg);
+  background-color: rgb(223, 223, 223);
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+  float: right;
+  font-size: small;
+  text-decoration: solid;
+
+  }
+
+  .light-theme-dropdown{
+      background-color: white;
+    }
+    .dark-theme-dropdown{
+      background-color: rgb(0, 0, 0);
+    }
+
+    .theme-element {
+      background-color: var(--color-bg);
+      color: var(--color-fg);
+    }
+
+    .theme-text {
+      color: var(--color-fg);
+    }
+
diff --git a/JS/script.js b/JS/script.js
@@ -80,7 +80,7 @@ function getRecipe(cuisine) {
     const options = {
         method: 'GET',
         headers: {
-            'X-RapidAPI-Key': 'c7965e32a1mshbe160fd7fa536fap1de1ccjsn06ed08451b4a',
+            'X-RapidAPI-Key': '16aadf142cmshabed6aa7856fda0p1e2ffajsn381e6669c8f7',
             'X-RapidAPI-Host': 'food-recipes-with-images.p.rapidapi.com'
         }
     };
@@ -227,9 +227,9 @@ function createRecipeCard(title, image, ingredients, instructions, cuisine) {
     var modalHTML = `
         <div class="modal fade" id="${title.split(" ").join("")}" tabindex="-1" aria-labelledby="${title.split(" ").join("")}label" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
-                <div class="modal-content" id="Modal-${title.split("+").join("")}">
+                <div class="modal-content theme-element" id="Modal-${title.split("+").join("")}">
                     <div class="modal-header">
-                        <h1 class="modal-title fs-3" style="width: 90%;" id="${title.split("+").join("")}label">${title.split("+").join(" ")}</h1>
+                        <h1 class="modal-title theme-text fs-3" style="width: 90%;" id="${title.split("+").join("")}label">${title.split("+").join(" ")}</h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
@@ -348,7 +348,7 @@ function getNutrition(recipeName) {
     const options = {
         method: 'GET',
         headers: {
-            'X-RapidAPI-Key': '1d9e9c2c69mshd454e4259937dedp174d96jsnfd22249786f7',
+            'X-RapidAPI-Key': '16aadf142cmshabed6aa7856fda0p1e2ffajsn381e6669c8f7',
             'X-RapidAPI-Host': 'nutrition-by-api-ninjas.p.rapidapi.com'
         }
     };

diff --git a/about.html b/about.html
@@ -27,13 +27,13 @@
   <!-- ................. End Navbar Section ................. -->
 
   <!-- ................. Start Hero Section ................. -->
-  <section class="bg-off-white bg-gradient text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start ">
+  <section class="bg-off-white bg-gradient p-5 p-lg-0 pt-lg-5 text-center text-sm-start border-top ">
 
     <div class="container">
       <div class="d-sm-flex align-items-center justify-content-between">
         <div>
-          <h1 class="text-black"><strong>About <span class="text-gold">Tasteful Twist </span></strong></h1>
-          <p class="lead my-4 text-black">
+          <h1 class="theme"><strong>About <span class="text-gold">Tasteful Twist </span></strong></h1>
+          <p class="lead my-4">
             Welcome to Tasteful Twist, where culinary artistry meets a world of flavors! At Tasteful Twist, we believe
             that cooking is an adventure, and each recipe is a journey through taste and tradition.
           </p>
@@ -49,13 +49,13 @@ <h1 class="text-black"><strong>About <span class="text-gold">Tasteful Twist </sp
 
 
   <!-- ................. Start Our Mission Section ................. -->
-  <section class="bg-black bg-gradient text-light pt-lg-5 p-5 text-center text-sm-start ">
+  <section class="bg-black bg-gradient p-5 text-center text-sm-start border-top">
 
     <div class="container">
       <div class="d-sm-flex align-items-center justify-content-between">
         <div>
-          <h1 class="text-white"><strong><span class="black">Our Mission </span></strong></h1>
-          <p class="lead my-4 text-white">
+          <h1><strong><span class="text-white">Our Mission </span></strong></h1>
+          <p class="lead my-4 theme text-white">
             Our mission is simple: to inspire and empower both novice cooks and seasoned chefs alike to explore the
             diverse and delightful realm of gastronomy. We're dedicated to providing a platform where food enthusiasts
             can discover, create, and share culinary experiences that tantalize the taste buds.
@@ -70,10 +70,10 @@ <h1 class="text-white"><strong><span class="black">Our Mission </span></strong><
 
 
   <!-- ................. Start What Sets Us Apart Section ................. -->
-  <section class="text p-5 p-lg-5 pt-lg-5 text-center text-sm-start ">
+  <section class="text p-5 p-lg-5 pt-lg-5 text-center text-sm-start border-top">
     <div class="container">
       <div>
-        <h1 class="text-black text-center pt-4 pb-3"><strong><span class="black">What Sets Us Apart</span></strong></h1>
+        <h1 class="text-center pt-4 pb-3"><strong><span class="theme">What Sets Us Apart</span></strong></h1>
       </div>
       <div class="content-box-lg">
         <div>
@@ -118,10 +118,10 @@ <h3>Community</h3>
 
 
   <!-- ................. Start Our Team Section ................. -->
-  <section class="text p-5 p-lg-5 pt-lg-5 text-center text-sm-start bg-light">
+  <section class="text p-5 p-lg-5 pt-lg-5 text-center text-sm-start border-top">
     <div class="container">
       <div>
-        <h1 class="text-black text-center pt-4 pb-3"><strong><span class="black">Meet Our Team</span></strong></h1>
+        <h1 class=" text-center pt-4 pb-3"><strong><span class="black">Meet Our Team</span></strong></h1>
         <p class="text-center lead my-4">Behind Tasteful Twist is a diverse team of food lovers, chefs, and creatives
           who are dedicated to bringing
           you the best culinary experiences. We believe that everyone can be a chef in their own kitchen, and we're here

diff --git a/cuisines/asianCuisine.html b/cuisines/asianCuisine.html
@@ -24,7 +24,7 @@
   <div id="navbar-placeholder"></div>
   <!-- end of navbar -->
   <!-- start hero section -->
-  <section class="bg-off-white bg-gradient p-5 p-lg-0 pt-lg-5 text-center text-sm-start ">
+  <section class="bg-off-white bg-gradient p-5 p-lg-0 pt-lg-5 text-center text-sm-start border-top ">
     <div class="container">
       <div class="d-sm-flex align-items-center justify-content-between">
         <div>

diff --git a/cuisines/greekCuisine.html b/cuisines/greekCuisine.html
@@ -25,12 +25,12 @@
   <!-- end of navbar -->
 
   <!-- start hero section -->
-  <section class="bg-off-white bg-gradient text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start ">
+  <section class="bg-off-white bg-gradient p-5 p-lg-0 pt-lg-5 text-center text-sm-start border-top ">
     <div class="container">
       <div class="d-sm-flex align-items-center justify-content-between">
         <div>
-          <h1 class="text-black"><strong>A Little Taste <span class="text-gold">Of Greece</span></strong></h1>
-          <p class="lead my-4 text-black">
+          <h1 class="theme"><strong>A Little Taste <span class="text-gold">Of Greece</span></strong></h1>
+          <p class="lead my-4">
             Discover the art of the Greek cuisine, where every recipe is a culinary masterpiece designed to transport
             your
             taste buds to the heart of Greece!

diff --git a/cuisines/indianCuisine.html b/cuisines/indianCuisine.html
@@ -25,12 +25,12 @@
   <!-- end of navbar -->
 
   <!-- start hero section -->
-  <section class="bg-off-white bg-gradient text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start ">
+  <section class="bg-off-white bg-gradient p-5 p-lg-0 pt-lg-5 text-center text-sm-start border-top">
     <div class="container">
       <div class="d-sm-flex align-items-center justify-content-between">
         <div>
-          <h1 class="text-black"><strong>A Little Taste <span class="text-gold">Of India</span></strong></h1>
-          <p class="lead my-4 text-black">
+          <h1 class="theme"><strong>A Little Taste <span class="text-gold">Of India</span></strong></h1>
+          <p class="lead my-4">
             Discover the art of the Indian cuisine, where every recipe is a culinary masterpiece designed to transport
             your
             taste buds to the heart of India!

diff --git a/cuisines/italianCuisine.html b/cuisines/italianCuisine.html
@@ -25,12 +25,12 @@
   <!-- end of navbar -->
 
   <!-- start hero section -->
-  <section class="bg-off-white bg-gradient text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start ">
+  <section class="bg-off-white bg-gradient p-5 p-lg-0 pt-lg-5 text-center text-sm-start border-top">
     <div class="container">
       <div class="d-sm-flex align-items-center justify-content-between">
         <div>
-          <h1 class="text-black"><strong>A Little Taste <span class="text-gold">Of Italy</span></strong></h1>
-          <p class="lead my-4 text-black">
+          <h1 class="theme"><strong>A Little Taste <span class="text-gold">Of Italy</span></strong></h1>
+          <p class="lead my-4">
             Discover the art of Italian cuisine, where every recipe is a culinary masterpiece designed to transport your
             taste buds to the heart of Italy
           </p>

diff --git a/cuisines/mexicanCuisine.html b/cuisines/mexicanCuisine.html
@@ -26,12 +26,12 @@
   <!-- end of navbar -->
 
   <!-- start hero section -->
-  <section class="bg-off-white bg-gradient text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start ">
+  <section class="bg-off-white bg-gradient p-5 p-lg-0 pt-lg-5 text-center text-sm-start border-top ">
     <div class="container">
       <div class="d-sm-flex align-items-center justify-content-between">
         <div>
-          <h1 class="text-black"><strong>A Little Taste <span class="text-gold">Of Mexico</span></strong></h1>
-          <p class="lead my-4 text-black">
+          <h1 class="theme"><strong>A Little Taste <span class="text-gold">Of Mexico</span></strong></h1>
+          <p class="lead my-4">
             Discover the art of the Mexican cuisine, where every recipe is a culinary masterpiece designed to transport
             your
             taste buds to the heart of Mexico!

diff --git a/cuisines/moroccanCuisine.html b/cuisines/moroccanCuisine.html
@@ -26,12 +26,12 @@
   <!-- end of navbar -->
 
   <!-- start hero section -->
-  <section class="bg-off-white bg-gradient text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start ">
+  <section class="bg-off-white bg-gradient p-5 p-lg-0 pt-lg-5 text-center text-sm-start border-top">
     <div class="container">
       <div class="d-sm-flex align-items-center justify-content-between">
         <div>
-          <h1 class="text-black"><strong>A Little Taste <span class="text-gold">Of Morocco</span></strong></h1>
-          <p class="lead my-4 text-black">
+          <h1 class="theme"><strong>A Little Taste <span class="text-gold">Of Morocco</span></strong></h1>
+          <p class="lead my-4">
             Discover the art of the Moroccan cuisine, where every recipe is a culinary masterpiece designed to transport
             your
             taste buds to the heart of Morocco!

diff --git a/cuisines/spanishCuisine.html b/cuisines/spanishCuisine.html
@@ -25,12 +25,12 @@
   <!-- end of navbar -->
 
   <!-- start hero section -->
-  <section class="bg-off-white bg-gradient text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start ">
+  <section class="bg-off-white bg-gradient p-5 p-lg-0 pt-lg-5 text-center text-sm-start border-top ">
     <div class="container">
       <div class="d-sm-flex align-items-center justify-content-between">
         <div>
-          <h1 class="text-black"><strong>A Little Taste <span class="text-gold">Of Spain</span></strong></h1>
-          <p class="lead my-4 text-black">
+          <h1 class="theme"><strong>A Little Taste <span class="text-gold">Of Spain</span></strong></h1>
+          <p class="lead my-4">
             Discover the art of the Spanish cuisine, where every recipe is a culinary masterpiece designed to transport
             your
             taste buds to the heart of Spain!

diff --git a/footer.html b/footer.html
@@ -11,7 +11,7 @@
           <div class="container">
             <!-- Button trigger modal -->
             <div class="input-group news-input d-md-flex align-items-center">
-              <button class="btn btn-outline-success text-center" type="button" data-bs-toggle="modal"
+              <button class="btn btn-outline-warning text-center" type="button" data-bs-toggle="modal"
                 data-bs-target="#staticBackdrop"> Subscribe </button>
             </div>
           </div>
@@ -80,7 +80,7 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel"> Subscription for Email Di
 
       <div
         class="d-flex flex-sm-row flex-column text-center justify-content-between align-items-center py-4 my-5 border-top">
-        <p class="text-dark">© 2023 TastefulTwists, Inc. All rights reserved.</p>
+        <p class="theme">© 2023 TastefulTwists, Inc. All rights reserved.</p>
         <ul class="list-unstyled d-flex">
           <li class="ms-3">
             <a class="link-body-emphasis" href="https://twitter.com" aria-label="Follow us on Twitter">

diff --git a/index.html b/index.html
@@ -39,12 +39,12 @@
   <!-- ................. End Navbar Section ................. -->
 
   <!-- Start Hero Section -->
-  <section class="bg-off-white bg-gradient text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start">
+  <section class="bg-off-white bg-gradient p-5 p-lg-0 pt-lg-5 text-center text-sm-start">
     <div class="container">
       <div class="d-sm-flex align-items-center justify-content-between">
         <div>
-          <h1 class="text-black">Welcome To <span class="text-gold">Tasteful Twist</span></h1>
-          <p class="lead my-4 text-black">
+          <h1 class="theme">Welcome To <span class="text-gold">Tasteful Twist</span></h1>
+          <p class="lead my-4">
             At Tasteful Twist, we invite you to explore a world of tantalizing tastes, where each recipe is a symphony
             of flavors crafted to elevate your dining experience.
           </p>

diff --git a/navbar.html b/navbar.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg bg-body-tertiary">
+<nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <a class="navbar-brand" href='../index.html'><img class="logo" src="../images/LogoDesign1-LM.png" width=400px
         height=85px alt="logo"></a>
@@ -42,7 +42,7 @@
           <form id="contact_form">
             <li class="nav-item contact" id="contactTab" role="tablist">
               <!-- Button trigger modal -->
-              <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#contactModal">
+              <button type="button" class="btn nav-link" data-bs-toggle="modal" data-bs-target="#contactModal">
                 Contact
               </button>