├── img ├── README.md ├── ipa.png ├── image1.png ├── image2.png ├── image3.png ├── image4.png ├── new1.webp ├── new2.webp ├── dogimage.png ├── texture.png ├── Green-LSS.png ├── splat-black.png ├── youtube_imgae.jpg ├── lagunitas-logo.png ├── DTH_ProgramBanner.jpg └── LittleSumpin_MasonJar_Photo-671x1024.png ├── demo.txt ├── script.js ├── index.html └── style.css /img/README.md: -------------------------------------------------------------------------------- 1 | # Lagunitas 2 | -------------------------------------------------------------------------------- /img/ipa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/ipa.png -------------------------------------------------------------------------------- /img/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/image1.png -------------------------------------------------------------------------------- /img/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/image2.png -------------------------------------------------------------------------------- /img/image3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/image3.png -------------------------------------------------------------------------------- /img/image4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/image4.png -------------------------------------------------------------------------------- /img/new1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/new1.webp -------------------------------------------------------------------------------- /img/new2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/new2.webp -------------------------------------------------------------------------------- /img/dogimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/dogimage.png -------------------------------------------------------------------------------- /img/texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/texture.png -------------------------------------------------------------------------------- /img/Green-LSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/Green-LSS.png -------------------------------------------------------------------------------- /img/splat-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/splat-black.png -------------------------------------------------------------------------------- /img/youtube_imgae.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/youtube_imgae.jpg -------------------------------------------------------------------------------- /img/lagunitas-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/lagunitas-logo.png -------------------------------------------------------------------------------- /img/DTH_ProgramBanner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/DTH_ProgramBanner.jpg -------------------------------------------------------------------------------- /img/LittleSumpin_MasonJar_Photo-671x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadaf/Lagunitas-Website-YouTube/HEAD/img/LittleSumpin_MasonJar_Photo-671x1024.png -------------------------------------------------------------------------------- /demo.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | function show(){ 17 | gsap.registerPlugin(ScrollTrigger); 18 | const locoScroll = new LocomotiveScroll({ 19 | el: document.querySelector("#main"), 20 | smooth: true 21 | }); 22 | locoScroll.on("scroll", ScrollTrigger.update); 23 | ScrollTrigger.scrollerProxy("#main", { 24 | scrollTop(value) { 25 | return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; 26 | }, 27 | getBoundingClientRect() { 28 | return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; 29 | }, 30 | pinType: document.querySelector("#main").style.transform ? "transform" : "fixed" 31 | }); 32 | ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); 33 | ScrollTrigger.refresh();} 34 | 35 | show() -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | function show(){ 2 | gsap.registerPlugin(ScrollTrigger); 3 | const locoScroll = new LocomotiveScroll({ 4 | el: document.querySelector("#main"), 5 | smooth: true 6 | }); 7 | locoScroll.on("scroll", ScrollTrigger.update); 8 | ScrollTrigger.scrollerProxy("#main", { 9 | scrollTop(value) { 10 | return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; 11 | }, 12 | getBoundingClientRect() { 13 | return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; 14 | }, 15 | pinType: document.querySelector("#main").style.transform ? "transform" : "fixed" 16 | }); 17 | ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); 18 | ScrollTrigger.refresh();} 19 | 20 | show() 21 | 22 | gsap.to("#bottle", { 23 | rotate: -15, 24 | scrollTrigger: { 25 | trigger: "#bottle", 26 | scroller: "#main", 27 | start: "top 5%", 28 | end: "top -416%", 29 | scrub: true, 30 | pin: true 31 | 32 | } 33 | }) 34 | 35 | gsap.to("#bottle", { 36 | scale: 0.5, 37 | scrollTrigger: { 38 | trigger: "#page5 h1", 39 | scroller: "#main", 40 | start: "top 430%", 41 | end: "top -430%", 42 | scrub: true, 43 | pin: true 44 | 45 | } 46 | }) 47 | 48 | let t1 = gsap.timeline() 49 | t1.from("#main #page1_dog_image", { 50 | opacity: 0, 51 | duration: 1, 52 | scale: 0.1, 53 | }) 54 | 55 | t1.from("#bottle", { 56 | opacity: 0, 57 | duration: 1, 58 | scale: 0.2, 59 | }) 60 | 61 | t1.from("#nav_top>button", { 62 | xPrecent:200, 63 | }) 64 | 65 | gsap.from("#page2_part1>button",{ 66 | scrollTrigger: { 67 | trigger: ("#page2_part1>button"), 68 | scroller: ("#main"), 69 | start: "top 70%", 70 | }, 71 | xPrecent:-300, 72 | duration:1, 73 | }) 74 | 75 | 76 | gsap.from("#page6_part6>button",{ 77 | scrollTrigger: { 78 | trigger: ("#page6_part2>button"), 79 | scroller: ("#main"), 80 | start: "top 70%", 81 | }, 82 | xPrecent:600, 83 | duration:1, 84 | }) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lagunitas | Technical Mickey 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 25 |
26 | 27 | 28 |
29 |

unlimited release

30 | 31 |
32 | 33 |
34 |
35 |

unlimited release

36 |

India Pale Ale

37 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias, 38 | officia error? Totam unde nulla ea repudiandae, corporis optio recusandae 39 | repellat asperiores minima voluptate soluta laboriosam debitis architecto 40 | quaerat fugiat nostrum aliquam. Minima ratione sequi omnis ipsa beatae ab odio 41 | id ad, voluptates fuga incidunt nisi. 42 |

43 | 44 |
45 |
46 |

ABV

47 |
Alcohole by valume
48 |
49 |

6.2 %

50 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis mollitia corporis facere 51 | ullam hic tempore unde quaerat quisquam 52 |

53 |
54 |

IBU

55 |
Isn't Reservation Units
56 |
57 |

51 .1

58 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis mollitia corporis facere 59 | ullam hic tempore unde quaerat quisquam 60 |

61 |
62 |
63 |

ABV

64 |
Alcohole by valume
65 |
66 |

6.2 %

67 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis mollitia corporis facere 68 | ullam hic tempore unde quaerat quisquam 69 |

70 |
71 |
72 |
73 |
74 | 75 |
76 |

MounthFeels

77 |
78 |
79 | 80 | 81 | 82 |
Hear it from our beamonster jeremy marshall
83 |
84 |
85 |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi officiis omnis fuga ipsum, molestias voluptates rem vitae perferendis, illo sit aliquid tenetur nisi.
86 |

STYLE

87 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur est quaerat cumque veritatis, non nisi voluptatibus et veniam, excepturi illo neque! Quos, explicabo. Ad deserunt quos harum, ducimus explicabo doloribus.

88 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur est quaerat cumque veritatis, non nisi voluptatibus et veniam, excepturi illo neque! Quos, explicabo. Ad deserunt quos harum, ducimus explicabo doloribus.

89 |
90 |
91 |
92 | 93 |
94 |
95 | 96 |
97 |

tropical

98 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia harum accusamus placeat distinctio iusto exercitationem labore nulla atque temporibus beatae?

99 |
100 |
101 |
102 | 103 |
104 |

pink

105 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia harum accusamus placeat distinctio iusto exercitationem labore nulla atque temporibus beatae?

106 |
107 |
108 |
109 | 110 |
111 |

caramel-malt

112 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia harum accusamus placeat distinctio iusto exercitationem labore nulla atque temporibus beatae?

113 |
114 |
115 | 116 | 117 | 118 |
119 | 120 |
121 |
Availability
122 |

year round

123 |
124 |
125 | 126 |

On Top

127 |
128 |
129 | 130 |

22 oz Bottles

131 |
6-PACK
132 |
133 |
134 | 135 |

22 oz Bottles

136 |
6-PACK
137 |
138 |
139 | 140 |

21 oz Bottles

141 | 142 |
143 |
144 | 145 |

33 oz Bottles

146 | 147 |
148 |
149 | 150 |
151 | 152 |
153 |
154 | 155 |
156 |
157 |
Recipes
158 |

Beer Speaks. Bellies Grumble.

159 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum maiores saepe, ex magnam temporibus repellendus nobis doloremque voluptates quis ad fugit rem similique, porro, neque voluptate numquam quae? Repudiandae, ratione!

160 | 161 |
162 |
163 | 164 | 165 | 166 |
167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | html, body { 7 | width: 100%; 8 | height: 100%; 9 | } 10 | #main { 11 | width: 100vw; 12 | min-height: 100vh; 13 | overflow-y: hidden !important; 14 | scroll-behavior: smooth; 15 | } 16 | ::-webkit-scrollbar { 17 | display: none; 18 | overflow-x: hidden; 19 | overflow-y: hidden; 20 | } 21 | 22 | /* Nav Top Css */ 23 | 24 | #nav_top { 25 | width: 94.2vw; 26 | height: 12vh; 27 | padding: 0 4.5vw 0 4vw; 28 | left: 5vw; 29 | display: flex; 30 | justify-content: space-between; 31 | align-items: center; 32 | position: absolute; 33 | z-index: 1; 34 | } 35 | #nav_top>img { 36 | height: 50px; 37 | } 38 | #nav_top>button { 39 | padding: 7px 16px; 40 | font-family: "druk heavy"; 41 | font-size: 20px; 42 | text-transform: uppercase; 43 | font-weight: 800; 44 | line-height: 24px; 45 | color: #fff; 46 | white-space: nowrap; 47 | background-color: rgb(199, 29, 29); 48 | border-style: none; 49 | cursor: pointer; 50 | } 51 | 52 | #nav_top>i { 53 | font-size: 2.5vw; 54 | display: none; 55 | } 56 | /* Nav Left Css */ 57 | 58 | #nav_left { 59 | width: 5vw; 60 | height: 100vh; 61 | display: flex; 62 | flex-direction: column; 63 | padding: 25px 0; 64 | align-items: center; 65 | position: absolute; 66 | z-index: 1; 67 | gap: 2vmax; 68 | border-right: 2px solid rgb(43, 42, 42); 69 | } 70 | 71 | /* Bottle Image */ 72 | 73 | #bottle { 74 | position: absolute; 75 | height: 95vh; 76 | top: 0%; 77 | left: 38%; 78 | z-index: 990; 79 | border-image: 0 0 2vmax black; 80 | } 81 | #bottlecopy { 82 | display: none; 83 | } 84 | 85 | /* Page1 Css */ 86 | 87 | #page1 { 88 | width: 100vw; 89 | height: 100vh; 90 | display: flex; 91 | justify-content: center; 92 | align-items: center; 93 | position: relative; 94 | } 95 | #page1 h1 { 96 | width: 60vw; 97 | background-color: rgb(153, 13, 13); 98 | font-family: 'Antom', sans-serif; 99 | font-size: 13vw; 100 | font-weight: 900; 101 | text-align: center; 102 | word-spacing: -1.5vw; 103 | text-transform: uppercase; 104 | line-height: 12vw; 105 | background-image: url(img/texture.png); 106 | background-position: center; 107 | background-size: cover; 108 | background-repeat: no-repeat; 109 | -webkit-background-clip: text; 110 | -webkit-text-fill-color: transparent; 111 | -webkit-font-smoothing: antialiased; 112 | } 113 | #page1_dog_image { 114 | height: 15vh; 115 | position: absolute; 116 | top: 17%; 117 | left: 34.5%; 118 | transform: rotate(-30deg); 119 | } 120 | 121 | /* Page 2 Css */ 122 | 123 | 124 | #page2 { 125 | width: 100vw; 126 | height: 100vh; 127 | display: flex; 128 | justify-content: space-between; 129 | align-items: center; 130 | padding: 0 4.1vw 0 10vw; 131 | } 132 | 133 | #page2_part1 { 134 | width: 25vw; 135 | height: 79vh; 136 | } 137 | #page2_part1 h3 { 138 | font-family: dancing script; 139 | margin-bottom: 12px; 140 | } 141 | #page2_part1 h1 { 142 | width: 25vw; 143 | height: 30vh; 144 | font-size: 7vw; 145 | line-height: 14vh; 146 | font-weight: 500; 147 | font-family: 'Anton', sans-serif; 148 | text-transform: uppercase; 149 | margin-bottom: 12px; 150 | word-spacing: -1vmax; 151 | background: url(img/texture.png); 152 | background-position: top; 153 | background-repeat: no-repeat; 154 | background-size: cover; 155 | -webkit-background-clip: text; 156 | -webkit-text-fill-color: transparent; 157 | background-color: black; 158 | -webkit-font-smoothing: antialiased; 159 | } 160 | #page2_part1>p { 161 | font-family: Gilroy; 162 | color: #111; 163 | font-size: 13px; 164 | font-weight: 500; 165 | line-height: 22px; 166 | margin-bottom: 15px; 167 | } 168 | #page2_part1>button { 169 | padding: 10px 20px; 170 | font-family: "druk heavy"; 171 | font-size: 18px; 172 | text-transform: uppercase; 173 | font-weight: 800; 174 | line-height: 20px; 175 | white-space: nowrap; 176 | background-color: black; 177 | border-style: none; 178 | cursor: pointer; 179 | color: #fff; 180 | } 181 | 182 | #page2_part2 { 183 | width: 26.5vw; 184 | height: 65vh; 185 | padding: 3.5vmax 3.5vmax; 186 | border: 0.2vmax solid black; 187 | box-shadow: 0 0 0.2vmax black; 188 | font-family: Gilroy; 189 | } 190 | #page2_part2 h3 { 191 | font-size: 15px; 192 | margin-bottom: 3px; 193 | font-weight: 600; 194 | } 195 | #page2_part2 h5 { 196 | font-size: 13px; 197 | margin-bottom: 6px; 198 | font-weight: 600; 199 | color: #666; 200 | } 201 | 202 | 203 | #box { 204 | display: flex; 205 | justify-content: space-between; 206 | align-items: center; 207 | border-top: 0.2vmax solid black; 208 | margin-bottom: 1vh; 209 | } 210 | #page2_part2 p { 211 | font-size: 10px; 212 | width: 12vw; 213 | color: #111; 214 | line-height: 13px; 215 | font-weight: 600; 216 | } 217 | 218 | #box h2 { 219 | font-size: 40px; 220 | font-family: "druk heavy"; 221 | } 222 | #box h2 span { 223 | font-size: 30px; 224 | } 225 | 226 | /* page 3 css */ 227 | 228 | 229 | #page3 { 230 | width: 100vw; 231 | height: 110vh; 232 | padding: 0 5vmax 0 10vmax; 233 | } 234 | 235 | #page3 h1 { 236 | width: 85vw; 237 | font-size: 18.3vw; 238 | line-height: 18.5vw; 239 | font-weight: 500; 240 | font-family: 'Anton', sans-serif; 241 | text-transform: uppercase; 242 | background: url(img/texture.png); 243 | background-position: center; 244 | background-repeat: no-repeat; 245 | background-size: cover; 246 | -webkit-background-clip: text; 247 | -webkit-text-fill-color: transparent; 248 | background-color: rgb(177, 29, 29); 249 | } 250 | #page3_text { 251 | display: flex; 252 | justify-content: space-between; 253 | } 254 | #page3_text_part1 a img { 255 | width: 25vw; 256 | margin-top: 3vh; 257 | } 258 | #page3_text_part1 h5 { 259 | width: 23vw; 260 | font-size: 2vw; 261 | margin-top: 3vh; 262 | line-height: 4vh; 263 | font-family: Gilroy; 264 | } 265 | 266 | #page3_text_part2 { 267 | width: 30vw; 268 | padding: 1vmax 2vmax; 269 | } 270 | #page3_text_part2 h5 { 271 | width: 25vw; 272 | font-size: 1vmax; 273 | font-family: 'Dosis', sans-serif; 274 | font-weight: 100; 275 | } 276 | #page3_text_part2 h2 { 277 | margin-top: 2vmax; 278 | font-family: 'Anton', sans-serif; 279 | font-size: 1.5vmax; 280 | font-weight: 100; 281 | letter-spacing: 0.05vmax; 282 | 283 | } 284 | #page3_text_part2 p { 285 | margin-top: 3vh; 286 | font-family: 'Dosis', sans-serif; 287 | font-weight: 100; 288 | } 289 | 290 | /* Page 4 css */ 291 | 292 | #page4 { 293 | width: 100vw; 294 | height: 100vh; 295 | display: flex; 296 | position: relative; 297 | } 298 | 299 | #page4_color_image1 { 300 | width: 20vw; 301 | margin: 0vh 0 0 20vh; 302 | } 303 | #page4_color_image1_text { 304 | width: 13vw; 305 | position: absolute; 306 | top: 5%; 307 | left: 15%; 308 | color: #fff; 309 | text-align: center; 310 | } 311 | #page4_color_image1_text h4 { 312 | width: 8vw; 313 | margin-bottom: 1vh; 314 | margin-left: 3vmax; 315 | font-family: 'Anton', sans-serif; 316 | border-bottom: 0.2vmax solid #000; 317 | font-weight: 100; 318 | letter-spacing: 0.1vmax; 319 | text-transform: uppercase; 320 | } 321 | 322 | 323 | 324 | #page4_color_image2 { 325 | width: 21vw; 326 | margin: 26vh 0 0 -6vh; 327 | } 328 | 329 | #page4_color_image2_text { 330 | width: 13vw; 331 | position: absolute; 332 | top: 32%; 333 | left: 33%; 334 | color: #fff; 335 | text-align: center; 336 | } 337 | #page4_color_image2_text h4 { 338 | width: 4vw; 339 | margin-left: 5vmax; 340 | font-family: 'Anton', sans-serif; 341 | border-bottom: 0.2vmax solid #000; 342 | font-weight: 100; 343 | letter-spacing: 0.1vmax; 344 | text-align: center; 345 | text-transform: uppercase; 346 | 347 | } 348 | 349 | 350 | 351 | #page4_color_image3 { 352 | width: 25vw; 353 | margin: 20vh 0 0 40vh; 354 | } 355 | #page4_color_image3_text { 356 | width: 15vw; 357 | position: absolute; 358 | top: 30%; 359 | left: 74%; 360 | color: #fff; 361 | text-align: center; 362 | } 363 | #page4_color_image3_text h4 { 364 | width: 8vw; 365 | margin-bottom: 1vh; 366 | margin-left: 3.5vmax; 367 | text-transform: uppercase; 368 | font-family: 'Anton', sans-serif; 369 | border-bottom: 0.2vmax solid #000; 370 | font-weight: 100; 371 | letter-spacing: 0.1vmax; 372 | text-transform: uppercase; 373 | } 374 | 375 | #page4_color_image4 { 376 | width: 16vw; 377 | height: 50vh; 378 | margin: 45vh 0 0 -165vh; 379 | transform: rotate(-17deg); 380 | } 381 | 382 | 383 | /* Page 5 css */ 384 | 385 | 386 | #page5 { 387 | width: 100vw; 388 | height: 110vh; 389 | padding: 0 0 0 0; 390 | display: flex; 391 | justify-content: flex-start; 392 | align-items: center; 393 | flex-direction: column; 394 | } 395 | #page5 h5 { 396 | font-size: 2.5vmax; 397 | font-family: Gilroy; 398 | } 399 | #page5 h1 { 400 | width: 30vw; 401 | text-transform: uppercase; 402 | font-family: 'Anton',sans-serif; 403 | font-weight: 600; 404 | font-size: 6.5vw; 405 | background: url(img/texture.png); 406 | background-position: top; 407 | background-repeat: no-repeat; 408 | background-size: cover; 409 | -webkit-background-clip: text; 410 | -webkit-text-fill-color: transparent; 411 | background-color: black; 412 | } 413 | 414 | 415 | 416 | #page5_image_box { 417 | width: 100vw; 418 | height: 85vh; 419 | padding: 0 3vw 0 5vw; 420 | display: flex; 421 | align-items: center; 422 | justify-content: space-evenly; 423 | } 424 | #page5_bottel { 425 | width: 15vw; 426 | height: 60vh; 427 | justify-content: center; 428 | } 429 | #page5_bottel h4 { 430 | display: flex; 431 | align-items: center; 432 | justify-content: space-around; 433 | text-align: center; 434 | font-family: Gilroy; 435 | } 436 | 437 | #page5_bottel img { 438 | width: 15vw; 439 | } 440 | #image11 { 441 | height: 48vh; 442 | } 443 | #image22 { 444 | transform: rotate(-15deg); 445 | } 446 | #image33 { 447 | height: 47vh; 448 | opacity: 0; 449 | transform: rotate(-15deg); 450 | } 451 | #image44 { 452 | transform: rotate(-15deg); 453 | } 454 | #image55 { 455 | transform: rotate(-15deg); 456 | } 457 | #page5_bottel h4 { 458 | font-family: 'Dosis', sans-serif; 459 | } 460 | #page5_bottel h6 { 461 | display: flex; 462 | justify-content: space-around; 463 | font-family: Gilroy; 464 | font-size: 1.1vmax; 465 | } 466 | 467 | 468 | /* Page 6 */ 469 | 470 | #page6 { 471 | width: 100vw; 472 | height: 90vh; 473 | padding: 0 0vw 0 9vw; 474 | display: flex; 475 | gap: 30px; 476 | } 477 | #page6 img { 478 | width: 50vw; 479 | height: 62vh; 480 | } 481 | 482 | #page5_part2 { 483 | padding: 0 4vw 0 4vw; 484 | width: 40vw; 485 | height: 62vh; 486 | } 487 | #page6_part2 h5 { 488 | font-size: 2vmax; 489 | font-family: Gilroy; 490 | } 491 | 492 | #page6_part2 h1 { 493 | margin-top: 3vh; 494 | width: 30vw; 495 | font-family: 'Anton', sans-serif; 496 | font-size: 4vw; 497 | font-weight: 100; 498 | line-height: 9.5vh; 499 | letter-spacing: 0.5vw; 500 | text-transform: uppercase; 501 | } 502 | #page6_part2 p { 503 | margin-top: 3vh; 504 | font-weight: 400; 505 | font-family: 'Dosis', sans-serif; 506 | color: #111; 507 | } 508 | #page6_part2>button { 509 | margin-top: 3vh; 510 | font-size: 1.2vmax; 511 | padding: 0.8vmax 1.5vmax; 512 | font-family: 'Anton', sans-serif; 513 | text-transform: uppercase; 514 | font-weight: 100; 515 | color: #fff; 516 | background-color: #000; 517 | border-style: none; 518 | cursor: pointer; 519 | } --------------------------------------------------------------------------------