jr/jakeswestcoast
1
0
Fork 0
mirror of https://github.com/runyanjake/jakeswestcoast.git synced 2025-10-05 07:47:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

WIP: Update CSS/HTML

Browse Source
This commit is contained in:
whitney 2024-09-11 14:56:26 -07:00
parent 6192850b33
commit fc54cb6e1a
3 changed files with 86 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -1,4 +1,8 @@
# jakeswestcoast # jakeswestcoast
Website HTML for www.jakeswestcoast.com. Website HTML for www.jakeswestcoast.com.
</br>
Note: `data/greyscale_banner.gif` is too large for Github. Gonna have to store it on egn. ## Running
```
docker compose down && docker system prune -af && docker compose build && docker compose up -d && docker logs -f jakeswestcoast
```

66
static/index.css
View File

@ -1,6 +1,62 @@
/**************************************************** /* Fullscreen video background */
* index.css .fullscreen-video-wrapper {
* @author Jake Runyan position: relative;
* @desc Main CSS 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;
}

31
templates/index.html
View File

@ -1,30 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jake's West Coast</title> <title>Jake's West Coast</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="static/index.css">
</head> </head>
<body> <body>
<!-- <iframe class="imgur-embed" width="1920" height="1080" frameborder="0" src="https://i.imgur.com/S7p301A.gifv#embed"></iframe>--> <!-- Fullscreen Video Background -->
<iframe src="https://giphy.com/embed/F86jaFeIpE55nvF8M5" width="1920" height="1080" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> <div class="fullscreen-video-wrapper">
<div class="textoutline w3-display-middle w3-padding-large w3-border w3-wide w3-text-light-grey w3-center" style="white-space:nowrap;"> <iframe src="https://giphy.com/embed/F86jaFeIpE55nvF8M5" frameborder="0" class="giphy-embed" allowfullscreen></iframe>
<h1 class="titletext w3-xxxlarge" style="font-weight:bolder;">Jake's West Coast</h1> <div class="overlay-text">
<h3 class="subtext" style="font-weight:bolder;">My Mountaineering Diary!</h3> <h1 class="titletext">Jake's West Coast</h1>
<h3 class="subtext">My Mountaineering Diary!</h3>
</div>
</div> </div>
<!-- Scrollable content below -->
<div class="w3-black" id="about"> <div class="w3-black" id="about">
<div class="w3-container w3-content w3-padding-64" style="max-width:800px"> <div class="w3-container w3-content w3-padding-64" style="max-width:800px">
<h2 class="w3-wide w3-center">Who Am I?</h2> <h2 class="w3-wide w3-center">Who Am I?</h2>
<div class="w3-row-padding w3-padding-32 w3-light-grey w3-round-large" style="margin:0 -16px"> <div class="w3-row-padding w3-padding-32 w3-light-grey w3-round-large">
<div class="w3-third w3-margin-bottom"> <div class="w3-third w3-margin-bottom">
<img src="data/jakeswestcoast_warm_logo_square.png" style="width:100%" class="w3-hover-opacity w3-round-large"> <img src="data/jakeswestcoast_warm_logo_square.png" class="responsive-img w3-hover-opacity w3-round-large">
</div> </div>
<div class="w3-twothird w3-margin-bottom"> <div class="w3-twothird w3-margin-bottom">
<div class="w3-container w3-light-grey w3-round-large"> <div class="w3-container w3-light-grey w3-round-large">
<p>I'm Jake, a rider from the Bay Area. I enjoy being in the mountains and riding new trails! Catch me riding in the Santa Cruz mountains on the weekend. </p> <p>I'm Jake, a rider from the Bay Area. I enjoy being in the mountains and riding new trails!</p>
<p>Check out my social media and Youtube to see what I've been riding! Links are below. </p> <p>Check out my social media and Youtube to see what I've been riding! Links are below.</p>
<button class="w3-round-large w3-button w3-black w3-margin-bottom fa fa-youtube" onclick=" window.open('https://www.youtube.com/channel/UCRuRbPZ67qkJvGyxbNUHj4w');"></button> <button class="w3-round-large w3-button w3-black w3-margin-bottom fa fa-youtube" onclick=" window.open('https://www.youtube.com/channel/UCRuRbPZ67qkJvGyxbNUHj4w');"></button>
<button class="w3-round-large w3-button w3-black w3-margin-bottom fa fa-instagram" onclick=" window.open('https://www.instagram.com/jakeswestcoast/');"></button> <button class="w3-round-large w3-button w3-black w3-margin-bottom fa fa-instagram" onclick=" window.open('https://www.instagram.com/jakeswestcoast/');"></button>
</div> </div>
@ -33,5 +38,5 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>