Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
sak-sakshi committed Nov 8, 2023
0 parents commit 3bb92fb
Show file tree
Hide file tree
Showing 15 changed files with 910 additions and 0 deletions.
Binary file added Lagunitas-Bottle-removebg-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
156 changes: 156 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
Binary file added l-1-removebg-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added l3-removebg-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added l4-removebg-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added lagunitas-bootle-removebg-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added lagunitas-dog-removebg-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added lagunitas_logo-removebg-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added main_bottle_img.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
111 changes: 111 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -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
}
})
Loading

0 comments on commit 3bb92fb

Please sign in to comment.