first commit

sak-sakshi · Nov 8, 2023 · 3bb92fb · 3bb92fb
commit 3bb92fb
Show file tree

Hide file tree

Showing 15 changed files with 910 additions and 0 deletions.
diff --git a/Lagunitas-Bottle-removebg-preview.png b/Lagunitas-Bottle-removebg-preview.png
diff --git a/WhatsApp_Image_2022-09-30_at_11.13.54_AM-removebg-preview.png b/WhatsApp_Image_2022-09-30_at_11.13.54_AM-removebg-preview.png
diff --git a/WhatsApp_Image_2022-09-30_at_11.13.54_AM__1_-removebg-preview.png b/WhatsApp_Image_2022-09-30_at_11.13.54_AM__1_-removebg-preview.png
diff --git a/index.html b/index.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>lagunitas</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Aboreto&family=Abril+Fatface&family=Abyssinica+SIL&family=Alegreya&family=Antonio:wght@700&family=Aref+Ruqaa+Ink:wght@700&family=Caveat&family=Cormorant+Garamond:ital,wght@0,300;1,300&family=Cormorant+SC:wght@500&family=Dancing+Script&family=Inconsolata:wght@300;400&family=Lobster&family=Macondo&family=Montserrat:wght@200&family=Ms+Madi&family=Nanum+Gothic:wght@700&family=Noto+Serif&family=Nunito+Sans&family=Open+Sans&family=Oswald&family=Passions+Conflict&family=Playfair+Display&family=Roboto&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTD5ADOlbHz_Tw6Eo57F2Ja38m7n3fMGw0GYWZGIV7dNRImoy9Z1vExY9gXT2Yu2ki-FbQ&usqp=CAU" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="bg">
+        <div class="nav-top">
+            <img src="lagunitas_logo-removebg-preview.png" alt="">
+            <button>BUY BEER</button>
+        </div>
+        <div class="nav-left">
+            <i class="ri-menu-line"></i>
+            <i class="ri-search-line"></i>
+        </div>
+        <div class="main">
+            <img id="bottle_img" src="main_bottle_img.png" alt="">
+            <div class="page1">
+                <h1>Unlimited <br>Release IPA</h1>
+                <img src="lagunitas-dog-removebg-preview.png" alt="" class="logo">
+            </div>
+            <div  class="page2" >
+                <div class="page2-left">
+                    <h6>Unlimited release</h6>
+                    <h1>India <br> pale ale</h1>
+                    <p>Lagunitas IPA was our first seasonal way back in 1995.The recipe was <br>
+                    formulated with malt and hops working together to balance it all out on <br>
+                    your 'buds so you can knock back more than one without wearing yourself <br>
+                    out.Big  on the aroma with a hoppy-sweet finish that'll leave you wantin' <br>
+                    another sip .Made with 43 different  hops and 65 various malls ,this <br>
+                    redolent ale  will likely float your boat,whatever planet you're on. </p>
+                    <button>BUY NOW</button>
+
+                </div>
+                <div   class="page2-right">
+                    <h4>ABV</h4>
+                    <h6>Alocohol by volume</h6> <hr>
+                    <div class="con1">
+                        <div class="l1">6.2%</div>
+                        <div class="r1">
+                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, amet!
+                        </div>
+                    </div>
+                    <h4>IBU</h4>
+                    <h6>Int'l fitness unit</h6> <hr>
+                    <div class="con2">
+                        <div class="l1">51.1%</div>
+                        <div class="r1">
+                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, amet!
+                        </div>
+                    </div>
+                    <h4>OG</h4>
+                    <h6>Orignal Gravity</h6> <hr>
+                    <div class="con3">
+                        <div class="l1">1.<span>059%</span></div>
+                        <div class="r1">
+                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, amet!
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div  class="page3" >
+                <div class="page3-top">
+                    <h1>Mouthfeels</h1>
+                </div>
+                <div class="bottom_wrapper">
+                    <div class="page3-left">
+                        <img src="https://imageio.forbes.com/specials-images/imageserve/5d6918eb68cb0a0008c0de56/0x0.jpg?format=jpg&crop=5184,2916,x0,y163,safe&width=1200" alt="">
+
+                        <i class="ri-youtube-line"></i>
+                        <h4>Hear it from our brewmonster <br> Jeremy Marshall</h4>
+                    </div>
+
+                    <div class="page3-right">
+                        <h5>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, doloribus fugiat, aliquid maxime commodi deserunt dolorum veniam fuga minus blanditiis reprehenderit. Saepe ut earum veritatis cumque minus nemo quae rerum ipsam quo iusto, accusamus hic placeat fuga, non incidunt laudantium veniam. Impedit, sequi natus nostrum eum maiores laboriosam minus tempore?</h5>
+                        <h1>STYLE </h1>
+                        <h6>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore ab repellendus amet aut accusantium totam velit cupiditate ullam porro aliquam vel quod placeat, doloremque quos minima, quisquam sint enim laborum consectetur distinctio recusandae numquam. Blanditiis dolor ipsa, velit porro, voluptates illo in cum laudantium asperiores dolores nobis eligendi quisquam animi exercitationem repellat iste earum soluta. Quaerat iste rem nulla hic.</h6>
+
+                        <h6>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis culpa, minima quam inventore beatae nesciunt! Magni natus, maxime eaque earum molestiae asperiores obcaecati sint quos eveniet ea, sed, accusantium dolore.</h6>
+                    </div>
+                </div>
+
+            </div>
+            <div class="page4">
+                <div class="spot1">
+                    <img  class="redspot" src="WhatsApp_Image_2022-09-30_at_11.13.54_AM-removebg-preview.png" alt="">
+                    <h6>ORANGE-C HOPS</h6>
+                    <p>The use of old school <br>
+                     C-hops brings a touch of <br>
+                    citrus flavor that is both bright and deep</p>
+                </div>
+
+                <div class="spot">
+                    <img  class="redspot" src="WhatsApp_Image_2022-09-30_at_11.13.54_AM-removebg-preview.png" alt="">
+                    <h6>PINE</h6>
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem amet voluptatum, animi suscipit ipsum nam?</p>
+                </div>
+                <div class="spot2">
+                    <img  class="redspot" src="WhatsApp_Image_2022-09-30_at_11.13.54_AM__1_-removebg-preview.png" alt="">
+                    <h6>CARMEL- MALT</h6>
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem amet voluptatum, animi suscipit ipsum nam?</p>
+                </div>
+                <img src="lagunitas-bootle-removebg-preview.png" alt="" class="bottle">
+            </div>
+            <div class="page5">
+                <div class="top">
+                    <h6>Availability :</h6>
+                    <h1>YEAR ROUND</h1>
+                </div>
+                <div class="images">
+                        <img src="l-1-removebg-preview.png" alt="" class="l1">
+                        <img src="Lagunitas-Bottle-removebg-preview.png" alt="" class="l2">
+                        <img src="l3-removebg-preview.png" alt="" class="l3">     
+                        <img src="l4-removebg-preview.png" alt="" class="l4">
+                </div>
+            </div>
+            <div class="page7">
+                <div class="left">
+                    <img src="https://lagunitas.com/wp-content/uploads/2021/07/Maximus_820x360.jpg" alt="">
+                </div>
+                <div class="right">
+                    <h6>BEER 101</h6>
+                    <h1>BEER 101:DOUBLE IPA </h1>
+                    <p>DIPA. An innocuous looking acronym (or maybe not so innocuous if you don’t like acronyms…). However, DIPA, or Double IPA, might cause some confusion. Do we literally mean double of an IPA? What the heck even is an IPA? How do we double it?
+
+                    </p>
+                    <button>READ MORE</button>
+                </div>
+
+            </div>
+        </div>
+    </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.11.2/gsap.min.js"
+        integrity="sha512-gsEItzcNkWxfxHjr4BaEZAd9YuRWYjxnj7c/yukcZ0/nWehUb5TjJNyyv1ApCU2DFH/qgw+stFZHPOKnoQnIuQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/ScrollTrigger.min.js"
+        integrity="sha512-ko44b+LlYXwGZI6Gey6Tgrhew9JEPdSE6m7FqDyGGPDW+dDOjsCElEtiUIRRtCXRNHwKheBCnHCQSMdUz/pgkw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/l-1-removebg-preview.png b/l-1-removebg-preview.png
diff --git a/l3-removebg-preview.png b/l3-removebg-preview.png
diff --git a/l4-removebg-preview.png b/l4-removebg-preview.png
diff --git a/lagunitas-bootle-removebg-preview.png b/lagunitas-bootle-removebg-preview.png
diff --git a/lagunitas-dog-removebg-preview.png b/lagunitas-dog-removebg-preview.png
diff --git a/lagunitas_logo-removebg-preview.png b/lagunitas_logo-removebg-preview.png
diff --git a/main_bottle_img.png b/main_bottle_img.png
diff --git a/script.js b/script.js
@@ -0,0 +1,111 @@
+gsap.registerPlugin(ScrollTrigger);
+
+// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
+
+const locoScroll = new LocomotiveScroll({
+  el: document.querySelector(".main"),
+  smooth: true
+});
+// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
+locoScroll.on("scroll", ScrollTrigger.update);
+
+// tell ScrollTrigger to use these proxy methods for the ".main" element since Locomotive Scroll is hijacking things
+ScrollTrigger.scrollerProxy(".main", {
+  scrollTop(value) {
+    return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
+  }, // we don't have to define a scrollLeft because we're only scrolling vertically.
+  getBoundingClientRect() {
+    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
+  },
+  // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
+  pinType: document.querySelector(".main").style.transform ? "transform" : "fixed"
+});
+
+
+
+
+
+// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
+ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
+
+// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
+ScrollTrigger.refresh();
+
+
+
+gsap.to("#bottle_img", {
+    rotate: -15,
+    scrollTrigger:{
+        trigger:"#bottle_img",
+        scroller:".main",
+        // markers:true,
+        start: "top 1%",
+        end: "top -460%",
+        pin:true,
+        scrub:true
+    },
+})
+
+gsap.to("#bottle_img", {
+  scale: 0.4,
+  scrollTrigger:{
+      trigger:".page_5",
+      scroller:".main",
+      // markers:true,
+      start: "top 390%",
+      end: "top -380%",
+      scrub:true,
+  },
+})
+var tl=gsap.timeline()
+tl.from(".nav-top > img",{
+  scale:0,
+  opacity:0,
+  duration:1
+})
+tl.from(".nav-top > button",{
+  scale:0,
+  opacity:0,
+  duration:1
+})
+tl.from(".main > .page1 > .logo",{
+  scale:0,
+  opacity:0,
+  duration:1
+})
+tl.from(".page2",{
+  scale:0.8,
+  opacity:0.8,
+  duration:1,
+  scrollTrigger:{
+    trigger:".page2-right",
+    scroller:".main",
+    markers:false,
+    scrub:true
+  }
+
+})
+tl.from(".page3 >.page3-top > h1",{
+
+  opacity:0.8,
+  scale:0.7,
+  duration:1,
+  scrollTrigger:{
+    trigger:".page3-top",
+    scroller:".main",
+    // start:"center",
+    markers:false,
+    scrub:true
+  }
+
+})
+gsap.from(".page3-right",{
+  x:70,
+  // opacity:0.3,
+  duration:1,
+  scrollTrigger:{
+    trigger:".page3",
+    scroller:".main",
+    scrub:true
+  }
+})