Skip to content

Commit 29aa2bf

Browse files
cirephecirephe
committed
videos
1 parent fd6378a commit 29aa2bf

6 files changed

+154
-30
lines changed

‎css/base.css

+62-25
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,7 @@ nav::before {
216216
position: relative;
217217
transition: color var(--transition-fast);
218218
letter-spacing: var(--letter-spacing-button);
219+
font-weight: 500;
219220
}
220221

221222
.nav-link::after {
@@ -939,24 +940,21 @@ nav::before {
939940
width: 100%;
940941
}
941942

942-
/* First feature row should have less top padding */
943-
.feature-section .feature-row:first-of-type {
944-
padding-top: 3rem;
945-
}
946-
947943
.feature-section .section-heading::after {
948944
content: none;
949945
}
950946

951947
.feature-row {
952948
display: flex;
953949
align-items: center;
954-
padding: 6rem 5rem;
950+
padding: 2rem 4rem 2rem;
955951
position: relative;
956-
max-width: 1400px;
957-
margin: 0 auto;
958-
gap: 6rem;
959-
border-radius: 8px;
952+
max-width: calc(100% - 40px);
953+
margin: 2vh auto;
954+
gap: 5rem;
955+
border-radius: var(--border-radius);
956+
background: none;
957+
border: none;
960958
}
961959

962960
.feature-row:not(:last-child) {
@@ -968,13 +966,13 @@ nav::before {
968966
}
969967

970968
.content-half {
971-
flex: 0 0 42%;
969+
flex: 0 0 50%;
972970
padding: 0;
973971
max-width: 520px;
974972
}
975973

976974
.media-half {
977-
flex: 0 0 58%;
975+
flex: 0 0 50%;
978976
padding: 0;
979977
position: relative;
980978
}
@@ -1006,16 +1004,25 @@ nav::before {
10061004
position: relative;
10071005
border-radius: var(--border-radius);
10081006
overflow: hidden;
1007+
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
1008+
width: 100%;
1009+
max-width: 100%;
10091010
}
10101011

1011-
.media-container video,
10121012
.media-container img {
10131013
width: 100%;
10141014
height: 100%;
10151015
object-fit: cover;
10161016
display: block;
10171017
}
10181018

1019+
.media-container video {
1020+
width: 100%;
1021+
height: 100%;
1022+
object-fit: contain;
1023+
display: block;
1024+
}
1025+
10191026
.remix-grid {
10201027
position: relative;
10211028
padding-right: 15%;
@@ -1138,19 +1145,12 @@ nav::before {
11381145
padding: 2rem 4rem 2rem;
11391146
max-width: calc(100% - 40px);
11401147
gap: 5rem;
1148+
background: none;
1149+
border: none;
11411150
}
11421151

11431152
.section--import .media-container {
1144-
border-radius: var(--border-radius);
1145-
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
11461153
margin: 0;
1147-
overflow: hidden;
1148-
transform: perspective(1000px) rotateY(-2deg);
1149-
transition: transform 0.5s ease;
1150-
}
1151-
1152-
.section--import .media-container:hover {
1153-
transform: perspective(1000px) rotateY(0deg);
11541154
}
11551155

11561156
.section--import .content-half h3 {
@@ -1804,7 +1804,6 @@ nav::before {
18041804
text-decoration: none;
18051805
}
18061806

1807-
/* Updated CTA button styling */
18081807
.button--cta {
18091808
background: var(--color-title);
18101809
padding: 12px 24px;
@@ -1932,9 +1931,9 @@ nav::before {
19321931
.button--cta {
19331932
background: var(--color-title);
19341933
padding: 16px 32px;
1935-
font-size: 1.2rem;
1934+
font-size: var(--text-sm);
19361935
border-radius: var(--border-radius);
1937-
text-transform: none;
1936+
text-transform: uppercase;
19381937
}
19391938

19401939
/* Add a mobile menu button since the nav links are hidden */
@@ -2283,3 +2282,41 @@ a.signup-button:hover {
22832282
z-index: 100 !important;
22842283
}
22852284
}
2285+
2286+
/* Video unmute button styling */
2287+
.media-container {
2288+
position: relative;
2289+
overflow: hidden;
2290+
}
2291+
2292+
.unmute-button {
2293+
position: absolute;
2294+
bottom: 15px;
2295+
left: 15px;
2296+
background: rgba(0, 0, 0, 0.6);
2297+
border: none;
2298+
color: white;
2299+
width: 40px;
2300+
height: 40px;
2301+
border-radius: 50%;
2302+
display: flex;
2303+
align-items: center;
2304+
justify-content: center;
2305+
cursor: pointer;
2306+
transition: background-color 0.2s;
2307+
z-index: 10;
2308+
}
2309+
2310+
.unmute-button:hover {
2311+
background: rgba(0, 0, 0, 0.8);
2312+
}
2313+
2314+
.unmute-button.unmuted svg {
2315+
/* Shows volume-on icon */
2316+
stroke-dasharray: 0;
2317+
stroke-dashoffset: 0;
2318+
}
2319+
2320+
.unmute-button.unmuted line {
2321+
display: none;
2322+
}

‎index.html

+92-5
Original file line numberDiff line numberDiff line change
@@ -939,10 +939,41 @@ <h3>Filmmaking, remixed</h3>
939939
</p>
940940
</div>
941941
<div class="media-half">
942-
<div class="remix-grid">
943-
<div class="media-container">
944-
<img src="img/re.png" />
945-
</div>
942+
<div class="media-container">
943+
<video
944+
id="video-sebastian"
945+
playsinline
946+
autoplay
947+
muted
948+
loop
949+
preload="auto"
950+
aria-label="Ozu demonstration"
951+
>
952+
<source src="video/SebastianJeremy.webm" type="video/webm" />
953+
<source src="video/SebastianJeremy.mp4" type="video/mp4" />
954+
Your browser does not support the video tag.
955+
</video>
956+
<button
957+
class="unmute-button"
958+
aria-label="Unmute video"
959+
data-video="video-sebastian"
960+
>
961+
<svg
962+
xmlns="http://www.w3.org/2000/svg"
963+
width="24"
964+
height="24"
965+
viewBox="0 0 24 24"
966+
fill="none"
967+
stroke="currentColor"
968+
stroke-width="2"
969+
stroke-linecap="round"
970+
stroke-linejoin="round"
971+
>
972+
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
973+
<line x1="23" y1="9" x2="17" y2="15"></line>
974+
<line x1="17" y1="9" x2="23" y2="15"></line>
975+
</svg>
976+
</button>
946977
</div>
947978
</div>
948979
</div>
@@ -960,7 +991,40 @@ <h3>Streamer, Studio, or Content Owner?</h3>
960991
</div>
961992
<div class="media-half">
962993
<div class="media-container">
963-
<img src="img/stream.png" alt="Library Interface" />
994+
<video
995+
id="video-adrien-import"
996+
playsinline
997+
autoplay
998+
muted
999+
loop
1000+
preload="auto"
1001+
aria-label="Ozu demonstration"
1002+
>
1003+
<source src="video/AdrienBrody.webm" type="video/webm" />
1004+
<source src="video/AdrienBrody.mp4" type="video/mp4" />
1005+
Your browser does not support the video tag.
1006+
</video>
1007+
<button
1008+
class="unmute-button"
1009+
aria-label="Unmute video"
1010+
data-video="video-adrien-import"
1011+
>
1012+
<svg
1013+
xmlns="http://www.w3.org/2000/svg"
1014+
width="24"
1015+
height="24"
1016+
viewBox="0 0 24 24"
1017+
fill="none"
1018+
stroke="currentColor"
1019+
stroke-width="2"
1020+
stroke-linecap="round"
1021+
stroke-linejoin="round"
1022+
>
1023+
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
1024+
<line x1="23" y1="9" x2="17" y2="15"></line>
1025+
<line x1="17" y1="9" x2="23" y2="15"></line>
1026+
</svg>
1027+
</button>
9641028
</div>
9651029
</div>
9661030
</div>
@@ -1016,5 +1080,28 @@ <h3 class="card__title">
10161080
<script src="js/lenis.min.js"></script>
10171081
<script src="js/imagesloaded.pkgd.min.js"></script>
10181082
<script type="module" src="js/index.js"></script>
1083+
<script>
1084+
// Video unmute functionality
1085+
document.addEventListener("DOMContentLoaded", function () {
1086+
const unmuteButtons = document.querySelectorAll(".unmute-button");
1087+
1088+
unmuteButtons.forEach((button) => {
1089+
button.addEventListener("click", function () {
1090+
const videoId = this.getAttribute("data-video");
1091+
const video = document.getElementById(videoId);
1092+
1093+
if (video.muted) {
1094+
video.muted = false;
1095+
this.classList.add("unmuted");
1096+
this.setAttribute("aria-label", "Mute video");
1097+
} else {
1098+
video.muted = true;
1099+
this.classList.remove("unmuted");
1100+
this.setAttribute("aria-label", "Unmute video");
1101+
}
1102+
});
1103+
});
1104+
});
1105+
</script>
10191106
</body>
10201107
</html>

‎video/AdrienBrody.mp4

9.29 MB
Binary file not shown.

‎video/AdrienBrody.webm

6.12 MB
Binary file not shown.

‎video/SebastianJeremy.mp4

24.2 MB
Binary file not shown.

‎video/SebastianJeremy.webm

17.5 MB
Binary file not shown.

0 commit comments

Comments
 (0)