Chet-69 · Tanish23102006 · Apr 22, 2025 · Apr 22, 2025
diff --git a/about.css b/about.css
@@ -429,9 +429,3 @@ word-break: break-word;
 hyphens: auto;
 }
 
-
-
-
-
-
-
diff --git a/about.html b/about.html
@@ -10,7 +10,6 @@
   <link rel="stylesheet" href="footer.css">
 
   <link rel="icon" href="pictures/Fitness.png" type="image/x-icon">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
   <link rel="preconnect" href="https://fonts.gstatic.com">
 </head>
 <body>

diff --git a/about.js b/about.js
@@ -78,3 +78,21 @@ document.addEventListener('DOMContentLoaded', () => {
 
   counters.forEach((counter) => observer.observe(counter));
 });
+
+
+gsap.registerPlugin(ScrollTrigger);
+
+gsap.utils.toArray(".footer-card").forEach(card => {
+  gsap.from(card, {
+    scrollTrigger: {
+      trigger: card,
+      start: "top 80%", // start animating when card enters viewport
+      toggleActions: "play none none reverse"
+    },
+    y: 100,
+    opacity: 0,
+    rotateX: 60,
+    duration: 1,
+    ease: "power3.out"
+  });
+});
diff --git a/cart.js b/cart.js
@@ -1,4 +1,4 @@
-// DOM Elements
+x// DOM Elements
 let listProductHTML = document.querySelector('.listProduct');
 let listCartHTML = document.querySelector('.listCart');
 let iconCart = document.querySelector('.icon-cart');

diff --git a/payment.css b/payment.css
@@ -0,0 +1,118 @@
+.page{
+    padding-bottom: 20px;
+}
+
+*{
+    /* background: #2B3A4B; */
+}
+
+
+#navbar #nav{
+    background-color: #0c0f14;
+}
+.form {
+    background: #0c0f14;
+    box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),
+      0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
+      0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
+    width: 320px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    padding: 20px;
+    position: relative;
+    border-radius: 25px;
+  }
+  .form .label {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    height: -moz-fit-content;
+    height: fit-content;
+  }
+  .form .label:has(input:focus) .title {
+    top: 0;
+    left: 0;
+    color: #d17842;
+  }
+  .form .label .title {
+    padding: 0 10px;
+    transition: all 300ms;
+    font-size: 12px;
+    color: #8b8e98;
+    font-weight: 600;
+    width: -moz-fit-content;
+    width: fit-content;
+    top: 14px;
+    position: relative;
+    left: 15px;
+    background: #0c0f14;
+  }
+  .form .input-field {
+    width: auto;
+    height: 50px;
+    text-indent: 15px;
+    border-radius: 15px;
+    outline: none;
+    background-color: #0c0f14;
+    /* background-color: transparent; */
+    border: 1px solid #21262e;
+    transition: all 0.3s;
+    caret-color: #d17842;
+    color: #aeaeae;
+  }
+
+  .form .input-field:hover {
+    border-color: rgba(209, 121, 66, 0.5);
+  }
+
+  .form .input-field:focus {
+    border-color: #d17842;
+  }
+  .form .split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    gap: 15px;
+  }
+  .form .split label {
+    width: 130px;
+  }
+  .form .checkout-btn {
+    margin-top: 20px;
+    padding: 20px 0;
+    border-radius: 25px;
+    font-weight: 700;
+    transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
+    cursor: pointer;
+    font-size: 20px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    border: none;
+    justify-content: center;
+    fill: #fff;
+    color: #fff;
+    /* border: 2px solid transparent; */
+    background: #d17842;
+    transition: all 200ms;
+  }
+  .form .checkout-btn:active {
+    scale: 0.95;
+  }
+
+  .form .checkout-btn:hover {
+    color: #d17842;
+    border: 2px solid #d17842;
+    background: transparent;
+  }
+
+  .add-card.page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding-bottom: 20px;
+  }
+
diff --git a/payment.html b/payment.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="payment.css">
+    <link rel="stylesheet" href="navbar.css">
+    <link rel="stylesheet" href="footer.css">
+    <link rel="shortcut icon" href="pictures/Fitness.png" type="image/x-icon">
+</head>
+<body>
+    <div id="nav"></div>
+<section class="add-card page">
+    <form class="form">
+      <label for="name" class="label">
+        <span class="title">Card holder full name</span>
+        <input
+          class="input-field"
+          type="text"
+          name="input-name"
+          title="Input title"
+          placeholder="Enter your full name"
+        />
+      </label>
+      <label for="serialCardNumber" class="label">
+        <span class="title">Card Number</span>
+        <input
+          id="serialCardNumber"
+          class="input-field"
+          type="number"
+          name="input-name"
+          title="Input title"
+          placeholder="0000 0000 0000 0000"
+        />
+      </label>
+      <div class="split">
+        <label for="ExDate" class="label">
+          <span class="title">Expiry Date</span>
+          <input
+            id="ExDate"
+            class="input-field"
+            type="text"
+            name="input-name"
+            title="Expiry Date"
+            placeholder="01/25"
+          />
+        </label>
+        <label for="cvv" class="label">
+          <span class="title"> CVV</span>
+          <input
+            id="cvv"
+            class="input-field"
+            type="number"
+            name="cvv"
+            title="CVV"
+            placeholder="CVV"
+          />
+        </label>
+      </div>
+      <input class="checkout-btn" type="button" value="Checkout" />
+    </form>
+  </section>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+  integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+<!-- make sure to put gsap link before linking script.js -->    
+<!--gsap cdn is a js library for scrolling animations-->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
+  integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
+  crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- plugin for gsap-->
+  <div id="navbar"></div>
+  <div id="footer"></div>
+  <script>
+    fetch('navbar.html')
+    .then(response => response.text())
+    .then(data => {
+        document.getElementById('navbar').innerHTML = data;
+    });
+    </script>
+
+<script>
+    fetch('footer.html')
+    .then(response => response.text())
+    .then(data => {
+        document.getElementById('footer').innerHTML = data;
+    });
+</script>
+<script src="chatbot.js"></script>
+<script src="navbar.js"></script>
+<script src="script.js"></script>   
+
+</body>
+</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -429,9 +429,3 @@ word-break: break-word;
		hyphens: auto;
		}