mirror of
https://github.com/runyanjake/jakeswestcoast.git
synced 2025-10-04 23:37:29 -07:00
Split into homepage and about
This commit is contained in:
parent
a84424b238
commit
175144fea9
5
app.py
5
app.py
@ -8,5 +8,10 @@ def index():
|
|||||||
return render_template('index.html')
|
return render_template('index.html')
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/about')
|
||||||
|
def about():
|
||||||
|
return render_template('about.html')
|
||||||
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
app.run(debug=True)
|
app.run(debug=True)
|
||||||
|
|||||||
@ -1,62 +1,44 @@
|
|||||||
/* Fullscreen video background */
|
html, body {
|
||||||
.fullscreen-video-wrapper {
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-background {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
height: 100vh;
|
||||||
height: 100vh; /* Fullscreen height */
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen-video-wrapper iframe {
|
img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 50%;
|
||||||
left: 0;
|
left: 50%;
|
||||||
width: 100vw;
|
min-width: 100%;
|
||||||
height: 100vh;
|
min-height: 100%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
object-fit: cover; /* Ensures the video covers the entire screen */
|
object-fit: cover;
|
||||||
z-index: -1; /* Puts the iframe behind the text */
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Centered overlay text */
|
.content {
|
||||||
.overlay-text {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #f0f0f0;
|
color: white;
|
||||||
z-index: 1; /* Ensures the text is on top of the video */
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.titletext {
|
h1 {
|
||||||
font-size: 8vw;
|
font-size: 4rem;
|
||||||
font-weight: bolder;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtext {
|
p {
|
||||||
font-size: 4vw;
|
font-size: 1.5rem;
|
||||||
font-weight: bolder;
|
margin-top: 10px;
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
30
templates/about.html
Normal file
30
templates/about.html
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Jake's West Coast | About</title>
|
||||||
|
<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">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="w3-black">
|
||||||
|
<div class="w3-container w3-content w3-padding-64" style="max-width:800px">
|
||||||
|
<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-third w3-margin-bottom">
|
||||||
|
<img src="static/jakeswestcoast_warm_logo_square.png" style="width:100%" class="w3-hover-opacity w3-round-large">
|
||||||
|
</div>
|
||||||
|
<div class="w3-twothird w3-margin-bottom">
|
||||||
|
<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 weekends. </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-instagram" onclick=" window.open('https://www.instagram.com/jakeswestcoast/');"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,37 +1,20 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Jake's West Coast</title>
|
<meta charset="UTF-8">
|
||||||
<link rel="stylesheet" href="css/index.css">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Jake's West Coast | Home</title>
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='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">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- <iframe class="imgur-embed" width="1920" height="1080" frameborder="0" src="https://i.imgur.com/S7p301A.gifv#embed"></iframe>-->
|
<div class="image-background">
|
||||||
<iframe src="https://giphy.com/embed/F86jaFeIpE55nvF8M5" width="1920" height="1080" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
|
<img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXpzcjE2bzh4bGd1MDBmNjVvajk2aHc5eXJocmoyb3hydHA5ZXoydyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/F86jaFeIpE55nvF8M5/giphy.gif" alt="Jakeswestcoast">
|
||||||
<div class="textoutline w3-display-middle w3-padding-large w3-border w3-wide w3-text-light-grey w3-center" style="white-space:nowrap;">
|
<div class="textoutline w3-display-middle w3-padding-large w3-border w3-wide w3-text-light-grey w3-center" style="white-space:nowrap;">
|
||||||
<h1 class="titletext w3-xxxsmall" style="font-weight:bolder;">Jake's West Coast</h1>
|
<h1 class="w3-xxxsmall" style="font-size:8vw;font-weight:bolder;">Jake's West Coast</h1>
|
||||||
<h3 class="subtext" style="font-weight:bolder;">My Mountaineering Diary!</h3>
|
<h3 style="font-size:4vw;font-weight:bolder;">My Mountaineering Diary</h3>
|
||||||
</div>
|
|
||||||
<div class="w3-black" id="about">
|
|
||||||
<div class="w3-container w3-content w3-padding-64" style="max-width:800px">
|
|
||||||
<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-third w3-margin-bottom">
|
|
||||||
<img src="static/jakeswestcoast_warm_logo_square.png" style="width:100%" class="w3-hover-opacity w3-round-large">
|
|
||||||
</div>
|
|
||||||
<div class="w3-twothird w3-margin-bottom">
|
|
||||||
<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>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-instagram" onclick=" window.open('https://www.instagram.com/jakeswestcoast/');"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user