Add files via upload

index.html

@@ -10,6 +10,9 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro: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" rel="stylesheet">
 
+<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
+<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+
   <title>Frontend Mentor | Manage landing page</title>
   <style>
     .attribution { font-size: 11px; text-align: center; }
@@ -41,15 +44,15 @@
   </nav>
 </header>
 <!-- ****************************************************************************  -->
-<div class="div1">
+<div class="div1" >
   <svg style="z-index: -1;  position: absolute; top: -100;right:100;" xmlns="http://www.w3.org/2000/svg" width="304" height="414"><rect width="436"  height="970" x="884" y="0" fill="#FFF0EC" fill-rule="evenodd" rx="218" transform="rotate(45 718.814 -291.157)"/></svg>
-  <div class="dd1">
+  <div class="dd1" data-aos="fade-right" data-aos-duration="2000">
     <h4>Bring everyone together to build better products.</h4>
     <p>Manage makes it simple for software teams to plan day-to-day 
       tasks while keeping the larger team goals in view.</p>
     <button>Get Started</button>
   </div>
-  <div class="dd2">
+  <div class="dd2" data-aos="zoom-in" data-aos-duration="1500">
 
    <img src="./images/illustration-intro.svg" alt="image ">
   </div>
@@ -58,25 +61,25 @@ <h4>Bring everyone together to build better products.</h4>
 <!-- ****************************************************************************  -->
 
 <div class="div2">
-  <div class="dd21">
+  <div class="dd21" data-aos="fade-in" data-aos-anchor-placement="center-bottom" data-aos-duration="1000">
     <h4>What’s different about Manage?</h4>
     <p>Manage provides all the functionality your team needs, without 
   the complexity. Our software is tailor-made for modern digital 
   product teams.</p>
   </div>
   <div class="dd22">
-       <div class="infocard1">
+       <div class="infocard1" data-aos="flip-up" data-aos-duration="500">
         <div class="ic-num">
           <p>01</p>
         </div>
-        <div class="ic-info">
+        <div class="ic-info" >
           <h4>Track company-wide progress</h4>
           <p>See how your day-to-day tasks fit into the wider vision. Go from 
              tracking progress at the milestone level all the way done to the 
              smallest of details. Never lose sight of the bigger picture again.</p>
         </div>
        </div>
-       <div class="infocard2 ">
+       <div class="infocard2 " data-aos="flip-up" data-aos-duration="500">
         <div class="ic-num">
           <p>02</p>
         </div>
@@ -87,7 +90,7 @@ <h4>Advanced built-in reports</h4>
              you need to keep key stakeholders informed.</p>
         </div>
        </div>
-       <div class="infocard3 ">
+       <div class="infocard3 " data-aos="flip-up" data-aos-duration="500">
         <div class="ic-num">
           <p>03</p>
         </div>
@@ -102,8 +105,8 @@ <h4>Everything you need in one place</h4>
 </div>
 <div class="banner">
   <div class="banner-div">
-    <h4>Simplify how your team works today.</h4>
-  <button>Get Started</button>
+    <h4 data-aos="fade-right" data-aos-duration="1000">Simplify how your team works today.</h4>
+  <button data-aos="fade-in" data-aos-duration="500" data-aos-delay="600">Get Started</button>
   </div>
 </div>