animation added

siddharthbaleja7 · Jun 2, 2024 · cd358fc · cd358fc
1 parent 2ca0c7e
commit cd358fc
Show file tree

Hide file tree

Showing 65 changed files with 9,412 additions and 28 deletions.
diff --git a/Html-files/login.html b/Html-files/login.html
@@ -11,17 +11,18 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   <title>Login</title>
 </head>
 
 <body>
   <div class="main-login">
-    <div class="left-login">
+    <div class="left-login" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
       <h1>Login Here<br>Delicious food is waiting for You</h1>
       <img src="../Images/food.jpg" class="left-login-image" alt="food">
     </div>
     <div class="right-login">
-      <div class="card-login">
+      <div class="card-login" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
         <button class="close-btn">&times;</button>
         <h1>LOGIN</h1>
         <br>
@@ -41,6 +42,16 @@ <h1>LOGIN</h1>
       </div>
     </div>
   </div>
+  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+  <script>
+    AOS.init(
+      {
+        duration: 1000, 
+        easing: 'ease', 
+        once: false, 
+      }
+    );
+  </script>
 </body>
 <script>
   const passwordinput = document.getElementById("password");

diff --git a/Html-files/menu.html b/Html-files/menu.html
@@ -17,7 +17,7 @@
 
     <link rel="stylesheet" href="../Css-files/content.css">
     <script src="../hamburger.js"></script>
-
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
 </head>
 
@@ -62,10 +62,10 @@ <h1>M E N U</h1>
         </div>
     </div>
 
-    <section class="menu_container">
+    <section class="menu_container" >
 
-        <h2>Snacks</h2>
-        <div class="menu_items">
+        <h2 data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">Snacks</h2>
+        <div class="menu_items" data-aos="zoom-out" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
             <div class="items">
                 <img
                     src="https://www.mumbailive.com/images/media/images/thali_1635502261446jpeg?bg=08394e&crop=5328%2C2991.157894736842%2C0%2C504.42105263157896&fit=crop&fm=webp&h=432.2807017543859&height=4000&w=770&width=5328">
@@ -134,7 +134,7 @@ <h3>Juices</h3>
             </div>
 
         </div>
-        <div class="menu_items">
+        <div class="menu_items" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
             <div class="items">
                 <img
                     src="https://www.mumbailive.com/images/media/images/thali_1635502261446jpeg?bg=08394e&crop=5328%2C2991.157894736842%2C0%2C504.42105263157896&fit=crop&fm=webp&h=432.2807017543859&height=4000&w=770&width=5328">
@@ -203,9 +203,9 @@ <h3>Juices</h3>
 
     </section>
     <section class="menu_container">
-        <h2>Juices</h2>
-        <div class="menu_items">
-            <div class="items">
+        <h2 data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">Juices</h2>
+        <div class="menu_items" data-aos="zoom-out" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
+            <div class="items" >
                 <img
                     src="https://www.mumbailive.com/images/media/images/thali_1635502261446jpeg?bg=08394e&crop=5328%2C2991.157894736842%2C0%2C504.42105263157896&fit=crop&fm=webp&h=432.2807017543859&height=4000&w=770&width=5328">
                 <h3>Indian Thali</h3>
@@ -271,8 +271,8 @@ <h3>Juices</h3>
     </section>
 
     <section class="menu_container">
-        <h2>Indian Thali</h2>
-        <div class="menu_items">
+        <h2 data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">Indian Thali</h2>
+        <div class="menu_items" data-aos="zoom-out" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
             <div class="items">
                 <img
                     src="https://www.mumbailive.com/images/media/images/thali_1635502261446jpeg?bg=08394e&crop=5328%2C2991.157894736842%2C0%2C504.42105263157896&fit=crop&fm=webp&h=432.2807017543859&height=4000&w=770&width=5328">
@@ -426,6 +426,16 @@ <h4>Follow Us</h4>
             window.location.href = "signup.html";
         }
     </script>
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init(
+        {
+          duration: 1000, 
+          easing: 'ease', 
+          once: false, 
+        }
+      );
+    </script>
 </body>
 
 </html>
diff --git a/Html-files/services.html b/Html-files/services.html
@@ -15,6 +15,7 @@
     <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="../Css-files/content.css">
     <link rel="stylesheet" href="../Css-files/services.css">
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 </head>
 
 <body>
@@ -56,7 +57,7 @@
             <h1>S E R V I C E S</h1>
         </div>
 
-        <div class="first_cont">
+        <div class="first_cont" data-aos="zoom-out" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
             <div class="items">
                 <img
                     src="https://destinationlesstravel.com/wp-content/uploads/2023/09/A-selection-of-local-cuisine-as-seen-on-a-food-tour-in-Lima-Peru-that-we-got-to-try.jpg.webp">
@@ -89,9 +90,9 @@ <h3>Meal Delivery Subscription</h3>
 
         <section class="testimonalsection" id="testimonal">
 
-            <h2 class=section__title>CUSTOMER OPINION</h2>
+            <h2 class=section__title data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">CUSTOMER OPINION</h2>
 
-            <div class="testimonal__container">
+            <div class="testimonal__container" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                 <div class="testimonal__swiper">
                     <div>
                         <article class="testimonal__card">
@@ -184,11 +185,11 @@ <h2 class="testimonal__title">Priya Sharma</h2>
         </section>
 
         <div class="second_cont">
-            <div class="deals">
+            <div class="deals" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                 <i class="fa-solid fa-gift"></i>
                 <p>Gift Card and Voucher Redemption</p>
             </div>
-            <div class="deals">
+            <div class="deals" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                 <i class="fa-solid fa-ticket"></i>
                 <p>Exclusive Offers and Promotions </p>
             </div>
@@ -264,6 +265,16 @@ <h4>Follow Us</h4>
     </footer>
 
     <script>document.getElementById("copyright-year").textContent = new Date().getFullYear();</script>
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init(
+        {
+          duration: 1000, 
+          easing: 'ease', 
+          once: false, 
+        }
+      );
+    </script>
 </body>
 
 </html>
diff --git a/Html-files/signup.html b/Html-files/signup.html
@@ -11,16 +11,17 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 </head>
 
 <body>
   <div class="main-login">
-    <div class="left-login">
+    <div class="left-login" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
       <h1>Sign Up Here<br>Good Food is Good Mood</h1>
       <img src="../Images/desserts.avif" class="left-login-image" alt="food">
     </div>
     <div class="right-login">
-      <div class="card-login">
+      <div class="card-login" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
         <button class="close-btn">&times;</button>
         <h1>SIGN UP</h1>
         <br>
@@ -46,6 +47,16 @@ <h1>SIGN UP</h1>
       </div>
     </div>
   </div>
+  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init(
+        {
+          duration: 1000, 
+          easing: 'ease', 
+          once: false, 
+        }
+      );
+    </script>
 </body>
 <script>
   const pswinput = document.getElementById('password');

diff --git a/index.html b/index.html
@@ -35,6 +35,7 @@
         @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
     </style>
     <script src="hamburger.js" defer></script>
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 </head>
 
 <body>
@@ -159,10 +160,10 @@ <h1 class="poppins-light">Get <span> 30% OFF </span> on your first order!</h1>
             </div>
         </div>
 
-        <h1 class="h-primary center">"Savor the Flavors: Discover What Sets Our Restaurant's Cuisine Apart!"</h1>
+        <h1 class="h-primary center" data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">"Savor the Flavors: Discover What Sets Our Restaurant's Cuisine Apart!"</h1>
 
         <!-- changes -->
-        <div id="about">
+        <div id="about" data-aos="zoom-out" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
             <div class="box">
                 <img src="https://shahidining.com.au/wp-content/uploads/2020/05/secret-to-indian-flavour-1536x864.jpg"
                     alt="">
@@ -191,23 +192,23 @@ <h2 class="h-secondary center">Innovative Fusion Dishes</h2>
 
     <section class="service_container">
         <div class="service">
-            <div class="box_main">
+            <div class="box_main" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                 <h1>Bringing <br>happiness<br> to you</h1>
                 <p>Food is more than sustenance; it's a source of pure<br> happiness. From the first bite of a favorite
                     childhood dish<br> to the thrill of discovering new flavors, food has a unique<br> way of filling
                     our hearts with joy.</p>
             </div>
-            <div class="box">
+            <div class="box" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                 <h1>Online Delivery</h1><br>
                 <a href="#" class="btn">Order Online</a>
 
             </div>
-            <div class="box">
+            <div class="box" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                 <h1>Click & Collect</h1><br>
                 <a href="#" class="btn">Take out Order</a>
 
             </div>
-            <div class="box">
+            <div class="box" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
                 <h1>Restaurant Dining</h1><br>
 
                 <a href="./Html-files/book-table.html" class="btn">Book Table</a>
@@ -217,7 +218,7 @@ <h1>Restaurant Dining</h1><br>
     </section>
 
     <section class="menu_container">
-        <div class="mainhead">
+        <div class="mainhead" data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
             <h1>"Get ready to explore our delicious range of dishes!"</h1>
             <p>"Welcome to a world of culinary delights where every bite tells a flavorful story. Explore our diverse
                 menu and savor the essence of exquisite dining." </p>
@@ -226,7 +227,7 @@ <h1>"Get ready to explore our delicious range of dishes!"</h1>
             <!-- <button class="butt" onclick="window.open('Html-files/menu.html')">View Menu</button> -->
         </div>
 
-        <div class="menu_items">
+        <div class="menu_items" data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
             <div class="items">
                 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjSkmP0glNOmYbWZWwz_BRxgwrA5HdZadphw&s">
                 <h3>Indian Thali</h3>
@@ -264,7 +265,7 @@ <h3>Juices</h3>
 
     </div> -->
     <div class="fix"></div>
-    <div class="container">
+    <div class="container" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
         <h2> Our Happy Clients </h2>
         <p class="description">
             At Foodie, we pride ourselves on delivering delicious meals & exceptional service. Don’t just take our word for it—hear what our satisfied customers have to say!</p>
@@ -607,6 +608,16 @@ <h4>Follow Us</h4>
                 v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
             })(document, 'script');
     </script>
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init(
+        {
+          duration: 1000, 
+          easing: 'ease', 
+          once: false, 
+        }
+      );
+    </script>
 </body>
 <script>
     function redirectLogin() {

diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
diff --git a/node_modules/aos/.babelrc b/node_modules/aos/.babelrc
diff --git a/node_modules/aos/.editorconfig b/node_modules/aos/.editorconfig
diff --git a/node_modules/aos/.gitattributes b/node_modules/aos/.gitattributes
diff --git a/node_modules/aos/.travis.yml b/node_modules/aos/.travis.yml