new project structure, faq adj, review fix

css/dropdown.css

@@ -7,17 +7,27 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   padding: 10px;
-  border: 1px solid var(--gold);
+
+  border: 1px solid var(--dark-gold);
+
   cursor: pointer;
+  transition: 0.5s;
+}
+
+.dropdown-header:hover {
+  border: 1px solid white;
 }
 
 .dropdown-arrow {
+  color: var(--gold);
+  transform: rotate(90deg);
   transition: transform 0.3s ease;
 }
 
 .dropdown-arrow.open {
-  transform: rotate(180deg);
+  transform: rotate(0deg);
 }
 
 .dropdown-content {
@@ -25,10 +35,6 @@
   max-height: 0;
 
   transition: max-height 0.3s ease;
-
-  border-left: 1px solid var(--gold);
-  border-right: 1px solid var(--gold);
-  border-bottom: 1px solid var(--gold);
 }
 
 .dropdown-content.open {

css/style.css

@@ -45,7 +45,7 @@ header {
   color: var(--gold);
   text-decoration: none;
   font-weight: 500;
-  transition: color 0.3s ease;
+  transition: color 0.5s ease;
 }
 
 .navLink:hover {

index.html

@@ -8,9 +8,9 @@
       content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area"
     />
     <title>Maine Luxury Detailing</title>
-    <link href="style.css" rel="stylesheet" />
+    <link href="css/style.css" rel="stylesheet" />
-    <link href="dropdown.css" rel="stylesheet" />
+    <link href="css/dropdown.css" rel="stylesheet" />
-    <link href="hamburger.css" rel="stylesheet" />
+    <link href="css/hamburger.css" rel="stylesheet" />
     <style>
       /** PAGE SPECIFIC STYLING */
 
@@ -21,7 +21,7 @@
       #hero-image {
         height: 600px;
         width: 100%;
-        background: url("aden-desktop.jpg") 70% 10% / 100% no-repeat;
+        background: url("assets/img/aden-desktop.jpg") 70% 10% / 100% no-repeat;
         position: absolute;
         top: 0px;
         left: 0px;
@@ -44,7 +44,8 @@
       /** MOBILE */
       @media screen and (max-width: 850px) {
         #hero-image {
-          background: url("aden-mobile.jpg") center 10% / 100% no-repeat;
+          background: url("assets/img/aden-mobile.jpg") center 10% / 100%
+            no-repeat;
         }
 
         #intro {
@@ -99,7 +100,7 @@
       </a>
 
       <section id="FAQ">
-        <h1>FAQ</h1>
+        <h1 style="margin-bottom: 2rem">FAQ</h1>
         <div class="dropdown">
           <div class="dropdown-header" onclick="toggleDropdown(this)">
             <span>HEADER</span>
@@ -128,7 +129,7 @@
         >
       </div>
     </footer>
-    <script src="hamburger.js"></script>
+    <script src="js/hamburger.js"></script>
-    <script src="dropdown.js"></script>
+    <script src="js/dropdown.js"></script>
   </body>
 </html>

js/dropdown.js

@@ -2,6 +2,7 @@ function toggleDropdown(headerClicked) {
   let body = headerClicked.nextElementSibling;
   let arrow = headerClicked.children[1];
 
+  headerClicked.classList.toggle("open");
   body.classList.toggle("open");
   arrow.classList.toggle("open");
 }

reviews.html

@@ -8,8 +8,8 @@
       content="Maine Luxury Detailing provides mobile professional car cleaning services in the Portland Area"
     />
     <title>Maine Luxury Detailing</title>
-    <link href="style.css" rel="stylesheet" />
+    <link href="css/style.css" rel="stylesheet" />
-    <link href="hamburger.css" rel="stylesheet" />
+    <link href="css/hamburger.css" rel="stylesheet" />
     <style>
       #reviewContainer {
         display: flex;
@@ -40,6 +40,12 @@
         color: black;
       }
 
+      .review-card-body {
+        max-height: 15rem;
+        overflow-y: scroll;
+        text-align: left;
+      }
+
       /** DESKTOP RULES */
       @media screen and (min-width: 851px) {
         #reviewContainer {
@@ -51,14 +57,8 @@
           min-width: 40%;
           max-width: 45%;
 
-          max-height: 15rem;
           overflow: hidden;
         }
-
-        .review-card-body {
-          max-height: 15rem;
-          overflow-y: scroll;
-        }
       }
 
       /* MOBILE RULES */
@@ -128,12 +128,12 @@
         >
       </div>
     </footer>
-    <script src="hamburger.js"></script>
+    <script src="js/hamburger.js"></script>
     <script>
       let reviewData = [
         {
           name: "Adrianna Weber",
-          text: "Incredible Transformation! Luxury Detailing's Platinum package delivered incredible results, making my partner’s 15-year-old car look and feel brand new! The interior deep clean and exterior wash, clay, and seal were executed with exceptional attention to detail. The clay coating made a noticeable difference, leaving the car's surface remarkably smooth and clean. I was particularly impressed with how Aden restored the trunk to a like-new condition, cleaning every crevice. Aden was professional, informative, and communicative throughout the process. While a luxury service, the value is justified by the comprehensive package and outstanding results. Luxury Detailing exceeded expectations, revitalizing both of our vehicles and providing a truly impressive level of service. Highly recommended!",
+          text: "Incredible Transformation! ... Luxury Detailing exceeded expectations, revitalizing both of our vehicles and providing a truly impressive level of service. Highly recommended!",
           url: "https://share.google/HA8xBsNKPDGCdqYSh",
         },
         {
@@ -150,6 +150,11 @@
           text: "Easy 5 stars! Aden was super communicative, very friendly, and reasonably priced. He comes to you, which is super convenient! I got a car detailed as a birthday gift and it was so fun to present. No complaints! I would happily recommend this service to anyone. Thanks, Aden!",
           url: "https://share.google/zUOkEQ8Yv6L2SkBsl",
         },
+        {
+          name: "TEST",
+          text: "Easy 5 stars! Aden was super communicative, very friendly, and reasonably priced. He comes to you, which is super convenient! I got a car detailed as a birthday gift and it was so fun to present. No complaints! I would happily recommend this service to anyone. Thanks, Aden!Easy 5 stars! Aden was super communicative, very friendly, and reasonably priced. He comes to you, which is super convenient! I got a car detailed as a birthday gift and it was so fun to present. No complaints! I would happily recommend this service to anyone. Thanks, AdenEasy 5 stars! Aden was super communicative, very friendly, and reasonably priced. He comes to you, which is super convenient! I got a car detailed as a birthday gift and it was so fun to present. No complaints! I would happily recommend this service to anyone. Thanks, AdenEasy 5 stars! Aden was super communicative, very friendly, and reasonably priced. He comes to you, which is super convenient! I got a car detailed as a birthday gift and it was so fun to present. No complaints! I would happily recommend this service to anyone. Thanks, AdenEasy 5 stars! Aden was super communicative, very friendly, and reasonably priced. He comes to you, which is super convenient! I got a car detailed as a birthday gift and it was so fun to present. No complaints! I would happily recommend this service to anyone. Thanks, AdenEasy 5 stars! Aden was super communicative, very friendly, and reasonably priced. He comes to you, which is super convenient! I got a car detailed as a birthday gift and it was so fun to present. No complaints! I would happily recommend this service to anyone. Thanks, Aden",
+          url: "https://share.google/zUOkEQ8Yv6L2SkBsl",
+        },
       ];
 
       function insertReviews(reviews) {
@@ -169,11 +174,11 @@
                   ${review.url ? linkedName : review.name}
                 </span>
                 <span class="review-card-head-left">
-                  <span>*</span>
+                  <span>★</span>
-                  <span>*</span>
+                  <span>★</span>
-                  <span>*</span>
+                  <span>★</span>
-                  <span>*</span>
+                  <span>★</span>
-                  <span>*</span>
+                  <span>★</span>
                 </span> 
               </div>
               <div class="review-card-body">