├── NeueHaasDisplayLight.ttf ├── NeueHaasDisplayMediu.ttf ├── NeueHaasDisplayRoman.ttf ├── README.md ├── icon.png ├── index.html ├── script.js ├── style.css ├── test.css ├── test.html ├── test.js └── video.mp4 /NeueHaasDisplayLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/SUNDOWN/1469704f9e05c5137343826f2e4126fc7feab73b/NeueHaasDisplayLight.ttf -------------------------------------------------------------------------------- /NeueHaasDisplayMediu.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/SUNDOWN/1469704f9e05c5137343826f2e4126fc7feab73b/NeueHaasDisplayMediu.ttf -------------------------------------------------------------------------------- /NeueHaasDisplayRoman.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/SUNDOWN/1469704f9e05c5137343826f2e4126fc7feab73b/NeueHaasDisplayRoman.ttf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SUNDOWN -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/SUNDOWN/1469704f9e05c5137343826f2e4126fc7feab73b/icon.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sundown Studio | CWU 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

ENVIRONMENTS

17 |

EXPERIENCES

18 |

CONTENT

19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 | 36 |
37 |
38 |

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

40 |
41 | 46 | 47 |
48 |
49 |
50 |
51 |
52 |
53 | 54 |
55 |
56 |
57 |
58 |

EXPERIENCES

59 |
60 |

CONTENT

61 |
62 |

ENVIRONMENTS

63 |
64 |
65 |
66 |

EXPERIENCES

67 |
68 |

CONTENT

69 |
70 |

ENVIRONMENTS

71 |
72 |
73 |
74 |

EXPERIENCES

75 |
76 |

CONTENT

77 |
78 |

ENVIRONMENTS

79 |
80 |
81 |
82 |
83 |

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

85 |
86 | 88 |

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

91 |
92 |
93 |
94 | 95 |
96 |
97 |
98 |
99 |
101 |
102 |

Makers Studio HOI

103 |
104 |
106 |
107 |

50th Anniversary

108 |
109 |
111 |
112 |

NYFW Popup

113 |
114 |
116 |
117 |

Air Force 1 2021

118 |
119 |
121 |
122 |

SOHO NYC

123 |
124 |
126 |
127 |

SOHO 2023

128 |
129 |
131 |
132 |

Play New Kidvision

133 |
134 |
135 |
136 |
137 |
138 |
139 |
Slide 1
140 |
Slide 2
141 |
Slide 3
142 |
Slide 4
143 |
Slide 5
144 |
Slide 6
145 |
Slide 7
146 |
147 | 148 |
149 |
150 |
151 | 152 |
153 |
154 |
155 | 156 |
157 |
158 |
159 | 168 | 169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const scroll = new LocomotiveScroll({ 2 | el: document.querySelector('#main'), 3 | smooth: true 4 | }); 5 | 6 | 7 | function page4Animation() { 8 | var elemC = document.querySelector("#elem-container") 9 | var fixed = document.querySelector("#fixed-image") 10 | elemC.addEventListener("mouseenter", function () { 11 | fixed.style.display = "block" 12 | }) 13 | elemC.addEventListener("mouseleave", function () { 14 | fixed.style.display = "none" 15 | }) 16 | 17 | var elems = document.querySelectorAll(".elem") 18 | elems.forEach(function (e) { 19 | e.addEventListener("mouseenter", function () { 20 | var image = e.getAttribute("data-image") 21 | fixed.style.backgroundImage = `url(${image})` 22 | }) 23 | }) 24 | } 25 | 26 | function swiperAnimation() { 27 | var swiper = new Swiper(".mySwiper", { 28 | slidesPerView: "auto", 29 | centeredSlides: true, 30 | spaceBetween: 100, 31 | }); 32 | } 33 | function menuAnimation() { 34 | 35 | var menu = document.querySelector("nav h3") 36 | var full = document.querySelector("#full-scr") 37 | var navimg = document.querySelector("nav img") 38 | var flag = 0 39 | menu.addEventListener("click", function () { 40 | if (flag == 0) { 41 | full.style.top = 0 42 | navimg.style.opacity = 0 43 | flag = 1 44 | } else { 45 | full.style.top = "-100%" 46 | navimg.style.opacity = 1 47 | flag = 0 48 | } 49 | }) 50 | } 51 | 52 | function loaderAnimation() { 53 | var loader = document.querySelector("#loader") 54 | setTimeout(function () { 55 | loader.style.top = "-100%" 56 | }, 4200) 57 | } 58 | 59 | swiperAnimation() 60 | page4Animation() 61 | menuAnimation() 62 | loaderAnimation() -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: neu; 3 | src: url(./NeueHaasDisplayMediu.ttf); 4 | } 5 | 6 | @font-face { 7 | font-family: neu; 8 | font-weight: 100; 9 | src: url(./NeueHaasDisplayLight.ttf); 10 | } 11 | 12 | @font-face { 13 | font-family: neu; 14 | font-weight: 200; 15 | src: url(./NeueHaasDisplayRoman.ttf); 16 | } 17 | 18 | * { 19 | margin: 0; 20 | padding: 0; 21 | box-sizing: border-box; 22 | font-family: neu; 23 | } 24 | 25 | html, 26 | body { 27 | height: 100%; 28 | width: 100%; 29 | } 30 | 31 | #main { 32 | /* background-color: #000; */ 33 | position: relative; 34 | z-index: 10; 35 | } 36 | 37 | #page1 { 38 | min-height: 100vh; 39 | width: 100%; 40 | background-color: #EFEAE3; 41 | position: relative; 42 | padding: 0 2vw; 43 | } 44 | 45 | nav { 46 | padding: 2vw 0vw; 47 | width: 100%; 48 | /* background-color: red; */ 49 | display: flex; 50 | align-items: center; 51 | position: relative; 52 | z-index: 100; 53 | justify-content: space-between; 54 | } 55 | 56 | #nav-part2 { 57 | display: flex; 58 | align-items: center; 59 | gap: 1vw; 60 | } 61 | 62 | #nav-part2 h4 { 63 | padding: 10px 20px; 64 | border: 1px solid #0000003c; 65 | border-radius: 50px; 66 | font-weight: 500; 67 | color: #000000bb; 68 | transition: all ease 0.4s; 69 | position: relative; 70 | font-size: 18px; 71 | overflow: hidden; 72 | } 73 | 74 | #nav-part2 h4::after { 75 | content: ""; 76 | position: absolute; 77 | height: 100%; 78 | width: 100%; 79 | background-color: black; 80 | left: 0; 81 | bottom: -100%; 82 | border-radius: 50%; 83 | transition: all ease 0.4s; 84 | } 85 | 86 | #nav-part2 h4:hover::after { 87 | bottom: 0; 88 | border-radius: 0; 89 | } 90 | 91 | #nav-part2 h4 a { 92 | color: #000000bb; 93 | text-decoration: none; 94 | position: relative; 95 | z-index: 9; 96 | } 97 | 98 | #nav-part2 h4:hover a { 99 | color: #fff; 100 | } 101 | 102 | nav h3 { 103 | display: none; 104 | } 105 | 106 | #center { 107 | height: 65vh; 108 | width: 100%; 109 | /* background-color: orange; */ 110 | display: flex; 111 | align-items: flex-end; 112 | justify-content: space-between; 113 | border-bottom: 1px solid #0000003c; 114 | padding-bottom: 2.5vw; 115 | } 116 | 117 | #left h3 { 118 | width: 25vw; 119 | font-size: 1.8vw; 120 | line-height: 2vw; 121 | } 122 | 123 | #center h1 { 124 | font-size: 10vw; 125 | text-align: right; 126 | line-height: 8vw; 127 | } 128 | 129 | #page1 video { 130 | position: relative; 131 | border-radius: 30px; 132 | margin-top: 4vw; 133 | width: 100%; 134 | } 135 | 136 | #hero-shape { 137 | position: absolute; 138 | width: 46vw; 139 | height: 36vw; 140 | right: 0; 141 | top: 65vh; 142 | } 143 | 144 | #hero-1 { 145 | background-color: #FE320A; 146 | height: 100%; 147 | width: 100%; 148 | border-top-left-radius: 50%; 149 | border-bottom-left-radius: 50%; 150 | filter: blur(10px); 151 | position: absolute; 152 | } 153 | 154 | #hero-2 { 155 | background: linear-gradient(#FE320A, #fe3f0a); 156 | 157 | height: 30vw; 158 | width: 30vw; 159 | border-radius: 50%; 160 | position: absolute; 161 | animation-name: anime2; 162 | animation-duration: 5s; 163 | animation-timing-function: linear; 164 | animation-iteration-count: infinite; 165 | animation-direction: alternate; 166 | filter: blur(25px); 167 | } 168 | 169 | #hero-3 { 170 | background: linear-gradient(#FE320A, #fe3f0a); 171 | height: 30vw; 172 | position: absolute; 173 | width: 30vw; 174 | border-radius: 50%; 175 | filter: blur(25px); 176 | animation-name: anime1; 177 | animation-duration: 5s; 178 | animation-timing-function: linear; 179 | animation-iteration-count: infinite; 180 | animation-direction: alternate; 181 | } 182 | 183 | @keyframes anime1 { 184 | from { 185 | transform: translate(55%, -3%); 186 | } 187 | 188 | to { 189 | transform: translate(0%, 10%); 190 | } 191 | } 192 | 193 | @keyframes anime2 { 194 | from { 195 | transform: translate(5%, -5%); 196 | } 197 | 198 | to { 199 | transform: translate(-20%, 30%); 200 | } 201 | } 202 | 203 | #page2 { 204 | min-height: 100vh; 205 | width: 100%; 206 | background-color: #EFEAE3; 207 | padding: 8vw 0; 208 | position: relative; 209 | } 210 | 211 | #moving-text { 212 | overflow-x: auto; 213 | white-space: nowrap; 214 | } 215 | 216 | #moving-text::-webkit-scrollbar { 217 | display: none; 218 | } 219 | 220 | .con { 221 | white-space: nowrap; 222 | display: inline-block; 223 | animation-name: move; 224 | animation-duration: 10s; 225 | animation-timing-function: linear; 226 | animation-iteration-count: infinite; 227 | } 228 | 229 | #moving-text h1 { 230 | font-size: 9vw; 231 | /* background-color: lightblue; */ 232 | display: inline-block; 233 | } 234 | 235 | #gola { 236 | height: 70px; 237 | width: 70px; 238 | border-radius: 50%; 239 | display: inline-block; 240 | background-color: #FE320A; 241 | margin: 1vw 2vw; 242 | } 243 | 244 | @keyframes move { 245 | from { 246 | transform: translateX(0); 247 | } 248 | 249 | to { 250 | transform: translateX(-100%); 251 | } 252 | } 253 | 254 | #page2-bottom { 255 | height: 80vh; 256 | width: 100%; 257 | /* background-color: aliceblue; */ 258 | padding: 4.5vw; 259 | display: flex; 260 | align-items: center; 261 | justify-content: space-between; 262 | position: relative; 263 | z-index: 9; 264 | } 265 | 266 | #page2-bottom h1 { 267 | font-size: 4vw; 268 | width: 60%; 269 | line-height: 4vw; 270 | } 271 | 272 | #bottom-part2 { 273 | width: 20%; 274 | /* background-color: aqua; */ 275 | } 276 | 277 | #bottom-part2 img { 278 | width: 100%; 279 | border-radius: 15px; 280 | } 281 | 282 | #bottom-part2 p { 283 | font-weight: 200; 284 | margin-top: 2vw; 285 | font-size: 1vw; 286 | } 287 | 288 | #page2 #gooey { 289 | height: 32vw; 290 | width: 32vw; 291 | position: absolute; 292 | border-radius: 50%; 293 | background: linear-gradient(to top right, #ff2d03, #ff5c0b); 294 | /* background: linear-gradient(to top right,red,blue); */ 295 | 296 | 297 | top: 58%; 298 | left: 25%; 299 | filter: blur(20px); 300 | animation-name: gooey; 301 | animation-duration: 6s; 302 | animation-iteration-count: infinite; 303 | animation-direction: alternate; 304 | animation-timing-function: ease-in-out; 305 | 306 | } 307 | 308 | @keyframes gooey { 309 | from { 310 | filter: blur(20px); 311 | transform: translate(10%, -10%) skew(0); 312 | } 313 | 314 | to { 315 | filter: blur(30px); 316 | transform: translate(-10%, 10%) skew(-12deg); 317 | } 318 | } 319 | 320 | 321 | 322 | 323 | #page3 { 324 | min-height: 100vh; 325 | width: 100%; 326 | background-color: #EFEAE3; 327 | padding: 4vw 0; 328 | } 329 | 330 | .elem { 331 | height: 150px; 332 | width: 100%; 333 | position: relative; 334 | 335 | border-bottom: 1px solid #38383864; 336 | overflow: hidden; 337 | display: flex; 338 | align-items: center; 339 | padding: 0 2vw; 340 | } 341 | 342 | .elem h2 { 343 | font-size: 3vw; 344 | position: relative; 345 | z-index: 9; 346 | } 347 | 348 | .elem .overlay { 349 | height: 100%; 350 | width: 100%; 351 | background-color: orange; 352 | position: absolute; 353 | left: 0; 354 | top: -100%; 355 | transition: all ease 0.25s; 356 | } 357 | 358 | .elem:hover .overlay { 359 | top: 0; 360 | } 361 | 362 | 363 | 364 | #fixed-image { 365 | height: 30vw; 366 | width: 24vw; 367 | /* background-color: red; */ 368 | border-radius: 15px; 369 | position: fixed; 370 | z-index: 99; 371 | left: 50%; 372 | top: 25%; 373 | display: none; 374 | background-size: cover; 375 | background-position: center; 376 | } 377 | 378 | #page4 { 379 | height: 70vh; 380 | width: 100%; 381 | background-color: #EFEAE3; 382 | padding: 10vw 2vw; 383 | } 384 | 385 | .swiper { 386 | width: 100%; 387 | height: 100%; 388 | } 389 | 390 | .swiper-slide { 391 | width: 30%; 392 | border-left: 1px solid #aeadad; 393 | padding: 0 2vw; 394 | } 395 | 396 | #page5 { 397 | height: 100vh; 398 | width: 100%; 399 | /* background-color: #EFEAE3; */ 400 | } 401 | 402 | #footer { 403 | position: fixed; 404 | height: 105vh; 405 | width: 100%; 406 | background-color: #000; 407 | color: #fff; 408 | z-index: 9; 409 | bottom: 0; 410 | display: flex; 411 | /* align-items: flex-end; */ 412 | justify-content: flex-end; 413 | flex-direction: column; 414 | padding: 1vw 3vw; 415 | } 416 | 417 | #footer h1 { 418 | font-size: 23vw; 419 | } 420 | 421 | #footer-div { 422 | height: 20vh; 423 | width: 100%; 424 | background-color: red; 425 | } 426 | 427 | #footer-bottom { 428 | border-top: 1px solid #dadada; 429 | height: 10vh; 430 | width: 100%; 431 | } 432 | 433 | #full-scr { 434 | height: 100vh; 435 | width: 100%; 436 | background-color: #00000070; 437 | position: fixed; 438 | z-index: 99; 439 | top: -100%; 440 | transition: all ease 0.5s; 441 | } 442 | 443 | #full-div1 { 444 | height: 50%; 445 | width: 100%; 446 | background-color: #EFEAE3; 447 | border-bottom-left-radius: 20px; 448 | border-bottom-right-radius: 20px; 449 | 450 | } 451 | 452 | @media (max-width:600px) { 453 | 454 | #page1 { 455 | min-height: 100vh; 456 | width: 100vw; 457 | padding: 0 0vw; 458 | } 459 | 460 | nav { 461 | padding: 8vw 5vw; 462 | background-color: #EFEAE3; 463 | /* padding: 0 5vw; */ 464 | } 465 | 466 | nav img { 467 | transition: all ease 0.2s; 468 | height: 9vh; 469 | } 470 | 471 | #nav-part2 { 472 | display: none; 473 | } 474 | 475 | nav h3 { 476 | display: block; 477 | padding: 3vw 5vw; 478 | border: 1px solid #ababab; 479 | border-radius: 50px; 480 | font-size: 4vw; 481 | font-weight: 200; 482 | padding-left: 10vw; 483 | } 484 | 485 | #center { 486 | height: 62vh; 487 | width: 100%; 488 | /* background-color: orange; */ 489 | display: flex; 490 | align-items: flex-end; 491 | justify-content: space-between; 492 | border-bottom: 1px solid #0000003c; 493 | padding: 7vw 5vw; 494 | padding-bottom: 10vw; 495 | flex-direction: column-reverse; 496 | position: relative; 497 | z-index: 9; 498 | } 499 | 500 | #left h3 { 501 | width: 80%; 502 | font-size: 5.5vw; 503 | line-height: 6vw; 504 | } 505 | 506 | #center h1 { 507 | font-size: 17vw; 508 | text-align: right; 509 | line-height: 15vw; 510 | } 511 | 512 | #page1 video { 513 | position: relative; 514 | border-radius: 15px; 515 | margin-top: 4vw; 516 | height: 70vh; 517 | object-fit: cover; 518 | object-position: center; 519 | width: 92%; 520 | margin-left: 4%; 521 | } 522 | 523 | #page2 { 524 | min-height: 100vh; 525 | width: 100%; 526 | background-color: #EFEAE3; 527 | padding: 8vw 0; 528 | position: relative; 529 | } 530 | 531 | #moving-text { 532 | overflow-x: auto; 533 | white-space: nowrap; 534 | } 535 | 536 | #moving-text::-webkit-scrollbar { 537 | display: none; 538 | } 539 | 540 | .con { 541 | white-space: nowrap; 542 | display: inline-block; 543 | animation-name: move; 544 | animation-duration: 10s; 545 | animation-timing-function: linear; 546 | animation-iteration-count: infinite; 547 | } 548 | 549 | #moving-text h1 { 550 | font-size: 15vw; 551 | /* background-color: lightblue; */ 552 | display: inline-block; 553 | } 554 | 555 | #gola { 556 | height: 25px; 557 | width: 25px; 558 | border-radius: 50%; 559 | display: inline-block; 560 | background-color: #FE320A; 561 | margin: 2vw 2vw; 562 | } 563 | 564 | #page2-bottom { 565 | height: 90vh; 566 | width: 100%; 567 | /* background-color: aliceblue; */ 568 | padding: 10vw 4vw; 569 | display: flex; 570 | align-items: flex-start; 571 | justify-content: space-between; 572 | position: relative; 573 | flex-direction: column; 574 | z-index: 9; 575 | } 576 | 577 | #page2-bottom h1 { 578 | font-size: 8.2vw; 579 | width: 100%; 580 | line-height: 9vw; 581 | } 582 | 583 | #bottom-part2 { 584 | width: 70%; 585 | /* background-color: aqua; */ 586 | } 587 | 588 | #bottom-part2 img { 589 | width: 100%; 590 | border-radius: 10px; 591 | } 592 | 593 | #bottom-part2 p { 594 | font-weight: 200; 595 | margin-top: 2vw; 596 | font-size: 3vw; 597 | } 598 | 599 | #page2 #gooey { 600 | height: 62vw; 601 | width: 62vw; 602 | position: absolute; 603 | border-radius: 50%; 604 | background: linear-gradient(to top right, #ff2d03, #ff5c0b); 605 | /* background: linear-gradient(to top right,red,blue); */ 606 | 607 | 608 | top: 58%; 609 | left: 25%; 610 | filter: blur(20px); 611 | animation-name: gooey; 612 | animation-duration: 6s; 613 | animation-iteration-count: infinite; 614 | animation-direction: alternate; 615 | animation-timing-function: ease-in-out; 616 | 617 | } 618 | 619 | 620 | } 621 | 622 | #loader { 623 | height: 100%; 624 | width: 100%; 625 | background-color: #000; 626 | position: fixed; 627 | z-index: 999; 628 | top: 0; 629 | transition: all ease 0.7s; 630 | display: flex; 631 | align-items: center; 632 | justify-content: center; 633 | } 634 | 635 | #loader h1 { 636 | font-size: 4vw; 637 | color: transparent; 638 | background: linear-gradient(to right, orange, orangered); 639 | -webkit-background-clip: text; 640 | position: absolute; 641 | opacity: 0; 642 | animation-name: load; 643 | animation-duration: 1s; 644 | animation-delay: 1s; 645 | animation-timing-function: linear; 646 | } 647 | 648 | #loader h1:nth-child(2) { 649 | animation-delay: 2s; 650 | } 651 | 652 | #loader h1:nth-child(3) { 653 | animation-delay: 3s; 654 | } 655 | 656 | @keyframes load { 657 | 0% { 658 | opacity: 0; 659 | } 660 | 661 | 10% { 662 | opacity: 1; 663 | } 664 | 665 | 90% { 666 | opacity: 1; 667 | } 668 | 669 | 100% { 670 | opacity: 0; 671 | } 672 | } 673 | 674 | @media (max-width:600px) { 675 | #loader h1 { 676 | font-size: 9vw; 677 | 678 | } 679 | } -------------------------------------------------------------------------------- /test.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Gilroy'; 6 | } 7 | 8 | html, 9 | body { 10 | height: 100%; 11 | width: 100%; 12 | } 13 | 14 | img { 15 | height: 400px; 16 | width: 600px; 17 | } -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | image not found 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | var a = document.querySelector("img") 2 | var b = a.getAttribute("data-company") 3 | console.log(b) -------------------------------------------------------------------------------- /video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/SUNDOWN/1469704f9e05c5137343826f2e4126fc7feab73b/video.mp4 --------------------------------------------------------------------------------