jukka/konesaliturku.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add unique logo and illustrations

Browse Source 
- New server rack + signal waves logo (header + footer, both pages)
- Isometric server room illustration in hero background with LED animations
- Network topology decoration in "Miksi me" section
- Blueprint/rack illustration in "Tekniset tiedot" section
- CSS animations for LED blinks and data flow particles
- Responsive: illustrations hidden on mobile, reduced on tablet

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-09 17:09:23 +02:00
parent 2bbbbe9c03
commit 0b246ddb56
3 changed files with 335 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
konesali.html
View File

@@ -12,14 +12,19 @@
<header class="header" id="header">
<div class="container header-inner">
<a href="/" class="logo">
<svg class="logo-icon" viewBox="0 0 32 32" width="32" height="32" fill="none">
<rect x="2" y="6" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2"/>
<rect x="6" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="6" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<svg class="logo-icon" viewBox="0 0 32 38" width="28" height="33" fill="none">
<path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
<path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
<rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
<rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
<line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
</svg>
<span>Konesali<strong>Turku</strong></span>
</a>
@@ -388,14 +393,19 @@
<div class="container footer-inner">
<div class="footer-brand">
<a href="/" class="logo">
<svg class="logo-icon" viewBox="0 0 32 32" width="24" height="24" fill="none">
<rect x="2" y="6" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2"/>
<rect x="6" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="6" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="14" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="10" width="4" height="4" rx="1" fill="currentColor"/>
<rect x="22" y="18" width="4" height="4" rx="1" fill="currentColor"/>
<svg class="logo-icon" viewBox="0 0 32 38" width="22" height="26" fill="none">
<path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
<path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
<rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
<rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
<circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
<circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
<line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
<line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
</svg>
<span>Konesali<strong>Turku</strong></span>
</a>