awwwards_series/awwwards_ss2/index.html
2024-04-23 18:51:48 -05:00

249 lines
No EOL
13 KiB
HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<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="section-1" class="section-1">
<nav>
<img src="https://uploads-ssl.webflow.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15c2_Sundown%20logo.svg"alt="">
<div id="navbar">
<p><a href="#">Work</a></p>
<p><a href="#">Studio</a></p>
<p><a href="#">Contact</a></p>
</div>
<h3>Menu</h3>
</nav>
<div id="hero-top">
<div id="left">
<h3>Sundown is a multi-disciplinary studio focused on creating unique, end-to-end experiences and environments.</h3>
</div>
<div id="right">
<h1>SPACES <br> THAT <br> INSPIRE</h1>
</div>
</div>
<div id="hero-bottom">
<div id="hero-1"></div>
<div id="hero-2"></div>
<div id="hero-3"></div>
</div>
<video src="video.mp4" autoplay loop muted></video>
</div>
<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>
<h1>ENVIRONMENTS</h1><div id="dot"></div>
</div>
<div class="text-moving">
<h1>EXPERIENCES</h1><div id="dot"></div>
<h1>CONTENT</h1><div id="dot"></div>
<h1>ENVIRONMENTS</h1><div id="dot"></div>
</div>
<div class="text-moving">
<h1>EXPERIENCES</h1><div id="dot"></div>
<h1>CONTENT</h1><div id="dot"></div>
<h1>ENVIRONMENTS</h1><div id="dot"></div>
</div>
</div>
<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="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>
</div>
</div>
<div id="sunspot" class="sunspot"></div>
</div>
<div id="section-3" class="section-3">
<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>
<div class="topic-line">
<h2>Play New Kidvision</h2>
<div>
<p>nike</p>
<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>
<div class="topic-line">
<h2>Makers Studio HOI</h2>
<div>
<p>nike</p>
<span>experiential</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b170d_AM704059-p-1080.webp">
<div class="overlay"></div>
<div class="topic-line">
<h2>NYFW Popup</h2>
<div>
<p>afterpay</p>
<span>experiential</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/6605aaa26f3ef72564bcd41a_Copy-of-Capezio-RAW.01_32_55_23.Still050-p-1080.jpg">
<div class="overlay"></div>
<div class="topic-line">
<h2>Capezio NYC Flagship</h2>
<div>
<p>capezio</p>
<span>environment</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b16f6_Copy%2520of%2520Nike_Soho_50th_SU22_FL1_6409-p-1080.webp">
<div class="overlay"></div>
<div class="topic-line">
<h2>50th Aniversary</h2>
<div>
<p>nike</p>
<span>environment</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/64d3dd9edfb41666c35b163f_Copy%2520of%2520DSC04192-p-1080.webp">
<div class="overlay"></div>
<div class="topic-line">
<h2>Converse SoHo</h2>
<div>
<p>converse</p>
<span>environment</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/6606de7b8e3eac1fa870f480_melo-portrait-2-p-1080.jpg">
<div class="overlay"></div>
<div class="topic-line">
<h2>Carmelo Anthony 7pm In Brooklyn Set</h2>
<div>
<p>wave sports entertainment</p>
<span>environment</span>
</div>
</div>
</div>
<div class="topic" data-image="https://assets-global.website-files.com/64d3dd9edfb41666c35b15d4/660ae77734c1cb76f81e4be9_Copy-of-Copy-of-KelceHousParty_WaveSports_0504-p-1080.jpg">
<div class="overlay"></div>
<div class="topic-line">
<h2>Kelce Super Bowl Party</h2>
<div>
<p>wave sports entertainment</p>
<span>experiential</span>
</div>
</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">
<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>
<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>
<script src="main.js"></script>
</body>
</html>