From ffae7c61a2ac17e40327889c3e5ce5d7899f1829 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Tue, 9 Apr 2024 15:31:19 -0500
Subject: [PATCH] added section 4-6 & footer

---
 awwwards_ss2/index.html | 123 +++++++++++++--
 awwwards_ss2/main.js    |  47 +++++-
 awwwards_ss2/style.css  | 321 +++++++++++++++++++++++++++++++++-------
 3 files changed, 431 insertions(+), 60 deletions(-)
diff --git a/awwwards_ss2/index.html b/awwwards_ss2/index.html
index 59c1446..aab9f01 100644
--- a/awwwards_ss2/index.html
+++ b/awwwards_ss2/index.html
@@ -4,16 +4,23 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="style.css">
         <link rel="shortcut icon" href="icon.png" type="image/x-icon">
+        <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
         <title>Awwwards | Sundown Studio</title>
     </head>
     <body>
 
+        <div id="loading" class="loading">
+            <h1>ENVIRONMENTS</h1>
+            <h1>EXPERIENCES</h1>
+            <h1>CONTENT</h1>
+        </div>
+
         <div id="overlay-image"></div>
 
         <div id="main" class="main">
-            <div id="home-1" class="home-1">
+            <div id="section-1" class="section-1">
                 <nav>
                     <img src="https://uploads-ssl.webflow.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15c2_Sundown%20logo.svg"alt="">
                     <div id="navbar">
@@ -39,8 +46,8 @@
                 <video src="video.mp4" autoplay loop muted></video>
             </div>
 
-            <div id="home-2" class="home-2">
-                <div id="home-2-top" class="home-2-top">
+            <div id="section-2" class="section-2">
+                <div id="section-2-top" class="section-2-top">
                     <div class="text-moving">
                         <h1>EXPERIENCES</h1><div id="dot"></div>
                         <h1>CONTENT</h1><div id="dot"></div>
@@ -57,9 +64,9 @@
                         <h1>ENVIRONMENTS</h1><div id="dot"></div>
                     </div>
                 </div>
-                <div id="home-2-bottom" class="home-2-bottom">
+                <div id="section-2-bottom" class="section-2-bottom">
                     <h1>We are a group of design- driven, goal-focused creators,  producers, and designers who believe that the details  make all the difference.</h1>
-                    <div id="home-2-bottom2" class="home-2-bottom2">
+                    <div id="section-2-bottom2" class="section-2-bottom2">
                         <img src="https://uploads-ssl.webflow.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15d1_Holding_thumb-p-500.jpg" alt="">
                         <p>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.</p>
@@ -68,7 +75,11 @@
                 <div id="sunspot" class="sunspot"></div>
             </div>
 
-            <div id="home-3" class="home-3">
+            <div id="section-3" class="section-3">
+                <div class="section3-topic">
+                    <i class='bx bxs-circle'></i>
+                    <p>featured projects</p>
+                </div>
                 <div class="container">
                     <div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b1694_Copy%2520of%2520211023_NikeCHI_PlayNewKids_Beauty-26-p-1080.webp">
                         <div class="overlay"></div>
@@ -154,11 +165,105 @@
                 </div>
             </div>
 
+            <div class="section-4">
+                <div class="wrapper">
+                    <ul class="indicator">
+                        <li class="active" data-target="#design">Design</li>
+                        <li data-target="#project"> Project</li>
+                        <li data-target="#execution"> Execution</li>
+                    </ul>
+                    <ul class="content">
+                        <li class="active" id="design">
+                            <img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15e1_Project-p-1080.jpg" alt="">
+                        </li>
+                        <li id="project">
+                            <img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15d0_Project.webp" alt="">
+                        </li>
+                        <li id="execution">
+                            <img src="https://assets-global.website-files.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15cd_Execution-p-1080.jpg" alt="">
+                        </li>
+                    </ul>
+                </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 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.</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 Afterpay’s 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="full-screen" class="full-screen">
+                <div id="full-screen-div"></div>
+            </div>
+        </div>
+
+        <div id="footer" class="footer">
+            <div class="footer-sunspot"></div>
+            <h1>Sundown</h1>
+            <div class="footer-copyright">
+                <div class="footer-text">
+                    <p>Copyright &copy; Sundown Studio</p>
+                    <p><i class='bx bx-globe'></i> Brooklyn, NY</p>
+                    <p>Instagram</p>
+                    <p>LinkedIn</p>
+                </div>
+            </div>
         </div>
-    
 
         <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
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 ==========*/
