initial changes
This commit is contained in:
Purplebored
@@ -1,5 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
||||||
<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M2.58536 17.4132C1.80488 16.6327 1.80488 15.3673 2.58536 14.5868L14.5868 2.58536C15.3673 1.80488 16.6327 1.80488 17.4132 2.58536L29.4146 14.5868C30.1951 15.3673 30.1951 16.6327 29.4146 17.4132L17.4132 29.4146C16.6327 30.1951 15.3673 30.1951 14.5868 29.4146L2.58536 17.4132Z" fill="#EE513B"/>
|
|
||||||
<path d="M12.1489 5.06152L10.9336 6.27686L14.0725 9.41577C13.9455 9.68819 13.8746 9.99201 13.8746 10.3124C13.8746 11.222 14.4461 11.9981 15.2496 12.3012V19.9798C14.4461 20.2829 13.8746 21.059 13.8746 21.9686C13.8746 23.1422 14.826 24.0936 15.9996 24.0936C17.1732 24.0936 18.1246 23.1422 18.1246 21.9686C18.1246 21.144 17.6549 20.429 16.9684 20.0768V12.3117L19.9689 15.3122C19.8481 15.5791 19.7809 15.8754 19.7809 16.1874C19.7809 17.361 20.7323 18.3124 21.9059 18.3124C23.0795 18.3124 24.0309 17.361 24.0309 16.1874C24.0309 15.0138 23.0795 14.0624 21.9059 14.0624C21.6778 14.0624 21.4582 14.0983 21.2522 14.1648L18.0297 10.9423C18.0914 10.7433 18.1246 10.5317 18.1246 10.3124C18.1246 9.13878 17.1732 8.18738 15.9996 8.18738C15.7803 8.18738 15.5688 8.22061 15.3697 8.2823L12.1489 5.06152Z" fill="white"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1,7 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
aria-label="Codeberg" role="img"
|
|
||||||
viewBox="0 0 512 512"><rect
|
|
||||||
width="512" height="512"
|
|
||||||
rx="15%"
|
|
||||||
fill="#ffffff"/><defs><linearGradient id="A" x1="259.804" x2="383.132" y1="161.4" y2="407.835" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffffff" stop-opacity="0"/><stop offset=".5" stop-color="#71c2ff"/><stop offset="1" stop-color="#39aaff"/></linearGradient></defs><path fill="url(#A)" d="M259.804 161.4c-.44 0-1.1 0-1.32.44l-.44 1.1L332.04 440.21a192.039 192.039 0 0 0 86.77-74.437L261.125 162.06a1.762 1.762 0 0 0-1.321-.661z" opacity=".5" paint-order="stroke markers fill"/><path fill="#2185d0" d="M255.3 71.8a192 192 0 0 0-162 294l160.1-207c.5-.6 1.5-1 2.6-1s2 .4 2.6 1l160 207a192 192 0 0 0 29.4-102c0-106-86-192-192-192a192 192 0 0 0-.7 0z" paint-order="stroke markers fill"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 962 B |
@@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
||||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z" fill="#000000"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1,3 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
||||||
<svg width="800px" height="800px" viewBox="0 -0.5 1025 1025" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M509.3 606.2c-27.9 0-55.6-9-78.7-26.9L36.4 245.7c-18-15.2-20.2-42.2-5-60.1 15.2-18 42.2-20.2 60.1-5L484.3 513c14.4 11.1 36.5 11.1 52.4-1.2l396.2-331.4c18.1-15.1 45-12.8 60.1 5.4 15.1 18.1 12.7 45-5.4 60.1L590.1 578.3c-24.1 18.7-52.6 27.9-80.8 27.9z" fill="#5F6379" /><path d="M894.8 938.6H129.4c-71.3 0-129.4-58-129.4-129.4v-552c0-71.3 58-129.4 129.4-129.4h765.4c71.3 0 129.4 58 129.4 129.4v552.1c0 71.3-58.1 129.3-129.4 129.3zM129.4 213.2c-24.3 0-44 19.8-44 44v552.1c0 24.3 19.8 44 44 44h765.4c24.3 0 44-19.8 44-44V257.2c0-24.3-19.8-44-44-44H129.4z" fill="#3688FF" /></svg>
|
|
||||||
|
Before Width: | Height: | Size: 827 B |
@@ -1,7 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
aria-label="GitHub" role="img"
|
|
||||||
viewBox="0 0 512 512"><rect
|
|
||||||
width="512" height="512"
|
|
||||||
rx="15%"
|
|
||||||
fill="#1B1817"/><path fill="#ffffff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 664 B |
@@ -1,7 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
aria-label="GitLab" role="img"
|
|
||||||
viewBox="0 0 512 512"><rect
|
|
||||||
width="512" height="512"
|
|
||||||
rx="15%"
|
|
||||||
fill="#30353e"/><path fill="#e24329" d="M84 215l43-133c2-7 12-7 14 0l115 353L371 82c2-7 12-7 14 0l43 133"/><path fill="#fc6d26" d="M256 435L84 215h100.4zm71.7-220H428L256 435l71.6-220z"/><path fill="#fca326" d="M84 215l-22 67c-2 6 0 13 6 16l188 137zm344 0l22 67c2 6 0 13-6 16L256 435z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 545 B |
@@ -1,7 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
aria-label="Mastodon" role="img"
|
|
||||||
viewBox="0 0 512 512"
|
|
||||||
fill="#ffffff"><rect
|
|
||||||
width="512" height="512"
|
|
||||||
rx="15%"/><path d="m409 290c-5 24-43 50-85 56-86 11-137-6-137-6 3 13-4 54 70 52 31 0 58-7 58-7l2 27c-51 24-107 15-140 6-67-17-79-90-81-162v-59c0-74 49-96 49-96 50-24 180-22 222 0 0 0 49 22 49 96 0 0 1 55-7 93" fill="#3088d4"/><path d="m358 202v91h-35v-88c0-18-8-27-23-27-18 0-27 11-27 33v47h-34v-47c0-22-9-33-27-33-15 0-23 9-23 27v88h-35v-91c0-18 5-60 52-60 39 0 50 37 50 37s10-37 50-37c45 0 52 42 52 60"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 672 B |
@@ -1 +0,0 @@
|
|||||||
<svg fill="#68268c" viewBox="0 0 32.00 32.00" xmlns="http://www.w3.org/2000/svg" stroke="#68268c" stroke-width="0.44800000000000006"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M0.844 0.735v30.531h2.197v0.735h-3.041v-32h3.041v0.735zM10.235 10.412v1.547h0.041c0.412-0.595 0.912-1.047 1.489-1.371 0.579-0.323 1.251-0.484 2-0.484 0.719 0 1.38 0.141 1.975 0.417 0.599 0.281 1.047 0.776 1.359 1.479 0.339-0.5 0.803-0.943 1.38-1.323 0.579-0.38 1.267-0.573 2.063-0.573 0.604 0 1.161 0.073 1.677 0.224 0.521 0.145 0.959 0.38 1.328 0.703 0.365 0.329 0.651 0.751 0.86 1.272 0.203 0.52 0.307 1.151 0.307 1.891v7.635h-3.129v-6.468c0-0.381-0.016-0.745-0.048-1.084-0.020-0.307-0.099-0.604-0.239-0.88-0.131-0.251-0.333-0.459-0.584-0.593-0.255-0.152-0.609-0.224-1.047-0.224-0.443 0-0.797 0.083-1.068 0.249-0.265 0.167-0.489 0.396-0.64 0.667-0.161 0.287-0.265 0.604-0.308 0.927-0.052 0.349-0.077 0.699-0.083 1.048v6.359h-3.131v-6.401c0-0.339-0.005-0.672-0.025-1-0.011-0.317-0.073-0.624-0.193-0.916-0.104-0.281-0.301-0.516-0.552-0.672-0.255-0.167-0.636-0.255-1.136-0.255-0.151 0-0.348 0.031-0.588 0.099-0.24 0.067-0.479 0.192-0.703 0.375-0.229 0.188-0.428 0.453-0.589 0.797-0.161 0.343-0.239 0.796-0.239 1.359v6.62h-3.131v-11.421zM31.156 31.265v-30.531h-2.197v-0.735h3.041v32h-3.041v-0.735z"></path> </g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
BIN
assets/pfp.jpg
BIN
assets/pfp.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@@ -1,33 +0,0 @@
|
|||||||
html, body {
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
video {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#instruction {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
font-family: 'Noto Sans', sans-serif;
|
|
||||||
font-size: 24px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
/* CSS code by Purplebored */
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="1.css">
|
|
||||||
<link rel="icon" type="image/x-icon" href="1.png">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>You found it #1</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<video autoplay muted loop>
|
|
||||||
<source src="1.mp4" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
<div class="container">
|
|
||||||
<h2 id="instruction">Click anywhere to unmute</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="1.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
<!-- HTML file by Purplebored-->
|
|
||||||
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
document.addEventListener("DOMContentLoaded", function() {
|
|
||||||
var video = document.querySelector("video");
|
|
||||||
var instruction = document.getElementById("instruction");
|
|
||||||
|
|
||||||
document.addEventListener("click", function() {
|
|
||||||
video.play();
|
|
||||||
video.muted = false;
|
|
||||||
instruction.style.display = "none";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// JS file by purplebored
|
|
||||||
BIN
easteregg/1.mp4
BIN
easteregg/1.mp4
Binary file not shown.
BIN
easteregg/1.png
BIN
easteregg/1.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
Binary file not shown.
74
index.html
74
index.html
@@ -1,74 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<!-- Define Open Graph meta tags for social media sharing -->
|
|
||||||
<meta property="og:url" content="https://purplebored.pl">
|
|
||||||
<meta property="og:image" content="https://purplebored.pl/assets/pfp.jpg">
|
|
||||||
<meta property="og:title" content="Epic Website..">
|
|
||||||
<meta property="og:description" content="Just my personal website :D">
|
|
||||||
<!-- Define keywords for SEO -->
|
|
||||||
<meta name="keywords" content="Poland, portfolio, purplebored, niko, purplebright, personal portfolio">
|
|
||||||
<!-- Set the favicon for the website -->
|
|
||||||
<link rel="icon" href="fish.png">
|
|
||||||
<!-- Set the character encoding and viewport -->
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<!-- Set the title of the page -->
|
|
||||||
<title>Niko :3</title>
|
|
||||||
<!-- Link the external CSS stylesheet -->
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
<!-- Import the 'Titillium Web' font from Google Fonts -->
|
|
||||||
<style>
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200&display=swap');
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="popup" id="Popup">
|
|
||||||
<p>This website is still WIP (work in progress) (almost finished trust me bro) so the site may have out of date information or just look ugly af.</p>
|
|
||||||
<button onclick="closePopup()">aight aight!</button>
|
|
||||||
</div>
|
|
||||||
<!-- Header section -->
|
|
||||||
<header>
|
|
||||||
<!-- Dark mode toggle button -->
|
|
||||||
<button id="darkModeToggle">🌙 Toggle Dark Mode</button>
|
|
||||||
<!-- "Hi, I'm Niko" text with animated dots -->
|
|
||||||
<h1 class="animated-text">Hi, I'm Niko<span class="dots-animation">...</span></h1>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<!-- The big frame with all the things -->
|
|
||||||
<div class="frame">
|
|
||||||
<h2>About Me</h2>
|
|
||||||
<p>Hi i am Niko aka Purplebored i am Currently learning C# some Ruby and russian :D. I made this site for fun you can find the source code of it on my Github. I also host some stuff like a zerobin instance privatebin instance and linkstack instance!</p>
|
|
||||||
<h2>My Skills</h2>
|
|
||||||
<p>Baisc html and some Ruby and C# skills</p>
|
|
||||||
<h2>My Projects</h2>
|
|
||||||
<li>
|
|
||||||
<h3>Neko.purplebored.pl</h3>
|
|
||||||
<p>A very cool site which uses the nekolife API.</p>
|
|
||||||
<p><a href="https://neko.purplebored.pl" target="_blank">Demo</a></p>
|
|
||||||
<p><a href="https://github.com/Purplebored/neko.purplebored.pl" target="_blank">neko.purplebored.pl Source Code</a></p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h2>Contact me</h2>
|
|
||||||
<p>You can email me if you want at "n1ko@shitposting.expert"!</p>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- Footer section -->
|
|
||||||
<footer class="site-footer">
|
|
||||||
<!-- Footer links -->
|
|
||||||
<ul class="footer-links">
|
|
||||||
<li><a href="mailto:n1ko@shitposting.expert" target="_blank"><img class="icon" src="assets/email.svg" alt="Email icon"> Email</a></li>
|
|
||||||
<li><a href="https://codeberg.org/Purplebored"><img class="icon" src="assets/codeberg.svg" alt="Codeberg icon"> Codeberg</a></li>
|
|
||||||
<li><a href="https://github.com/PurpleBored" target="_blank"><img class="icon" src="assets/github.svg" alt="GitHub icon"> GitHub</a></li>
|
|
||||||
<li><a href="https://gitlab.com/PurpleBored" target="_blank"><img class="icon" src="assets/gitlab.svg" alt="GitLab icon"> GitLab</a></li>
|
|
||||||
<li><a href="https://matrix.to/#/@purplebored:beeper.com" target="_blank"><img class="icon" src="assets/matrix.svg" alt="Matrix icon">Matrix</a></li>
|
|
||||||
<li><a href="https://github.com/PurpleBored/My-Personal-Website" target="_blank"><img class="icon" src="assets/code.svg" alt="Source code icon">Source code</a> </li>
|
|
||||||
</ul>
|
|
||||||
<!-- Footer text -->
|
|
||||||
<p id="footer">Made with 💜 by Niko aka PurpleBored.</p>
|
|
||||||
<!-- JavaScript script -->
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
<!-- HTML File by Purplebored. https://purplebored.pl -->
|
|
||||||
49
script.js
49
script.js
@@ -1,49 +0,0 @@
|
|||||||
// Dark mode toggle and autodetect code
|
|
||||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
|
||||||
const body = document.body;
|
|
||||||
|
|
||||||
// Check user's preferred color scheme
|
|
||||||
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
||||||
|
|
||||||
// Apply the color mode based on users preference
|
|
||||||
if (prefersDarkMode) {
|
|
||||||
body.classList.add('dark-mode');
|
|
||||||
darkModeToggle.textContent = '☀️ Toggle on Light Mode (Its Better trsut me)';
|
|
||||||
}
|
|
||||||
|
|
||||||
darkModeToggle.addEventListener('click', () => {
|
|
||||||
body.classList.toggle('dark-mode');
|
|
||||||
|
|
||||||
// Update button text to be worky worky
|
|
||||||
if (body.classList.contains('dark-mode')) {
|
|
||||||
darkModeToggle.textContent = '☀️ Toggle on Light Mode (Its Better trsut me)';
|
|
||||||
} else {
|
|
||||||
darkModeToggle.textContent = '🌙 Toggle on Amoled Dark Mode';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Easter egg #1
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
var easterEgg = document.getElementById('footer');
|
|
||||||
|
|
||||||
// Add a click event listener to the easter egg element
|
|
||||||
easterEgg.addEventListener('click', function() {
|
|
||||||
// Redirect to 1.html (easter egg)
|
|
||||||
window.location.href = 'easteregg/1.html';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// popup wip
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
setTimeout(function() {
|
|
||||||
var cookiePopup = document.getElementById('Popup');
|
|
||||||
cookiePopup.style.display = 'block';
|
|
||||||
}, 100); // Adjust the delay (in milliseconds) as per your preference
|
|
||||||
});
|
|
||||||
|
|
||||||
function closePopup() {
|
|
||||||
var cookiePopup = document.getElementById('Popup');
|
|
||||||
cookiePopup.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
// JS File by Purplebored. https://purplebored.pl
|
|
||||||
282
styles.css
282
styles.css
@@ -1,282 +0,0 @@
|
|||||||
/* this css has been edited by so many ai things and me i am too scared too even touch it now lmao */
|
|
||||||
|
|
||||||
/* Set the font family, margin, padding, and background gradient for the body */
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background: linear-gradient(135deg, #aecbcf, #f5f5f5, #f0f0f0);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: gradient-animation 8s ease-in-out infinite;
|
|
||||||
min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column; /* Arrange elements vertically */
|
|
||||||
overflow-x: hidden; /* Hide horizontal scrollbar */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Define the keyframes for the gradient animation */
|
|
||||||
@keyframes gradient-animation {
|
|
||||||
0% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position: 100% 50%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Customize the styles for the header */
|
|
||||||
header {
|
|
||||||
background-color: transparent;
|
|
||||||
color: #fff;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Customize the styles for the main content area */
|
|
||||||
main {
|
|
||||||
flex: 1; /* Allow the main content to grow and take remaining vertical space */
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Customize the styles for the frame */
|
|
||||||
.frame {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 10px;
|
|
||||||
border: 2px solid #000;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-image: linear-gradient(45deg, #e2e2ff, #fff1e2, #e2e2ff);
|
|
||||||
background-size: 200% 200%;
|
|
||||||
animation: gradient-animation 4s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Customize the styles for the heading */
|
|
||||||
h2 {
|
|
||||||
margin-top: 30px; /* Adjust the spacing */
|
|
||||||
font-family: 'Titillium Web', sans-serif; /* Use the same font as the animated text */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Customize the styles for the site footer */
|
|
||||||
.site-footer {
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 10px;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
opacity: 0.9;
|
|
||||||
color: #000; /* Set the text color to black */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Customize the styles for the footer links */
|
|
||||||
.footer-links {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links li {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a {
|
|
||||||
color: #000000;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a:hover {
|
|
||||||
color: #302e2e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
margin-right: 5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a:hover {
|
|
||||||
color: #000;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Define the keyframes for the dots animation */
|
|
||||||
.dots-animation {
|
|
||||||
display: inline-block;
|
|
||||||
opacity: 0;
|
|
||||||
animation: dots-animation 1s steps(3) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes dots-animation {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Customize the styles for the animated text */
|
|
||||||
.animated-text {
|
|
||||||
font-size: 48px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-family: 'Titillium Web', sans-serif;
|
|
||||||
color: #000;
|
|
||||||
/* Add frame styles */
|
|
||||||
display: inline-block;
|
|
||||||
padding: 5px;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
/* Add gradient animation styles */
|
|
||||||
background-image: linear-gradient(45deg, #e2e2ff, #fff1e2, #e2e2ff);
|
|
||||||
background-size: 200% 200%;
|
|
||||||
animation: gradient-animation 4s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Define the styles for dark mode */
|
|
||||||
.dark-mode {
|
|
||||||
background: #000000;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode header {
|
|
||||||
background-color: #080808;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode main {
|
|
||||||
background-color: #080808;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode .frame {
|
|
||||||
background-image: none;
|
|
||||||
border: 2px solid #ebd3d3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode h2 {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode .site-footer {
|
|
||||||
background-color: #080808;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode .footer-links a {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark-mode .animated-text {
|
|
||||||
background-image: none;
|
|
||||||
background-color: #000000;
|
|
||||||
border-color: #fff;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Position the header and add a dark mode toggle button */
|
|
||||||
header {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#darkModeToggle {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #4c2e72;
|
|
||||||
color: #000;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-button {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 10px 20px;
|
|
||||||
background-color: #007bff;
|
|
||||||
color: #fff;
|
|
||||||
font-family: 'Titillium Web', sans-serif;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-button:hover {
|
|
||||||
background-color: #0056b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background-color: #333;
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
z-index: 999;
|
|
||||||
font-family: 'Titillium', sans-serif;
|
|
||||||
}
|
|
||||||
.popup p {
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
.popup a {
|
|
||||||
color: #007bff;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.popup button {
|
|
||||||
background-color: #007bff;
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-list li h3 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove list styles for the project list */
|
|
||||||
.project-list {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add some spacing between projects */
|
|
||||||
.project-list li {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add this CSS to remove the dots animation */
|
|
||||||
.animated-text {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dots-animation {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Set the color of hyperlinks to a specific color */
|
|
||||||
a {
|
|
||||||
color: #0000EE; /* Replace with the color you want */
|
|
||||||
text-decoration: none; /* Optional: Removes underline on links */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CSS File by Purplebored. https://purplebored.pl. */
|
|
||||||
Reference in New Issue
Block a user