Added Bueatiful animations throughout diffrent sections of home page …

…and also for login and sign-up page
ishika1727 · Oct 5, 2021 · 3ab2dcc · 3ab2dcc
1 parent ef0c6c8
commit 3ab2dcc
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 15 deletions.
diff --git a/css/clone.css b/css/clone.css
@@ -10,6 +10,8 @@
     height: 20vh;
     width: 100%;
     margin-bottom: 0;
+
+    z-index: 2000;
 }
 #one::before {
     content: "";

diff --git a/index.html b/index.html
@@ -9,17 +9,18 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <script type="text/javascript" src="./js/bone.js">
         </script>
+        <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
         <title>STRESS MASTER</title>
 </head>
 
 <body>
         <nav class="nav">
                 <div class="fix">
                         <div class="vl"></div>
-                        <div align="left" id="one1">
+                        <div align="left" id="one1" data-aos='fade-down'>
                                 STRESS FIT
                         </div>
-                        <div id="one2">
+                        <div id="one2" data-aos='zoom-in'>
                                 <a href="#contact">Contact Us </a>
                                 <a href="#about">About Us </a>
                                 <a href="#test">Stress Test </a>
@@ -30,7 +31,7 @@
                                 <a href="./templates/diet2.html">Diet Plan </a>
                                 <a href="#one">Home </a>
                         </div>
-                        <div id="one_2">
+                        <div id="one_2" data-aos='zoom-in'>
                                 <a href="#one">Home </a>
                                 <a href="#about">About Us </a>
                                 <a href="#test">Stress Test </a>
@@ -53,9 +54,9 @@
                 </div>
         </nav>
         <main>
-                <div id="one">
-                        <div id="one3">
-                                <h1 class="mh">
+                <div id="one" >
+                        <div id="one3" data-aos='zoom-in'>
+                                <h1 class="mh" >
                                         <centre>GENERAL <br> STRESS<br>
                                 </h1>
                                 <p id="one31">Feeling stressed? And dont know WHY?</p>
@@ -337,22 +338,22 @@ <h1>CALL TO COUNSELLOR</h1>
                 </a><br><br><br><br>
         </div>
         <div id="soln">
-                <p class="abouta">SMART SOLUTION
+                <p class="abouta" data-aos='zoom-in'>SMART SOLUTION
                         <hr>
                 </p>
                 <center><br>
                         <iframe src="https://www.youtube.com/embed/wnHW6o8WMas" width="560" height="315" frameborder="0"
                                 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                                allowfullscreen>video</iframe>
+                                allowfullscreen data-aos='fade-down'>video</iframe>
                         <p class="solntext">Motivational Video</p>
                         <p class="solntexttext">To rejuvenate your soul<br>Recomended for stress score : 0-40</p><br>
                         <iframe src="https://youtube.com/embed/2OEL4P1Rz04" width="560" height="315" frameborder="0"
                                 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                                allowfullscreen>video</iframe>
+                                allowfullscreen data-aos='fade-down'>video</iframe>
                         <p class="solntext">Calm Music</p>
                         <p class="solntexttext">To Relax your neurons to the core !<br>Recomended for stress score:
                                 40-65</p><br>
-                        <img src="./assests/solnimg.png">
+                        <img src="./assests/solnimg.png" data-aos='fade-down'>
                         <p class="solntext">Professional Counselling</p>
                         <p class="solntexttext">For those, who just need a little bit of external push , to make it big
                                 in their lives!<br>Recomended for stress score :65-75!</p><br>
@@ -367,10 +368,10 @@ <h1>CALL TO COUNSELLOR</h1>
                         <table id="teamtable">
                                 <tr>
                                         <td>
-                                                <img src="./assests/kashish.png" class="teamimg">
+                                                <img src="./assests/kashish.png" class="teamimg" data-aos='zoom-in'>
                                         </td>
                                         <td>
-                                                <img src="./assests/ishika.png" class="teamimg">
+                                                <img src="./assests/ishika.png" class="teamimg" data-aos='zoom-in'>
                                         </td>
                                 </tr>
                                 <tr>
@@ -384,7 +385,7 @@ <h1>CALL TO COUNSELLOR</h1>
                         </table>
                 </center>
         </div>
-        <div id="contact">
+        <div id="contact" data-aos='fade-up'>
                 <p class="abouta">CONTACT US
                         <hr>
                 </p>
@@ -406,6 +407,17 @@ <h1>CALL TO COUNSELLOR</h1>
 
                 </center>
         </div>
+
+
+
+         <!-- Importing Aos Package for "animation on scroll" -->
+        <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+        <script>
+                AOS.init();
+        </script>
+
+
+
 </body>
 <script>
         $(document).ready(function () {

diff --git a/templates/login.html b/templates/login.html
@@ -3,6 +3,8 @@
 
 <head>
     <link href="../css/loginsignup.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+
     <title>LOGIN</title>
 </head>
 
@@ -18,7 +20,7 @@
             <a href="../index.html">Home</a>
         </div>
         <div id="wel">Welcome Back!!</div>
-        <form class="form" method="POST" name="form" id="form">
+        <form class="form" method="POST" name="form" id="form" data-aos='zoom-in'>
             <ul>
                 <li>
                     <label>Email</label>
@@ -39,6 +41,13 @@
         <br><br><br><br><br><br><br>
     </div>
     </div>
+             <!-- Importing Aos Package for "animation on scroll" -->
+             <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+             <script>
+                     AOS.init();
+             </script>
+
+
 </body>
 <script type="text/javascript" src="login.js"></script>
 

diff --git a/templates/signup.html b/templates/signup.html
@@ -3,6 +3,8 @@
 
 <head>
     <link href="../css/loginsignup.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+
     <title>SIGNUP</title>
 </head>
 
@@ -17,7 +19,7 @@
             <a href="../index.html">Home </a>            
         </div>
         <div id="wel">Sign Up For Free</div>
-        <form class="form" name="form" method="post">
+        <form class="form" name="form" method="post" data-aos='zoom-in'>
             <ul>
                 <li>
                     <label>Name</label>
@@ -43,6 +45,13 @@
         <br><br><br><br><br><br><br>
     </div>
     </div>
+
+             <!-- Importing Aos Package for "animation on scroll" -->
+             <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+             <script>
+                     AOS.init();
+             </script>
+
 </body>
 
 </html>