Add files via upload

ankiiitagupta · Sep 3, 2023 · 650d61d · 650d61d
1 parent 51f01ca
commit 650d61d
Show file tree

Hide file tree

Showing 24 changed files with 613 additions and 0 deletions.
diff --git a/...e/PP Mori - Free for Personal Use v1.0/EULA-PangramPangram-FreeForPersonalUse-MAY2021.pdf b/...e/PP Mori - Free for Personal Use v1.0/EULA-PangramPangram-FreeForPersonalUse-MAY2021.pdf
diff --git a/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-Extralight.otf b/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-Extralight.otf
diff --git a/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-ExtralightItalic.otf b/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-ExtralightItalic.otf
diff --git a/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-Regular.otf b/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-Regular.otf
diff --git a/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-RegularItalic.otf b/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-RegularItalic.otf
diff --git a/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-SemiBold.otf b/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-SemiBold.otf
diff --git a/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-SemiBoldItalic.otf b/duo_website/PP Mori - Free for Personal Use v1.0/PPMori-SemiBoldItalic.otf
diff --git a/duo_website/images/download.jpeg b/duo_website/images/download.jpeg
diff --git a/duo_website/images/duostudio_logo.jpeg b/duo_website/images/duostudio_logo.jpeg
diff --git a/duo_website/images/exp1.jpg b/duo_website/images/exp1.jpg
diff --git a/duo_website/images/exp2.jpg b/duo_website/images/exp2.jpg
diff --git a/duo_website/images/iden1.jpg b/duo_website/images/iden1.jpg
diff --git a/duo_website/images/iden2.jpg b/duo_website/images/iden2.jpg
diff --git a/duo_website/images/img1.avif b/duo_website/images/img1.avif
diff --git a/duo_website/images/img2.avif b/duo_website/images/img2.avif
diff --git a/duo_website/images/img3.avif b/duo_website/images/img3.avif
diff --git a/duo_website/images/img4.avif b/duo_website/images/img4.avif
diff --git a/duo_website/images/img5.avif b/duo_website/images/img5.avif
diff --git a/duo_website/images/strategy1.jpg b/duo_website/images/strategy1.jpg
diff --git a/duo_website/images/strategy2.jpg b/duo_website/images/strategy2.jpg
diff --git a/duo_website/index.html b/duo_website/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Duo</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="cursor"></div>
+    <div id="nav">
+        <img src="images/duostudio_logo.jpeg" alt="" srcset="">
+        <div id="navbar2">
+            <h4>Home</h4>
+            <h4>Work</h4>
+            <h4>Studio</h4>
+            <h4>Contact</h4>
+        </div>
+        <div id="navbar3">
+            <div id="circle">
+
+            </div>
+        </div>
+    </div>
+    <div id="main">
+        <div class="page1">          
+            <h1>Digitally crafted</h1>
+            <h2>brand experiences</h2>
+            <video autoplay muted loop src="https://static.videezy.com/system/resources/previews/000/050/697/original/383A0012-20191222_delivery_concept.mp4"></video>
+        </div>
+        <div id="page2">
+            <h1>We are DUO Studio,</h1>
+            <div id="page2-container">
+                <div id="page2-left">
+                    <h2>A CREATIVE
+                        COLLECTIVE
+                        MADE TO UNLOCK
+                        YOUR BRAND'S 
+                        POTENTIAL
+                    </h2>
+                </div>
+                <div id="page2-right">
+                    <P>We weave together bold strategy and creative execution to produce thought-provoking digital experiences. We take a highly personalized approach to delivering brand, web design and content marketing solutions. Born in the DC area- now serving client worldwide.</P>
+                    <button>About Us</button>
+                </div>
+            </div>
+        </div>
+        <div id="page3">
+            <h1>Selected Works</h1>
+            <div id="page3-1">
+                <img src="images/download.jpeg" alt="">
+                <video autoplay loop muted src="videos/mixkit-people-dancing-at-a-night-club-4344-medium.mp4"></video>
+            </div>
+            <div id="page3-1">
+                <img src="images/download.jpeg" alt="">
+                <video autoplay loop muted src="videos/mixkit-people-dancing-at-a-night-club-4344-medium.mp4"></video>
+            </div>
+            <div id="page3-2">
+                <h1>view all projects</h1>
+                <div id="circle2">
+                    <h4>discover</h4>
+                </div>
+            </div>
+        </div>
+        <div id="page4">
+            <div class="elem">
+                <img src="images/strategy1.jpg" alt="">
+                <div id="text-div">
+                    <h1>Strategy</h1>
+                    <h1>Strategy</h1>
+                </div>
+                <img src="images/strategy2.jpg" alt="">
+            </div>
+            <div class="elem">
+                <img src="images/iden1.jpg" alt="">
+                <div id="text-div">
+                    <h1>Identity</h1>
+                    <h1>Identity</h1>
+                </div>
+                <img src="images/iden2.jpg" alt="">
+            </div>
+            <div class="elem">
+                <img src="images/exp1.jpg" alt="">
+                <div id="text-div">
+                    <h1>Experience</h1>
+                    <h1>Experience</h1>
+                </div>
+                <img src="images/exp2.jpg" alt="">
+            </div>
+
+        </div>
+        <div id="page5">
+            <h2>mentions clients</h2>
+            <div id="box" data-image="images/img1.avif">
+                <h3>Verizon</h3>
+                <h4>2023</h4>
+            </div>
+            <div id="box" data-image="images/img2.avif">
+                <h3>Verizon</h3>
+                <h4>2023</h4>
+            </div>
+            <div id="box" data-image="images/img3.avif">
+                <h3>Verizon</h3>
+                <h4>2023</h4>
+            </div>
+            <div id="box" data-image="images/img4.avif">
+                <h3>Verizon</h3>
+                <h4>2023</h4>
+            </div>
+        </div>
+        <footer>
+            <div id="last">
+                <h1>Start a project</h1>
+                <div id="circle3">
+                    <h2>GET IN TOUCH</h2>
+                </div>
+            </div>
+            <h3>Create an experience that's as remarkableas your business.</h3>
+        </footer>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/duo_website/script.js b/duo_website/script.js
@@ -0,0 +1,109 @@
+
+function init(){
+    gsap.registerPlugin(ScrollTrigger);
+
+const locoScroll = new LocomotiveScroll({
+    el: document.querySelector("#main"),
+    smooth: true
+});
+locoScroll.on("scroll", ScrollTrigger.update);
+
+ScrollTrigger.scrollerProxy("#main", {
+    scrollTop(value) {
+        return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
+    },
+    getBoundingClientRect() {
+        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
+    },
+
+    pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
+});
+
+ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
+ScrollTrigger.refresh();
+
+}
+
+init();
+
+var cur= document.querySelector("#cursor")
+var main= document.querySelector("#main")
+document.addEventListener("mousemove",function(details){
+    cur.style.left = details.x + 20+  "px"
+    cur.style.top = details.y + 20 + "px"
+})
+
+var tl = gsap.timeline({
+    scrollTrigger: {
+        trigger: ".page1 h1",
+        scroller: "#main",
+        //markers: true,
+        start: "top -1%",
+        end: "top -2%",
+        scrub: 3,
+    }
+})
+
+tl.to(".page1 h1", {
+    x: -80,
+    delay: 1,
+}, "anim")
+
+tl.to(".page1 h2", {
+    x: 100,
+    delay:1,
+}, "anim")
+
+tl.to(".page1 video", {
+    width: "90%",
+    delay:1,
+}, "anim")
+
+var tl2 = gsap.timeline({
+    scrollTrigger: {
+        trigger: ".page1 h1",
+        scroller: "#main",
+        //markers: true,
+        start: "top -70%",
+        end: "top -100%",
+        scrub: 3
+    }
+})
+
+tl2.to("#main", {
+    backgroundColor: "white",
+})
+
+var tl3 = gsap.timeline({
+    scrollTrigger: {
+        trigger: ".page1 h1",
+        scroller: "#main",
+        //markers: true,
+        start: "top -360%",
+        end: "top -400%",
+        scrub: 3
+    }
+})
+
+tl3.to("#main",{
+    backgroundColor: "#0F0D0D"
+})
+
+var boxes= document.querySelectorAll("#box")
+boxes.forEach(function(elem){
+    elem.addEventListener("mouseenter",function(){
+        var att= elem.getAttribute("data-image")
+        cur.style.width="300px"
+        cur.style.height="250px"
+        cur.style.borderRadius="0"
+        cur.style.backgroundImage= `url(${att})`
+    })
+    elem.addEventListener("mouseleave",function(){
+        elem.style.backgroundColor= "none"
+        cur.style.width="20px"
+        cur.style.height="20px"
+        cur.style.borderRadius="50%"
+        cur.style.backgroundImage= `none`
+    })
+})
+