DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero-Atmosphäre überarbeitet: klare 3 Zonen (Polarlicht oben, Rauch Mitte, Nebel unten) mit weichem Übergang, 4 deutlicher sichtbare Husky-/Hasen-Silhouetten mit leuchtenden Augen

Browse Source
This commit is contained in:
DogFatherGit
2026-07-30 22:48:45 +02:00
parent a416c9a3b9
commit 3b9c9ef52e
2 changed files with 106 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+34 -8
View File
@@ -29,23 +29,49 @@
<!-- ================= HERO ================= -->
<section class="hero">
<div class="hero-atmosphere" aria-hidden="true">
<span class="atmosphere-blend"></span>
<!-- Zone 1: Polarlicht oben -->
<span class="aurora-band a1"></span>
<span class="aurora-band a2"></span>
<span class="aurora-band a3"></span>
<span class="smoke-blob" style="width:340px;height:340px;top:8%;left:6%;"></span>
<span class="smoke-blob" style="width:260px;height:260px;bottom:10%;right:10%;animation-delay:-14s;"></span>
<svg class="animal-silhouette husky" viewBox="0 0 200 200" style="top:6%;right:4%;width:min(30vw,260px);" xmlns="http://www.w3.org/2000/svg">
<!-- Zone 2: Rauch in der Mitte -->
<span class="smoke-blob" style="width:380px;height:380px;top:26%;left:4%;"></span>
<span class="smoke-blob" style="width:300px;height:300px;top:38%;right:6%;animation-delay:-11s;"></span>
<span class="smoke-blob" style="width:260px;height:260px;top:48%;left:38%;animation-delay:-22s;"></span>
<!-- Zone 3: Nebel unten -->
<span class="fog-ground"></span>
<!-- Husky #1 -->
<svg class="animal-silhouette husky n1" viewBox="0 0 200 200" style="top:10%;right:5%;width:min(26vw,230px);" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M100 18 L68 2 L74 46 Q48 58 43 92 Q39 132 68 162 Q100 184 132 162 Q161 132 157 92 Q152 58 126 46 L132 2 Z" />
<circle class="eye-glow" cx="80" cy="92" r="6" fill="var(--accent)" />
<circle class="eye-glow" cx="120" cy="92" r="6" fill="var(--accent)" />
<circle class="eye-glow" cx="80" cy="92" r="7" fill="var(--accent)" />
<circle class="eye-glow" cx="120" cy="92" r="7" fill="var(--accent)" />
</svg>
<svg class="animal-silhouette rabbit" viewBox="0 0 200 220" style="bottom:4%;left:3%;width:min(24vw,210px);" xmlns="http://www.w3.org/2000/svg">
<!-- Hase #1 -->
<svg class="animal-silhouette rabbit n2" viewBox="0 0 200 220" style="bottom:20%;left:4%;width:min(20vw,180px);" xmlns="http://www.w3.org/2000/svg">
<path stroke="currentColor" stroke-width="20" stroke-linecap="round" fill="none" d="M84 8 Q72 60 78 104 M116 8 Q128 60 122 104" />
<ellipse cx="100" cy="146" rx="58" ry="52" fill="currentColor" />
<circle class="eye-glow" cx="80" cy="136" r="6" fill="var(--accent)" />
<circle class="eye-glow" cx="120" cy="136" r="6" fill="var(--accent)" />
<circle class="eye-glow" cx="80" cy="136" r="7" fill="var(--accent)" />
<circle class="eye-glow" cx="120" cy="136" r="7" fill="var(--accent)" />
</svg>
<!-- Husky #2 (kleiner, weiter hinten) -->
<svg class="animal-silhouette husky n3" viewBox="0 0 200 200" style="top:34%;left:10%;width:min(15vw,130px);animation-delay:-7s;" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M100 18 L68 2 L74 46 Q48 58 43 92 Q39 132 68 162 Q100 184 132 162 Q161 132 157 92 Q152 58 126 46 L132 2 Z" />
<circle class="eye-glow" cx="80" cy="92" r="7" fill="var(--accent)" />
<circle class="eye-glow" cx="120" cy="92" r="7" fill="var(--accent)" />
</svg>
<!-- Hase #2 (kleiner, weiter hinten) -->
<svg class="animal-silhouette rabbit n4" viewBox="0 0 200 220" style="bottom:26%;right:14%;width:min(13vw,120px);animation-delay:-15s;" xmlns="http://www.w3.org/2000/svg">
<path stroke="currentColor" stroke-width="20" stroke-linecap="round" fill="none" d="M84 8 Q72 60 78 104 M116 8 Q128 60 122 104" />
<ellipse cx="100" cy="146" rx="58" ry="52" fill="currentColor" />
<circle class="eye-glow" cx="80" cy="136" r="7" fill="var(--accent)" />
<circle class="eye-glow" cx="120" cy="136" r="7" fill="var(--accent)" />
</svg>
</div>
<div class="container">