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

Add section illustrations and custom logo font (Space Grotesk)

Browse Source 
- Add Google Font Space Grotesk for logo, coral-colored "Turku"
- Add SVG illustrations: server rack (Palvelut), wind turbines (Energia),
  chat bubbles (UKK), envelope/location (Yhteystiedot)
- CSS positioning for illustration-left/right with responsive hiding

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-09 18:05:31 +02:00
parent 1f8612447b
commit 440670e830
3 changed files with 186 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
index.html
View File

@@ -5,6 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Konesali Turku — Colocation &amp; konesalipalvelut Turussa</title>
<meta name="description" content="Luotettavat konesalipalvelut Turussa. Colocation-laitepaikkoja 1U:sta kokokaappiin. Redundantti infrastruktuuri, henkilökohtainen palvelu.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
@@ -173,7 +176,58 @@
</section>
<!-- Palvelut -->
<section class="section" id="palvelut">
<section class="section section-with-illustration" id="palvelut">
<!-- Server rack front-view illustration -->
<div class="illustration-left" aria-hidden="true">
<svg viewBox="0 0 200 500" fill="none">
<!-- Full 42U rack front view -->
<rect x="30" y="20" width="140" height="460" rx="6" stroke="#e85d4a" stroke-width="1" opacity="0.08" fill="none"/>
<!-- Rack rails -->
<line x1="45" y1="20" x2="45" y2="480" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<line x1="155" y1="20" x2="155" y2="480" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<!-- Server units (various sizes) -->
<rect x="50" y="35" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<rect x="50" y="57" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<rect x="50" y="79" width="100" height="34" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.12" fill="#e85d4a" fill-opacity="0.03"/>
<rect x="50" y="119" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.08" fill="#e85d4a" fill-opacity="0.01"/>
<rect x="50" y="141" width="100" height="34" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<rect x="50" y="181" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.08" fill="#e85d4a" fill-opacity="0.01"/>
<rect x="50" y="203" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<rect x="50" y="225" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.08" fill="#e85d4a" fill-opacity="0.01"/>
<rect x="50" y="247" width="100" height="34" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.12" fill="#e85d4a" fill-opacity="0.03"/>
<rect x="50" y="287" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.08" fill="#e85d4a" fill-opacity="0.01"/>
<rect x="50" y="309" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<rect x="50" y="331" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.08" fill="#e85d4a" fill-opacity="0.01"/>
<!-- LED indicators -->
<circle cx="58" cy="43" r="2" fill="#e85d4a" opacity="0.2"/>
<circle cx="58" cy="65" r="2" fill="#4ade80" opacity="0.15"/>
<circle cx="58" cy="96" r="2.5" fill="#e85d4a" opacity="0.25"/>
<circle cx="58" cy="127" r="2" fill="#4ade80" opacity="0.12"/>
<circle cx="58" cy="158" r="2.5" fill="#e85d4a" opacity="0.2"/>
<circle cx="58" cy="189" r="2" fill="#4ade80" opacity="0.15"/>
<circle cx="58" cy="211" r="2" fill="#e85d4a" opacity="0.18"/>
<circle cx="58" cy="264" r="2.5" fill="#4ade80" opacity="0.2"/>
<circle cx="58" cy="295" r="2" fill="#e85d4a" opacity="0.15"/>
<circle cx="58" cy="317" r="2" fill="#4ade80" opacity="0.18"/>
<!-- Activity bars -->
<line x1="68" y1="43" x2="88" y2="43" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<line x1="68" y1="96" x2="95" y2="96" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="68" y1="158" x2="82" y2="158" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<line x1="68" y1="264" x2="92" y2="264" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<!-- Ventilation holes pattern -->
<g opacity="0.04">
<circle cx="130" cy="43" r="1" fill="#e85d4a"/>
<circle cx="136" cy="43" r="1" fill="#e85d4a"/>
<circle cx="142" cy="43" r="1" fill="#e85d4a"/>
<circle cx="130" cy="96" r="1" fill="#e85d4a"/>
<circle cx="136" cy="96" r="1" fill="#e85d4a"/>
<circle cx="142" cy="96" r="1" fill="#e85d4a"/>
<circle cx="130" cy="158" r="1" fill="#e85d4a"/>
<circle cx="136" cy="158" r="1" fill="#e85d4a"/>
<circle cx="142" cy="158" r="1" fill="#e85d4a"/>
</g>
</svg>
</div>
<div class="container">
<h2 class="section-title">Palvelut</h2>
<p class="section-subtitle">Colocation-laitepaikkoja yksittäisestä palvelimesta kokokaappiin</p>
@@ -421,7 +475,47 @@
</section>
<!-- Vihreä energia -->
<section class="section section-green" id="energia">
<section class="section section-green section-with-illustration" id="energia">
<!-- Wind turbine illustration -->
<div class="illustration-right" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none">
<!-- Wind turbine 1 -->
<g transform="translate(80, 40)">
<!-- Tower -->
<line x1="50" y1="80" x2="50" y2="320" stroke="#059669" stroke-width="2" opacity="0.12"/>
<line x1="44" y1="320" x2="56" y2="320" stroke="#059669" stroke-width="2" opacity="0.1"/>
<!-- Hub -->
<circle cx="50" cy="80" r="5" fill="#059669" opacity="0.12"/>
<!-- Blades -->
<line x1="50" y1="80" x2="50" y2="20" stroke="#059669" stroke-width="1.5" opacity="0.15" stroke-linecap="round"/>
<line x1="50" y1="80" x2="100" y2="108" stroke="#059669" stroke-width="1.5" opacity="0.12" stroke-linecap="round"/>
<line x1="50" y1="80" x2="5" y2="108" stroke="#059669" stroke-width="1.5" opacity="0.1" stroke-linecap="round"/>
</g>
<!-- Wind turbine 2 (smaller, background) -->
<g transform="translate(20, 100)" opacity="0.6">
<line x1="30" y1="50" x2="30" y2="220" stroke="#059669" stroke-width="1.5" opacity="0.1"/>
<circle cx="30" cy="50" r="3.5" fill="#059669" opacity="0.1"/>
<line x1="30" y1="50" x2="30" y2="10" stroke="#059669" stroke-width="1" opacity="0.12" stroke-linecap="round"/>
<line x1="30" y1="50" x2="62" y2="68" stroke="#059669" stroke-width="1" opacity="0.1" stroke-linecap="round"/>
<line x1="30" y1="50" x2="0" y2="68" stroke="#059669" stroke-width="1" opacity="0.08" stroke-linecap="round"/>
</g>
<!-- Sun rays -->
<circle cx="160" cy="60" r="20" stroke="#059669" stroke-width="1" opacity="0.08" fill="#059669" fill-opacity="0.02"/>
<circle cx="160" cy="60" r="10" fill="#059669" opacity="0.06"/>
<g stroke="#059669" stroke-width="0.8" opacity="0.06">
<line x1="160" y1="30" x2="160" y2="22"/>
<line x1="160" y1="90" x2="160" y2="98"/>
<line x1="130" y1="60" x2="122" y2="60"/>
<line x1="190" y1="60" x2="198" y2="60"/>
<line x1="139" y1="39" x2="133" y2="33"/>
<line x1="181" y1="81" x2="187" y2="87"/>
<line x1="139" y1="81" x2="133" y2="87"/>
<line x1="181" y1="39" x2="187" y2="33"/>
</g>
<!-- Ground/landscape line -->
<path d="M0 340 Q50 325 100 335 Q150 345 200 330" stroke="#059669" stroke-width="0.8" opacity="0.08" fill="none"/>
</svg>
</div>
<div class="container">
<div class="green-energy">
<div class="green-energy-content">
@@ -650,7 +744,32 @@
</section>
<!-- Usein kysytyt kysymykset -->
<section class="section section-alt" id="ukk">
<section class="section section-alt section-with-illustration" id="ukk">
<!-- Question bubbles illustration -->
<div class="illustration-left" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none">
<!-- Chat bubble 1 -->
<rect x="30" y="40" width="120" height="60" rx="12" stroke="#e85d4a" stroke-width="0.8" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<path d="M60 100 L50 115 L75 100" stroke="#e85d4a" stroke-width="0.8" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<!-- Question mark inside -->
<text x="90" y="80" font-size="28" fill="#e85d4a" opacity="0.08" text-anchor="middle" font-family="serif" font-weight="700">?</text>
<!-- Chat bubble 2 -->
<rect x="50" y="140" width="130" height="50" rx="10" stroke="#e85d4a" stroke-width="0.8" opacity="0.08" fill="#e85d4a" fill-opacity="0.015"/>
<path d="M150 190 L165 202 L145 190" stroke="#e85d4a" stroke-width="0.8" opacity="0.08" fill="#e85d4a" fill-opacity="0.015"/>
<!-- Lines representing text -->
<line x1="65" y1="157" x2="155" y2="157" stroke="#e85d4a" stroke-width="1" opacity="0.05"/>
<line x1="65" y1="168" x2="140" y2="168" stroke="#e85d4a" stroke-width="1" opacity="0.04"/>
<line x1="65" y1="179" x2="125" y2="179" stroke="#e85d4a" stroke-width="1" opacity="0.03"/>
<!-- Chat bubble 3 -->
<rect x="20" y="230" width="110" height="55" rx="10" stroke="#e85d4a" stroke-width="0.8" opacity="0.07" fill="#e85d4a" fill-opacity="0.01"/>
<path d="M50 285 L40 298 L65 285" stroke="#e85d4a" stroke-width="0.8" opacity="0.07" fill="#e85d4a" fill-opacity="0.01"/>
<text x="75" y="265" font-size="22" fill="#e85d4a" opacity="0.06" text-anchor="middle" font-family="serif" font-weight="700">?</text>
<!-- Decorative dots -->
<circle cx="170" cy="260" r="3" fill="#e85d4a" opacity="0.06"/>
<circle cx="160" cy="280" r="2" fill="#e85d4a" opacity="0.04"/>
<circle cx="175" cy="295" r="2.5" fill="#e85d4a" opacity="0.05"/>
</svg>
</div>
<div class="container">
<h2 class="section-title">Usein kysytyt kysymykset</h2>
<p class="section-subtitle">Vastauksia yleisimpiin colocation-palveluita koskeviin kysymyksiin</p>
@@ -714,7 +833,35 @@
</section>
<!-- Yhteystiedot -->
<section class="section" id="yhteystiedot">
<section class="section section-with-illustration" id="yhteystiedot">
<!-- Envelope / connection illustration -->
<div class="illustration-right" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none">
<!-- Envelope shape -->
<rect x="40" y="80" width="120" height="80" rx="6" stroke="#e85d4a" stroke-width="0.8" opacity="0.1" fill="#e85d4a" fill-opacity="0.015"/>
<path d="M40 86 L100 130 L160 86" stroke="#e85d4a" stroke-width="0.8" opacity="0.1"/>
<path d="M40 160 L80 125" stroke="#e85d4a" stroke-width="0.6" opacity="0.06"/>
<path d="M160 160 L120 125" stroke="#e85d4a" stroke-width="0.6" opacity="0.06"/>
<!-- Signal waves from envelope -->
<path d="M165 95 Q175 95 175 105" stroke="#e85d4a" stroke-width="0.6" opacity="0.08" fill="none"/>
<path d="M170 88 Q185 88 185 108" stroke="#e85d4a" stroke-width="0.5" opacity="0.06" fill="none"/>
<!-- Pin/location marker -->
<g transform="translate(80, 200)">
<path d="M20 0 C9 0 0 9 0 20 C0 35 20 52 20 52 C20 52 40 35 40 20 C40 9 31 0 20 0Z" stroke="#e85d4a" stroke-width="0.8" opacity="0.08" fill="#e85d4a" fill-opacity="0.015"/>
<circle cx="20" cy="20" r="8" stroke="#e85d4a" stroke-width="0.6" opacity="0.08"/>
<circle cx="20" cy="20" r="3" fill="#e85d4a" opacity="0.06"/>
</g>
<!-- Connection dots -->
<circle cx="50" cy="290" r="3" fill="#e85d4a" opacity="0.06"/>
<circle cx="90" cy="305" r="2.5" fill="#e85d4a" opacity="0.05"/>
<circle cx="140" cy="295" r="2" fill="#e85d4a" opacity="0.04"/>
<line x1="50" y1="290" x2="90" y2="305" stroke="#e85d4a" stroke-width="0.5" opacity="0.04"/>
<line x1="90" y1="305" x2="140" y2="295" stroke="#e85d4a" stroke-width="0.5" opacity="0.04"/>
<!-- Phone icon outline -->
<rect x="60" y="330" width="30" height="50" rx="4" stroke="#e85d4a" stroke-width="0.6" opacity="0.06"/>
<line x1="68" y1="370" x2="82" y2="370" stroke="#e85d4a" stroke-width="0.5" opacity="0.05"/>
</svg>
</div>
<div class="container">
<h2 class="section-title">Ota yhteyttä</h2>
<p class="section-subtitle">Kerro tarpeistasi, niin teemme sinulle tarjouksen</p>

3
konesali.html
View File

@@ -5,6 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Konesali — Tekniset tiedot | Konesali Turku</title>
<meta name="description" content="Konesali Turun tekniset tiedot: sähköjärjestelmät, jäähdytys, tietoliikenneyhteydet, turvallisuus ja tilat.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>

35
style.css
View File

@@ -114,9 +114,10 @@ a:hover {
align-items: center;
gap: 10px;
color: var(--color-white);
font-size: 1.25rem;
font-family: 'Space Grotesk', var(--font-family);
font-size: 1.3rem;
font-weight: 400;
letter-spacing: -0.01em;
letter-spacing: -0.02em;
}
.logo:hover {
@@ -125,6 +126,7 @@ a:hover {
.logo strong {
font-weight: 700;
color: var(--color-primary-light);
}
.logo-icon {
@@ -1351,6 +1353,31 @@ a:hover {
height: 100%;
}
/* === Section Illustrations === */
.illustration-left,
.illustration-right {
position: absolute;
top: 0;
bottom: 0;
width: 220px;
pointer-events: none;
z-index: 0;
}
.illustration-left {
left: 0;
}
.illustration-right {
right: 0;
}
.illustration-left svg,
.illustration-right svg {
width: 100%;
height: 100%;
}
/* === Animations === */
.fade-in {
opacity: 0;
@@ -1371,7 +1398,9 @@ a:hover {
opacity: 0.5;
}
.blueprint-decoration {
.blueprint-decoration,
.illustration-left,
.illustration-right {
display: none;
}