We love to create, we love to solve, we love to collaborate, and we love to turn amazing ideasinto 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.
@@ -68,7 +75,11 @@
+
+
+
+
+
+ - Design
+ - Project
+ - Execution
+
+
+
+
-
-
+
+
+
+
+
+
+
+
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 19af14d..ad328aa 100644
--- a/awwwards_ss2/main.js
+++ b/awwwards_ss2/main.js
@@ -1,3 +1,8 @@
+const scroll = new LocomotiveScroll({
+ el: document.querySelector('#main'),
+ smooth: true
+});
+
//overlay-image
function topicOverlayAnimation() {
var topic = document.querySelector(".container")
@@ -18,4 +23,44 @@ function topicOverlayAnimation() {
})
}
topicOverlayAnimation()
-//
+
+//tabs
+const allIndicator = document.querySelectorAll('.indicator li');
+const allContent = document.querySelectorAll('.content li');
+
+allIndicator.forEach(item=> {
+ item.addEventListener('click', function () {
+ const content = document.querySelector(this.dataset.target);
+
+ allIndicator.forEach(i=> {
+ i.classList.remove('active');
+ })
+
+ allContent.forEach(i=> {
+ i.classList.remove('active');
+ })
+
+ content.classList.add('active');
+ this.classList.add('active');
+ })
+})
+
+//swiper
+function swiperAnimation() {
+ var swiper = new Swiper(".mySwiper", {
+ slidesPerView: 3,
+ centeredSlides: false,
+ spaceBetween: 100,
+ });
+}
+swiperAnimation()
+
+//loading animation
+function loadingAnimation() {
+ var loading = document.querySelector("#loading")
+ setTimeout(function () {
+ loading.style.top = "-100%"
+ }, 4200)
+}
+loadingAnimation()
+
diff --git a/awwwards_ss2/style.css b/awwwards_ss2/style.css
index 2d00708..b4e3175 100644
--- a/awwwards_ss2/style.css
+++ b/awwwards_ss2/style.css
@@ -15,25 +15,72 @@ a{
text-decoration: none;
color: inherit;
}
-.main{
+#main{
position: relative;
- z-index: 9;
+ z-index: 10;
}
-/*===== Home1 =====*/
-.home-1{
+/*===== Loader =====*/
+.loading{
+ 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;
+}
+.loading 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;
+}
+.loading h1:nth-child(2){
+ animation-delay: 2s;
+}
+.loading h1:nth-child(3){
+ animation-delay: 3s;
+}
+
+@keyframes load{
+ 0%{
+ opacity: 0;
+ }
+ 10%{
+ opacity: 1;
+ }
+ 90%{
+ opacity: 1;
+ }
+ 100%{
+ opacity: 0;
+ }
+}
+/*===== Section1 =====*/
+.section-1{
min-height: 100vh;
width: 100%;
position: relative;
- padding: 0 2.5rem;
+ padding: 0 2vw;
+ background-color: #EFEAE3;
}
-.home-1 video{
+.section-1 video{
position: relative;
border-radius: 30px;
- margin-top: 4.8rem;
+ margin-top: 4vw;
width: 100%;
}
nav {
- padding: 2.5rem 0;
+ padding: 2vw 0;
width: 100%;
display: flex;
align-items: center;
@@ -47,7 +94,7 @@ nav h3 {
#navbar{
display: flex;
align-items: center;
- gap: 1.2rem;
+ gap: 1vw;
}
#navbar p{
padding: 0.6rem 1.2rem;
@@ -90,26 +137,25 @@ nav h3 {
align-items: flex-end;
justify-content: space-between;
border-bottom: 1px solid #0000003c;
- padding-bottom: 3rem;
+ padding-bottom: 2.5vw;
}
#left h3{
- width: 480px;
- font-size: 2rem;
+ width: 25vw;
+ font-size: 1.8vw;
+ line-height: 2vw;
font-weight: 600;
- line-height: 2rem;
letter-spacing: -2px;
}
#right h1{
- font-size: 12rem;
- font-weight: 600;
text-align: right;
- line-height: 9rem;
- letter-spacing: -10px;
+ font-size: 10vw;
+ font-weight: 600;
+ line-height: 8vw;
}
#hero-bottom{
position: absolute;
- width: 55.2rem;
- height: 43.2rem;
+ width: 46vw;
+ height: 36vw;
right: 0;
top: 65vh;
}
@@ -124,8 +170,8 @@ nav h3 {
}
#hero-2{
background: linear-gradient(#FE320A, #fe3f0a);
- height: 36rem;
- width: 36rem;
+ height: 30vw;
+ width: 30vw;
border-radius: 50%;
position: absolute;
animation-name: anime2;
@@ -137,9 +183,9 @@ nav h3 {
}
#hero-3{
background: linear-gradient(#FE320A, #fe3f0a);
- height: 36rem;
+ height: 30vw;
+ width: 30vw;
position: absolute;
- width: 36rem;
border-radius: 50%;
filter: blur(25px);
animation-name: anime1;
@@ -164,15 +210,15 @@ nav h3 {
transform: translate(-20%, 30%);
}
}
-/*===== Home2 =====*/
-.home-2{
+/*===== Section2 =====*/
+.section-2{
min-height: 100vh;
width: 100%;
- background-color: #EFEAE3;
- padding: 9.5rem 0;
+ padding: 8vw 0;
position: relative;
+ background-color: #EFEAE3;
}
-.home-2-top{
+.section-2-top{
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none; /* Firefox 64 ===> -ms-overflow-style: none; (IE 11)*/
@@ -185,8 +231,8 @@ nav h3 {
animation-timing-function: linear;
animation-iteration-count: infinite;
}
-.home-2-top h1 {
- font-size: 10rem;
+.section-2-top h1 {
+ font-size: 9vw;
display: inline-block;
}
#dot{
@@ -195,7 +241,7 @@ nav h3 {
border-radius: 50%;
display: inline-block;
background-color: #FE320A;
- margin: 1.2rem 2.4rem;
+ margin: 1vw 2vw;
}
@keyframes textmoving {
from {
@@ -206,36 +252,36 @@ nav h3 {
transform: translateX(-100%);
}
}
-.home-2-bottom{
+.section-2-bottom{
height: 80vh;
width: 100%;
- padding: 5.4rem;
+ padding: 4.5vw;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 9;
}
-.home-2-bottom h1{
- font-size: 4.6rem;
+.section-2-bottom h1{
+ font-size: 4vw;
width: 60%;
- line-height: 5rem;
+ line-height: 4vw;
font-weight: 600;
letter-spacing: -3px;
}
-.home-2-bottom2{
+.section-2-bottom2{
width: 20%;
}
-.home-2-bottom2 img{
+.section-2-bottom2 img{
width: 100%;
margin-top: 20rem;
border-radius: 15px;
}
-.home-2-bottom2 p{
- margin-top: 4rem;
- font-size: 16px;
+.section-2-bottom2 p{
+ margin-top: 2vw;
+ font-size: 1vw;
}
-.home-2 .sunspot{
+.section-2 .sunspot{
height: 32vw;
width: 32vw;
position: absolute;
@@ -260,12 +306,15 @@ nav h3 {
transform: translate(-10%, 10%) skew(-12deg);
}
}
-/*===== Home3 =====*/
-.home-3{
+/*===== Section3 =====*/
+.section-3{
min-height: 100vh;
width: 100%;
+ padding: 4vw 0;
background-color: #EFEAE3;
- padding: 4.8rem 0;
+}
+.section3-topic{
+ padding: 0 2.4rem;
}
.topic{
height: 150px;
@@ -275,10 +324,10 @@ nav h3 {
overflow: hidden;
display: flex;
align-items: center;
- padding: 0 2.4rem;
+ padding: 0 2vw;
}
.topic h2{
- font-size: 3.6rem;
+ font-size: 3vw;
position: relative;
z-index: 9;
}
@@ -317,8 +366,8 @@ nav h3 {
color: gray;
}
#overlay-image{
- height: 550px;
- width: 450px;
+ height: 30vw;
+ width: 24vw;
border-radius: 15px;
position: fixed;
z-index: 99;
@@ -328,5 +377,177 @@ nav h3 {
background-size: cover;
background-position: center;
}
-/*===== Home4 =====*/
+/*===== Section4 =====*/
+.section-4{
+ min-height: 100vh;
+ width: 100%;
+ padding: 2vw 2vw;
+ background-color: #EFEAE3;
+}
+.wrapper{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ width: 100%;
+ border-radius: 25px;
+ background-color: #0B0500;
+ color: #EFEAE3;
+}
+.indicator{
+ width: 60%;
+ display: flex;
+ flex-direction: column;
+ margin: 100px;
+}
+.indicator li{
+ display: flex;
+ align-items: center;
+ padding: 10px 10px;
+ cursor: pointer;
+ font-size: 4vw;
+ font-weight: 600;
+ color: #4F4A45;
+ border-left: 3px solid #4F4A45;
+ line-height: 55px;
+}
+.indicator li.active{
+ border-left-color: #FE330A;
+ color: #EFEAE3;
+}
+.content{
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+.content li{
+ display: none;
+}
+.content li.active{
+ display: block;
+ overflow: hidden;
+}
+.content li img{
+ border-radius: 30px;
+ 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{
+ height: 100vh;
+ width: 100%;
+}
+#footer-bottom {
+ border-top: 1px solid #dadada;
+ height: 10vh;
+ width: 100%;
+}
+#full-screen{
+ height: 100vh;
+ width: 100%;
+ background-color: #00000070;
+ position: fixed;
+ z-index: 99;
+ top: -100%;
+ transition: all ease 0.5s;
+}
+#full-screen-div{
+ height: 50%;
+ width: 100%;
+ background-color: #EFEAE3;
+ border-bottom-left-radius: 20px;
+ border-bottom-right-radius: 20px;
+}
+/*===== Footer =====*/
+.footer{
+ position: fixed;
+ height: 105vh;
+ width: 100%;
+ background-color: #0B0500;
+ color: #fff;
+ z-index: 9;
+ bottom: 0;
+ display: flex;
+ /* align-items: flex-end; */
+ justify-content: flex-end;
+ flex-direction: column;
+ padding: 1vw 3vw;
+}
+.footer h1 {
+ font-size: 20vw;
+}
+.footer-sunspot {
+ height: 100vh;
+ width: 100%;
+ background: linear-gradient(to top right, #ff2d03, #ff5c0b);
+ filter: blur(30px);
+ animation-name: sunspot;
+ animation-duration: 10s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-timing-function: ease-in-out;
+}
+@keyframes sunspot{
+ from {
+ filter: blur(100px);
+ transform: translate(20%, -10%) skew(0);
+ }
+ to {
+ filter: blur(50px);
+ transform: translate(-10%, 10%) skew(-12deg);
+ }
+}
+.footer-copyright{
+ border-top: 1px solid #dadada;
+ height: 10vh;
+ width: 100%;
+}
+.footer-text{
+ display: flex;
+ justify-content: space-between;
+ margin-top: 20px;
+}
+/*========== Responsive ==========*/