Skip to content

Commit

Permalink
added code
Browse files Browse the repository at this point in the history
  • Loading branch information
@RanitManik
RanitManik committed Apr 11, 2024
1 parent b2414e0 commit 4136ff1
Show file tree
Hide file tree
Showing 15 changed files with 94 additions and 58 deletions.
36 changes: 25 additions & 11 deletions assets/css/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion assets/css/main.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

57 changes: 36 additions & 21 deletions assets/css/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,24 +259,24 @@ hr {

.video-container {
@include inline-margin;
}

video {
width: 100%;
height: auto;
display: block;
border-radius: 1.5em;
position: relative;
@media screen and (max-width: $screen-mobile) {
margin-bottom: 2em;
}
video {
width: 100%;
height: auto;
display: block;
border-radius: 1.5em;
position: relative;
@media screen and (max-width: $screen-mobile) {
margin-bottom: 2em;
}

@media screen and (max-width: $screen-tablet) and (min-width: $screen-mobile) {
margin-bottom: 4em;
}
@media screen and (max-width: $screen-tablet) and (min-width: $screen-mobile) {
margin-bottom: 4em;
}

@media screen and (min-width: $screen-tablet) {
margin-bottom: 6em;
@media screen and (min-width: $screen-tablet) {
margin-bottom: 6em;
}
}
}

Expand Down Expand Up @@ -416,7 +416,7 @@ video {
object-fit: cover;
object-position: center;
display: block;
border-radius: .5rem;
border-radius: .5em;
position: relative;
z-index: 1;
}
Expand Down Expand Up @@ -466,7 +466,7 @@ video {
gap: .5rem;

h2 {
font-size: .9rem;
font-size: max(0.9em, 0.9rem);
font-weight: 400;
text-transform: uppercase;
display: inline-block;
Expand Down Expand Up @@ -534,7 +534,7 @@ video {
}

p {
font-size: .9rem;
font-size: max(.9rem, 0.25em);
font-weight: 300;
text-align: right;
text-transform: uppercase;
Expand Down Expand Up @@ -601,14 +601,29 @@ video {
.fixed-image-container {
height: 30vw;
width: 24vw;
border-radius: 1rem;
position: fixed;
z-index: 99;
left: 50%;
top: 25%;
border-radius: 1em;
display: none;
background-size: cover;
background-position: center;
overflow: hidden;
}

.fixed-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}

.fixed-image-container video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}


Binary file added assets/images/50th-Anniversary.webp
View file
Binary file not shown.
Binary file added assets/images/Capezio-NYC-Flagship.mp4
View file
Binary file not shown.
Binary file added assets/images/Carmelo-Anthony-7pm-In-Brooklyn-Set.mp4
View file
Binary file not shown.
Binary file added assets/images/Converse-SoHo
View file
Binary file not shown.
Binary file added assets/images/Kelce-Super-Bowl-Party
View file
Binary file not shown.
0 ...s/images/featured projects/project01.webp → assets/images/Makers-Studio-HOI.webp
View file
File renamed without changes.
0 assets/images/featured projects/project02 → assets/images/NYFW-Popup
View file
File renamed without changes.
Binary file added assets/images/Play-New-Kidvision
View file
Binary file not shown.
Binary file added assets/images/video-thumbnail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 assets/videos/video.mp4 → assets/images/video.mp4
View file
File renamed without changes.
22 changes: 13 additions & 9 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,21 @@ handleMediaQueryChange(mediaQuery);

mediaQuery.addEventListener('change', handleMediaQueryChange);

let elemC = document.querySelector(".fixed-image-container");
let fixed = document.querySelectorAll(".featured-projects ul li");
fixed.forEach(fixedItem => {
let fixedItemContainer = document.querySelector(".fixed-image-container");
let projectItems = document.querySelectorAll(".featured-projects ul li");

projectItems.forEach(fixedItem => {
fixedItem.addEventListener("mouseenter", () => {
elemC.style.display = "block";
let image = fixedItem.getAttribute("data-image");
console.log(image);
elemC.style.backgroundImage = `url(${image})`;
fixedItemContainer.style.display = "block";
let dataImage = fixedItem.getAttribute("data-image");
let dataType = fixedItem.getAttribute("data-type");
if (dataType === "image") {
fixedItemContainer.innerHTML = `<img src="${dataImage}" alt="">`;
} else if (dataType === "video") {
fixedItemContainer.innerHTML = `<video autoplay muted loop src="${dataImage}"></video>`;
}
});
fixedItem.addEventListener("mouseleave", () => {
elemC.style.display = "none";
fixedItemContainer.style.display = "none";
});
});

35 changes: 19 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
</head>
<body>
<div class="fixed-image-container">
<video autoplay muted loop>
<source src="assets/images/featured%20projects/project02" type="video/mp4">
</video>
</div>
<div class="fixed-image-container"></div>
<div id="body-wrapper">
<header>
<img src="assets/images/logo.svg" alt="">
Expand Down Expand Up @@ -45,8 +41,8 @@ <h2>
</section>
<hr>
<div class="video-container">
<video autoplay muted loop data-object-fit="cover"
src="assets/videos/video.mp4"></video>
<video poster="assets/images/video-thumbnail.png" autoplay muted loop data-object-fit="cover"
src="assets/images/video.mp4"></video>
</div>
<div class="carousel">
<div class="carousel-component">
Expand Down Expand Up @@ -87,50 +83,57 @@ <h1>
<h2>featured projects</h2>
</div>
<div class="featured-projects">
<ul>
<li data-image="assets/images/featured%20projects/project01.webp"><a href="#">Converse SoHo
<ul id="projects-list">
<li data-image="assets/images/Converse-SoHo" data-type="video"><a href="#">Converse
SoHo
<p>converse
<span>Environment</span>
</p>
</a>
</li>
<li data-image="assets/images/featured%20projects/project02"><a href="#">NYFW Popup
<li data-image="assets/images/NYFW-Popup" data-type="video"><a href="#">NYFW
Popup
<p>afterpay
<span>Experimental</span>
</p>
</a>
</li>
<li><a href="#">Capezio NYC Flagship
<li data-image="assets/images/Capezio-NYC-Flagship.mp4" data-type="video"><a href="#">Capezio NYC
Flagship
<p>capezio
<span>Environment</span>
</p>
</a>
</li>
<li><a href="#">Carmelo Anthony 7pm In Brooklyn Set
<li data-image="assets/images/Carmelo-Anthony-7pm-In-Brooklyn-Set.mp4" data-type="video"><a
href="#">Carmelo
Anthony 7pm In Brooklyn Set
<p>wake sports entertainment
<span>Environment</span>
</p>
</a>
</li>
<li><a href="#">Kelce Super Bowl Party
<li data-image="assets/images/Kelce-Super-Bowl-Party" data-type="video"><a href="#">Kelce Super Bowl
Party
<p>wake sports entertainment
<span>Experiment</span>
</p>
</a>
</li>
<li><a href="#">Play New Kidvision
<li data-image="assets/images/Play-New-Kidvision" data-type="video"><a href="#">Play New Kidvision
<p>nike
<span>Environment</span>
</p>
</a>
</li>
<li><a href="#">Makers Studio HOI
<li data-image="assets/images/Makers-Studio-HOI.webp" data-type="image"><a href="#">Makers Studio
HOI
<p>nike
<span>Experiment</span>
</p>
</a>
</li>
<li><a href="#">50th Anniversary
<li data-image="assets/images/50th-Anniversary.webp" data-type="image"><a href="#">50th Anniversary
<p>nike <span>Environment</span>
</p>
</a>
Expand Down

0 comments on commit 4136ff1

Please sign in to comment.