Add clounds on the bottom, and mess around with the navbar and change some stuff in the head tag.
This commit is contained in:
@@ -21,43 +21,72 @@ body {
|
||||
|
||||
/* === NAVBAR ON THE RIGHT === */
|
||||
.navbar {
|
||||
width: 100px;
|
||||
background-color: #3c1a4d;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
width: 140px;
|
||||
background-color: #3c1a4d;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.navbar ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
width: 100%;
|
||||
margin: 0.5rem 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
padding: 0.75rem 0;
|
||||
transition: background 0.2s ease;
|
||||
display: block;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
padding: 0.75rem 0;
|
||||
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 {
|
||||
background-color: #5e2b7a;
|
||||
background-color: #5e2b7a;
|
||||
color: #fff5a8;
|
||||
}
|
||||
|
||||
.navbar a:hover::before,
|
||||
.navbar a:hover::after {
|
||||
background-color: #fff5a8;
|
||||
}
|
||||
|
||||
/* === MAIN CONTENT === */
|
||||
@@ -135,6 +164,25 @@ body {
|
||||
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) {
|
||||
body {
|
||||
flex-direction: column;
|
||||
@@ -163,4 +211,4 @@ body {
|
||||
.uzi {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
assets/images/clouds.png
Normal file
BIN
assets/images/clouds.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
assets/images/clouds.png~
Normal file
BIN
assets/images/clouds.png~
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
assets/images/pfp.png
Normal file
BIN
assets/images/pfp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
122
index.html
122
index.html
@@ -1,97 +1,103 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="og:url" content="https://purplebored.pl/" />
|
||||
<meta name="og:title" content="Purplebored.pl" />
|
||||
<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="description" content="Just my personal website :-)" />
|
||||
<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" />
|
||||
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<title>Purplebored</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Open Graph shit -->
|
||||
<meta name="og:url" content="https://purplebored.pl/" />
|
||||
<meta name="og:title" content="Purplebored.pl" />
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="https://purplebored.pl/assets/images/pfp.png">
|
||||
<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="description" content="Just my personal website where I share cool stuff, the things I like, and the things I do :D" />
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<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 class="middle">
|
||||
<h1>Purplebored.pl</h1>
|
||||
<div class="middle">
|
||||
<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>
|
||||
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>
|
||||
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>
|
||||
|
||||
<!-- 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" />
|
||||
<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>
|
||||
|
||||
<!-- 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 href="https://unpato.neocities.org/" target="_blank" rel="noopener noreferrer">
|
||||
<img src="assets/images/buttons/unpato.png" alt="Unpato writing button" />
|
||||
</a>
|
||||
<a href="https://eclipse.cx" target="_blank" rel="noopener noreferrer">
|
||||
<img src="assets/images/buttons/eclipsecx.png" alt="Eclipse Community button" />
|
||||
<a href="https://eclipse.cx" target="_blank" rel="noopener noreferrer">
|
||||
<img src="assets/images/buttons/eclipsecx.png" alt="Eclipse Community button" />
|
||||
</a>
|
||||
<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 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 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 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 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 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 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 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 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 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 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 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navbar">
|
||||
<ul>
|
||||
<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>
|
||||
<script src="assets/js/script.js" defer></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navbar">
|
||||
<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>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user