did some changes to navigation, the design

ddionteh · Feb 6, 2024 · a062447 · a062447
1 parent 57448e8
commit a062447
Show file tree

Hide file tree

Showing 8 changed files with 716 additions and 156 deletions.
diff --git a/css/navigation.css b/css/navigation.css
@@ -21,7 +21,7 @@ nav {
   margin: auto;
   border: 0;
   background-color: #ffffff; /* White background */
-  border-bottom: 1px solid #000000;
+  border-bottom: 2px solid #000000;
   width: 100%; /* Set the width of the border to 100% */
 }
 

diff --git a/css/product.css b/css/product.css
@@ -85,18 +85,6 @@ body {
   margin: 0 10px;
 }
 
-.chatbot-icon,
-.redeem-icon,
-.cart-icon,
-.account-icon {
-  background: transparent;
-  border: none;
-  color: #ffffff;
-  cursor: pointer;
-  margin: 0 5px;
-  font-size: 25px;
-}
-
 .background-image {
   position: relative;
   z-index: 1;
@@ -164,77 +152,136 @@ body {
 
 /*footer*/
 footer {
-  background: linear-gradient(
-    45deg,
-    #ffa31d,
-    #ef5454
-  ); /* Gradient background */
-  color: #000000;
-  padding: 40px;
+  background-color: #1d1a39;
   text-align: center;
+  padding: 40px;
 }
 
-/* Add more padding for better spacing */
+/* Flexbox for arranging content */
 .f-box {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 }
 
+/* Style for content boxes */
 .content-box,
 .content-box1,
 .image-box {
   flex: 1 1 100%;
   max-width: 300px;
-  margin-bottom: 20px;
+  margin-bottom: 50px;
+  color: #ffffff;
 }
 
+/* Style for headings */
 h3 {
-  color: #000000;
+  color: #ffffff;
 }
 
-/* Update button styles for Quick Links */
+/* Style for buttons */
 button {
-  background: linear-gradient(
-    45deg,
-    #ff0b03,
-    #f65d1c
-  ); /* Gradient background for buttons */
-  color: #fff;
+  background: #242048;
+  color: #a2b5cd;
   padding: 10px 15px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   margin: 5px;
-  transition: background 1.5s ease;
+  transition: background 0.5s ease-in-out, opacity 0.5s ease-in-out;
 }
 
 button:hover {
-  background: linear-gradient(
-    45deg,
-    rgba(71, 71, 71, 1),
-    rgba(71, 71, 71, 0)
-  ); /* Gradient with fade on hover */
+  background: #000000;
+  opacity: 0.6;
 }
 
-/* Update social icon styles */
+/* Style for social icons */
 .image-box img {
   width: 40px;
   height: 40px;
   margin: 0 10px;
-  transition: transform 0.3s ease;
+  transition: transform 0.6s ease;
 }
 
 .image-box img:hover {
   transform: scale(1.2);
 }
 
-/* Additional styles for the whole page */
-body {
-  margin: 0;
-  font-family: "Arial", sans-serif;
+@media (max-width: 620px) {
+  footer {
+    flex-direction: column;
+  }
+
+  footer.bottom {
+    flex-direction: column-reverse;
+  }
+}
+
+/* Media query for larger screen sizes */
+@media (min-width: 620px) {
+  footer {
+    margin: 0 auto;
+    max-width: 100%;
+    display: flex; /* Ensure it's a flex container */
+    justify-content: flex-end;
+    flex-direction: column;
+  }
 }
 
-.color-footer {
-  border-top: 2px solid #fff;
+/* Styling for top section of footer */
+footer.top {
+  border-bottom: 2px solid #3a4f6a;
+  padding-bottom: 20px;
+}
+
+/* Styling for bottom section of footer */
+footer.bottom {
+  padding: 20px 0;
+  justify-content: space-between;
+}
+
+/* Styling for links */
+.links {
+  display: flex;
+  gap: 18px;
+}
+
+.links > a {
+  font-size: 24px;
+}
+
+/* Styling for legal information */
+.legal {
+  font-size: 12px;
+}
+
+.legal > a {
+  margin: 0 4px;
+}
+
+.legal > span {
+  margin-right: 10px;
+}
+
+/* Additional styling for smaller screen sizes */
+@media (max-width: 420px) {
+  footer {
+    text-align: center;
+    align-items: center;
+  }
+
+  footer.top .links {
+    grid-template-columns: 1fr;
+  }
+
+  footer.bottom {
+    align-items: center;
+  }
+
+  .legal > span {
+    display: block;
+    margin-right: 0;
+    margin-bottom: 2px;
+  }
 }
diff --git a/html/accesories.html b/html/accesories.html
@@ -238,18 +238,17 @@ <h3>HEATTECH Lining Function Gloves</h3>
     <div class="f-box">
         <div class="content-box">
             <h3>About Us</h3>
-            <p>At Your E-commerce Store, we believe that shopping should be more than just a transaction – it should be an experience. Our mission is to provide a seamless and enjoyable online shopping experience for customers of all tastes and preferences.</p>
+            <p>At VogueValley, we believe that shopping should be more than just a transaction – it should be an experience. Our mission is to provide a seamless and enjoyable online shopping experience for customers of all tastes and preferences.</p>
         </div>
         <div class="content-box">
             <h3>Business Hours</h3>
             <p>
                 Monday - Sunday<br>
                 7am - 10pm
             </p>
-        </div>
-        <div class="content-box">
-            <h3>Contact</h3>
-            <p>You may call us anytime of the day at <a href="tel:+6512345678">+65 1234 5678</a> </p>
+            <p>You may call us anytime of the day at<br>
+               <a href="tel:+6512345678">+65 1234 5678</a>    
+            </p>
         </div>
         <div class="content-box1">
             <h3>Quick Links</h3>

diff --git a/html/aichat.html b/html/aichat.html
@@ -8,6 +8,7 @@
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
       rel="stylesheet"
     />
+
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
@@ -24,5 +25,6 @@
       <button id="buttonInput">Send</button>
     </div>
     <script src="../js/aichat.js"></script>
+    <script src="../js/navigation.js"></script>
   </body>
 </html>
diff --git a/html/cart.html b/html/cart.html
@@ -13,62 +13,13 @@
   </head>
 
   <body>
-    <!-- Hotbar -->
-    <div class="hotbar">
-      <a href="index.html">
-        <img
-          src="https://w7.pngwing.com/pngs/784/183/png-transparent-shopify-logo-e-commerce-business-super-sale-angle-text-service.png"
-          alt="Logo"
-          class="logo"
-        />
-      </a>
-      <div class="categories">
-        <span>Categories</span>
-        <ul class="dropdown">
-          <a href="tshirt.html">T-Shirt</a>
-          <a href="pants.html">Pants</a>
-          <a href="accesories.html">Accesories</a>
-          <a href="outerwear.html">OuterWear</a>
-        </ul>
-      </div>
-      <input type="text" placeholder="Search" class="search-bar" />
-      <button class="chatbot-icon">
-        <a href="aichat.html">
-          <img
-            src="https://img.freepik.com/premium-vector/bot-icon-chatbot-icon-concept-vector-illustration_230920-1327.jpg?w=740"
-            alt="Chatbot"
-          />
-        </a>
-      </button>
-      <button class="redeem-icon">
-        <a href="redeem.html">
-          <img
-            src="https://www.clipartmax.com/png/middle/35-359769_redeem-points-icon.png"
-            alt="Redeem"
-          />
-        </a>
-      </button>
-      <button class="cart-icon">
-        <a href="cart.html">
-          <img
-            src="https://cdn2.vectorstock.com/i/1000x1000/06/01/black-shopping-cart-icon-on-transparent-background-vector-22510601.jpg"
-            alt="Cart"
-          />
-        </a>
-      </button>
-      <button class="account-icon">
-        <a href="login.html">
-          <img
-            src="https://p1.hiclipart.com/preview/767/731/727/face-icon-user-user-profile-icon-design-avatar-share-icon-computer-head-png-clipart.jpg"
-            alt="Account"
-          />
-        </a>
-      </button>
-    </div>
-
     <div class="page-content">
       <!-- Header -->
       <header>
+        <br />
+        <br />
+        <br />
+        <br />
         <h1 class="page-title">Shopping Cart</h1>
       </header>