diff --git a/awwwards_ss2/index.html b/awwwards_ss2/index.html index aab9f01..32eb46e 100644 --- a/awwwards_ss2/index.html +++ b/awwwards_ss2/index.html @@ -90,7 +90,6 @@ environment -
@@ -163,6 +162,46 @@
+ +
+
+ +

Play New Kidvision

+

nike

+ environment +
+
+ +

Makers Studio HOI

+

nike

+ experiential +
+
+ +

NYFW Popup

+

afterpay

+ experiential + +
+
+ +

Capezio NYC Flagship

+

capezio

+ environment +
+
+ +

50th Aniversary

+

nike

+ environment +
+
+ +

Converse SoHo

+

converse

+ environment +
+
@@ -186,66 +225,7 @@
-
-
- -

who we work with

-
-
-
-
-
- -

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.

-
-
-
-
- -

Creative Concepting, 2D & 3D Design, Design Management for work in NYC and across the country.

-
-
-
-
- -

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.

-
-
-
-
-
- -
+
diff --git a/awwwards_ss2/main.js b/awwwards_ss2/main.js index 0637a8e..4f378c8 100644 --- a/awwwards_ss2/main.js +++ b/awwwards_ss2/main.js @@ -45,16 +45,6 @@ allIndicator.forEach(item=> { }) }) -//swiper -function swiperAnimation() { - var swiper = new Swiper(".mySwiper", { - slidesPerView: 3, - centeredSlides: false, - spaceBetween: 100, - }); -} -swiperAnimation() - //loading animation function loadingAnimation() { var loading = document.querySelector("#loading") @@ -63,24 +53,3 @@ function loadingAnimation() { }, 4200) } loadingAnimation() - -//navbar -function menuAnimation() { - - var menu = document.querySelector("nav h3") - var full = document.querySelector("#full-screen") - 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 - } - }) -} -menuAnimation() diff --git a/awwwards_ss2/style.css b/awwwards_ss2/style.css index 16bfbd4..8864867 100644 --- a/awwwards_ss2/style.css +++ b/awwwards_ss2/style.css @@ -143,21 +143,23 @@ nav h3{ padding-bottom: 2.5vw; } #left h3{ - width: 25vw; + width: 30vw; font-size: 1.8vw; - line-height: 2vw; + line-height: 1.8vw; + letter-spacing: -1px; } #right h1{ font-size: 10vw; text-align: right; line-height: 8vw; + letter-spacing: -5px; } #hero-bottom{ position: absolute; width: 46vw; height: 36vw; right: 0; - top: 65vh; + top: 65vh; } #hero-1{ background-color: #FE320A; @@ -377,6 +379,9 @@ nav h3{ background-size: cover; background-position: center; } +.container-2{ + display: none; +} /*===== Section4 =====*/ .section-4{ min-height: 100vh; @@ -432,50 +437,8 @@ nav h3{ width: 100%; height: 100%; } -/*===== Section5 =====*/ -.section-5{ - height: 60vh; - width: 100%; - padding: 5vw 5vw; - background-color: #EFEAE3; -} -.section5-topic, .section3-topic{ - margin-bottom: 80px; - display: flex; - align-items: center; - gap: 5px; -} -.section5-topic .bxs-circle, .section3-topic .bxs-circle{ - color: #FE330A; - font-size: 10px; -} -.section5-topic p, .section3-topic p{ - text-transform: uppercase; -} -.swiper{ - width: 100%; - height: 70%; -} -.swiper-slide{ - width: 30%; - border-left: 1px solid #aeadad; - padding: 0 2vw; -} -.section5-text{ - display: flex; - flex-direction: column; -} -.section5-text img{ - width: 180px; -} -.section5-text p{ - font-size: 18px; - position: absolute; - bottom: 0; - letter-spacing: -1px; -} -/*===== Section6 + Full screen =====*/ -#section-6{ +/*===== Section5 + Full screen =====*/ +#section-5{ height: 100vh; width: 100%; } @@ -549,19 +512,17 @@ nav h3{ margin-top: 20px; } -/*========== Responsive ==========*/ +/*========== Responsive section1 ==========*/ @media (max-width:1200px){ #hero-top{ - height: 45vh; + height: 50vh; } #left h3{ - width: 30vw; - font-size: 2vw; + font-size: 2vw; } #right h1{ - font-size: 12vw; - text-align: right; - line-height: 10vw; + font-size: 12vw; + line-height: 10vw; } #hero-bottom{ top: 50vh; @@ -569,24 +530,26 @@ nav h3{ } @media (max-width:890px){ #hero-top{ - height: 35vh; + height: 40vh; } #hero-bottom{ top: 40vh; - } + } + #left h3{ + width: 40vw; + font-size: 2.5vw; + line-height: 3vw; + } } @media (max-width:600px){ .loading h1{ font-size: 9vw; } .section-1{ - min-height: 100vh; - width: 100vw; - padding: 0 0vw; + padding: 0; } nav{ padding: 8vw 5vw; - background-color: #EFEAE3; } nav img{ transition: all ease 0.2s; @@ -606,11 +569,6 @@ nav h3{ } #hero-top{ height: 70vh; - width: 100%; - 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; @@ -645,9 +603,292 @@ nav h3{ #hero-top{ height: 60vh; } + #hero-top h1{ + letter-spacing: -2px; + } } @media (max-width:380px){ #hero-top{ height: 50vh; } + #left h3 { + font-size: 4.5vw; + line-height: 5vw; + } + #hero-top h1{ + font-size: 16vw; + line-height: 14vw; + } +} +/*========== Responsive section2 ==========*/ +@media (max-width:1200px){ + .section-2-bottom{ + height: 70vh; + } + .section-2-bottom h1{ + font-size: 5vw; + width: 68%; + line-height: 5vw; + } + .section-2-bottom2{ + width: 25%; + } + .section-2-bottom2 img{ + margin-top: 20rem; + } + #dot{ + height: 40px; + width: 40px; + margin: 1vw 1vw; + } +} +@media (max-width:950px){ + .section-2-bottom2 p{ + margin-top: 2rem; + font-size: 1.3vw; + } + .section-2 .sunspot{ + height: 62vw; + width: 62vw; + } +} +@media (max-width:780px){ + .section-2-bottom h1{ + font-size: 6vw; + width: 60%; + line-height: 6vw; + } + .section-2-bottom2 img{ + margin-top: 10rem; + } + .section-2-bottom2 p{ + font-size: 1.5vw; + } +} +@media (max-width:750px){ + #section-2 { + padding: 5vw 0; + position: relative; + } + .section-2-bottom{ + display: flex; + align-items: flex-start; + flex-direction: column; + position: relative; + z-index: 9; + } + .section-2-bottom h1 { + margin-top: 2rem; + font-size: 4.5vw; + width: 100%; + line-height: 5vw; + } + .section-2-bottom2{ + width: 50%; + margin-top: -6rem; + } + .section-2-bottom2 p{ + font-size: 1.8vw; + } + #dot{ + height: 30px; + width: 30px; + } +} +@media (max-width:620px){ + .section-2-bottom2{ + width: 60%; + } + .section-2-bottom h1{ + font-size: 30px; + line-height: 35px; + } + .section-2-bottom2 p{ + font-size: 14px; + } +} +@media (max-width:580px){ + .section-2-bottom2{ + width: 70%; + } + .section-2-bottom2 p{ + font-size: 12px; + } + #bottom-part2 img { + width: 350px; + } +} +@media (max-width:450px){ + .section-2-bottom2{ + width: 90%; + } +} +/*========== Responsive section3 ==========*/ +@media (max-width: 1200px){ + .section3-topic{ + margin-top: 100px; + } + .topic{ + height: 100px; + } + .topic h2{ + font-size: 3.5vw; + } + .container{ + margin-top: -4rem; + } +} +@media (max-width: 980px){ + .section3-topic{ + font-size: 14px; + } + .container{ + display: none; + } + .container-2{ + display: grid; + grid-template-columns: 1fr 1fr; + padding:2.5rem; + grid-gap: 2rem; + margin-top: -5rem; + } + .container2-content img{ + width: 100%; + height: 500px; + object-fit: cover; + border-radius: 10px; + margin-bottom: 2rem; + } + .container2-content h2{ + font-size: 30px; + } + .container2-content p{ + text-transform: uppercase; + } + .container2-content span{ + text-transform: uppercase; + color: gray; + font-size: 14px; + } +} +@media (max-width: 750px){ + .container2-content img{ + height: 50vw; + object-fit: cover; + border-radius: 10px; + margin-bottom: 2rem; + } + .container2-content h2{ + font-size: 3.5vw; + } + .container2-content p{ + font-size: 14px; + text-transform: uppercase; + } + .container2-content span{ + font-size: 12px; + } +} +@media (max-width: 480px){ + .container-2{ + grid-template-columns: 1fr; + padding:1.5rem; + } + .container2-content img{ + height: 100vw; + } + .container2-content h2{ + font-size: 5vw; + } +} +/*========== Responsive section4 ==========*/ +@media (max-width:1200px){ + .wrapper{ + height: 80vh; + } + .indicator li{ + font-size: 5vw; + line-height: 50px; + } +} +@media (max-width:1050px){ + .wrapper{ + height: 70vh; + } +} +@media (max-width:950px){ + .section-4{ + height: 50vh; + } + .wrapper{ + height: 60vh; + } + .indicator li{ + line-height: 30px; + } +} +@media (max-width:800px){ + .section-4{ + padding: 2rem 2rem; + } + .wrapper{ + height: 90vh; + display: flex; + flex-direction: column; + } + .indicator{ + width: 50%; + margin-top: 50px; + margin-bottom: 100px; + } + .indicator li{ + font-size: 40px; + font-weight: 700; + line-height: 30px; + } + .content li img{ + border-radius: 10px; + width: 100%; + height: 100%; + object-fit: cover; + } +} +@media (max-width:480px){ + .wrapper{ + height: 80vh; + } + .indicator{ + margin-left: 30px; + } + .indicator{ + width: 60%; + } +} +/*========== Responsive section6 ==========*/ +@media (max-width:1200px){ + #section-5{ + height: 80vh; + } +} +@media (max-width:1000px){ + #section-5{ + height: 60vh; + } +} +@media (max-width:650px){ + .footer-text{ + font-size: 14px; + } +} +@media (max-width:495px){ + #section-5{ + height: 50vh; + } + .footer-copyright{ + height: 15vh; + } + .footer-text{ + font-size: 12px; + display: grid; + } } \ No newline at end of file