Merge pull request #93 from rupeshv2121/rupesh11

Added Animation in About us page card
Ojas-Arora · Jan 11, 2025 · f7d0e6d · f7d0e6d
2 parents 391399b + 7222bad
commit f7d0e6d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/about.css b/about.css
@@ -342,8 +342,7 @@ html .dark {
   }
   .image-button1 {
     position: fixed;
-    top: 5px;
-    left: 10px; /* Aligns the button to the left side */
+    left: 0px; /* Aligns the button to the left side */
     background-color: transparent; /* Transparent background */
     border: none;
     border-radius: 50%;

diff --git a/about.html b/about.html
@@ -13,11 +13,11 @@
     <link rel="manifest" href="/site.webmanifest" />
     <title>About Us - Ajivika</title>
     <link rel="stylesheet" href="navbar.css" />
-    <link rel="stylesheet" href="about.css">
+    <link rel="stylesheet" href="about.css" />
   </head>
   <body>
-     <!-- Navigation -->
-     <nav class="navbar">
+    <!-- Navigation -->
+    <nav class="navbar">
       <div class="logo">
         <button class="image-button1">
           <img src="./image.png" alt="Image Button1" class="image-icon1" />
@@ -176,6 +176,7 @@ <h2>Ajivika</h2>
     <section class="about-section">
       <div class="about-box">
         <h1>
+          <i class="fas fa-info-circle" style="color: #cf00a3"></i> About Us
           <i class="fas fa-info-circle" style="color: var(--pink-bg)" ></i> About Us
         </h1>
         <div class="about-container">
@@ -247,11 +248,18 @@ <h3>🌍 Access to Jobs in Smaller Areas</h3>
     <script>
       // hamburger menu js
       function toggleMenu() {
-          const navLinks = document.querySelector('.nav-links');
-          navLinks.classList.toggle('active');
+        const navLinks = document.querySelector(".nav-links");
+        navLinks.classList.toggle("active");
       }
     </script>
 
+    <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>
+    <script src="index.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
         const themeToggle = document.querySelector('.theme-switch__checkbox');
@@ -278,7 +286,6 @@ <h3>🌍 Access to Jobs in Smaller Areas</h3>
           });
       });
     </script>
-
     <footer>&copy; 2024 Ajivika. All rights reserved.</footer>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -14,6 +14,14 @@ tl.from(".nav-links li", {
     y: -30
 })
 
+gsap.from(".feature-card", {
+    scale: 0,
+    duration: 1,
+    rotate: 1440,
+    ease: "steps.out"
+})
+
+
 const cursor = document.querySelector("#cursor");
 const body = document.querySelector("body")
 body.addEventListener("mousemove", function (e) {