purplebored/purplebored.pl
1
0
Fork 1
Code Issues Pull Requests Actions Activity

Add clounds on the bottom, and mess around with the navbar and change some stuff in the head tag.

Browse Source
This commit is contained in:
Alek Nikovich
2025-10-29 22:41:14 +01:00
parent e44fc8b08d
commit ec500ce89a
5 changed files with 138 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
assets/css/style.css
View File

@@ -21,43 +21,72 @@ body {
/* === NAVBAR ON THE RIGHT === */ /* === NAVBAR ON THE RIGHT === */
.navbar { .navbar {
width: 100px; width: 140px;
background-color: #3c1a4d; background-color: #3c1a4d;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
padding: 2rem 0; padding-top: 2rem;
position: fixed; padding-bottom: 2rem;
right: 0; position: fixed;
top: 0; right: 0;
bottom: 0; top: 0;
z-index: 20; bottom: 0;
z-index: 20;
} }
.navbar ul { .navbar ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
.navbar li { .navbar li {
width: 100%; width: 100%;
margin: 0.5rem 0; position: relative;
} }
.navbar a { .navbar a {
display: block; display: block;
color: white; color: white;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
padding: 0.75rem 0; padding: 0.75rem 0;
transition: background 0.2s ease; position: relative;
transition: background 0.2s ease, color 0.2s ease;
}
/* === Full-width divider lines === */
.navbar a::before,
.navbar a::after {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 1px;
background-color: rgba(255, 255, 255, 0.25);
transition: background-color 0.2s ease;
}
.navbar a::before {
top: 0;
}
.navbar a::after {
bottom: 0;
} }
.navbar a:hover { .navbar a:hover {
background-color: #5e2b7a; background-color: #5e2b7a;
color: #fff5a8;
}
.navbar a:hover::before,
.navbar a:hover::after {
background-color: #fff5a8;
} }
/* === MAIN CONTENT === */ /* === MAIN CONTENT === */
@@ -135,6 +164,25 @@ body {
z-index: -9999; z-index: -9999;
} }
.clouds {
position: fixed;
bottom: -70px;
left: 0;
width: 100%;
height: auto;
z-index: -1; /* behind content but above star canvas */
pointer-events: none;
overflow: hidden;
}
.clouds img {
width: 100%;
height: auto;
display: block;
opacity: 0.5; /* soften the layer */
filter: blur(1px);
}
@media (max-width: 900px) { @media (max-width: 900px) {
body { body {
flex-direction: column; flex-direction: column;

BIN
assets/images/clouds.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
assets/images/clouds.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
assets/images/pfp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

116
index.html
View File

@@ -1,97 +1,103 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="og:url" content="https://purplebored.pl/" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="og:title" content="Purplebored.pl" /> <!-- Open Graph shit -->
<meta name="og:description" content="Just my personal website where I share cool stuff, the things I like, and the things I do :D" /> <meta name="og:url" content="https://purplebored.pl/" />
<meta name="description" content="Just my personal website :-)" /> <meta name="og:title" content="Purplebored.pl" />
<meta name="keywords" content="purplebored, poland, polish, personal website, website, buttons, niko, self-hosted, open source, foss, murder drones, tobacco, md, nicotine" /> <meta property="og:type" content="website">
<meta name="color-scheme" content="dark" /> <meta property="og:image" content="https://purplebored.pl/assets/images/pfp.png">
<meta name="theme-color" content="#0e0016" /> <meta name="og:description" content="Just my personal website where I share cool stuff, the things I like, and the things I do :D" />
<link rel="stylesheet" href="assets/css/style.css"> <meta name="description" content="Just my personal website where I share cool stuff, the things I like, and the things I do :D" />
<title>Purplebored</title> <meta name="keywords" content="purplebored, poland, polish, personal website, website, buttons, niko, self-hosted, open source, foss, murder drones, tobacco, md, nicotine" />
<meta name="color-scheme" content="dark" />
<meta name="theme-color" content="#0e0016" />
<meta name="author" content="Purplebored">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="canonical" href="https://purplebored.pl/">
<link rel="icon" href="/favicon.png" type="image/png" />
<title>Purplebored</title>
</head> </head>
<body> <body>
<div class="content"> <div class="content">
<div class="left"> <div class="left">
<img src="assets/images/uzi.png" alt="Uzi" class="uzi"> <img src="assets/images/uzi.png" alt="Uzi" class="uzi">
</div> </div>
<div class="middle"> <div class="middle">
<h1>Purplebored.pl</h1> <h1>Purplebored.pl</h1>
<p> Hi, I am a 17 year old retard called Purplebored, also known as Niko o/. Right now you are on my own little website which I call my home on the World Wide Web! Nothing special, but I hope you like it :D</p>
<p> <p> I like making simple websites, and I am also a privacy advocate. I also love tobacco, and I am a big nicotine addict. I speak Polish and English, but I am also learning Russian. Regarding programming, I currently only know basic HTML. From other stuff, I also know some Linux and quite a lot about Windows — especially the older versions like Windows 7.</p>
Hi, I am Purplebored, o/ also known as Niko. Right now you are on my own little website which I call my home on the World Wide Web!
</p>
<p> <!-- Badges -->
I like making simple websites, and I am also a privacy advocate. I also love tobacco, and I am a big nicotine addict. I speak Polish and English, but I am also learning Russian. Regarding programming, I currently only know basic HTML. From other stuff, I also know some Linux and quite a lot about Windows — especially the older versions like Windows 7. <div class="buttons">
</p> <a href="https://purplebored.pl/" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/Purplebored_button.png" alt="Purplebored button" />
<!-- Badges -->
<div class="buttons">
<a href="https://purplebored.pl/" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/Purplebored_button.png" alt="Purplebored button" />
</a> </a>
<a href="https://unpato.neocities.org/" target="_blank" rel="noopener noreferrer"> <a href="https://eclipse.cx" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/unpato.png" alt="Unpato writing button" /> <img src="assets/images/buttons/eclipsecx.png" alt="Eclipse Community button" />
</a>
<a href="https://eclipse.cx" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/eclipsecx.png" alt="Eclipse Community button" />
</a> </a>
<a href="https://aagaming.me/" target="_blank" rel="noopener noreferrer"> <a href="https://aagaming.me/" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/aagaming.png" alt="AAgaming button" /> <img src="assets/images/buttons/aagaming.png" alt="AAgaming button" />
</a> </a>
<a href="https://themcgovern.net" target="_blank" rel="noopener noreferrer"> <a href="https://themcgovern.net" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/mcneb10.gif" alt="Mcneb10 button" /> <img src="assets/images/buttons/mcneb10.gif" alt="Mcneb10 button" />
</a> </a>
<a href="https://moody.im/" target="_blank" rel="noopener noreferrer"> <a href="https://moody.im/" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/georgemoody.png" alt="Georgemoody button" /> <img src="assets/images/buttons/georgemoody.png" alt="Georgemoody button" />
</a> </a>
<a href="https://xameren.fsky.io" target="_blank" rel="noopener noreferrer"> <a href="https://xameren.fsky.io" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/xameren.png" alt="Xameren button" /> <img src="assets/images/buttons/xameren.png" alt="Xameren button" />
</a> </a>
<a href="https://fsky.io" target="_blank" rel="noopener noreferrer"> <a href="https://fsky.io" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/fsky_night.png" alt="FSKY.io button" /> <img src="assets/images/buttons/fsky_night.png" alt="FSKY.io button" />
</a> </a>
<a href="https://ari.lt/" title="ari-web badge" target="_blank" rel="noopener noreferrer"> <a href="https://ari.lt/" title="ari-web badge" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/ari.png" alt="ari-web badge" /> <img src="assets/images/buttons/ari.png" alt="ari-web badge" />
</a> </a>
<a href="https://telepath.im" target="_blank" rel="noopener noreferrer"> <a href="https://telepath.im" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/telepath.png" alt="Telepath.im button" /> <img src="assets/images/buttons/telepath.png" alt="Telepath.im button" />
</a> </a>
<a href="https://aleksey-kon-games.fsky.io/" target="_blank" rel="noopener noreferrer"> <a href="https://aleksey-kon-games.fsky.io/" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/aleksey.png" alt="Aleksey Kon Games button" /> <img src="assets/images/buttons/aleksey.png" alt="Aleksey Kon Games button" />
</a> </a>
<a href="https://k327.eu/" target="_blank" rel="noopener noreferrer"> <a href="https://k327.eu/" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/k327.png" alt="k327.eu button" /> <img src="assets/images/buttons/k327.png" alt="k327.eu button" />
</a> </a>
<a href="https://vaporwavefox.neocities.org" target="_blank" rel="noopener noreferrer"> <a href="https://vaporwavefox.neocities.org" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/trace.png" alt="Trace button" /> <img src="assets/images/buttons/trace.png" alt="Trace button" />
</a> </a>
<a href="https://authenyo.xyz" target="_blank" rel="noopener noreferrer"> <a href="https://authenyo.xyz" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/authen.gif" alt="Authen button" /> <img src="assets/images/buttons/authen.gif" alt="Authen button" />
</a> </a>
<a href="http://[300:5506:25eb:d0d9::]" target="_blank" rel="noopener noreferrer"> <a href="http://[300:5506:25eb:d0d9::]" target="_blank" rel="noopener noreferrer">
<img src="assets/images/buttons/midgard.png" alt="Midgard button" /> <img src="assets/images/buttons/midgard.png" alt="Midgard button" />
</a> </a>
</div> </div>
</div>
</div>
<nav class="navbar"> </div>
<ul> </div>
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<canvas id="night"></canvas> <nav class="navbar">
<script src="assets/js/script.js" defer></script> <ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About me:</a></li>
<li><a href="#">Projects:</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="clouds">
<img src="assets/images/clouds.png" alt="Clouds">
</div>
<canvas id="night"></canvas>
<script src="assets/js/script.js" defer></script>
</body> </body>
</html> </html>