diff --git "a/64d3dd9edfb41666c35b15fd_Arc\342\200\231teryx.svg" "b/64d3dd9edfb41666c35b15fd_Arc\342\200\231teryx.svg" new file mode 100644 index 0000000..1234d0d --- /dev/null +++ "b/64d3dd9edfb41666c35b15fd_Arc\342\200\231teryx.svg" @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/64d3dd9edfb41666c35b15fe_Hunter.svg b/64d3dd9edfb41666c35b15fe_Hunter.svg new file mode 100644 index 0000000..27748e9 --- /dev/null +++ b/64d3dd9edfb41666c35b15fe_Hunter.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/64d3dd9edfb41666c35b15ff_Nike.svg b/64d3dd9edfb41666c35b15ff_Nike.svg new file mode 100644 index 0000000..3433917 --- /dev/null +++ b/64d3dd9edfb41666c35b15ff_Nike.svg @@ -0,0 +1,3 @@ + + + diff --git a/64d3dd9edfb41666c35b1600_Converse.svg b/64d3dd9edfb41666c35b1600_Converse.svg new file mode 100644 index 0000000..32a7494 --- /dev/null +++ b/64d3dd9edfb41666c35b1600_Converse.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/64d3dd9edfb41666c35b1601_MediaLink.svg b/64d3dd9edfb41666c35b1601_MediaLink.svg new file mode 100644 index 0000000..884d240 --- /dev/null +++ b/64d3dd9edfb41666c35b1601_MediaLink.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/64d3dd9edfb41666c35b1602_AfterPay.svg b/64d3dd9edfb41666c35b1602_AfterPay.svg new file mode 100644 index 0000000..50d6a6b --- /dev/null +++ b/64d3dd9edfb41666c35b1602_AfterPay.svg @@ -0,0 +1,3 @@ + + + diff --git a/Holding_thumb-p-500.webp b/Holding_thumb-p-500.webp new file mode 100644 index 0000000..7f9155c Binary files /dev/null and b/Holding_thumb-p-500.webp differ diff --git a/Sundown logo.svg b/Sundown logo.svg new file mode 100644 index 0000000..470c215 --- /dev/null +++ b/Sundown logo.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/afterpay.mp4 b/afterpay.mp4 new file mode 100644 index 0000000..4626733 Binary files /dev/null and b/afterpay.mp4 differ diff --git a/airforce.webp b/airforce.webp new file mode 100644 index 0000000..5c677a7 Binary files /dev/null and b/airforce.webp differ diff --git a/anniversary.webp b/anniversary.webp new file mode 100644 index 0000000..b477003 Binary files /dev/null and b/anniversary.webp differ diff --git a/converse.mp4 b/converse.mp4 new file mode 100644 index 0000000..6e7dc4b Binary files /dev/null and b/converse.mp4 differ diff --git a/font/NeueHaasDisplayBlack.ttf b/font/NeueHaasDisplayBlack.ttf new file mode 100644 index 0000000..57117b4 Binary files /dev/null and b/font/NeueHaasDisplayBlack.ttf differ diff --git a/font/NeueHaasDisplayBlackItalic.ttf b/font/NeueHaasDisplayBlackItalic.ttf new file mode 100644 index 0000000..27201e8 Binary files /dev/null and b/font/NeueHaasDisplayBlackItalic.ttf differ diff --git a/font/NeueHaasDisplayBold.ttf b/font/NeueHaasDisplayBold.ttf new file mode 100644 index 0000000..024063a Binary files /dev/null and b/font/NeueHaasDisplayBold.ttf differ diff --git a/font/NeueHaasDisplayBoldItalic.ttf b/font/NeueHaasDisplayBoldItalic.ttf new file mode 100644 index 0000000..db6140b Binary files /dev/null and b/font/NeueHaasDisplayBoldItalic.ttf differ diff --git a/font/NeueHaasDisplayLight.ttf b/font/NeueHaasDisplayLight.ttf new file mode 100644 index 0000000..3ef5425 Binary files /dev/null and b/font/NeueHaasDisplayLight.ttf differ diff --git a/font/NeueHaasDisplayLightItalic.ttf b/font/NeueHaasDisplayLightItalic.ttf new file mode 100644 index 0000000..d45527d Binary files /dev/null and b/font/NeueHaasDisplayLightItalic.ttf differ diff --git a/font/NeueHaasDisplayMediu.ttf b/font/NeueHaasDisplayMediu.ttf new file mode 100644 index 0000000..01565a0 Binary files /dev/null and b/font/NeueHaasDisplayMediu.ttf differ diff --git a/font/NeueHaasDisplayMediumItalic.ttf b/font/NeueHaasDisplayMediumItalic.ttf new file mode 100644 index 0000000..00715ad Binary files /dev/null and b/font/NeueHaasDisplayMediumItalic.ttf differ diff --git a/font/NeueHaasDisplayRoman.ttf b/font/NeueHaasDisplayRoman.ttf new file mode 100644 index 0000000..411e6f6 Binary files /dev/null and b/font/NeueHaasDisplayRoman.ttf differ diff --git a/font/NeueHaasDisplayRomanItalic.ttf b/font/NeueHaasDisplayRomanItalic.ttf new file mode 100644 index 0000000..c41f3f6 Binary files /dev/null and b/font/NeueHaasDisplayRomanItalic.ttf differ diff --git a/font/NeueHaasDisplayThin.ttf b/font/NeueHaasDisplayThin.ttf new file mode 100644 index 0000000..0c58f2e Binary files /dev/null and b/font/NeueHaasDisplayThin.ttf differ diff --git a/font/NeueHaasDisplayThinItalic.ttf b/font/NeueHaasDisplayThinItalic.ttf new file mode 100644 index 0000000..0f3a78b Binary files /dev/null and b/font/NeueHaasDisplayThinItalic.ttf differ diff --git a/font/NeueHaasDisplayXThin.ttf b/font/NeueHaasDisplayXThin.ttf new file mode 100644 index 0000000..6614a38 Binary files /dev/null and b/font/NeueHaasDisplayXThin.ttf differ diff --git a/font/NeueHaasDisplayXThinItalic.ttf b/font/NeueHaasDisplayXThinItalic.ttf new file mode 100644 index 0000000..834542f Binary files /dev/null and b/font/NeueHaasDisplayXThinItalic.ttf differ diff --git a/font/NeueHaasDisplayXXThin.ttf b/font/NeueHaasDisplayXXThin.ttf new file mode 100644 index 0000000..90df7ed Binary files /dev/null and b/font/NeueHaasDisplayXXThin.ttf differ diff --git a/font/NeueHaasDisplayXXThinItalic.ttf b/font/NeueHaasDisplayXXThinItalic.ttf new file mode 100644 index 0000000..f57c409 Binary files /dev/null and b/font/NeueHaasDisplayXXThinItalic.ttf differ diff --git a/hoi.webp b/hoi.webp new file mode 100644 index 0000000..2cba452 Binary files /dev/null and b/hoi.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..de81079 --- /dev/null +++ b/index.html @@ -0,0 +1,250 @@ + + + + + + + Sundown Studio + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+

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

+
+ +
+
+
+
+
+
+ +
+
+
+
+

EXPERIENCES

+
+

CONTENT

+
+

ENVIRONMENTS

+
+
+
+

EXPERIENCES

+
+

CONTENT

+
+

ENVIRONMENTS

+
+
+
+

EXPERIENCES

+
+

CONTENT

+
+

ENVIRONMENTS

+
+
+
+ +
+

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

+
+ +

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

+
+
+
+
+
+
+
+
+ +
+
+

SOHO 2023

+
+
+
+
+

SOHO NYC

+
+
+
+
+

NYFW Popup

+
+
+
+
+

Play New Kidvision

+
+
+
+
+

Air Force 1 2021

+
+
+
+
+

Makers Studio HOI

+
+
+
+
+

50th Anniversary

+
+
+
+
+
+
+ +

+ Design

+

+ Project

+

+ Execution

+ +

Our team works with our clients to refine an idea and concept into an executable design. We + create a final design that encompasses the brand narrative to bring stories to life and provide + end-to-end design solutions from concept, design, and architectural drawings to 3D renderings. +

+
+
+
+
+
+
+
+
+ +

Retained Production support across retail and events in NY, CHI, LA. Creative Design, Design + Management, Production/Project Management, and execution of work from concept to + installation across the Country.

+
+ +
+ +

Creative Concepting, Design, Design Management, Project Management, and execution of work + from concept to installation across the Country. Cross functional communication and + management of third party partners.

+
+ +
+ +

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

+
+ +
+ +

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

+
+ +
+ +

Creative, Design, and Production Partner for 2023 CES. Scope Included creation of Branding + Identity, Assets, and Digital Content, Design, Production design, Production oversight and + Installation of client activations for IBM, Delta, Instacart, and more.

+
+ +
+ +

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

+
+ +
+ +
+
+
+
+ +
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/newkidvision.mp4 b/newkidvision.mp4 new file mode 100644 index 0000000..30fb7df Binary files /dev/null and b/newkidvision.mp4 differ diff --git a/p1.webp b/p1.webp new file mode 100644 index 0000000..fb1094c Binary files /dev/null and b/p1.webp differ diff --git a/p2.webp b/p2.webp new file mode 100644 index 0000000..f8f1f43 Binary files /dev/null and b/p2.webp differ diff --git a/p3.webp b/p3.webp new file mode 100644 index 0000000..ed3c6a9 Binary files /dev/null and b/p3.webp differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..eb57020 --- /dev/null +++ b/script.js @@ -0,0 +1,92 @@ +const locoScroll = new LocomotiveScroll({ + el: document.querySelector("#main"), + smooth: true +}); +// ------------------------------------------ +swiper = () => { + var swiper = new Swiper(".mySwiper", { + slidesPerView: "auto", + centeredSlides: true, + spaceBetween: 100, + }); +} +swiper(); +// ------------------------------------------ +h1 = () => { + var h1s = document.querySelectorAll('.cntpart1 h1'); + var p = document.querySelector('.cntpart1 p'); + var img = document.querySelector('.cntpart2'); + + // h1s.addEventListener("click",function(){ + // h1s.style.borderLeft = '6px solid orangered'; + // h1s.style.color = 'lightgray'; + // }) + + h1s.forEach(function (h1) { + + var text = h1.getAttribute("data-text") + var image = h1.getAttribute("data-src") + + h1.addEventListener('click', function () { + p.textContent = text; + img.style.backgroundImage = `url(${image})` + }); + }); +} +h1(); +// -------------------------------------------- +page4 = () => { + var elemC = document.querySelector("#elem-container") + var fixed = document.querySelector("#fixed") + elemC.addEventListener("mouseenter", function () { + fixed.style.display = "flex" + }) + elemC.addEventListener("mouseleave", function () { + fixed.style.display = "none" + }) + + var elems = document.querySelectorAll(".elem") + elems.forEach(function (e) { + e.addEventListener("mouseenter", function () { + var image = e.getAttribute("data-image") + fixed.style.backgroundImage = `url(${image})` + + var video = e.getAttribute("data-video") + fixed.innerHTML = ``; + + }) + }) +} + +if (window.innerWidth > 768) { // 768px is a common breakpoint for mobile devices + page4(); +} + +// ------------------------------------------------------- + +menu = ()=> { + var menu = document.querySelector("nav h3") + var full = document.querySelector("#full-scr") + var navimg = document.querySelector("nav img") + var flag = 0 + menu.addEventListener("click", function () { + if (flag == 0) { + full.style.top = 0 + navimg.style.opacity = 0 + flag = 1 + } else { + full.style.top = "-100%" + navimg.style.opacity = 1 + flag = 0 + } + }) +} +menu(); + + +loader = ()=> { + var loader = document.querySelector("#loader") + setTimeout(function () { + loader.style.top = "-100%" + }, 4200) +} diff --git a/sohonyc.webp b/sohonyc.webp new file mode 100644 index 0000000..9c39155 Binary files /dev/null and b/sohonyc.webp differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..6d867fb --- /dev/null +++ b/style.css @@ -0,0 +1,1073 @@ +@font-face { + src: url('./font/NeueHaasDisplayMediu.ttf'); + font-family: 'font'; +} + +@font-face { + src: url('./font/NeueHaasDisplayThin.ttf'); + font-family: 'font'; + font-weight: 100; +} + +@font-face { + src: url('./font/NeueHaasDisplayLight.ttf'); + font-family: 'font'; + font-weight: 200; +} + +@font-face { + src: url('./font/NeueHaasDisplayRoman.ttf'); + font-family: 'font'; + font-weight: 300; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "font", system-ui, -apple-system; +} + +html, +body { + height: 100%; + width: 100%; +} + +#page1 { + min-height: 100vh; + width: 100%; + background-color: #efeae3; + position: relative; + padding: 0vw 2vw; +} + +nav { + padding: 2vw 0vw; + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + z-index: 100; +} + +nav h3{ + display: none; + z-index: 100; +} + +#npart { + display: flex; + align-items: center; + gap: 10px; +} + +#npart span { + padding: 10px 20px; + border: 1px solid #8b8b8bcc; + border-radius: 50px; + position: relative; + overflow: hidden; +} + +#npart span::after { + content: ""; + height: 100%; + width: 100%; + background-color: black; + position: absolute; + left: 0; + bottom: -100%; + border-radius: 50%; + transition: all ease .3s; +} + +#npart span:hover::after { + bottom: 0; + border-radius: 0; + transition: all ease .3s; +} + +#npart span a { + text-decoration: none; + color: black; + z-index: 10; + position: relative; +} + +#npart span:hover a { + color: antiquewhite; +} + +#center { + height: 80vh; + width: 100%; + display: flex; + align-items: flex-end; + justify-content: space-between; + padding-bottom: 3vw; + border-bottom: 1px solid lightgrey; +} + +#left { + width: 26vw; + font-size: 1.6vw; + line-height: 2vw; +} + +#right { + font-size: 7.5vw; + line-height: 9vw; + text-align: right; +} + +#page1 video { + margin-top: 3vw; + width: 100%; + border-radius: 2vw; + position: relative; +} + +#heroshape { + width: 46vw; + height: 36vw; + position: absolute; + right: 0; + top: 80vh; +} + +#hero-1 { + background-color: orangered; + width: 100%; + height: 100%; + border-top-left-radius: 50%; + border-bottom-left-radius: 50%; + filter: blur(20px); + position: absolute; +} + +#hero-2 { + background: linear-gradient(orangered, rgb(255, 123, 0)); + width: 30vw; + height: 30vw; + border-radius: 50%; + filter: blur(10px); + position: absolute; + animation: shape2 5s linear infinite alternate; +} + +#hero-3 { + background: linear-gradient(orangered, rgb(255, 123, 0)); + width: 30vw; + height: 30vw; + border-radius: 50%; + filter: blur(10px); + position: absolute; + animation: shape 3s linear infinite alternate; +} + +@keyframes shape { + from { + transform: translate(55%, -3%); + } + + to { + transform: translate(0%, 10%); + } +} + +@keyframes shape2 { + from { + transform: translate(5%, -5%); + } + + to { + transform: translate(-20%, 30%); + } +} + +#page2 { + min-height: 100vh; + width: 100%; + position: relative; + background-color: #efeae3; +} + +#cnt { + overflow-x: auto; + white-space: nowrap; + padding: 8vw 0vw; +} + +#cnt::-webkit-scrollbar { + display: none; +} + +#cnt h1 { + font-size: 10vw; + display: inline-block; +} + +.marquee { + display: inline-block; + white-space: nowrap; + animation: marquee 10s linear infinite; +} + +.marquee div { + background-color: orangered; + height: 70px; + width: 70px; + border-radius: 50%; + display: inline-block; + margin: 1vw 2vw; +} + +@keyframes marquee { + from { + transform: translateX(0); + } + + to { + transform: translateX(-100%); + } +} + +#p2-bottom { + height: 90vh; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0vw 4.5vw; +} + +#p2-bottom h1 { + display: flex; + align-items: flex-start; + height: 100%; + width: 65%; + font-size: 5vw; + line-height: 5vw; + position: relative; + z-index: 5; +} + +#bpart { + height: 100%; + width: 21%; + display: flex; + flex-flow: column; + justify-content: flex-end; +} + +#bpart img { + width: 100%; + border-radius: 10px; +} + +#bpart p { + margin-top: 3vw; + font-weight: 300; + font-size: 1.2vw; + line-height: 1.5vw; +} + +#gooeyshape { + height: 30vw; + width: 30vw; + background-color: orangered; + position: absolute; + top: 55%; + left: 30%; + border-radius: 50%; + filter: blur(10px); +} + +.gooey { + height: 100%; + +} + +#gooeyshape { + height: 32vw; + width: 32vw; + position: absolute; + border-radius: 50%; + background: linear-gradient(to top right, #ff2d03, #ff5c0b); + /* background: linear-gradient(to top right,red,blue); */ + top: 55%; + left: 30%; + filter: blur(20px); + animation: gooey 6s infinite alternate ease-in-out; + z-index: 2; +} + +@keyframes gooey { + from { + filter: blur(20px); + transform: translate(10%, -10%) skew(0); + } + + to { + filter: blur(30px); + transform: translate(-10%, 10%) skew(-12deg); + } +} + +#page3 { + min-height: 100vh; + width: 100%; + position: relative; + background-color: #efeae3; + padding: 2vw 0vw; +} + + +.elem { + height: 10vw; + width: 100%; + position: relative; + border-bottom: 1px solid #38383864; + overflow: hidden; + display: flex; + align-items: center; + padding: 0 2vw; +} + +.elem h2 { + font-size: 3vw; + position: relative; + z-index: 9; +} + +.elem .overlay { + height: 100%; + width: 100%; + background-color: #ff9831; + position: absolute; + left: 0; + top: -100%; + transition: all ease 0.25s; +} + +.elem:hover .overlay { + top: 0; +} + +#media{ + display: none; +} + + +#fixed { + height: 30vw; + width: 24vw; + /* background-color: red; */ + border-radius: 15px; + position: fixed; + z-index: 99; + left: 50%; + top: 25%; + display: none; + background-size: cover; + background-position: center; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} + +#fixed video { + /* height: 450px; */ + width: 750px; + border-radius: 15px; +} + + + +#page4 { + min-height: 100vh; + width: 100%; + position: relative; + background-color: #efeae3; + padding: 3vw; +} + +#cnt2 { + background-color: black; + border-radius: 1vw; + overflow: hidden; + height: 110vh; + width: 100%; + display: flex; + justify-content: center; +} + +.cntpart1 { + display: flex; + flex-flow: column; + justify-content: flex-start; + align-items: center; + /* background-color: blue; */ + width: 45%; + padding-top: 10vw; +} + +.cntpart1 h1 { + border-left: 6px solid darkgray; + padding: 1vw; + font-size: 5vw; + cursor: pointer; + line-height: 3vw; + color: darkgray; +} + +.cntpart1 p { + color: #fff; + margin-top: 3vw; + font-size: 1.2vw; + font-weight: 200; + line-height: 1.5vw; + width: 55%; + height: 30%; +} + +.cntpart2 { + background-image: url(./p1.webp); + width: 55%; + background-size: cover; + background-position: center; +} + +#page5 { + height: 80vh; + width: 100%; + background-color: #EFEAE3; + padding: 10vw 2vw; + position: relative; +} + +.swiper { + width: 100%; + height: 100%; +} + +.swiper-slide { + width: 25%; + border-left: 1px solid #aeadad; + padding: 0 2vw; +} + +.swiper-slide img { + margin-bottom: 2vw; +} + +.swiper-slide p { + font-weight: 300; + font-size: 1.3vw; +} + +#page6 { + min-height: 110vh; + width: 100%; +} + +footer { + position: fixed; + height: 105vh; + width: 100%; + background-color: #000; + color: #fff; + z-index: 9; + bottom: 0; + display: flex; + align-items: center; + justify-content: flex-end; + flex-direction: column; + padding: 1.5vw 3vw; +} + +#foottop { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +#foottop span { + display: flex; + flex-direction: column; +} + +#foottop span:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 2vw; + width: 30%; + padding-right: 5vw; + overflow: hidden; +} + +#foottop span a { + padding-left: 5vw; + font-size: 2.5vw; + color: #efeae3; + text-decoration: none; +} + +#foottop span p { + font-size: 1.5vw; + font-weight: 100; + color: #efeae3; + text-decoration: none; +} + +#foottop span input[type=email] { + font-size: 1.5vw; + font-weight: 100; + background-color: transparent; + border-bottom: 1px solid lightgray; + border: none; + text-decoration: none; +} + +#foottop span input[type=submit] { + padding: .1vw 1vw; + font-size: 3vw; + font-weight: 100; + color: #efeae3; + background-color: transparent; + border: none; + /* border: 1px solid lightgray; */ + text-decoration: none; +} + +#email { + display: flex; + border-bottom: 1px solid lightgray; + width: 95%; +} + +footer h1 { + font-size: 23vw; +} + +#footlow { + border-top: 1px solid lightgray; + padding-top: 2vw; + width: 100%; + display: flex; + justify-content: space-between; +} + +#footlow span{ + display: flex; + justify-content: space-evenly; + gap: 20vw; +} + +#footlow h3 { + font-weight: 200; + font-size: 1.3vw; +} + +#full-scr { + height: 100vh; + width: 100%; + background-color: #00000070; + position: absolute; + /* position: fixed; */ + z-index: 95; + top: -100%; + transition: all ease 0.8s; +} + +#full-div1 { + height: 50%; + width: 100%; + background-color: #EFEAE3; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + +} + +@media (max-width:768px) { + + /* #main { + z-index: 10; + position: relative; + background-color: #000; + } */ + + #page1 { + min-height: 100vh; + width: 100vw; + padding: 0 0vw; + } + + nav { + padding: 8vw 5vw; + background-color: #EFEAE3; + z-index: 100; + } + + nav img { + transition: all ease 0.2s; + height: 9vh; + } + + #npart { + display: none; + } + + nav h3 { + display: block; + padding: 3vw 5vw; + border: 1px solid #ababab; + border-radius: 50px; + font-size: 4vw; + font-weight: 200; + padding-left: 10vw; + z-index: 100; + } + + #full-scr{ + z-index: 95; + } + + #center { + height: 65vh; + width: 100%; + /* background-color: orange; */ + display: flex; + align-items: flex-end; + justify-content: space-between; + border-bottom: 1px solid #0000003c; + padding: 7vw 5vw; + padding-bottom: 10vw; + flex-direction: column-reverse; + position: relative; + z-index: 9; + } + + #left{ + display: flex; + align-items: flex-start; + width: 100%; + } + + #left h3 { + font-size: 6.5vw; + line-height: 6vw; + } + + #center h1 { + margin-top: 5vw; + font-size: 20vw; + text-align: right; + line-height: 17vw; + } + + #page1 video { + position: relative; + border-radius: 15px; + margin-top: 4vw; + height: 70vh; + object-fit: cover; + object-position: center; + width: 92%; + margin-left: 4%; + } + + #page2 { + min-height: 100vh; + width: 100%; + background-color: #EFEAE3; + padding: 4vw 0; + position: relative; + } + + .marquee { + display: inline-flex; + align-items: center; + overflow-x: auto; + white-space: nowrap; + } + + .marquee::-webkit-scrollbar { + display: none; + } + + #cnt { + white-space: nowrap; + display: inline-block; + animation: marquee s linear infinite; + } + + #page2 .marquee h1 { + font-size: 20vw; + /* background-color: lightblue; */ + display: inline-block; + } + + .marquee div { + height: 30px; + width: 30px; + border-radius: 50%; + display: inline-block; + background-color: #FE320A; + margin: 3vw; + } + + #p2-bottom { + height: 100vh; + width: 100%; + /* background-color: aliceblue; */ + padding: 10vw 4vw; + display: flex; + align-items: flex-start; + justify-content: space-between; + position: relative; + flex-direction: column; + z-index: 9; + } + + #p2-bottom h1 { + font-size: 10vw; + width: 100%; + line-height: 9.5vw; + } + + #bpart { + width: 90%; + /* background-color: aqua; */ + } + + #bpart img { + width: 100%; + border-radius: 10px; + } + + #bpart p { + font-weight: 300; + margin-top: 5vw; + font-size: 4.8vw; + line-height: 6vw; + } + + #page2 #gooeyshape { + height: 50vh; + width: 50vh; + position: absolute; + border-radius: 50%; + background: linear-gradient(to top right, #ff2d03, #ff5c0b); + /* background: linear-gradient(to top right,red,blue); */ + top: 35%; + left: 10%; + filter: blur(20px); + animation: gooey 6s infinite alternate ease-in-out; + } + + .elem { + height: 80vw; + width: 100%; + position: relative; + border-bottom: none; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 8vw 4vw; + } + + #media{ + display: flex; + justify-content: center; + width: 100%; + height: 100%; + background-color: #FE320A; + overflow: hidden; + border-radius: 10px; + background-position: center; + background-size: cover; + /* position: relative; */ + } + + #media img{ + width: 100%; + /* height: 100%; */ + border-radius: 10px; + object-fit: cover; + object-position: center; + /* position: absolute; */ + } + + + .elem h2 { + padding-top: 2vw; + font-size: 8vw; + } + + .elem .overlay { + display: none; + } + + .elem:hover .overlay { + top: 0; + } + + #fixed{ + display: none; + } + + #cnt2 { + background-color: black; + border-radius: 1vw; + overflow: hidden; + height: 95vh; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 10px; + } + + .cntpart1 { + display: flex; + flex-flow: column; + justify-content: flex-start; + align-items: flex-start; + /* background-color: blue; */ + height: 70%; + width: 150%; + padding-top: 15vw; + padding-left: 15vw; + } + + .cntpart1 h1 { + border-left: 3px solid darkgray; + padding: 1vw; + font-size: 10vw; + cursor: pointer; + line-height: 8vw; + color: darkgray; + } + + .cntpart1 p { + color: #fff; + margin-top: 5vw; + font-size: 5vw; + font-weight: 200; + line-height: 5vw; + width: 55%; + height: 30%; + } + + .cntpart2 { + background-image: url(./p1.webp); + height: 60%; + width: 100%; + background-size: cover; + background-position: center; + } + + #page5 { + height: 60vh; + width: 100%; + background-color: #EFEAE3; + padding: 10vw 2vw; + position: relative; + } + + .swiper { + width: 100%; + height: 100%; + } + + .swiper-slide { + width: 30%; + border-left: 1px solid #aeadad; + padding: 0 4vw; + } + + .swiper-slide img { + margin-bottom: 2vw; + } + + .swiper-slide p { + width: 180%; + font-weight: 300; + font-size: 4.5vw; + } + + #page6{ + height: 60vh; + width: 100%; + } + + footer { + position: fixed; + height: 60vh; + width: 100%; + background-color: #000; + color: #fff; + z-index: 9; + bottom: 0; + display: flex; + align-items: center; + justify-content: space-evenly; + flex-direction: column; + padding: 1.5vw 3vw; + } + + #foottop { + width: 100%; + display: flex; + align-items: flex-start; + flex-direction: column; + } + + #foottop span { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + } + + #foottop span:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 2vw; + width: 100%; + padding: 5vw; + overflow: hidden; + } + + #foottop span a { + padding-left: 5vw; + font-size: 5vw; + color: #efeae3; + text-decoration: none; + } + + #foottop span p { + font-size: 5vw; + font-weight: 100; + color: #efeae3; + text-decoration: none; + width: 90%; + } + + #foottop span input[type=email] { + font-size: 5vw; + font-weight: 200; + background-color: transparent; + border-bottom: 1px solid lightgray; + border: none; + text-decoration: none; + width: 90%; + padding: 1vw; + } + + #foottop span input[type=submit] { + padding: .1vw 1vw; + font-size: 3vw; + font-weight: 100; + color: #efeae3; + background-color: transparent; + border: none; + /* border: 1px solid lightgray; */ + text-decoration: none; + } + + #email { + display: flex; + border-bottom: 1px solid lightgray; + width: 100%; + margin: 2vw 0vw; + } + + footer h1 { + font-size: 23vw; + } + + #footlow { + border-top: 1px solid lightgray; + padding-top: 2vw; + width: 100%; + display: flex; + justify-content: space-between; + } + + #footlow h3 { + font-weight: 200; + font-size: 5vw; + } + + #footlow span{ + display: block; + } + + #footlow span h3{ + padding: 2vw; + } + + +} + +#loader{ + height: 100%; + width: 100%; + background-color: #000; + position: fixed; + z-index: 999; + top: 0; + transition: all ease 0.7s; + display: flex; + align-items: center; + justify-content: center; +} + +#loader h1{ + font-size: 4vw; + color: transparent; + background: linear-gradient(to right,orange,orangered); + -webkit-background-clip: text; + position: absolute; + opacity: 0; + animation-name: load; + animation-duration: 1s; + animation-delay: 1s; + animation-timing-function: linear; +} +#loader h1:nth-child(2){ + animation-delay: 2s; +} +#loader h1:nth-child(3){ + animation-delay: 3s; +} + +@keyframes load { + 0%{ + opacity: 0; + } + 10%{ + opacity: 1; + } + 90%{ + opacity: 1; + } + 100%{ + opacity: 0; + } +} + +@media (max-width:600px) { + #loader h1{ + font-size: 9vw; + + } +} \ No newline at end of file diff --git a/video.mp4 b/video.mp4 new file mode 100644 index 0000000..5465691 Binary files /dev/null and b/video.mp4 differ