first commit

jattu8602 · Jul 24, 2024 · 5259642 · 5259642
commit 5259642
Show file tree

Hide file tree

Showing 18 changed files with 788 additions and 0 deletions.
diff --git a/Dribbble-Logo.jpg b/Dribbble-Logo.jpg
diff --git a/amazon.png b/amazon.png
diff --git a/dribbble.jpg b/dribbble.jpg
diff --git a/email.png b/email.png
diff --git a/flipkart-logo-black-and-white.png b/flipkart-logo-black-and-white.png
diff --git a/hubspot.png b/hubspot.png
diff --git a/image.png b/image.png
diff --git a/index.html b/index.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>project-5</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
+      rel="stylesheet"
+    />
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200&display=swap');
+    </style>
+  </head>
+  <body>
+    <section class="section1">
+      <nav>
+        <div class="icon">
+          <i class="ri-shining-2-fill"></i>
+          <h1>WizardZ</h1>
+        </div>
+
+        <div class="part2">
+          <h4>About Us</h4>
+          <h4>Services</h4>
+          <h4>Use Cases</h4>
+          <h4>Pricing</h4>
+          <h4>Blog</h4>
+          <button>Request a quote</button>
+        </div>
+      </nav>
+
+      <!-- nav bar ends -->
+
+      <div class="center">
+        <div class="center-part1">
+          <h1>Navigating the digital landscape for success</h1>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
+            odit nobis odio totam tenetur? Voluptas illum nobis blanditiis
+            placeat sequi numquam repellendus tempore, non sit quo. Totam ut
+            possimus error.
+          </p>
+          <button>Book a consultation</button>
+        </div>
+        <div class="center-part2">
+          <img src="image.png" alt="bhopu image" />
+        </div>
+      </div>
+
+      <div class="section1bottom">
+        <img class="jatin" src="amazon.png" alt="" />
+        <img src="flipkart-logo-black-and-white.png" alt="" />
+        <img src="hubspot.png" alt="" />
+        <img src="zoom.png" alt="" />
+        <img src="notion.png" alt="" />
+        <img src="netflix-2-logo-black-and-white.png" alt="" />
+      </div>
+    </section>
+
+    <!-- section 1 ends here -->
+    <section class="section2">
+      <div class="services">
+        <h3>Services</h3>
+        <p>
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi quia
+          voluptatem perferendis facilis vero suscipit atque amet ex eveniet
+          hic!
+        </p>
+      </div>
+      <div class="container">
+        <div class="elem left1">
+          <div class="elem-part1">
+            <h1>Search engine optimization</h1>
+            <h4><i class="ri-arrow-right-up-line"></i>Learn More</h4>
+          </div>
+          <div class="elem-part2">
+            <img src="image.png" alt="" />
+          </div>
+        </div>
+        <div class="elem right1" id="blackbox">
+          <div class="elem-part1" id="sher">
+            <h1 class="black">pay per click advertisement</h1>
+            <h4><i class="ri-arrow-right-up-line"></i>Learn More</h4>
+          </div>
+          <div class="elem-part2">
+            <img src="image.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section2" id="section30">
+      <div class="container3">
+        <div class="elem left2"  id="blackbox">
+          <div class="elem-part1" id="sher">
+            <h1 class="black">social media marketing</h1>
+            <h4><i class="ri-arrow-right-up-line"></i>Learn More</h4>
+          </div>
+          <div class="elem-part2">
+            <img src="image.png" alt="" />
+          </div>
+        </div>
+        <div class="elem right2">
+          <div class="elem-part1">
+            <h1>E-mail marketing</h1>
+            <h4><i class="ri-arrow-right-up-line"></i>Learn More</h4>
+          </div>
+          <div class="elem-part2">
+            <img src="image.png" alt="" />
+          </div>
+        </div>
+      </div>
+
+
+<!-- jattu work starts form here -->
+ <div id="boxi">
+  <div id="left">
+    <h1>Let’s make things happen
+
+    </h1>
+    <p>Contact us today to learn more about how our digital marketing services can help your business grow and succeed online.</p>
+    <button>Get your proposal</button>
+  </div>
+  <div id="right">
+    <img src="https://social-hub-ui.vercel.app/CtaCardSvg.svg" alt="boxi image">
+  </div>
+ </div>
+
+   <!-- new box part starts form here -->
+   <div id="upper">
+    <h1>Case Studies</h1>
+    <p>Explore Real-Life Examples of Our Proven Digital Marketing Success through Our Case Studies</p>
+  </div>
+
+
+
+
+  <div id="footer">
+
+    <div id="box">
+      <p>For a local restaurant, we implemented a targeted PPC campaign that resulted in a 50% increase in website traffic and a 25% increase in sales.</p>
+      <h1>
+  Learn More <i class="ri-arrow-right-up-line"></i>
+      </h1>
+
+  </div>
+
+  <div id="box " class="jatinnn">
+    <p>For a B2B software company, we developed an SEO strategy that resulted in a first page ranking for key keywords and a 200% increase in organic traffic.</p>
+    <h1>
+Learn More <i class="ri-arrow-right-up-line"></i>
+    </h1>
+
+</div>
+
+<div id="box">
+  <p>For a national retail chain, we created a social media marketing campaign that increased followers by 25% and generated a 20% increase in online sales.</p>
+  <h1>
+Learn More <i class="ri-arrow-right-up-line"></i>
+  </h1>
+
+</div>
+
+      </div>
+
+
+  </div>
+
+
+
+
+
+
+    </section>
+
+
+    <div id="sectionx">
+
+<!-- footer part starts from here -->
+
+
+
+
+
+
+
+
+
+
+
+
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+      integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/kisspng-dribbble-logo-dribble-5b1593debfa337.304243431528140766785.jpg b/kisspng-dribbble-logo-dribble-5b1593debfa337.304243431528140766785.jpg
diff --git a/netflix-2-logo-black-and-white.png b/netflix-2-logo-black-and-white.png
diff --git a/netflix.png b/netflix.png
diff --git a/notion.png b/notion.png
diff --git a/pay.png b/pay.png
diff --git a/script.js b/script.js
@@ -0,0 +1,134 @@
+function page1Animation() {
+  // gsap.from("nav h1",{
+  //   y:-30,
+  //   opacity:0,
+  //   delay:1,
+  //   duration:1,
+
+  // })
+  // gsap.from("nav h4 ,nav button , nav i",{
+  //   y:-30,
+  //   opacity:0,
+  //   delay:1,
+  //   duration:1,
+
+  // })
+
+  var tl = gsap.timeline()
+  tl.from(' nav i, nav h1 ,nav h4, nav button ', {
+    y: -40,
+    duration: 0.8,
+    opacity: 0,
+    delay: 1,
+    stagger: 0.15,
+  })
+
+  tl.from(
+    '.center-part1 h1 ',
+    {
+      x: -300,
+      opacity: 0,
+      duration: 0.5,
+    },
+    '-=0.3'
+  )
+  tl.from(' .center-part1 p', {
+    x: -100,
+    opacity: 0,
+    duration: 0.4,
+  })
+  tl.from(' .center-part1 button', {
+    x: -100,
+    opacity: 0,
+    duration: 0.4,
+  })
+  tl.from(
+    ' .center-part2 img',
+    {
+      x: 200,
+      opacity: 0,
+      duration: 0.5,
+    },
+    '-=0.7'
+  )
+
+  tl.from('.section1bottom img', {
+    opacity: 0,
+    y: 30,
+    stagger: 0.15,
+    duration: 0.6,
+  })
+}
+
+function page2Animation() {
+  // gsap.from(".services h3",{
+  //   x:-100,
+  //   opacity:0,
+  //   duration:.5,
+  //   scrollTrigger:{
+  //     trigger:".services h3",
+  //     scroller:"body",
+  //     markers:true,
+  //     start:"top 50%"
+
+  //   }
+
+  // })
+
+  var tl2 = gsap.timeline({
+    scrollTrigger: {
+      trigger: '.section2',
+      scroller: 'body',
+      // markers: true,
+      start: 'top 50%',
+      end: 'top 0%',
+      // pin:true,
+      scrub: 2,
+    },
+  })
+  tl2.from('.services', {
+    y: 30,
+
+    opacity: 0,
+    duration: 0.5,
+  })
+  tl2.from(
+    '.elem.left1',
+    {
+      x: -300,
+      opacity: 0,
+      duration: 1,
+    },
+    'jatin'
+  )
+  tl2.from(
+    '.elem.left2',
+    {
+      x: -300,
+      opacity: 0,
+      duration: 1,
+    },
+    'cha'
+  )
+  tl2.from(
+    '.elem.right1',
+    {
+      x: 300,
+      opacity: 0,
+      duration: 1,
+    },
+    'jatin'
+  )
+  tl2.from(
+    '.elem.right2',
+    {
+      x: 300,
+      opacity: 0,
+      duration: 1,
+    },
+    'cha'
+  )
+}
+
+page1Animation()
+page2Animation()
diff --git a/search.png b/search.png
diff --git a/social.png b/social.png