Added Animation

JAYESHBATRA · Jul 13, 2024 · 9db9bc7 · 9db9bc7
1 parent b196b7d
commit 9db9bc7
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 6 deletions.
diff --git a/Pages/3D-Visualizations/index.html b/Pages/3D-Visualizations/index.html
@@ -8,6 +8,30 @@
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="media-queries.css">
     <link rel="icon" type="image/x-icon" href="../../assets/logo.png">
+    <style>
+      @keyframes float {
+        0% {
+          transform: translateY(0);
+        }
+
+        50% {
+          transform: translateY(-10px);
+        }
+
+        100% {
+          transform: translateY(0);
+        }
+      }
+
+      #tsparticles {
+        pointer-events: none;
+        width: 100% !important;
+        height: 100% !important;
+        position: fixed !important;
+        top: 0px !important;
+        left: 0px !important;
+      }
+    </style>
     <script src="https://unpkg.com/scrollreveal"></script>
 </head><link
 href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
@@ -58,7 +82,7 @@
     <header>
       <div class="header">
         <h1 class="head-txt">3D Visualizations</h1>
-        <img src="assets/asset 42.svg" alt="3D-Visualizations" class="head-img">
+        <img src="assets/asset 42.svg" alt="3D-Visualizations" class="head-img" style="animation: float 2s ease-in-out infinite;">
       </div>
     </header>
 

diff --git a/Pages/About-Us/index.html b/Pages/About-Us/index.html
@@ -9,6 +9,30 @@
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="media-queries.css">
   <link rel="icon" type="image/x-icon" href="../../assets/logo.png">
+  <style>
+    @keyframes float {
+      0% {
+        transform: translateY(0);
+      }
+
+      50% {
+        transform: translateY(-10px);
+      }
+
+      100% {
+        transform: translateY(0);
+      }
+    }
+
+    #tsparticles {
+      pointer-events: none;
+      width: 100% !important;
+      height: 100% !important;
+      position: fixed !important;
+      top: 0px !important;
+      left: 0px !important;
+    }
+  </style>
   <script src="https://unpkg.com/scrollreveal"></script>
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
@@ -98,7 +122,7 @@
   <header>
     <div class="header">
       <h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl head-txt">About Us</h1>
-      <img src="assets/asset 42.svg" alt="About-Us" class="block md:w-[40vw] mx-auto my-0 w-[80vw] head-img">
+      <img src="assets/asset 42.svg" alt="About-Us" class="block md:w-[40vw] mx-auto my-0 w-[80vw] head-img" style="animation: float 2s ease-in-out infinite;">
     </div>
   </header>
 

diff --git a/Pages/Doubt Engine/index.html b/Pages/Doubt Engine/index.html
@@ -8,6 +8,30 @@
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="media-queries.css">
     <link rel="icon" type="image/x-icon" href="../HomePage/assets/logo.png">
+    <style>
+      @keyframes float {
+        0% {
+          transform: translateY(0);
+        }
+
+        50% {
+          transform: translateY(-10px);
+        }
+
+        100% {
+          transform: translateY(0);
+        }
+      }
+
+      #tsparticles {
+        pointer-events: none;
+        width: 100% !important;
+        height: 100% !important;
+        position: fixed !important;
+        top: 0px !important;
+        left: 0px !important;
+      }
+    </style>
     <script src="https://unpkg.com/scrollreveal"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
@@ -86,7 +110,7 @@
     <header>
       <div class="header">
         <h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl head-txt">Doubt Engine</h1>
-        <img src="assets/asset 42.svg" alt="Doubt Engine" class="block md:w-[30vw] mx-auto mt-[7vh] w-[80vw] head-img">
+        <img src="assets/asset 42.svg" alt="Doubt Engine" class="block md:w-[30vw] mx-auto mt-[7vh] w-[80vw] head-img" style="animation: float 2s ease-in-out infinite;">
       </div>
     </header>
 

diff --git a/Pages/Quizes/index.html b/Pages/Quizes/index.html
@@ -5,6 +5,30 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Virtuo Learn</title>
+    <style>
+      @keyframes float {
+        0% {
+          transform: translateY(0);
+        }
+
+        50% {
+          transform: translateY(-10px);
+        }
+
+        100% {
+          transform: translateY(0);
+        }
+      }
+
+      #tsparticles {
+        pointer-events: none;
+        width: 100% !important;
+        height: 100% !important;
+        position: fixed !important;
+        top: 0px !important;
+        left: 0px !important;
+      }
+    </style>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="media-queries.css">
     <link rel="icon" type="image/x-icon" href="../../assets/logo.png">
@@ -60,7 +84,7 @@
     <header>
       <div class="header">
         <h1 class="head-txt">Quizzes</h1>
-        <img src="assets/asset 42.svg" alt="Simulation" class="head-img">
+        <img src="assets/asset 42.svg" alt="Simulation" class="head-img" style="animation: float 2s ease-in-out infinite;">
       </div>
     </header>
 

diff --git a/Pages/Simulation/index.html b/Pages/Simulation/index.html
@@ -5,6 +5,30 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Virtuo Learn</title>
+    <style>
+      @keyframes float {
+        0% {
+          transform: translateY(0);
+        }
+
+        50% {
+          transform: translateY(-10px);
+        }
+
+        100% {
+          transform: translateY(0);
+        }
+      }
+
+      #tsparticles {
+        pointer-events: none;
+        width: 100% !important;
+        height: 100% !important;
+        position: fixed !important;
+        top: 0px !important;
+        left: 0px !important;
+      }
+    </style>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="media-queries.css">
     <link rel="icon" type="image/x-icon" href="../../assets/logo.png">
@@ -59,7 +83,7 @@
     <header>
       <div class="header">
         <h1 class="head-txt">Simulations</h1>
-        <img src="assets/asset 42.svg" alt="Simulations" class="head-img">
+        <img src="assets/asset 42.svg" alt="Simulations" class="head-img" style="animation: float 2s ease-in-out infinite;">
       </div>
     </header>
 

diff --git a/Pages/Videos/index.html b/Pages/Videos/index.html
@@ -5,6 +5,30 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Virtuo Learn</title>
+    <style>
+      @keyframes float {
+        0% {
+          transform: translateY(0);
+        }
+
+        50% {
+          transform: translateY(-10px);
+        }
+
+        100% {
+          transform: translateY(0);
+        }
+      }
+
+      #tsparticles {
+        pointer-events: none;
+        width: 100% !important;
+        height: 100% !important;
+        position: fixed !important;
+        top: 0px !important;
+        left: 0px !important;
+      }
+    </style>
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="media-queries.css">
     <link rel="icon" type="image/x-icon" href="../../assets/logo.png">
@@ -59,7 +83,7 @@
     <header>
       <div class="header">
         <h1 class="head-txt">Videos</h1>
-        <img src="assets/asset 42.svg" alt="Videos" class="head-img">
+        <img src="assets/asset 42.svg" alt="Videos" class="head-img" style="animation: float 2s ease-in-out infinite;">
       </div>
     </header>