├── README.md ├── assets ├── 1.mp4 ├── 2.mp4 ├── NeueHaasDisplay-Mediu.ttf ├── NeueHaasDisplay-Mediu.woff ├── NeueHaasDisplay-Roman.ttf ├── NeueHaasDisplay-Roman.woff ├── icecream.png ├── logo.svg └── video1.mp4 ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Sundown-Studio-CLONE 2 | It's a clone website of "https://www.sundown-studio.com/" 3 | -------------------------------------------------------------------------------- /assets/1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Sundown-Studio-CLONE/1d2b629e4bbe97a8f0a5462ef370bd66e83f0533/assets/1.mp4 -------------------------------------------------------------------------------- /assets/2.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Sundown-Studio-CLONE/1d2b629e4bbe97a8f0a5462ef370bd66e83f0533/assets/2.mp4 -------------------------------------------------------------------------------- /assets/NeueHaasDisplay-Mediu.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Sundown-Studio-CLONE/1d2b629e4bbe97a8f0a5462ef370bd66e83f0533/assets/NeueHaasDisplay-Mediu.ttf -------------------------------------------------------------------------------- /assets/NeueHaasDisplay-Mediu.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Sundown-Studio-CLONE/1d2b629e4bbe97a8f0a5462ef370bd66e83f0533/assets/NeueHaasDisplay-Mediu.woff -------------------------------------------------------------------------------- /assets/NeueHaasDisplay-Roman.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Sundown-Studio-CLONE/1d2b629e4bbe97a8f0a5462ef370bd66e83f0533/assets/NeueHaasDisplay-Roman.ttf -------------------------------------------------------------------------------- /assets/NeueHaasDisplay-Roman.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Sundown-Studio-CLONE/1d2b629e4bbe97a8f0a5462ef370bd66e83f0533/assets/NeueHaasDisplay-Roman.woff -------------------------------------------------------------------------------- /assets/icecream.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Sundown-Studio-CLONE/1d2b629e4bbe97a8f0a5462ef370bd66e83f0533/assets/icecream.png -------------------------------------------------------------------------------- /assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /assets/video1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Sundown-Studio-CLONE/1d2b629e4bbe97a8f0a5462ef370bd66e83f0533/assets/video1.mp4 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CODE AASHU | Sundown Studio 8 | 12 | 16 | 17 | 18 | 19 |
20 | 27 | 28 | 29 | 30 |
31 |
32 |
33 | 34 |
35 |
36 |
37 |

EXPERIENCES

38 |

ENVIRONMENT

39 |

CONTENT

40 |
41 |
42 | 150 |
151 |
152 |

153 | Sundown is a multi-disciplinary
studio focused on creating 154 |
unique, end-to-end experiences
and environments. 155 |

156 |

SPACES
THAT
INSPIRE

157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 | 166 |
167 |
168 |
169 |
170 |
171 |

EXPERIENCES

172 | 173 |

CONTENT

174 | 175 |

ENVIRONMENTS

176 | 177 |
178 |
179 |

EXPERIENCES

180 | 181 |

CONTENT

182 | 183 |

ENVIRONMENTS

184 | 185 |
186 |
187 |

EXPERIENCES

188 | 189 |

CONTENT

190 | 191 |

ENVIRONMENTS

192 | 193 |
194 |
195 |
196 |
197 |
198 |
199 |

200 | We are a group of design-driven, goal-focused creators, producers, 201 | and designers who believe that the details make all the 202 | difference. 203 |

204 |
205 |
206 | 210 |

211 | We love to create, we love to solve, we love to collaborate, and 212 | we love to turn amazing ideas into reality. We’re here to partner 213 | with you through every step of the process and know that 214 | relationships are the most important things we build. 215 |

216 |
217 |
218 |
219 | 220 |

FEATURED PROJECTS

221 |
222 |
223 |
224 |
225 |
229 |
230 |

NYFW Popup

231 |
232 |
233 |
AFTERPAY
234 |

Experential

235 |
236 |
237 |
241 |
242 |

Makers Studio HOI

243 |
244 |
245 |
NIKE
246 |

Experential

247 |
248 |
249 |
253 |
254 |

Air Force 12021

255 |
256 |
257 |
NIKE
258 |

Environment

259 |
260 |
261 |
265 |
266 |

SOHO 2023

267 |
268 |
269 |
CONVERSE
270 |

Environment

271 |
272 |
273 |
277 |
278 |

SOHO NYC

279 |
280 |
281 |
ARC'TERYX
282 |

Environment

283 |
284 |
285 |
289 |
290 |

Play New Kidvision

291 |
292 |
293 |
NIKE
294 |

Environment

295 |
296 |
297 |
301 |
302 |

50th Anniversary

303 |
304 |
305 |
NIKE
306 |

Environment

307 |
308 |
309 |
310 |
311 |
312 |
313 | All Projects   ⟶ 314 |
315 |
316 | 317 |

WHO WE WORK WITH

318 |
319 |
320 |
321 |
322 | 325 |

326 | Retained Production support across retail and events in NY, CHI, 327 | LA. Creative Design, Design Management, Production/Project 328 | Management, and execution of work from concept to installation 329 | across the Country. 330 |

331 |
332 |
333 | 336 |

337 | Creative Concepting, Design, Design Management, Project 338 | Management, and execution of work from concept to installation 339 | across the Country. Cross functional communication and 340 | management of third party partners. 341 |

342 |
343 |
344 | 347 |

348 | Production and design along with install oversight and execution 349 | support for the SoHo store opening on Broadway St, New York. 350 | Also working on creative and production work for a new store 351 | opening in Glendale, California. 352 |

353 |
354 |
355 | 358 |

359 | Design and Production partner for Hunter Holiday 2022 Pop-in at 360 | Nordstrom 57th St, New York, including activations in Women’s, 361 | Men’s and Kid’s zones. Thirty-five (35) additional smaller 362 | take-downs in Nordstrom stores across the US. Concept design for 363 | Holiday boot customization events in stores across winter 2022. 364 |

365 |
366 |
367 | 370 |

371 | Creative, Design, and Production Partner for 2023 CES. Scope 372 | Included creation of Branding Identity, Assets, and Digital 373 | Content, Design, Production design, Production oversight and 374 | Installation of client activations for IBM, Delta, Instacart, 375 | and more. 376 |

377 |
378 |
379 | 382 |

383 | Creative, Design, and Production Partner for 2022 NY Fashion 384 | Week Pop-Up space. In Partnership with B-Reel scope including 385 | creation of Final Design, Design Assets, 3D Renders, Production 386 | design, Production/Partner oversight and creation of a two (2) 387 | story pop-up for Afterpay’s clients such as Crocs, JD Sports, 388 | Container Store, & Revolve. 389 |

390 |
391 |
392 |
393 |
394 |
395 |
396 | 427 | 433 | 439 | 440 | 441 | 442 | 443 | 444 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* ===( CODE AASHU )=== */ 2 | function elemHoverAnim() { 3 | const hoverDiv = document.querySelector(".hover-image-div"); 4 | const hoverVideo = document.querySelector(".hover-video-div"); 5 | const hover = document.querySelector(".hover-div"); 6 | const elems = document.querySelectorAll(".elem1"); 7 | 8 | hoverDiv.addEventListener("mouseenter", function () { 9 | hoverDiv.style.display = "block"; 10 | }); 11 | 12 | hoverDiv.addEventListener("mouseleave", function () { 13 | hoverDiv.style.display = "none"; 14 | }); 15 | hoverVideo.addEventListener("mouseenter", function () { 16 | hoverVideo.style.display = "block"; 17 | }); 18 | 19 | hoverVideo.addEventListener("mouseleave", function () { 20 | hoverVideo.style.display = "none"; 21 | }); 22 | hover.addEventListener("mouseenter", function () { 23 | hover.style.display = "block"; 24 | }); 25 | 26 | hover.addEventListener("mouseleave", function () { 27 | hover.style.display = "none"; 28 | }); 29 | 30 | elems.forEach((elem) => { 31 | elem.addEventListener("mouseenter", function () { 32 | event.stopPropagation(); 33 | const imageData = elem.getAttribute("hover-image"); 34 | const videoData = elem.getAttribute("hover-video"); 35 | if (imageData) { 36 | hover.style.display = "block"; 37 | hoverVideo.style.display = "none"; 38 | hoverDiv.style.display = "block"; 39 | hoverDiv.style.backgroundImage = `url(${imageData})`; 40 | } else if (videoData) { 41 | hover.style.display = "block"; 42 | hoverDiv.style.display = "none"; 43 | hoverVideo.style.display = "block"; 44 | hoverVideo.src = videoData; 45 | } 46 | }); 47 | elem.addEventListener("mouseleave", function () { 48 | hover.style.display = "none"; 49 | hoverVideo.style.display = "none"; 50 | hoverDiv.style.display = "none"; 51 | }); 52 | }); 53 | } 54 | elemHoverAnim(); 55 | 56 | var swiper = new Swiper(".mySwiper", { 57 | slidesPerView: 3.5, 58 | spaceBetween: 30, 59 | freeMode: true, 60 | }); 61 | 62 | function sliderHover() { 63 | const mover = document.querySelector(".mover"); 64 | const mySwiper = document.querySelector(".mySwiper"); 65 | 66 | mySwiper.addEventListener("mousemove", (e) => { 67 | gsap.to(mover, { 68 | x: e.x + "px", 69 | y: e.y + "px", 70 | opacity: 1, 71 | scale: 1, 72 | }); 73 | }); 74 | mySwiper.addEventListener("mouseenter", (e) => { 75 | gsap.to(mover, { 76 | opacity: 1, 77 | scale: 1, 78 | }); 79 | }); 80 | mySwiper.addEventListener("mouseleave", (e) => { 81 | gsap.to(mover, { 82 | opacity: 0, 83 | scale: 0, 84 | }); 85 | }); 86 | } 87 | sliderHover(); 88 | 89 | 90 | function smoothScroll(){ 91 | gsap.registerPlugin(ScrollTrigger); 92 | 93 | // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll 94 | 95 | const locoScroll = new LocomotiveScroll({ 96 | el: document.querySelector(".main"), 97 | smooth: true, 98 | }); 99 | // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) 100 | locoScroll.on("scroll", ScrollTrigger.update); 101 | 102 | // tell ScrollTrigger to use these proxy methods for the ".main" element since Locomotive Scroll is hijacking things 103 | ScrollTrigger.scrollerProxy(".main", { 104 | scrollTop(value) { 105 | return arguments.length 106 | ? locoScroll.scrollTo(value, 0, 0) 107 | : locoScroll.scroll.instance.scroll.y; 108 | }, // we don't have to define a scrollLeft because we're only scrolling vertically. 109 | getBoundingClientRect() { 110 | return { 111 | top: 0, 112 | left: 0, 113 | width: window.innerWidth, 114 | height: window.innerHeight, 115 | }; 116 | }, 117 | // 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). 118 | pinType: document.querySelector(".main").style.transform 119 | ? "transform" 120 | : "fixed", 121 | }); 122 | 123 | // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 124 | ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); 125 | 126 | // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. 127 | ScrollTrigger.refresh(); 128 | 129 | } 130 | smoothScroll(); 131 | 132 | function loader(){ 133 | var tl = gsap.timeline(); 134 | tl.from(".loader #one", { 135 | opacity: 1, 136 | }); 137 | tl.to(".loader #one", { 138 | opacity: 0, 139 | }); 140 | tl.from(".loader #two", { 141 | opacity: 0, 142 | }); 143 | tl.to(".loader #two", { 144 | opacity: 1, 145 | }); 146 | tl.to(".loader #two", { 147 | opacity: 0, 148 | }); 149 | tl.from(".loader #three", { 150 | opacity: 0, 151 | }); 152 | tl.to(".loader #three", { 153 | opacity: 1, 154 | }); 155 | tl.to(".loader #three", { 156 | opacity: 0, 157 | }); 158 | tl.to(".loader", { 159 | y: -100 + "%", 160 | }); 161 | } 162 | loader(); 163 | 164 | function smallAnimations(){ 165 | gsap.from(".page3 .elems .elem1 .elem1-1", { 166 | y: 150 + "%", 167 | scrollTrigger: { 168 | trigger: ".page3 .elems .elem1 .elem1-1", 169 | scroller: ".main", 170 | y: 0, 171 | duration: 1, 172 | start: "top 90%", 173 | end: "top 65%", 174 | stagger: 1, 175 | // markers: true, 176 | scrub: true, 177 | }, 178 | }); 179 | gsap.from(".page3 .elems .elem1 .elem1-2", { 180 | y: 150 + "%", 181 | scrollTrigger: { 182 | trigger: ".page3 .elems .elem1 .elem1-2", 183 | scroller: ".main", 184 | y: 0, 185 | duration: 1, 186 | start: "top 90%", 187 | end: "top 65%", 188 | stagger: 1, 189 | // markers: true, 190 | scrub: true, 191 | }, 192 | }); 193 | gsap.from(".page3 .elems .elem1 .elem1-3", { 194 | y: 150 + "%", 195 | scrollTrigger: { 196 | trigger: ".page3 .elems .elem1 .elem1-3", 197 | scroller: ".main", 198 | y: 0, 199 | duration: 1, 200 | start: "top 90%", 201 | end: "top 65%", 202 | stagger: 1, 203 | // markers: true, 204 | scrub: true, 205 | }, 206 | }); 207 | gsap.from(".page4 .swiper .swiper-wrapper", { 208 | y: 100 + "%", 209 | opacity: 0, 210 | scrollTrigger: { 211 | trigger: ".page4 .swiper .swiper-wrapper", 212 | scroller: ".main", 213 | y: 0, 214 | duration: 1.2, 215 | start: "top 120%", 216 | end: "top 100%", 217 | scrub: true, 218 | }, 219 | }); 220 | } 221 | smallAnimations(); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: neuR; 3 | src: url(./assets/NeueHaasDisplay-Roman.ttf); 4 | } 5 | @font-face { 6 | font-family: neuM; 7 | src: url(./assets/NeueHaasDisplay-Mediu.ttf); 8 | } 9 | /* ===( CODE AASHU )=== */ 10 | * { 11 | margin: 0%; 12 | padding: 0%; 13 | box-sizing: border-box; 14 | font-family: neuR; 15 | } 16 | html, 17 | body { 18 | height: 100%; 19 | width: 100%; 20 | overflow-x: hidden; 21 | } 22 | .loader{ 23 | background-color: #0B0500; 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | height: 100vh; 28 | width: 100vw; 29 | z-index: 12; 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | } 34 | .loader h1{ 35 | font-size: 4vw; 36 | position: absolute; 37 | color: transparent; 38 | background: linear-gradient(to right,orangered,orange); 39 | -webkit-background-clip: text; 40 | } 41 | .page1 { 42 | min-height: 100vh; 43 | width: 100vw; 44 | background-color: #efeae3; 45 | position: relative; 46 | } 47 | nav { 48 | width: 100vw; 49 | display: flex; 50 | align-items: center; 51 | justify-content: space-between; 52 | padding: 2.2vw; 53 | } 54 | .nav-links { 55 | display: flex; 56 | align-items: center; 57 | justify-content: space-between; 58 | gap: 8px; 59 | margin-right: 1.2vw; 60 | } 61 | .nav-links a { 62 | text-decoration: none; 63 | color: rgb(51, 51, 51); 64 | border: 1px solid rgba(145, 145, 145, 0.616); 65 | border-radius: 50px; 66 | padding: 0.6vw 1.5vw 1vw; 67 | position: relative; 68 | overflow: hidden; 69 | z-index: 1; 70 | } 71 | .nav-links a::after { 72 | content: ""; 73 | position: absolute; 74 | height: 100%; 75 | width: 100%; 76 | background-color: black; 77 | left: 0%; 78 | border-radius: 50%; 79 | z-index: -1; 80 | bottom: -100%; 81 | transition: all ease-in-out 0.3s; 82 | } 83 | .nav-links a:hover { 84 | color: #fff; 85 | } 86 | 87 | .nav-links a:hover::after { 88 | border-radius: 0; 89 | bottom: 0; 90 | } 91 | .hero-content { 92 | padding: 2.2vw; 93 | } 94 | .hero { 95 | height: 80vh; 96 | display: flex; 97 | justify-content: space-between; 98 | align-items: end; 99 | border-bottom: 1px solid rgb(177, 166, 166); 100 | } 101 | .hero h4 { 102 | font-size: 2vw; 103 | color: rgb(7, 7, 7); 104 | line-height: 1; 105 | margin-bottom: 4vw; 106 | letter-spacing: -0.5px; 107 | } 108 | .hero h1 { 109 | font-size: 11.5vw; 110 | text-align: right; 111 | line-height: 0.8; 112 | font-family: neuM; 113 | letter-spacing: -5px; 114 | color: #0b0500; 115 | margin-bottom: 4vw; 116 | padding-right: 3vw; 117 | } 118 | .video-container { 119 | padding: 2.2vw; 120 | } 121 | .video-container video { 122 | height: 100%; 123 | width: 99%; 124 | object-fit: cover; 125 | border-radius: 20px; 126 | position: relative; 127 | z-index: 3; 128 | } 129 | .goofy1 { 130 | height: 40vw; 131 | width: 40vw; 132 | top: 45vw; 133 | right: 13%; 134 | border-radius: 50%; 135 | position: absolute; 136 | filter: blur(25px); 137 | background-color: orangered; 138 | animation: goofy1 linear infinite 3s alternate; 139 | } 140 | @keyframes goofy1 { 141 | from { 142 | transform: translate(-5%, -5%); 143 | } 144 | to { 145 | transform: translate(5%, 5%); 146 | } 147 | } 148 | .goofy2 { 149 | height: 40vw; 150 | width: 40vw; 151 | top: 45vw; 152 | right: 4%; 153 | border-radius: 50%; 154 | position: absolute; 155 | filter: blur(25px); 156 | background-color: orangered; 157 | animation: goofy2 linear infinite 3s alternate; 158 | } 159 | @keyframes goofy2 { 160 | from { 161 | transform: translate(-10%, -10%); 162 | } 163 | to { 164 | transform: translate(5%, 5%); 165 | } 166 | } 167 | .goofy3 { 168 | height: 40vw; 169 | width: 40vw; 170 | top: 39vw; 171 | right: -10%; 172 | border-radius: 50%; 173 | position: absolute; 174 | filter: blur(25px); 175 | background-color: orangered; 176 | animation: goofy3 linear infinite 2s alternate; 177 | } 178 | @keyframes goofy3 { 179 | from { 180 | transform: translate(-10%, -10%); 181 | } 182 | to { 183 | transform: translate(5%, 5%); 184 | } 185 | } 186 | .page2 { 187 | min-height: 100vh; 188 | width: 100vw; 189 | background-color: #efeae3; 190 | } 191 | .infinite-rolls { 192 | white-space: nowrap; 193 | } 194 | .infinite-roll { 195 | animation: infinite-roll 15s linear infinite; 196 | display: inline-block; 197 | margin: 5vw 0vw; 198 | } 199 | .infinite-roll span { 200 | display: inline-block; 201 | background-color: orangered; 202 | height: 5vw; 203 | width: 5vw; 204 | border-radius: 50%; 205 | margin: 1vw 3vw; 206 | } 207 | .infinite-roll h2 { 208 | font-size: 10vw; 209 | display: inline-block; 210 | } 211 | @keyframes infinite-roll { 212 | from { 213 | transform: translateX(0); 214 | } 215 | to { 216 | transform: translateX(-100%); 217 | } 218 | } 219 | .page2-content { 220 | display: flex; 221 | justify-content: space-between; 222 | padding: 0vw 6vw; 223 | position: relative; 224 | } 225 | .page2-content .left h2 { 226 | width: 80%; 227 | font-size: 4.5vw; 228 | font-family: neuM; 229 | line-height: 1; 230 | position: relative; 231 | z-index: 3; 232 | } 233 | .page2-content .right { 234 | width: 40%; 235 | padding-top: 12vw; 236 | } 237 | .page2-content .right img { 238 | height: 180px; 239 | width: 280px; 240 | object-fit: cover; 241 | border-radius: 10px; 242 | } 243 | .page2-content .right p { 244 | padding: 3.5vw 0vw; 245 | width: 105%; 246 | } 247 | .page2-content .goofy { 248 | height: 35vw; 249 | width: 35vw; 250 | border-radius: 50%; 251 | top: 9vw; 252 | left: 25vw; 253 | position: absolute; 254 | background-color: rgb(255, 94, 0); 255 | filter: blur(25px); 256 | animation: goofy 3s linear infinite alternate; 257 | } 258 | @keyframes goofy { 259 | from { 260 | transform: translate(-10%, 10%); 261 | } 262 | to { 263 | transform: translate(10%, -10%); 264 | } 265 | } 266 | .page2-content .goofy1 { 267 | height: 35vw; 268 | width: 35vw; 269 | border-radius: 50%; 270 | top: 9vw; 271 | left: 25vw; 272 | position: absolute; 273 | background-color: rgb(248, 79, 0); 274 | filter: blur(25px); 275 | animation: goofy1 5s linear infinite alternate; 276 | } 277 | @keyframes goofy1 { 278 | from { 279 | transform: translate(-10%, 10%); 280 | } 281 | to { 282 | transform: translate(10%, -10%); 283 | } 284 | } 285 | .page2 .bottom-text { 286 | padding: 3vw 2vw; 287 | } 288 | .page2 .bottom-text span { 289 | display: inline-block; 290 | height: 0.6vw; 291 | width: 0.6vw; 292 | border-radius: 50%; 293 | background-color: rgb(255, 60, 0); 294 | } 295 | .page2 .bottom-text p { 296 | display: inline-block; 297 | font-size: 1vw; 298 | margin-left: 0.3vw; 299 | } 300 | .page3 { 301 | min-height: 100vh; 302 | width: 100vw; 303 | background-color: #efeae3; 304 | position: relative; 305 | } 306 | .page3 .elem1 { 307 | height: 120px; 308 | width: 100vw; 309 | display: flex; 310 | align-items: center; 311 | justify-content: space-between; 312 | padding: 0vw 2vw; 313 | border-bottom: 1px solid rgb(124, 119, 119); 314 | position: relative; 315 | overflow: hidden; 316 | z-index: 1; 317 | } 318 | .page3 .elem1::after { 319 | content: ""; 320 | height: 100%; 321 | width: 100%; 322 | position: absolute; 323 | top: -100%; 324 | left: 0; 325 | background-color: #ff9831; 326 | transition: all ease 0.3s; 327 | z-index: -1; 328 | } 329 | .page3 .elem1:hover::after { 330 | top: 0%; 331 | } 332 | .page3 .elem1 .head{ 333 | overflow: hidden; 334 | } 335 | .page3 .elem1 .head h2 { 336 | font-size: 4vw; 337 | font-family: neuM; 338 | letter-spacing: -1.5px; 339 | } 340 | .page3 .elem1 .texts { 341 | overflow: hidden; 342 | height: 60px; 343 | } 344 | .page3 .elem1 .texts h5 { 345 | font-weight: 100; 346 | } 347 | .page3 .elem1 .texts p { 348 | font-size: 1vw; 349 | font-weight: 100; 350 | color: #5c5555; 351 | } 352 | .hover-div { 353 | position: fixed; 354 | height: 400px; 355 | width: 300px; 356 | z-index: 10; 357 | top: 10vw; 358 | right: 26vw; 359 | display: none; 360 | } 361 | .hover-image-div { 362 | position: fixed; 363 | height: 400px; 364 | width: 300px; 365 | /* background-color: red; */ 366 | z-index: 10; 367 | border-radius: 15px; 368 | top: 10vw; 369 | right: 26vw; 370 | display: none; 371 | background-size: cover; 372 | background-position: center; 373 | } 374 | .hover-video-div { 375 | position: fixed; 376 | height: 63%; 377 | width: 22%; 378 | /* background-color: red; */ 379 | z-index: 10; 380 | border-radius: 15px; 381 | top: 10vw; 382 | right: 26vw; 383 | display: none; 384 | object-fit: cover; 385 | } 386 | .page4 { 387 | min-height: 100vh; 388 | width: 100vw; 389 | background-color: #efeae3; 390 | padding: 5vw 2.2vw; 391 | } 392 | .page4 .all { 393 | height: 40px; 394 | width: 160px; 395 | border-radius: 50px; 396 | border: 1px solid rgb(161, 155, 155); 397 | position: relative; 398 | padding: 0.7vw 2vw; 399 | overflow: hidden; 400 | z-index: 1; 401 | cursor: pointer; 402 | } 403 | .page4 .all a { 404 | text-decoration: none; 405 | color: #000; 406 | text-align: center; 407 | } 408 | .page4 .all::before { 409 | content: ""; 410 | position: absolute; 411 | left: 0; 412 | bottom: -100%; 413 | background-color: #000; 414 | height: 100%; 415 | width: 100%; 416 | border-radius: 90%; 417 | transition: all ease-in-out 0.3s; 418 | z-index: -1; 419 | } 420 | .page4 .all:hover::before { 421 | bottom: 0; 422 | border-radius: 0; 423 | } 424 | .page4 .all:hover a { 425 | color: #fff; 426 | } 427 | .page4 .bottom-text { 428 | padding: 3vw 4.2vw; 429 | margin-bottom: 3vw; 430 | } 431 | .page4 .bottom-text span { 432 | display: inline-block; 433 | height: 0.6vw; 434 | width: 0.6vw; 435 | border-radius: 50%; 436 | background-color: rgb(255, 60, 0); 437 | } 438 | .page4 .bottom-text p { 439 | display: inline-block; 440 | font-size: 1vw; 441 | margin-left: 0.3vw; 442 | } 443 | .swiper { 444 | width: 100vw; 445 | min-height: 40vh; 446 | margin-left: 4.2vw; 447 | position: relative; 448 | -webkit-user-select: none; 449 | -webkit-touch-callout: none; 450 | -moz-user-select: none; 451 | -ms-user-select: none; 452 | user-select: none; 453 | } 454 | .swiper-slide { 455 | text-align: center; 456 | color: #000; 457 | display: flex; 458 | flex-direction: column; 459 | border-left: 1px solid rgb(197, 187, 187); 460 | padding: 0vw 1.5vw; 461 | } 462 | .swiper-slide img { 463 | height: 12vw; 464 | width: 12vw; 465 | } 466 | .swiper-slide p { 467 | font-size: 1.15vw; 468 | text-align: left; 469 | width: 70%; 470 | line-height: 1.3; 471 | } 472 | .mover { 473 | height: 8vw; 474 | width: 8vw; 475 | background-color: orangered; 476 | border-radius: 50%; 477 | position: fixed; 478 | top: -8%; 479 | left: -4%; 480 | transform: translate(-50%, -50%); 481 | opacity: 0; 482 | scale: 0; 483 | z-index: 11; 484 | display: flex; 485 | align-items: center; 486 | justify-content: center; 487 | } 488 | .page5{ 489 | background: transparent; 490 | height: 100vh; 491 | width: 100vw; 492 | } 493 | footer{ 494 | position: absolute; 495 | bottom: 0; 496 | left: 0; 497 | z-index: -11; 498 | } 499 | .footers { 500 | height: 100vh; 501 | width: 100vw; 502 | background-color: #fe330a; 503 | position: relative; 504 | z-index: 1; 505 | overflow: hidden; 506 | } 507 | .footer-top { 508 | width: 100%; 509 | height: 40vh; 510 | display: flex; 511 | align-items: start; 512 | justify-content: space-between; 513 | } 514 | .footer-top .left { 515 | padding: 4vw 6vw; 516 | } 517 | 518 | .footer-top .left h2 { 519 | color: #fff; 520 | font-size: 2.3vw; 521 | font-weight: 600; 522 | font-family: neuM; 523 | } 524 | .footer-top .right { 525 | padding: 4vw 0vw; 526 | margin-right: -10vw; 527 | } 528 | .footer-top .right h5 { 529 | color: #fff; 530 | font-size: 1.5vw; 531 | font-weight: 100; 532 | width: 60%; 533 | } 534 | .footer-top .right input { 535 | border: 0; 536 | width: 60%; 537 | font-size: 24px; 538 | background: transparent; 539 | border-bottom: 1px solid rgba(201, 192, 192, 0.719); 540 | padding: 1vw 0vw; 541 | } 542 | .footer-top .right input:focus { 543 | outline: 0; 544 | } 545 | .footer-top .right input::placeholder { 546 | color: rgba(201, 192, 192, 0.384); 547 | font-size: 20px; 548 | } 549 | .footers .footer-middle h1 { 550 | font-size: 23vw; 551 | font-family: neuM; 552 | line-height: 1; 553 | color: #fff; 554 | margin: 0vw 2vw; 555 | border-bottom: 1px solid rgb(255, 255, 255); 556 | } 557 | .footers .footer-last { 558 | display: flex; 559 | align-items: center; 560 | justify-content: space-between; 561 | padding: 1.5vw 3vw; 562 | } 563 | .footers .footer-last h5 { 564 | font-size: 1.2vw; 565 | color: #fff; 566 | font-weight: 100; 567 | } 568 | .footers .goofy7 { 569 | background-color: #0c0500; 570 | position: absolute; 571 | bottom: 0%; 572 | left: 0; 573 | height: 20vw; 574 | width: 75vw; 575 | z-index: -1; 576 | } 577 | .footers .goofy8 { 578 | background-color: #0c0500; 579 | position: absolute; 580 | top: 22%; 581 | left: -12%; 582 | height: 60vw; 583 | width: 60vw; 584 | border-radius: 50%; 585 | filter: blur(25px); 586 | z-index: -1; 587 | animation: goofy8 5s linear infinite alternate; 588 | } 589 | @keyframes goofy8 { 590 | from{ 591 | transform: translate(-10%,10%); 592 | } 593 | to{ 594 | transform: translate(10%,-10%); 595 | } 596 | } 597 | .footers .goofy9 { 598 | background-color: #0c0500; 599 | position: absolute; 600 | top: 22%; 601 | left: 12%; 602 | height: 60vw; 603 | width: 60vw; 604 | border-radius: 50%; 605 | filter: blur(25px); 606 | z-index: -1; 607 | animation: goofy9 5s linear infinite alternate; 608 | } 609 | @keyframes goofy9 { 610 | from{ 611 | transform: translate(-10%,10%); 612 | } 613 | to{ 614 | transform: translate(10%,-10%); 615 | } 616 | } 617 | .footers .goofy10 { 618 | background-color: #0c0500; 619 | position: absolute; 620 | top: 22%; 621 | left: 32%; 622 | height: 60vw; 623 | width: 60vw; 624 | border-radius: 50%; 625 | filter: blur(25px); 626 | z-index: -1; 627 | animation: goofy10 10s linear infinite alternate; 628 | } 629 | @keyframes goofy10 { 630 | from{ 631 | transform: translate(10%,-10%); 632 | } 633 | to{ 634 | transform: translate(-10%,10%); 635 | } 636 | } 637 | --------------------------------------------------------------------------------