updated code

This commit is contained in:
Juthatip McDevitt 2024-04-10 14:22:50 -05:00
parent f07a427dd8
commit defbd53cbb
3 changed files with 347 additions and 157 deletions

View file

@ -90,7 +90,6 @@
<span>environment</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b1733_Nike_HOI_50th_SU22_FL1_5388-p-1080.webp">
<div class="overlay"></div>
@ -163,6 +162,46 @@
</div>
</div>
</div>
<div class="container-2">
<div class="container2-content">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b1694_Copy%2520of%2520211023_NikeCHI_PlayNewKids_Beauty-26-p-1080.webp" alt="">
<h2>Play New Kidvision</h2>
<p>nike</p>
<span>environment</span>
</div>
<div class="container2-content">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b1733_Nike_HOI_50th_SU22_FL1_5388-p-1080.webp" alt="">
<h2>Makers Studio HOI</h2>
<p>nike</p>
<span>experiential</span>
</div>
<div class="container2-content">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b170d_AM704059-p-1080.webp" alt="">
<h2>NYFW Popup</h2>
<p>afterpay</p>
<span>experiential</span>
</div>
<div class="container2-content">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/6605aaa26f3ef72564bcd41a_Copy-of-Capezio-RAW.01_32_55_23.Still050-p-1080.jpg" alt="">
<h2>Capezio NYC Flagship</h2>
<p>capezio</p>
<span>environment</span>
</div>
<div class="container2-content">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b16f6_Copy%2520of%2520Nike_Soho_50th_SU22_FL1_6409-p-1080.webp" alt="">
<h2>50th Aniversary</h2>
<p>nike</p>
<span>environment</span>
</div>
<div class="container2-content">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b163f_Copy%2520of%2520DSC04192-p-1080.webp" alt="">
<h2>Converse SoHo</h2>
<p>converse</p>
<span>environment</span>
</div>
</div>
</div>
<div class="section-4">
@ -186,66 +225,7 @@
</div>
</div>
<div id="section-5" class="section-5">
<div class="section5-topic">
<i class='bx bxs-circle'></i>
<p>who we work with</p>
</div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="section5-text">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b15ff_Nike.svg" alt="">
<p>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.</p>
</div>
</div>
<div class="swiper-slide">
<div class="section5-text">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b1600_Converse.svg" alt="">
<p>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.</p>
</div>
</div>
<div class="swiper-slide">
<div class="section5-text">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/660eb758d7f9942fd6b69202_the-north-face-1-logo-png-transparent-p-500.png" alt="">
<p>Creative Concepting, 2D & 3D Design, Design Management for work in NYC and across the country.</p>
</div>
</div>
<div class="swiper-slide">
<div class="section5-text">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b15fd_Arc%E2%80%99teryx.svg" alt="">
<p>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.</p>
</div>
</div>
<div class="swiper-slide">
<div class="section5-text">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b15fe_Hunter.svg" alt="">
<p>Design and Production partner for Hunter Holiday 2022 Pop-in at Nordstrom 57th St, New York, including activations in Womens, Mens and Kids 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.</p>
</div>
</div>
<div class="swiper-slide">
<div class="section5-text">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b1601_MediaLink.svg" alt="">
<p>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.</p>
</div>
</div>
<div class="swiper-slide">
<div class="section5-text">
<img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b1602_AfterPay.svg" alt="">
<p>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 Afterpays clients such as Crocs, JD Sports, Container Store, & Revolve.</p>
</div>
</div>
</div>
</div>
</div>
<div id="section-6" class="section-6"></div>
<div id="section-5" class="section-5"></div>
<div id="full-screen" class="full-screen">
<div id="full-screen-div"></div>

View file

@ -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()

View file

@ -143,14 +143,16 @@ 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;
@ -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;
}
}