Merge pull request #136 from ShaikArshidBanu/fixing-issue-129

Improve Content Visibility and Consistency on Scroll and adding additional scroll effects

index.html

@@ -444,7 +444,7 @@ <h3>Project 4</h3>
     <!-- Experience Section  -->
     <section id="experience" class="main">
       <h5 class="heading">Experience</h5>
-      <div class="exp">
+      <div class="exp" data-aos="slide-in">
         <ul>
           <li>
             <h3 class="title">Frontend Developer</h3>
@@ -493,7 +493,7 @@ <h3 class="title">Blockchain Developer</h3>
     <!-- Testimonials  -->
 
     <section id="testimonials" class="testimonial-section">
-      <div class="container space">
+      <div class="container space" data-aos="zoom-in">
         <h2>Testimonials</h2>
 
         <div
@@ -668,7 +668,7 @@ <h6 class="test-head">Prof. Dr. Anubhav Singh | IGDTUW</h6>
 
     <!-- Certificates -->
     <section id="certificates" class="container">
-      <div id="certificate-heading" class="container">
+      <div id="certificate-heading" class="container" data-aos="zoom-in">
         <h1>Certificates</h1>
         <div
         id="certificateCarousel"
@@ -784,13 +784,13 @@ <h6 class="test-head">Certificate 5</h6>
     <!----FAQ section starting----------->
    <section class="faqs" id="faqs-section">
       <div class="containerfaqs">
-          <div class="centered-image">
+          <div class="centered-image" data-aos="zoom-in">
               <img src="assets\imagefaq.jpg" alt="Centered Image" style="margin-left: 105px;">
           </div>
 
           <h1><span style="text-decoration: underline; text-decoration-color: #3252a8; color: #3252a8;">Frequently Asked Questions?</span></h1>
 
-          <div class="tabss">
+          <div class="tabss" data-aos="zoom-in">
               <input type="radio" name="acc" id="acc1">
               <label for="acc1">
                   <h2>01</h2>
@@ -799,7 +799,7 @@ <h3>In which year do I study?</h3>
               <div class="contentfaqs"><p>I currently study in 2nd year.</p></div>
           </div>
 
-          <div class="tabss">
+          <div class="tabss" data-aos="zoom-in">
               <input type="radio" name="acc" id="acc2">
               <label for="acc2">
                   <h2>02</h2>
@@ -808,7 +808,7 @@ <h3>Am I a member of any of the college societies?</h3>
               <div class="contentfaqs"><p>Yes, I am the part of college societies named_____</p></div>
           </div>
 
-          <div class="tabss">
+          <div class="tabss" data-aos="zoom-in">
               <input type="radio" name="acc" id="acc3">
               <label for="acc3">
                   <h2>03</h2>
@@ -825,11 +825,11 @@ <h3>What are my hobbies?</h3>
     <section class="feedbacksssection">
       <div>  
         <h1><span class="feedback-title">Feedback</span></h1>
-        <div class="contact-right">
+        <div class="contact-right" >
             <form class="feedback-form" name="submit-to-google-sheet">
-                <h4 style="color:#3252a8; font-weight: 600;">Your Name</h4><p><textarea type="text" name="Name" placeholder="Your Name" required></textarea></p>
-                <h4 style="color:#3252a8; font-weight: 600;">Your Email</h4><p><textarea type="email" name="Email" placeholder="Your email" required></textarea></p>
-                <h4 style="color:#3252a8; font-weight: 600;">Feedback</h4><p><textarea name="Message" rows="6" placeholder="Feedback"></textarea></p>
+                <h4 style="color:#3252a8; font-weight: 600;">Your Name</h4><p><textarea type="text" name="Name" placeholder="Your Name" required data-aos="zoom-in"></textarea></p>
+                <h4 style="color:#3252a8; font-weight: 600;">Your Email</h4><p><textarea type="email" name="Email" placeholder="Your email" required data-aos="zoom-in"></textarea></p>
+                <h4 style="color:#3252a8; font-weight: 600;">Feedback</h4><p><textarea name="Message" rows="6" placeholder="Feedback" data-aos="zoom-in"></textarea></p>
                 <button type="submit" class="btn-submit">Submit</button>
             </form>
             <span class="feedback-msg" id="msg"></span>
@@ -914,7 +914,7 @@ <h4>Mail me</h4>
     ></script>
     <script>
       AOS.init({
-        offset: 200,
+        offset: 100,
         duration: 900,
       });