A lot of CSS fuckery, added uzi and a navbar.
This commit is contained in:
@@ -1,36 +1,121 @@
|
|||||||
/* CSS Document */
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Clockopia";
|
font-family: "Clockopia";
|
||||||
src: url("../fonts/Clockopia.ttf") format("truetype");
|
src: url("../fonts/Clockopia.ttf") format("truetype");
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "LuxiSans";
|
font-family: "LuxiSans";
|
||||||
src: url("../fonts/luxisr.ttf") format("truetype");
|
src: url("../fonts/luxisr.ttf") format("truetype");
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
background-color: #0e0016;
|
background-color: #0e0016;
|
||||||
color: white;
|
color: white;
|
||||||
font-family: "LuxiSans", sans-serif;
|
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;
|
font-family: "Clockopia", sans-serif;
|
||||||
letter-spacing: 0.05em;
|
font-size: 3.5rem;
|
||||||
color: #CBC3E3;
|
margin-bottom: 1rem;
|
||||||
|
color: #fff5a8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
max-width: 550px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
justify-content: center;
|
margin-top: 1.5rem;
|
||||||
margin-top: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons img {
|
.buttons img {
|
||||||
@@ -40,27 +125,16 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
/* === BACKGROUND CANVAS === */
|
||||||
*,
|
|
||||||
*::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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#night {
|
#night {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #0e0016;
|
|
||||||
z-index: -9999;
|
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 |
33
index.html
33
index.html
@@ -1,5 +1,5 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="og:url" content="https://purplebored.pl/" />
|
<meta name="og:url" content="https://purplebored.pl/" />
|
||||||
@@ -8,19 +8,30 @@
|
|||||||
<meta name="description" content="Just my personal website :-)" />
|
<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="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="color-scheme" content="dark" />
|
||||||
<meta name="theme-color" content="black" />
|
<meta name="theme-color" content="#0e0016" />
|
||||||
|
|
||||||
<link rel="stylesheet" href="assets/css/style.css">
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
<title>Purplebored</title>
|
<title>Purplebored</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<div class="left">
|
||||||
|
<img src="assets/images/uzi.png" alt="Uzi" class="uzi">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="middle">
|
||||||
<h1>Purplebored.pl</h1>
|
<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>
|
|
||||||
|
|
||||||
<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>
|
<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>
|
||||||
|
|
||||||
<!-- Badges / Buttons / 88x31s -->
|
<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">
|
<div class="buttons">
|
||||||
<a href="https://purplebored.pl/" target="_blank" rel="noopener noreferrer">
|
<a href="https://purplebored.pl/" target="_blank" rel="noopener noreferrer">
|
||||||
<img src="assets/images/buttons/Purplebored_button.png" alt="Purplebored button" />
|
<img src="assets/images/buttons/Purplebored_button.png" alt="Purplebored button" />
|
||||||
@@ -68,6 +79,18 @@
|
|||||||
<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">
|
||||||
|
<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>
|
<canvas id="night"></canvas>
|
||||||
<script src="assets/js/script.js" defer></script>
|
<script src="assets/js/script.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user