diff --git a/assets/css/style.css b/assets/css/style.css index 309acb5..33ed460 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -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%; } -} \ No newline at end of file +} diff --git a/assets/images/clouds.png b/assets/images/clouds.png new file mode 100644 index 0000000..1a22841 Binary files /dev/null and b/assets/images/clouds.png differ diff --git a/assets/images/clouds.png~ b/assets/images/clouds.png~ new file mode 100644 index 0000000..c06897b Binary files /dev/null and b/assets/images/clouds.png~ differ diff --git a/assets/images/pfp.png b/assets/images/pfp.png new file mode 100644 index 0000000..a37e529 Binary files /dev/null and b/assets/images/pfp.png differ diff --git a/index.html b/index.html index 799b2cd..36a01ef 100644 --- a/index.html +++ b/index.html @@ -1,97 +1,103 @@ - - - - - - - - - - - Purplebored + + + + + + + + + + + + + + + + + + + + Purplebored -
+
- Uzi + Uzi
-
-

Purplebored.pl

+
+

Purplebored.pl

+

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

-

- 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! -

- -

- 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. -

- - -
- - Purplebored button +

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.

+ + +
+ + Purplebored button - - Unpato writing button - - - Eclipse Community button + + Eclipse Community button - AAgaming button + AAgaming button - Mcneb10 button + Mcneb10 button - Georgemoody button + Georgemoody button - Xameren button + Xameren button - FSKY.io button + FSKY.io button - ari-web badge + ari-web badge - Telepath.im button + Telepath.im button - Aleksey Kon Games button + Aleksey Kon Games button - k327.eu button + k327.eu button - Trace button + Trace button - Authen button + Authen button - Midgard button + Midgard button -
-
-
+
- - - - +
+
+ + + +
+ Clouds +
+ + +