Added favicon, style.css, and basic about me page

This commit is contained in:
Raktbastr 2026-06-15 12:07:10 -05:00
parent 6b8dda9014
commit 39f2d87b3f
16 changed files with 110 additions and 23 deletions

23
about-me.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>About Me</title>
<link rel="stylesheet" href="style.css">
<script src="header.js" defer></script>
<site-header></site-header>
</head>
<body>
<div class="row" style="background-color: #454a77; border-radius: 128px; padding-top: 10px; padding-bottom: 10px;">
<div class="column" style="flex: auto;">
<img src="media/bonard.jpg" alt="Bonard" style="max-width: 256px; max-height: 256px; margin-left: 0%; border: 2px solid #ff2a2a66; border-radius: 50%;" width="100%" height="100%">
</div>
<div class="column">
<h1 style="text-align: left; margin-right: 15%;">About Me</h1>
<p style="margin-right: 10%;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis excepturi voluptatem quia? Ipsum sequi incidunt laudantium fuga, impedit exercitationem nobis consequuntur. Aut architecto ipsum explicabo voluptate est quas omnis maiores?</p>
</div>
</div>
</body>
</html>

View file

@ -1,14 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>About Me</title>
<script src="header.js" defer></script>
<site-header></site-header>
</head>
<body>
About
</body>
</html>

BIN
android-chrome-192x192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
android-chrome-512x512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7 KiB

BIN
favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 622 B

BIN
favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1,019 B

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -5,10 +5,43 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title> <title>Home</title>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="stylesheet" href="style.css">
<script src="header.js" defer></script> <script src="header.js" defer></script>
<style>
.row {
display: flex;
align-items: center;
margin-left: 10%;
margin-right: 10%;
}
.column {
flex: 50%;
align-items: center;
padding-left: 10px;
padding-right: 10px;
}
img {
display: block;
margin: auto;
}
</style>
<site-header></site-header> <site-header></site-header>
</head> </head>
<body> <body>
Home <div class="row">
<div class="column">
<h1>Welcome to Halfheart.net!</h1>
<p style="text-align: center;">Welcome to Halfheart.net! This website is home to the Halfheart minecraft servers, my personal projects, and really anything else I want. Have fun.</p>
<br>
<p style="text-align: center;">This page is actively being worked on! Most things are probobly broken or incomplete. Don't tell me that they are, I know.</p>
</div>
</div>
<div class="row">
<iframe width="560" height="315" style="margin-left: auto; margin-right: auto;" src="https://www.youtube.com/embed/BuKft9LpL_0?si=ZBioDC66lEvgbuIg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</body> </body>
</html> </html>

View file

@ -9,7 +9,11 @@
<site-header></site-header> <site-header></site-header>
<style> <style>
body { body {
height: 100vh;
width: 100vw;
margin: 0;
background: url(media/mc\ header.png) no-repeat top center; background: url(media/mc\ header.png) no-repeat top center;
background-size: cover;
} }
</style> </style>
</head> </head>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 MiB

BIN
media/bonard.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

View file

@ -1,9 +1,14 @@
<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">
<style> <style>
:host {
display: block;
width: 100%;
}
:root { :root {
--primary-glow: #ff2a2a; --primary-glow: #ff2a2a;
--active-bg: #aa0404; --active-bg: #aa0404;
--header-height: 60px; --header-height: 60px;
} }
body { body {
@ -15,7 +20,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 15px; gap: 15px;
margin: 20px auto; margin: 0 auto;
width: 92%; width: 92%;
max-width: 1920px; max-width: 1920px;
position: relative; position: relative;
@ -64,11 +69,10 @@
align-items: stretch; align-items: stretch;
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
height: var(--header-height); height: var(--header-height);
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
z-index: 5; border: 2px solid #ff2a2a66
} }
.topnav a { .topnav a {
@ -82,6 +86,7 @@
position: relative; position: relative;
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
border-radius: 20px; border-radius: 20px;
flex-grow: 1;
} }
.topnav a::after { .topnav a::after {
@ -191,7 +196,7 @@
} }
} }
</style> </style>
<br>
<div class="header-container" id="headerContainer"> <div class="header-container" id="headerContainer">
<div class="logo-capsule"> <div class="logo-capsule">
@ -202,12 +207,13 @@
<div class="topnav" id="myTopnav"> <div class="topnav" id="myTopnav">
<a href="index.html" id="home" class="inactive">Home</a> <a href="index.html" id="home" class="inactive">Home</a>
<a href="about.html" id="about-me" class="inactive">About Me</a> <a href="about-me.html" id="about-me" class="inactive">About Me</a>
<a href="projects.html" id="projects" class="inactive">Projects</a> <a href="projects.html" id="projects" class="inactive">Projects</a>
<a href="mcservers.html" id="minecraft-servers" class="inactive">Minecraft Server</a> <a href="mc-servers.html" id="minecraft-servers" class="inactive">Minecraft Server</a>
<a href="javascript:void(0);" class="icon" onclick="toggleMobileMenu()"> <a href="javascript:void(0);" class="icon" onclick="toggleMobileMenu()">
<i class="fa fa-bars"></i> <i class="fa fa-bars"></i>
</a> </a>
</div> </div>
</div> </div>
<br>

1
site.webmanifest Normal file
View file

@ -0,0 +1 @@
{"name":"Halfheart.net","short_name":"Halfheart","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

34
style.css Normal file
View file

@ -0,0 +1,34 @@
@import url(https://fonts.googleapis.com/css?family=Audiowide);
h1 {
font-family: "Audiowide", serif;
font-weight: 400;
font-style: normal;
color: red;
text-align: center;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: white;
}
body {
height: 100vh;
background-color: #1e1d20;
}
.row {
display: flex;
align-items: center;
margin-left: 10%;
margin-right: 10%;
}
.column {
flex: 50%;
align-items: center;
padding-left: 10px;
padding-right: 10px;
}
img {
display: block;
margin: auto;
}