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

Erota Vihreä konesali -osio visuaalisesti Hinnat-osiosta

Browse Source 
Lisätty vihreä gradienttitausta, elliptinen jakaja ja
luontoteemainen SVG-kuvitus (tuulivoimalat, aurinko, lehdet, mäet).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-09 20:38:46 +02:00
parent 2e051efc2d
commit ff2c54db57
2 changed files with 112 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
index.html
View File

@@ -487,44 +487,68 @@
<!-- Vihreä 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"/>
<!-- Nature decoration (leaves, turbine, sun) -->
<div class="green-decoration" aria-hidden="true">
<svg viewBox="0 0 1200 500" fill="none" preserveAspectRatio="xMidYMid slice">
<!-- Scattered leaves -->
<g opacity="0.12">
<path d="M120 80 Q140 50 160 80 Q140 65 120 80Z" fill="#059669" transform="rotate(-20 140 65)"/>
<path d="M1050 120 Q1070 90 1090 120 Q1070 105 1050 120Z" fill="#059669" transform="rotate(15 1070 105)"/>
<path d="M80 350 Q100 320 120 350 Q100 335 80 350Z" fill="#059669" transform="rotate(-35 100 335)"/>
<path d="M1100 380 Q1120 350 1140 380 Q1120 365 1100 380Z" fill="#059669" transform="rotate(25 1120 365)"/>
<path d="M300 60 Q315 35 330 60 Q315 47 300 60Z" fill="#059669" transform="rotate(10 315 47)"/>
<path d="M900 400 Q915 375 930 400 Q915 387 900 400Z" fill="#059669" transform="rotate(-15 915 387)"/>
</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"/>
<!-- Small wind turbine left -->
<g transform="translate(60, 120)" opacity="0.1">
<line x1="30" y1="40" x2="30" y2="200" stroke="#059669" stroke-width="2"/>
<circle cx="30" cy="40" r="4" fill="#059669"/>
<line x1="30" y1="40" x2="30" y2="0" stroke="#059669" stroke-width="1.5" stroke-linecap="round"/>
<line x1="30" y1="40" x2="64" y2="58" stroke="#059669" stroke-width="1.5" stroke-linecap="round"/>
<line x1="30" y1="40" x2="-4" y2="58" stroke="#059669" stroke-width="1.5" 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"/>
<!-- Large wind turbine right -->
<g transform="translate(1020, 50)" opacity="0.08">
<line x1="50" y1="60" x2="50" y2="350" stroke="#059669" stroke-width="2.5"/>
<circle cx="50" cy="60" r="6" fill="#059669"/>
<line x1="50" y1="60" x2="50" y2="-10" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
<line x1="50" y1="60" x2="110" y2="92" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
<line x1="50" y1="60" x2="-10" y2="92" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
</g>
<!-- Sun top right -->
<circle cx="950" cy="70" r="30" stroke="#059669" stroke-width="1.5" opacity="0.06" fill="#059669" fill-opacity="0.02"/>
<circle cx="950" cy="70" r="14" fill="#059669" opacity="0.05"/>
<g stroke="#059669" stroke-width="1" opacity="0.05">
<line x1="950" y1="30" x2="950" y2="18"/>
<line x1="950" y1="110" x2="950" y2="122"/>
<line x1="910" y1="70" x2="898" y2="70"/>
<line x1="990" y1="70" x2="1002" y2="70"/>
<line x1="922" y1="42" x2="914" y2="34"/>
<line x1="978" y1="98" x2="986" y2="106"/>
<line x1="922" y1="98" x2="914" y2="106"/>
<line x1="978" y1="42" x2="986" y2="34"/>
</g>
<!-- Rolling hills at bottom -->
<path d="M0 420 Q150 380 300 400 Q500 430 700 390 Q900 360 1050 400 Q1150 420 1200 410 L1200 500 L0 500Z" fill="#059669" opacity="0.04"/>
<path d="M0 450 Q200 420 400 440 Q600 460 800 430 Q1000 400 1200 440 L1200 500 L0 500Z" fill="#059669" opacity="0.03"/>
<!-- Small tree silhouettes on hills -->
<g opacity="0.06" fill="#059669">
<path d="M200 400 L206 380 L212 400Z"/>
<rect x="204" y="400" width="4" height="10"/>
<path d="M800 395 L808 370 L816 395Z"/>
<rect x="806" y="395" width="4" height="12"/>
<path d="M500 425 L505 410 L510 425Z"/>
<rect x="503.5" y="425" width="3" height="8"/>
</g>
<!-- Recycling arrows circle -->
<g transform="translate(180, 250)" opacity="0.07" stroke="#059669" stroke-width="1.5" fill="none">
<path d="M15 0 A15 15 0 0 1 0 15" stroke-linecap="round"/>
<path d="M0 15 A15 15 0 0 1 -15 0" stroke-linecap="round"/>
<path d="M-15 0 A15 15 0 0 1 0 -15" stroke-linecap="round"/>
<polygon points="15,0 10,-5 10,5" fill="#059669"/>
<polygon points="0,15 -5,10 5,10" fill="#059669"/>
<polygon points="-15,0 -10,5 -10,-5" fill="#059669"/>
</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">