-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (115 loc) · 6.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Finding Fortuna</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@media screen and (max-width: 600px) {
.game-images img {
width: 80%;
}
}
</style>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<!-- Essential Meta Tags -->
<meta property="og:title" content="Finding Fortuna">
<meta property="og:description" content="Finding Fortune's website. Host of blogs and more">
<meta property="og:image" content="img/game_screenshots/screenie2.png">
<meta property="og:url" content="https://finding-fortune.github.io/Fortuna-Website/">
<!-- Twitter Meta tags -->
<meta name="twitter:card" content="img/game_screenshots/screenie2.png">
<meta property="og:site_name" content="Finding Fortuna">
<meta name="twitter:image:alt" content="Snowy biome in game">
<meta name="twitter:site" content="@FindingFortune1">
<meta name="twitter:title" content="Finding Fortuna">
<meta name="twitter:description" content="Finding Fortune's website. Host of blogs and more">
<meta name="twitter:creator" content="@FindingFortune1">
</head>
<body style="background-color: #f7fafc; font-family: Arial, sans-serif;">
<!-- Header Section -->
<header style="text-align: center; padding: 24px;">
<h1 style="color: #2d3748; font-size: 32px; font-weight: bold;">Welcome to Finding Fortune's Website</h1>
<p style="color: #718096;">Follow my game development journey ~</p>
</header>
<!-- YouTube Section -->
<section style="padding: 24px;">
<div class="container" style="text-align: center; margin-left: auto; margin-right: auto;">
<h2 style="color: #2d3748; font-size: 24px; font-weight: bold;">My YouTube Channel</h2>
<p style="color: #718096;">Check out my latest videos on game development!</p>
<div style="display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 16px; gap: 16px;">
<!-- Video 1 -->
<div style="width: 30%; padding-top: 16.95%; position: relative; margin-bottom: 16px;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/vT5KJO0J0Ow" frameborder="0" allowfullscreen></iframe>
<p style="position: absolute; width: 100%; bottom: -30px; left: 0; color: #718096; padding: 4px 0;">My Latest Devlog</p>
</div>
<!-- Video 2 -->
<div style="width: 30%; padding-top: 16.95%; position: relative; margin-bottom: 16px;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/W2_PVKycJhw" frameborder="0" allowfullscreen></iframe>
<p style="position: absolute; width: 100%; bottom: -30px; left: 0; color: #718096; padding: 4px 0;">Previous Devlog</p>
</div>
<!-- Video 3 -->
<div style="width: 30%; padding-top: 16.95%; position: relative; margin-bottom: 16px;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/MCR-_S535QQ" frameborder="0" allowfullscreen></iframe>
<p style="position: absolute; width: 100%; bottom: -30px; left: 0; color: #718096; padding: 4px 0;">First ever Devlog</p>
</div>
</div>
</div>
</section>
<!-- Game Development Section -->
<section style="background-color: white; padding: 24px;">
<div class="container" style="text-align: center; margin-left: auto; margin-right: auto;">
<h2 style="color: #2d3748; font-size: 24px; font-weight: bold;">My Game Development Projects</h2>
<p style="color: #718096;">Discover my latest projects and game demos.</p>
<div class="game-images" style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 64px; margin-top: 16px;">
<!-- Game Screenshot 1 -->
<div style="width: 40vw; text-align: center;">
<img src="img/game_screenshots/screenie1.png" alt="Game Screenshot 1" style="width: 100%; height: auto;">
<p style="color: #718096;">Clouds in a mountains biome</p>
</div>
<!-- Game Screenshot 2 -->
<div style="width: 40vw; text-align: center;">
<img src="img/game_screenshots/screenie2.png" alt="Game Screenshot 2" style="width: 100%; height: auto;">
<p style="color: #718096;">Clouds in a snowy biome</p>
</div>
</div>
</div>
</section>
<!-- Blog Section -->
<section style="background-color: white; padding: 24px;">
<div class="container" style="text-align: center; margin-left: auto; margin-right: auto;">
<h2 style="color: #2d3748; font-size: 24px; font-weight: bold;">Latest Blog Posts</h2>
<div class="articles-grid" style="display: flex; flex-wrap: wrap; justify-content: space-around; margin-top: 16px;">
<!-- Article 1 -->
<div style="width: 40vw; background-color: #e6f0f8; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
<h3 style="font-size: 20px; color: #2d3748; margin-top: 8px;">How to make a voxel game</h3>
<p style="color: #718096; padding: 4px 0;">Making a voxel game.... What are the main concepts?</p>
<img src="img/placeholder/kittens_placeholder.png" alt="Article 1" style="width: 100%; height: auto; border-radius: 8px;">
</div>
<!-- Article 2 -->
<div style="width: 40vw; background-color: #e6f0f8; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
<h3 style="font-size: 20px; color: #2d3748; margin-top: 8px;">Making the game engine</h3>
<p style="color: #718096; padding: 4px 0;">How do you get started making a game engine?</p>
<img src="img/placeholder/kittens_placeholder.png" alt="Article 1" style="width: 100%; height: auto; border-radius: 8px;">
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer style="background-color: #2d3748; color: white; text-align: center; padding: 24px; height: 100px;
display: flex; justify-content: center; align-items: center;"
>
<p>© <span id="current-year"></span> Finding Fortune. All rights reserved.</p>
</footer>
<!-- JavaScript to update the year -->
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
</body>
</html>