From aecbe02b4addec6f61791c4e9414f3805e8a06ab Mon Sep 17 00:00:00 2001 From: Honey Date: Sat, 15 Nov 2025 11:01:32 +0100 Subject: [PATCH] First Project --- honey.html | 74 ++++++++++++ index.html | 75 ++++++++++++ styles.css | 330 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 479 insertions(+) create mode 100644 honey.html create mode 100644 index.html create mode 100644 styles.css diff --git a/honey.html b/honey.html new file mode 100644 index 0000000..401fd2f --- /dev/null +++ b/honey.html @@ -0,0 +1,74 @@ + + + + + + Honey | Links + + + + + +
+ + +
+
+
+
+
+
+
+
+ + + Profile Picture +

My Links

+

Some Stuff

+ + +

Public with Pangolin

+ + +
PixelPaper📖
+
EBook and Manga Server
+ + + +
Catto
+ + +

VPN Netbird

+ + +
Dashboard🦞
+
Perosnal Dashboard
+ + + +
PDF Tool📝
+
PDF Editieren und Zusammenfügen
+ + + +

For Cinnamon

+ + +
CrochetMeMaybe🧶
+
Crochet Website Counting
+ + + +
Ticket System 🎆
+ + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..99600a1 --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + + Honey | Links + + + + + +
+ + +
+
+
+
+
+
+
+
+ + + Profile Picture +

Honey Services for Cinnamon

+

Welcome!

+

Here are all my important links for you!

+ + +

Public Sites (No VPN)

+ + +
CrochetMeMaybe🧶
+
Crochet Website Counting
+ + + +
PixelPaper📖
+
EBook and Manga Server
+ + + +
Ticket System 🎆
+
Tickets an Honey
+ + +

My Links (With VPN)

+ + +
Honeycloud🍯
+
The HoneyCloud Service
+ + + +
Dashboard🦞
+
Perosnal Dashboard
+ + +

Tools

+ + +
PDF Tool📝
+
PDF Editieren und Zusammenfügen
+ + + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..8a36099 --- /dev/null +++ b/styles.css @@ -0,0 +1,330 @@ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Inter', sans-serif; + color: #f3f4f6; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 40px 20px; + min-height: 100dvh; + overflow-x: hidden; /* verhindert horizontales Scrollen */ + overflow-y: auto; /* nur vertikal scrollen, wenn nötig */ + position: relative; + background: #0f172a; +} + +.background-glow { +position: fixed; +top: 0; +left: 0; +width: 100vw; +height: 100vh; +z-index: -1; +pointer-events: none; +background: radial-gradient(circle at 30% 30%, rgba(0, 200, 255, 0.35), transparent 60%), + radial-gradient(circle at 70% 60%, rgba(255, 50, 160, 0.35), transparent 60%), + radial-gradient(circle at 50% 80%, rgba(80, 255, 180, 0.3), transparent 60%); +background-size: 200% 200%; +animation: flowBackground 40s ease-in-out infinite; +} + +@keyframes flowBackground { +0% { + background-position: 0% 50%; +} +50% { + background-position: 100% 50%; +} +100% { + background-position: 0% 50%; +} +} + +body::before { + content: ''; + position: fixed; /* fixed statt absolute, bleibt innerhalb Viewport */ + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + pointer-events: none; + background: radial-gradient(circle at 30% 30%, rgba(12, 75, 119, 0.534), transparent 70%), + radial-gradient(circle at 70% 60%, rgba(230, 86, 158, 0.35), transparent 70%), + radial-gradient(circle at 50% 80%, rgba(69, 218, 69, 0.3), transparent 70%); + animation: flowBackground 30s ease-in-out infinite; +} + +.fade-in { +animation: fadeIn 1s ease-out forwards; +} + +@keyframes fadeIn { +0% { opacity: 0; transform: translateY(10px); } +100% { opacity: 1; transform: translateY(0); } +} + + +@keyframes gradientShift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +.profile-pic { +width: 120px; +height: 120px; +border-radius: 50%; +object-fit: cover; +border: 3px solid #4b5563; +margin-bottom: 20px; +box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); +filter: brightness(0.9) contrast(1.05); +border: 3px solid rgba(0, 0, 0, 0.3); +} + +h1 { +font-size: 26px; +font-weight: 600; +margin-bottom: 8px; +text-align: center; +color: #eccb0ec5; +text-shadow: 0 0 10px rgba(0, 0, 0, 0.4); +} + +p.bio { + color: #9ca3af; + font-size: 14px; + text-align: center; + max-width: 320px; +} + +p.bio2 { + color: #9ca3af; + font-size: 14px; + margin-bottom: 32px; + text-align: center; + max-width: 320px; +} + +h2.section-title { +font-size: 18px; +margin-bottom: 10px; +color: #a5f3fc; +text-shadow: 0 0 6px rgba(0, 255, 255, 0.2); +border-bottom: 1px solid #1a3458cb; +padding-bottom: 6px; +width: 100%; +max-width: 320px; +text-align: left; +} + +.section-title { +font-size: 18px; +margin-bottom: 10px; +color: #f9fafb; +border-bottom: 1px solid #374151; +padding-bottom: 6px; +width: 100%; +max-width: 320px; +text-align: left; +animation: pulseGlow 3s ease-in-out infinite; +} + +@keyframes pulseGlow { +0%, 100% { text-shadow: 0 0 3px rgba(255, 255, 255, 0.1); } +50% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); } +} + + +.link { +display: block; +width: 100%; +max-width: 320px; +margin: 6px 0; +padding: 14px 24px; +background-color: rgba(255, 255, 255, 0.04); +color: #f3f4f6; +text-decoration: none; +border-radius: 10px; +border: 1px solid #4b5563; +transition: all 0.4s ease, box-shadow 0.6s ease; +font-weight: 600; +text-align: left; +} + +.link:hover { + background-color: rgba(255, 255, 255, 0.07); /* softer highlight */ + color: #e0e7ff; /* gentle light blue tint */ + transform: scale(1.04) translateZ(0); + box-shadow: + 0 0 8px rgba(77, 180, 255, 0.3), + 0 0 12px rgba(255, 105, 180, 0.25), + 0 0 15px rgba(144, 238, 144, 0.2); + transition: background-color 0.3s ease, color 0.3s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; +} + +.blue-glow:hover { + box-shadow: 0 0 12px rgba(0, 200, 255, 0.3); +} + +.pink-glow:hover { + box-shadow: 0 0 12px rgba(252, 111, 184, 0.527); +} + +.green-glow:hover { + box-shadow: 0 0 12px rgba(144, 238, 144, 0.3); +} + +.orange-glow:hover { + box-shadow: 0 0 12px rgba(197, 130, 29, 0.705); +} + +.link-title { +font-size: 16px; +font-weight: 600; +} + +.link-note { +font-size: 13px; +color: #9ca3af; +margin-top: 4px; +font-weight: 400; +} + + +footer { +margin-top: 60px; +font-size: 12px; +color: #cbd5e1; +text-shadow: 0 0 4px rgba(255, 255, 255, 0.1); +text-align: center; +} + +.link-footer { + text-decoration: none; + color: #21e4d3; + font-size: 1,5em; +} + +.link-footer:hover { + color: #24ffed; /* lighter, glowing version of the base color */ + text-shadow: 0 0 6px rgba(255, 209, 136, 0.6); +} + +.firefly { +position: absolute; +width: 6px; +height: 6px; +background: hsl(55, 100%, 75%); +border-radius: 50%; +box-shadow: 0 0 12px 5px hsla(55, 100%, 60%, 0.3); +animation: + fly 14s ease-in-out infinite, + blink 2.5s ease-in-out infinite alternate, + hueShift 10s ease-in-out infinite; +} + + @keyframes fly { +0% { + transform: translate(0, 0) scale(0.9) rotate(0deg); +} +25% { + transform: translate(50px, -60px) scale(1) rotate(20deg); +} +50% { + transform: translate(-80px, 40px) scale(1.1) rotate(-20deg); +} +75% { + transform: translate(60px, -20px) scale(1) rotate(10deg); +} +100% { + transform: translate(0, 0) scale(0.9) rotate(0deg); +} +} +@keyframes hueShift { +0% { filter: hue-rotate(0deg); } +50% { filter: hue-rotate(60deg); } +100% { filter: hue-rotate(0deg); } +} + +@keyframes blink { +0% { opacity: 0.2; } +50% { opacity: 1; } +100% { opacity: 0.3; } +} + + + +/* Random positions and delays */ +.firefly:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; } +.firefly:nth-child(2) { top: 40%; left: 70%; animation-delay: 2s; } +.firefly:nth-child(3) { top: 80%; left: 30%; animation-delay: 4s; } +.firefly:nth-child(4) { top: 25%; left: 85%; animation-delay: 6s; } +.firefly:nth-child(5) { top: 60%; left: 15%; animation-delay: 8s; } +.firefly:nth-child(6) { top: 90%; left: 50%; animation-delay: 10s; } + + @keyframes fadeInUpSmooth { +0% { + opacity: 0; + transform: translateY(30px) scale(0.96); + filter: blur(4px); +} +100% { + opacity: 1; + transform: translateY(0) scale(1); + filter: blur(0); +} +} + +.animated-link { +opacity: 0; +transform: translateY(30px) scale(0.96); +animation: fadeInUpSmooth 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; +animation-delay: calc(0.15s * var(--i)); +will-change: opacity, transform, filter; +} + + +@media (max-width: 480px) { + .profile-pic { + width: 100px; + height: 100px; + } + + h1 { + font-size: 22px; + } + + .link { + font-size: 14px; + padding: 12px 20px; + } +} + +@media (max-width: 768px) { + body { + padding: 24px 16px; + } + + .link { + font-size: 15px; + padding: 12px 18px; + } + + h1 { + font-size: 24px; + } + + .profile-pic { + width: 110px; + height: 110px; + } +}