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 --> <!-- Vihreä energia -->
<section class="section section-green section-with-illustration" id="energia"> <section class="section section-green section-with-illustration" id="energia">
<!-- Wind turbine illustration --> <!-- Nature decoration (leaves, turbine, sun) -->
<div class="illustration-right" aria-hidden="true"> <div class="green-decoration" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none"> <svg viewBox="0 0 1200 500" fill="none" preserveAspectRatio="xMidYMid slice">
<!-- Wind turbine 1 --> <!-- Scattered leaves -->
<g transform="translate(80, 40)"> <g opacity="0.12">
<!-- Tower --> <path d="M120 80 Q140 50 160 80 Q140 65 120 80Z" fill="#059669" transform="rotate(-20 140 65)"/>
<line x1="50" y1="80" x2="50" y2="320" stroke="#059669" stroke-width="2" opacity="0.12"/> <path d="M1050 120 Q1070 90 1090 120 Q1070 105 1050 120Z" fill="#059669" transform="rotate(15 1070 105)"/>
<line x1="44" y1="320" x2="56" y2="320" stroke="#059669" stroke-width="2" opacity="0.1"/> <path d="M80 350 Q100 320 120 350 Q100 335 80 350Z" fill="#059669" transform="rotate(-35 100 335)"/>
<!-- Hub --> <path d="M1100 380 Q1120 350 1140 380 Q1120 365 1100 380Z" fill="#059669" transform="rotate(25 1120 365)"/>
<circle cx="50" cy="80" r="5" fill="#059669" opacity="0.12"/> <path d="M300 60 Q315 35 330 60 Q315 47 300 60Z" fill="#059669" transform="rotate(10 315 47)"/>
<!-- Blades --> <path d="M900 400 Q915 375 930 400 Q915 387 900 400Z" fill="#059669" transform="rotate(-15 915 387)"/>
<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> </g>
<!-- Wind turbine 2 (smaller, background) --> <!-- Small wind turbine left -->
<g transform="translate(20, 100)" opacity="0.6"> <g transform="translate(60, 120)" opacity="0.1">
<line x1="30" y1="50" x2="30" y2="220" stroke="#059669" stroke-width="1.5" opacity="0.1"/> <line x1="30" y1="40" x2="30" y2="200" stroke="#059669" stroke-width="2"/>
<circle cx="30" cy="50" r="3.5" fill="#059669" opacity="0.1"/> <circle cx="30" cy="40" r="4" fill="#059669"/>
<line x1="30" y1="50" x2="30" y2="10" stroke="#059669" stroke-width="1" opacity="0.12" stroke-linecap="round"/> <line x1="30" y1="40" x2="30" y2="0" stroke="#059669" stroke-width="1.5" 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="40" x2="64" y2="58" stroke="#059669" stroke-width="1.5" stroke-linecap="round"/>
<line x1="30" y1="50" x2="0" y2="68" stroke="#059669" stroke-width="1" opacity="0.08" stroke-linecap="round"/> <line x1="30" y1="40" x2="-4" y2="58" stroke="#059669" stroke-width="1.5" stroke-linecap="round"/>
</g> </g>
<!-- Sun rays --> <!-- Large wind turbine right -->
<circle cx="160" cy="60" r="20" stroke="#059669" stroke-width="1" opacity="0.08" fill="#059669" fill-opacity="0.02"/> <g transform="translate(1020, 50)" opacity="0.08">
<circle cx="160" cy="60" r="10" fill="#059669" opacity="0.06"/> <line x1="50" y1="60" x2="50" y2="350" stroke="#059669" stroke-width="2.5"/>
<g stroke="#059669" stroke-width="0.8" opacity="0.06"> <circle cx="50" cy="60" r="6" fill="#059669"/>
<line x1="160" y1="30" x2="160" y2="22"/> <line x1="50" y1="60" x2="50" y2="-10" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
<line x1="160" y1="90" x2="160" y2="98"/> <line x1="50" y1="60" x2="110" y2="92" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
<line x1="130" y1="60" x2="122" y2="60"/> <line x1="50" y1="60" x2="-10" y2="92" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
<line x1="190" y1="60" x2="198" y2="60"/> </g>
<line x1="139" y1="39" x2="133" y2="33"/> <!-- Sun top right -->
<line x1="181" y1="81" x2="187" y2="87"/> <circle cx="950" cy="70" r="30" stroke="#059669" stroke-width="1.5" opacity="0.06" fill="#059669" fill-opacity="0.02"/>
<line x1="139" y1="81" x2="133" y2="87"/> <circle cx="950" cy="70" r="14" fill="#059669" opacity="0.05"/>
<line x1="181" y1="39" x2="187" y2="33"/> <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> </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> </svg>
</div> </div>
<div class="container"> <div class="container">

53
style.css
View File

@@ -1027,7 +1027,60 @@ a:hover {
/* === Green Energy (simplified) === */ /* === Green Energy (simplified) === */
.section-green { .section-green {
background: linear-gradient(175deg, #ecfdf5 0%, #d1fae5 40%, #ecfdf5 100%);
position: relative;
overflow: hidden;
}
.section-green::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 60px;
background: var(--color-bg-alt); background: var(--color-bg-alt);
clip-path: ellipse(55% 100% at 50% 0%);
z-index: 1;
}
.section-green::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 15% 30%, rgba(5, 150, 105, 0.06) 0%, transparent 50%),
radial-gradient(circle at 85% 70%, rgba(5, 150, 105, 0.05) 0%, transparent 40%);
pointer-events: none;
z-index: 0;
}
.section-green > .container,
.section-green > .illustration-right {
position: relative;
z-index: 2;
}
.green-decoration {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.green-decoration svg {
width: 100%;
height: 100%;
}
.section-green > .green-decoration {
z-index: 1;
} }
.green-energy { .green-energy {