diff --git a/assets/css/style.css b/assets/css/style.css index 2e3a5d2..8344b7c 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -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 diff --git a/assets/images/uzi.png b/assets/images/uzi.png new file mode 100644 index 0000000..5a6aa49 Binary files /dev/null and b/assets/images/uzi.png differ diff --git a/index.html b/index.html index 9958d79..799b2cd 100644 --- a/index.html +++ b/index.html @@ -1,74 +1,97 @@ - + - - - - - - - - - - -Purplebored + + + + + + + + + + + Purplebored -

Purplebored.pl

-

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 - - - Unpato writing button - - - Eclipse Community button - - - AAgaming button - - - Mcneb10 button - - - Georgemoody button - - - Xameren button - - - FSKY.io button - - - ari-web badge - - - Telepath.im button - - - Aleksey Kon Games button - - - k327.eu button - - - Trace button - - - Authen button - - - Midgard button - +
+
+ Uzi +
+ +
+

Purplebored.pl

+ +

+ 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 + + + Unpato writing button + + + Eclipse Community button + + + AAgaming button + + + Mcneb10 button + + + Georgemoody button + + + Xameren button + + + FSKY.io button + + + ari-web badge + + + Telepath.im button + + + Aleksey Kon Games button + + + k327.eu button + + + Trace button + + + Authen button + + + Midgard button + +
+
- - + + + + +