Sundown Studio Website Clone
Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.
📙Table Of Content
- Project Folder Structure Of Sundown Studio Website Clone
- Sundown Studio Website Clone HTML CODE
- Sundown Studio Website Clone CSS CODE
- Sundown Studio Website Clone Javascript CODE
- Video Preview of Sundown Studio Website Clone
Project Folder Structure:
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sundown Studio</title>
<link rel="shortcut icon" href="./icon.png" type="image/x-icon">
<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" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="loader">
<h1>ENVIRONMENTS</h1>
<h1>EXPERIENCES</h1>
<h1>CONTENT</h1>
</div>
<div id="fixed-image">
</div>
<div id="main">
<div id="page1">
<nav>
<img src="https://uploads-ssl.webflow.com/64d3dd9edfb41666c35b15b7/64d3dd9edfb41666c35b15c2_Sundown%20logo.svg"
alt="">
<div id="nav-part2">
<h4><a href="#">Work</a></h4>
<h4><a href="#">Studio</a></h4>
<h4><a href="#">Contact</a></h4>
</div>
<h3>Menu</h3>
</nav>
<div id="center">
<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-shape">
<div id="hero-1"></div>
<div id="hero-2"></div>
<div id="hero-3"></div>
</div>
<video autoplay loop muted src="./video.mp4"></video>
</div>
<div id="page2">
<div id="moving-text">
<div class="con">
<h1>EXPERIENCES</h1>
<div id="gola"></div>
<h1>CONTENT</h1>
<div id="gola"></div>
<h1>ENVIRONMENTS</h1>
<div id="gola"></div>
</div>
<div class="con">
<h1>EXPERIENCES</h1>
<div id="gola"></div>
<h1>CONTENT</h1>
<div id="gola"></div>
<h1>ENVIRONMENTS</h1>
<div id="gola"></div>
</div>
<div class="con">
<h1>EXPERIENCES</h1>
<div id="gola"></div>
<h1>CONTENT</h1>
<div id="gola"></div>
<h1>ENVIRONMENTS</h1>
<div id="gola"></div>
</div>
</div>
<div id="page2-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="bottom-part2">
<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 ideas
into 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="gooey">
</div>
</div>
<div id="page3">
<div id="elem-container">
<div id="elem1" class="elem"
data-image="https://images.unsplash.com/photo-1701001308648-7b731a52b8d7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNHx8fGVufDB8fHx8fA%3D%3D">
<div class="overlay"></div>
<h2>Makers Studio HOI</h2>
</div>
<div class="elem"
data-image="https://images.unsplash.com/photo-1700975928909-da4a46227a47?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHx8">
<div class="overlay"></div>
<h2>50th Anniversary</h2>
</div>
<div class="elem"
data-image="https://images.unsplash.com/photo-1701077137611-9be394bf62f0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHx8fA%3D%3D">
<div class="overlay"></div>
<h2>NYFW Popup</h2>
</div>
<div class="elem"
data-image="https://images.unsplash.com/photo-1701014159309-4a8b84faadfe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHx8fA%3D%3D">
<div class="overlay"></div>
<h2>Air Force 1 2021</h2>
</div>
<div class="elem"
data-image="https://images.unsplash.com/photo-1700924546093-f914fd5b8814?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyOHx8fGVufDB8fHx8fA%3D%3D">
<div class="overlay"></div>
<h2>SOHO NYC</h2>
</div>
<div class="elem"
data-image="https://images.unsplash.com/photo-1700601437860-e66da79cf6d2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1OXx8fGVufDB8fHx8fA%3D%3D">
<div class="overlay"></div>
<h2>SOHO 2023</h2>
</div>
<div class="elem"
data-image="https://images.unsplash.com/photo-1700769025506-6c3dcb9ec9b7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2OXx8fGVufDB8fHx8fA%3D%3D">
<div class="overlay"></div>
<h2>Play New Kidvision</h2>
</div>
</div>
</div>
<div id="page4">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
</div>
</div>
</div>
<div id="page5">
</div>
<div id="full-scr">
<div id="full-div1">
</div>
</div>
</div>
<div id="footer">
<div id="footer-div">
</div>
<h1>Sundown</h1>
<div id="footer-bottom">
</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="script.js"></script>
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<img data-name="sarthak" data-company="Sheryians" src="https://images.unsplash.com/photo-1697192715136-23666b08fe04?q=70&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image not found">
<script src="test.js"></script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
main {
background-color: rgba(189, 190, 169, 0.612);
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 60% 40%;
}
.top-left {
/* background-color: red; */
grid-row: 1;
padding-left: 60px;
align-self: flex-end;
justify-self: center;
}
.top-left-text {
font-size: 9vw;
line-height: 10vw;
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
align-self: center;
}
.top-left-text:hover {
font-size: 9vw;
line-height: 10vw;
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
align-self: center;
color: chocolate;
text-decoration: wavy;
}
.capsool {
/* background-color: red; */
width: 200px;
height: 50px;
border: 2px solid black;
border-radius: 100px;
display: flex;
justify-content: center;
justify-content: space-evenly;
align-items: center;
padding-left: 20px;
}
.circle {
/* background-color: red; */
width: 20px;
height: 20px;
border-radius: 50%;
}
#circle1 {
background-color: gray;
}
.circle:hover {
/* background-color: red; */
width: 25px;
height: 25px;
border-radius: 50%;
}
#circle1:hover {
background-color: rgb(221, 15, 15);
}
#circle2:hover {
background-color: rgb(107, 11, 167);
}
#circle2 {
background-color: chartreuse;
}
.bottom-left {
/* background-color: yellow; */
grid-row: 2;
padding: 70px;
}
.bottom-left-text {
padding-top: 40px;
font-family: sans-serif;
}
.right {
/* background-color: blueviolet; */
grid-row: 1/3;
grid-column: 2;
display: flex;
align-items: flex-end;
justify-content: center;
}
.image {
background-image: url('https://yt3.googleusercontent.com/ytc/AIf8zZTtdKR6GRscmkyNm2Il-ZyOodyv5OpVsYP0al1TzQ=s900-c-k-c0x00ffffff-no-rj');
height: 80%;
width: 60%;
object-fit: cover;
background-position: 30% 50%;
}
.image:hover {
background-image: url('https://w0.peakpx.com/wallpaper/671/123/HD-wallpaper-momoland-nancy-girls-kpop-queen.jpg');
height: 80%;
width: 60%;
object-fit: cover;
background-position: top;
}
.right h1 {
position: absolute;
rotate: 270deg;
bottom: 240px;
font-size: 5vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500;
right: 520px;
}
.right h2 {
position: absolute;
/* rotate: 270deg; */
bottom: 560px;
font-size: 4vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500;
right: 530px;
margin: 20px;
}
.right h3 {
position: absolute;
/* rotate: 270deg; */
bottom: 560px;
font-size: 4vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500;
right: 50px;
margin: 20px;
}
.l-f-text {
display: flex;
display: inline-block;
}
.l-f-text h3 {
font-size: 4vh;
position: absolute;
right: 130px;
}
.l-f-text i {
color: yellow;
}
.big-circle {
display: flex;
font-size: 7vh;
justify-content: center;
align-items: center;
background-color: black;
width: 150px;
height: 150px;
color: red;
border-radius: 50%;
position: absolute;
bottom: 170px;
right: 80px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
@media (max-width:600px) {
main {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 30% 45% 60%;
background-color: aliceblue;
}
.top-left {
/* background-color: red; */
grid-row: 1/2;
padding-left: 30px;
align-self: flex-end;
justify-self: center;
}
.top-left-text {
font-size: 10vh;
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
align-self: center;
line-height: 20vw;
}
.bottom-left {
/* background-color: yellow; */
grid-row: 2/3;
padding: 25px;
padding-top: 50px;
}
.capsool {
/* background-color: red; */
width: 100px;
height: 40px;
border: 2px solid black;
border-radius: 100px;
display: flex;
justify-content: center;
justify-content: space-evenly;
align-items: center;
padding: 5px;
}
.capsool h2 {
font-size: 15px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.circle {
/* background-color: red; */
width: 10px;
height: 10px;
border-radius: 50%;
}
#circle1 {
background-color: gray;
}
#circle2 {
background-color: chartreuse;
}
.bottom-left-text {
padding-top: 40px;
font-family: sans-serif;
}
.right {
/* background-color: blueviolet; */
grid-row: 3/-2;
/* grid-column: 2; */
display: flex;
align-items: flex-start;
justify-content: center;
}
.image {
background-image: url('https://yt3.googleusercontent.com/ytc/AIf8zZTtdKR6GRscmkyNm2Il-ZyOodyv5OpVsYP0al1TzQ=s900-c-k-c0x00ffffff-no-rj');
position: absolute;
display: flex;
width: 90%;
height: 60%;
position: absolute;
right: 20px;
top: 546px;
}
.right h1 {
position: absolute;
rotate: 0deg;
bottom: 146px;
font-size: 4vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500;
right: 100px;
}
.right h2 {
position: absolute;
rotate: 0deg;
bottom: -329px;
font-size: 3vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500;
right: 293px;
margin: 20px;
}
.right h3 {
position: absolute;
/* rotate: 0deg; */
bottom: -329px;
font-size: 2px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500;
left: 176px;
margin: 20px;
}
.l-f-text {
display: flex;
display: inline-block;
}
.l-f-text h3 {
font-size: 3vh;
position: absolute;
right: 130px;
}
.l-f-text i {
color: yellow;
}
.big-circle {
display: flex;
font-size: 3vh;
justify-content: center;
align-items: center;
background-color: black;
width: 100px;
height: 45px;
color: red;
border-radius: 50%;
position: absolute;
bottom: 101px;
right: 141px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
}
test.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Gilroy';
}
html, body {
height: 100%;
width: 100%;
}
img{
height: 400px;
width: 600px;
}
script.js
const scroll = new LocomotiveScroll({
el: document.querySelector('#main'),
smooth: true
});
function page4Animation() {
var elemC = document.querySelector("#elem-container")
var fixed = document.querySelector("#fixed-image")
elemC.addEventListener("mouseenter", function () {
fixed.style.display = "block"
})
elemC.addEventListener("mouseleave", function () {
fixed.style.display = "none"
})
var elems = document.querySelectorAll(".elem")
elems.forEach(function (e) {
e.addEventListener("mouseenter", function () {
var image = e.getAttribute("data-image")
fixed.style.backgroundImage = `url(${image})`
})
})
}
function swiperAnimation() {
var swiper = new Swiper(".mySwiper", {
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 100,
});
}
function menuAnimation() {
var menu = document.querySelector("nav h3")
var full = document.querySelector("#full-scr")
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
}
})
}
function loaderAnimation() {
var loader = document.querySelector("#loader")
setTimeout(function () {
loader.style.top = "-100%"
}, 4200)
}
swiperAnimation()
page4Animation()
menuAnimation()
loaderAnimation()
test.js
var a = document.querySelector("img")
var b = a.getAttribute("data-company")
console.log(b)
Video Preview of Sundown Studio Website Clone
Star
Fork
Download
How to run this Html Css and Js Project in Our Browser?
first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.
Which Code Editor do you use to create those projects?
I am using VS Code Studio.
is this project responsive or not?
Yes! this project is a responsive project.
If you enjoyed reading this post and have found it useful for you, then please give share it with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram
if you have any confusion Comment below or you can contact us by filling out our Contact Us form from the home section. 🤞🎉
No comments:
Post a Comment