A lot of CSS fuckery, added uzi and a navbar.
This commit is contained in:
@@ -1,66 +1,140 @@
|
||||
/* CSS Document */
|
||||
@font-face {
|
||||
font-family: "Clockopia";
|
||||
src: url("../fonts/Clockopia.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "LuxiSans";
|
||||
src: url("../fonts/luxisr.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #0e0016;
|
||||
color: white;
|
||||
font-family: "LuxiSans", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background-color: #0e0016;
|
||||
color: white;
|
||||
font-family: "LuxiSans", sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
/* === 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;
|
||||
}
|
||||
|
||||
.navbar ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
width: 100%;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
padding: 0.75rem 0;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
background-color: #5e2b7a;
|
||||
}
|
||||
|
||||
/* === MAIN CONTENT === */
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
padding: 0 10% 0 10%;
|
||||
gap: 5%;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* === LEFT SIDE (UZI IMAGE) === */
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uzi {
|
||||
width: 90%;
|
||||
max-width: 650px;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* === MIDDLE SECTION (TEXT + BADGES) === */
|
||||
.middle {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.middle h1 {
|
||||
font-family: "Clockopia", sans-serif;
|
||||
letter-spacing: 0.05em;
|
||||
color: #CBC3E3;
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #fff5a8;
|
||||
}
|
||||
|
||||
.middle p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
max-width: 550px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.buttons img {
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
border: none;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
-webkit-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
transition: none !important;
|
||||
-webkit-animation: none !important;
|
||||
animation: none !important;
|
||||
-webkit-animation-play-state: paused !important;
|
||||
animation-play-state: paused !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
border: none;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
/* === BACKGROUND CANVAS === */
|
||||
#night {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0e0016;
|
||||
z-index: -9999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -9999;
|
||||
}
|
||||
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 900px) {
|
||||
body
|
||||
|
||||
BIN
assets/images/uzi.png
Normal file
BIN
assets/images/uzi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
149
index.html
149
index.html
@@ -1,74 +1,97 @@
|
||||
<!doctype html>
|
||||
<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="black" />
|
||||
<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>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<title>Purplebored</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Purplebored.pl</h1>
|
||||
<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>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<img src="assets/images/uzi.png" alt="Uzi" class="uzi">
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="middle">
|
||||
<h1>Purplebored.pl</h1>
|
||||
|
||||
<!-- Badges / Buttons / 88x31s -->
|
||||
<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>
|
||||
<a href="https://aagaming.me/" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://moody.im/" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://fsky.io" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://telepath.im" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://k327.eu/" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://authenyo.xyz" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
<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" />
|
||||
</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>
|
||||
<a href="https://aagaming.me/" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://moody.im/" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://fsky.io" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://telepath.im" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://k327.eu/" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://authenyo.xyz" target="_blank" rel="noopener noreferrer">
|
||||
<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" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="night"></canvas>
|
||||
<script src="assets/js/script.js" defer></script>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user