mirror of
https://github.com/runyanjake/jakeswestcoast.git
synced 2025-10-04 15:27:29 -07:00
63 lines
1.2 KiB
CSS
63 lines
1.2 KiB
CSS
/* Fullscreen video background */
|
|
.fullscreen-video-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh; /* Fullscreen height */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fullscreen-video-wrapper iframe {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
transform: translate(-50%, -50%);
|
|
object-fit: cover; /* Ensures the video covers the entire screen */
|
|
z-index: -1; /* Puts the iframe behind the text */
|
|
}
|
|
|
|
/* Centered overlay text */
|
|
.overlay-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
color: #f0f0f0;
|
|
z-index: 1; /* Ensures the text is on top of the video */
|
|
}
|
|
|
|
.titletext {
|
|
font-size: 8vw;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.subtext {
|
|
font-size: 4vw;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
/* Responsive styling */
|
|
@media (max-width: 768px) {
|
|
.titletext {
|
|
font-size: 10vw;
|
|
}
|
|
|
|
.subtext {
|
|
font-size: 5vw;
|
|
}
|
|
}
|
|
|
|
/* Scrollable content below the fullscreen section */
|
|
#about {
|
|
padding-top: 100vh; /* Ensures content starts below the fullscreen section */
|
|
}
|
|
|
|
/* Make images responsive */
|
|
.responsive-img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|