diff --git a/Lagunitas-Bottle-removebg-preview.png b/Lagunitas-Bottle-removebg-preview.png new file mode 100644 index 0000000..c58c460 Binary files /dev/null and b/Lagunitas-Bottle-removebg-preview.png differ 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 new file mode 100644 index 0000000..6549161 Binary files /dev/null and b/WhatsApp_Image_2022-09-30_at_11.13.54_AM-removebg-preview.png differ 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 new file mode 100644 index 0000000..a1f1071 Binary files /dev/null and b/WhatsApp_Image_2022-09-30_at_11.13.54_AM__1_-removebg-preview.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..64233a3 --- /dev/null +++ b/index.html @@ -0,0 +1,156 @@ + + + + + + + lagunitas + + + + + + + + +
+
+ + +
+
+ + +
+
+ +
+

Unlimited
Release IPA

+ +
+
+
+
Unlimited release
+

India
pale ale

+

Lagunitas IPA was our first seasonal way back in 1995.The recipe was
+ formulated with malt and hops working together to balance it all out on
+ your 'buds so you can knock back more than one without wearing yourself
+ out.Big on the aroma with a hoppy-sweet finish that'll leave you wantin'
+ another sip .Made with 43 different hops and 65 various malls ,this
+ redolent ale will likely float your boat,whatever planet you're on.

+ + +
+
+

ABV

+
Alocohol by volume
+
+
6.2%
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, amet! +
+
+

IBU

+
Int'l fitness unit
+
+
51.1%
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, amet! +
+
+

OG

+
Orignal Gravity
+
+
1.059%
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, amet! +
+
+
+
+
+
+

Mouthfeels

+
+
+
+ + + +

Hear it from our brewmonster
Jeremy Marshall

+
+ +
+
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?
+

STYLE

+
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.
+ +
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.
+
+
+ +
+
+
+ +
ORANGE-C HOPS
+

The use of old school
+ C-hops brings a touch of
+ citrus flavor that is both bright and deep

+
+ +
+ +
PINE
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem amet voluptatum, animi suscipit ipsum nam?

+
+
+ +
CARMEL- MALT
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem amet voluptatum, animi suscipit ipsum nam?

+
+ +
+
+
+
Availability :
+

YEAR ROUND

+
+
+ + + + +
+
+
+
+ +
+
+
BEER 101
+

BEER 101:DOUBLE IPA

+

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? + +

+ +
+ +
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/l-1-removebg-preview.png b/l-1-removebg-preview.png new file mode 100644 index 0000000..a68a03f Binary files /dev/null and b/l-1-removebg-preview.png differ diff --git a/l3-removebg-preview.png b/l3-removebg-preview.png new file mode 100644 index 0000000..8e7bf37 Binary files /dev/null and b/l3-removebg-preview.png differ diff --git a/l4-removebg-preview.png b/l4-removebg-preview.png new file mode 100644 index 0000000..2ab0434 Binary files /dev/null and b/l4-removebg-preview.png differ diff --git a/lagunitas-bootle-removebg-preview.png b/lagunitas-bootle-removebg-preview.png new file mode 100644 index 0000000..4703793 Binary files /dev/null and b/lagunitas-bootle-removebg-preview.png differ diff --git a/lagunitas-dog-removebg-preview.png b/lagunitas-dog-removebg-preview.png new file mode 100644 index 0000000..858d8ef Binary files /dev/null and b/lagunitas-dog-removebg-preview.png differ diff --git a/lagunitas_logo-removebg-preview.png b/lagunitas_logo-removebg-preview.png new file mode 100644 index 0000000..6bebda5 Binary files /dev/null and b/lagunitas_logo-removebg-preview.png differ diff --git a/main_bottle_img.png b/main_bottle_img.png new file mode 100644 index 0000000..2605c2f Binary files /dev/null and b/main_bottle_img.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..5733469 --- /dev/null +++ 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 + } +}) diff --git a/style.css b/style.css new file mode 100644 index 0000000..6c69219 --- /dev/null +++ b/style.css @@ -0,0 +1,643 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +html,body{ + width: 100%; + height: 100%; + overflow-x: hidden !important; +} + +.bg{ + min-height: 100vh; + background-color: #f7f2ea; + /* padding: 2vh 0vw; */ + width: 100vw; + +} + + +/* nav-left & nav- top */ +.nav-top{ + position: fixed; + min-height: 100px; + width: calc(100vw - 70px); + left: 70px; + display: flex; + /* background-color: red; */ + align-items: center; + padding: 0px 40px; + overflow: hidden; + z-index: 999; + justify-content: space-between; +} +.nav-top > img{ + height: 40px; +} +.nav-top > button{ + padding: 10px 12px; + border: none; + font-family: 'Oswald', sans-serif; + font-weight: 790; + color: #fff; + background-color: rgb(175,15,41); +} +.nav-top > button:hover{ + opacity: 0.7; +} + +.nav-left{ + position: fixed; + min-height: 100vh; + background-color:rgb(244,239,230); + width: 70px; + padding: 40px 0; + overflow: hidden; + display: flex; + align-items: center; + justify-content: flex-start; + flex-direction: column; + z-index: 999; + border-right:2px solid #000; + +} +.nav-left > i{ + font-size: 20px; + font-weight: 700; + margin: 10px 0; +} + + +/* main & img */ +.main{ + position: absolute; + min-height: 100vh; + background-color:rgb(244,239,230); + width: calc(100vw - 70px); + top: 0; + left: 4vw; + right: 0; + scroll-behavior: smooth; + overflow-y: hidden !important; + overflow-x: hidden; +} +.main::-webkit-scrollbar{ + display: none; +} +#bottle_img{ + height: 68vw !important; + position: absolute; + z-index: 9999 !important; + top: 50vh; + left: 50vw; + margin-top: -8vmax !important; + transform: translate(-50%, -50%); +} +/* Page 1 */ +.page1{ + min-height: 100vh; + width: 100vw; + background-color:rgb(244,239,230); + display: flex; + align-items: center; + justify-content: center; + position: relative; +} +.page1 h1{ + width: 70%; + margin-top: 60px; + font-size: 200px; + text-align: center; + line-height:170px; + font-weight: 900; + /* margin-left: 140px; */ + letter-spacing: 0.1px; + text-transform:uppercase; + font-family: druk heavy; + background: url(./texture.png); + background-repeat: repeat; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-position: center; + background-size: cover; + -webkit-font-smoothing: antialiased; + z-index: 97; + background-color: rgb(163, 18, 18); +} +.page1 > .logo{ + position: absolute; + top: 17%; + left: 35%; + width: 130px; + z-index: 999; + transform: rotate(-30deg); +} + +/* Page 2 */ +.page2{ + width: 100vw; + min-height: 100vh; + position: relative; + background-color:rgb(244,239,230); +} +.page2 > .page2-left{ + width: 350px; + /* min-height: 430px; */ + /* background-color: blue; */ + position: absolute; + left: 10%; + z-index:99; +} +.page2-left > h6{ + font-family: 'Dancing Script', cursive; + font-size: 20px; + margin-bottom: 10px; +} +.page2-left > h1{ + font-size: 60px; + line-height: 60px; + font-weight: 900; + text-transform:uppercase; + font-family: 'Oswald', sans-serif; + background: url(./texture.png); + background-repeat: repeat; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-position: center; + background-size: cover; + background-color: #000; + -webkit-font-smoothing: antialiased; + z-index: 97; + margin-bottom: 20px; +} +.page2-left > p{ + font-family: 'Roboto', sans-serif; + font-weight: 500; +} +.page2-left > button{ + padding: 10px 19px ; + font:100 1vmax 'Oswald', sans-serif; + font-weight: 800; + border: none; + color: white; + background-color: #000; +} +.page2 > .page2-right{ + width: 350px; + /* height: 450px; */ + /* background-color: blue; */ + border: 1px solid black; + position: absolute; + padding-left:40px; + padding-top: 40px; + padding-bottom: 40px; + right: 10%; + z-index:99; +} +.page2-right > .con1{ + width: 250px; + height: 10vh; + margin-top: 10px; + display: flex; + align-items: center; + justify-content: space-evenly; + /* background-color: white; */ +} +.page2-right > .con1 > .l1{ + font:100 1vmax 'Oswald', sans-serif; + font-weight: 800; + font-size: 40px; + margin-right: 10px; +} +.page2-right > .con1 > .r1{ + font-family: 'Roboto', sans-serif; + font-weight: 500; + font-size: 14px; +} +.page2-right > .con2{ + width: 250px; + height: 10vh; + margin-top: 10px; + display: flex; + align-items: center; + justify-content: space-evenly; + /* background-color: white; */ +} +.page2-right > .con2 > .r1{ + font-family: 'Roboto', sans-serif; + font-weight: 500; + font-size: 13px; +} +.page2-right > .con2 > .l1{ + font:100 1vmax 'Oswald', sans-serif; + font-weight: 800; + font-size: 40px; + margin-right: 10px; +} + +.page2-right > .con3{ + width: 250px; + height: 10vh; + margin-top: 10px; + display: flex; + align-items: center; + justify-content: space-evenly; + /* background-color: white; */ +} +.page2-right > .con3 > .r1{ + font-family: 'Roboto', sans-serif; + font-weight: 500; + font-size: 13px; +} +.page2-right > .con3 > .l1{ + font:100 1vmax 'Oswald', sans-serif; + font-weight: 800; + font-size: 40px; + margin-right: 10px; +} +.page2-right > .con3 > .l1 > span{ + font:100 1vmax 'Oswald', sans-serif; + font-weight: 800; + font-size: 30px; + margin-right: 10px; +} +.page2-right > h4{ + font:100 1vmax 'Oswald', sans-serif; + font-weight: 800; + margin-bottom: 8px; +} +.page2-right > h6{ + font-family: 'Roboto', sans-serif; + font-weight: 500; + margin-top: 9px; + + +} +.page2-right > hr{ + width: 80%; + background-color: black; +} + +/* Page 3 */ +.page3{ + width: 100vw; + min-height: 100vh; + position: relative; + background-color:rgb(244,239,230); + /* background-color: red; */ +} + +.page3 > .page3-top{ + width: 100vw; + /* min-height: 59vh; */ + /* margin-left: 150px; + margin-bottom: 10px; */ + /* position: absolute; */ + /* bottom: 75%; */ + /* background-color: blue; */ +} +.page3 > .page3-top > h1{ + font-size: 18vw; + font-weight: 900; + text-transform:uppercase; + text-align: center; + font-family: druk heavy; + background: url(./texture.png); + background-repeat: repeat; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-position: center; + background-size: cover; + background-color:rgb(163, 18, 18); + -webkit-font-smoothing: antialiased; + z-index: 97; +} + +.bottom_wrapper{ + display: flex; + justify-content: space-around; +} + +.page3 .page3-left{ + width: 350px; + /* height: 200px; */ + /* position: absolute; + top: 20%; + left: 10.4%; */ + /* padding: 0 4vw; */ + position: relative; + /* background-color: blue; */ +} +.page3 .page3-left > img { + width: 400px; +} + +.page3 .page3-left > i { + font-size: 70px; + font-weight: 700; + position: absolute; + top: 30%; + color: red; + left: 50%; +} +.page3 .page3-left > h4{ + width: inherit; + font-family: 'Caveat', cursive; + font-size: 25px; +} + +.page3 .page3-right{ + width: 500px; + /* margin-right: 4vw; */ + /* height: 550px; */ + /* background-color: blue; */ +} +.page3 .page3-right > h5{ + font-size: 15px; + font-family: 'Oswald', sans-serif; + margin-bottom: 30px; +} +.page3 .page3-right > h1{ + font-size: 28px; + font-family:druk heavy; + margin-bottom: 30px; +} +.page3 .page3-right > h6{ + font-family: 'Reem Kufi Ink', sans-serif; + margin-top: 25px; +} + +/* page4 */ + +.page4{ + width: 100vw; + min-height: 100vh; + position: relative; + overflow: hidden; + /* background-color: red; */ + background-color:rgb(244,239,230); +} + +.spot1{ + width: 250px; + min-height: 250px; + position: absolute; + top: 0%; + left: 5%; + /* background-color: #000; */ +} +.spot1 > h6{ + font-family: 'Oswald', sans-serif; + font-size: 15px; + text-decoration: underline #fff 1.4px; + font-weight: 500; + color: #fff; + position: absolute; + top: 25%; + left: 50%; +} +.spot1 > p{ + font-family: 'Inter Tight', sans-serif; + color: #fff; + font-size: 15px; + position: absolute; + top: 35%; + left: 50%; + +} +.spot1 > .redspot{ + width: 290px; + position: absolute; + top: 4%; + left: -1%; +} + +.page4 > .spot > img { + width: 350px; +} +.page4 > .spot{ + width: 250px; + min-height: 250px; + position: absolute; + top: 48%; + left: 17%; + /* background-color: #000; */ +} +.page4 > .spot > h6{ + font-family: 'Oswald', sans-serif; + text-align: center; + font-size: 15px; + text-decoration: underline #fff 1.4px; + font-weight: 500; + color: #fff; + position: absolute; + top: 20%; + left: 70%; +} +.page4 > .spot > p{ + font-family: 'Inter Tight', sans-serif; + color: #fff; + font-size: 15px; + position: absolute; + width: 10vw; + top: 28%; + left: 60%; + +} +.page4 > .spot2 > img { + width: 350px; +} +.page4 > .spot2{ + width: 250px; + min-height: 250px; + position: absolute; + top: 21%; + right: 15%; + +} +.page4 > .spot2 > h6{ + font-family: 'Oswald', sans-serif; + text-align: center; + font-size: 15px; + text-decoration: underline #fff 1.4px; + font-weight: 500; + color: #fff; + position: absolute; + top: 25%; + right: 5%; +} +.page4 > .spot2 > p{ + font-family: 'Inter Tight', sans-serif; + color: #fff; + font-size: 15px; + width: 10vw; + /* text-align: center; */ + position: absolute; + top: 34%; + left:50%; + +} +.page4 > .bottle{ + width: 19%; + position: absolute; + top: 37%; + left: 6%; + transform: rotate(-15deg); + filter: brightness(120%); + filter: contrast(120%); + filter: drop-shadow(10px 10px 10px rgb(196, 96, 19)); +} + +/* page5 */ + +.page5{ + width: 100vw; + min-height: 100vh; + margin-top: 10vmax; + position: relative; + /* background-color: red; */ + background-color:rgb(244,239,230); +} +.page5 > .top{ + width: 100vw; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + /* background-color: blue; */ + /* min-height: 30vh; */ + /* background-color: red; */ +} +.page5 > .top > h6{ + font-size: 35px; + font-weight: 900; + font-family: 'Dancing Script', cursive; + +} +.page5 > .top > h1{ + font-size: 150px; + font-weight: 900; + font-family:druk heavy; + background: url(./texture.png); + background-repeat: repeat; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-position: center; + background-size: cover; + background-color:#000; + -webkit-font-smoothing: antialiased; + z-index: 97; +} +.page5 > .images{ + width: 100vw; + /* background-color: blue; */ + display: flex; + justify-content: center; + align-items: center; + /* position: absolute; + top: 87%; + left: 12%; */ + /* background-color: red; */ +} + +.page5 > .images>img{ + height: 20vw; +} + + .page5 > .images >.l1{ + position: absolute; + top: 38%; + left: 5%; + margin: 0 3vmax; +} +.page5 > .images >.l2{ + position: absolute; + top: 35%; + left: 29%; + margin-right: 8vmax; +} +.page5 > .images >.l3{ + position: absolute; + top: 39%; + left: 63%; + margin-left: 10vmax; +} + +.page5 > .images >.l4{ + position: absolute; + top: 39%; + left: 56%; + margin: 0 3vmax; +} + +/* page_7 */ + +.page7{ + width: 100vw; + min-height: 100vh; + position: relative; + background-color:rgb(244,239,230); + /* background-color: red; */ + display: flex; +} + +.page7 .left{ + width: 50vw; + /* background-color: blue; */ + padding: 0 2vw; + display: flex; + flex-direction: column; + justify-content: center; +} + +.page7 .left>img{ + width: 45vw; + min-height: 65vh; +} +.page7 .left>img:hover{ + padding: 5px; + border: dotted rgb(163, 18, 18); +} +.page7 > .right{ + width: 50vw; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + /* position: absolute; + right:6%; + top: 103%; */ +} +.page7 > .right > h6{ + font-family: 'Courgette', cursive; + font-size: 30px; +} +.page7 > .right > h1{ + font-family:druk heavy; + font-size: 50px; + margin: 3vh 0 ; + font-weight: 900; +} +.page7 > .right > p{ + width: 80%; + font-family: 'Inconsolata', monospace; + font-size: 20px; + font-weight: 500; +} +.page7 > .right > button{ + padding: 10px 25px; + border: none; + background-color: black; + color: #fff; + font-weight:600; + margin: 3vh 0 ; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +.page7 > .right > button:hover{ + background-color:rgb(163, 18, 18) ; +} +.page7 > .right >h1:hover{ + color:rgb(163, 18, 18) ; + cursor: pointer; +} \ No newline at end of file diff --git a/texture.png b/texture.png new file mode 100644 index 0000000..5cce23e Binary files /dev/null and b/texture.png differ diff --git a/youtube-removebg-preview.png b/youtube-removebg-preview.png new file mode 100644 index 0000000..be74d7f Binary files /dev/null and b/youtube-removebg-preview.png differ