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

Add pricing cards to hero section (two-column layout)

Browse Source 
- Hero now has two-column grid: content left, pricing right
- Compact price cards show 1U/2U/4U prices immediately on page load
- Responsive: stacks to single column on mobile/tablet
- Featured "Suosituin" badge on 2U card

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-09 15:24:32 +02:00
parent 67fa9ba099
commit 74f28c932c
2 changed files with 149 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
index.html
View File

@@ -40,26 +40,48 @@
<!-- Hero -->
<section class="hero">
<div class="container">
<div class="hero-content">
<h1>Luotettavat konesalipalvelut <span class="highlight">Turussa</span></h1>
<p class="hero-subtitle">Colocation-laitepaikkoja ammattimaisessa laitetilassa. Redundantti sähkönsyöttö, nopeat tietoliikenneyhteydet ja henkilökohtainen palvelu.</p>
<div class="hero-actions">
<a href="#yhteystiedot" class="btn btn-primary">Pyydä tarjous</a>
<a href="#hinnat" class="btn btn-secondary">Katso hinnat</a>
<div class="hero-grid">
<div class="hero-content">
<h1>Luotettavat konesalipalvelut <span class="highlight">Turussa</span></h1>
<p class="hero-subtitle">Colocation-laitepaikkoja ammattimaisessa laitetilassa. Redundantti sähkönsyöttö, nopeat tietoliikenneyhteydet ja henkilökohtainen palvelu.</p>
<div class="hero-actions">
<a href="#yhteystiedot" class="btn btn-primary">Pyydä tarjous</a>
<a href="#hinnat" class="btn btn-secondary">Katso hinnat</a>
</div>
<div class="hero-stats">
<div class="stat">
<span class="stat-value">99,9%</span>
<span class="stat-label">Käytettävyys SLA</span>
</div>
<div class="stat">
<span class="stat-value">24/7</span>
<span class="stat-label">Valvonta</span>
</div>
<div class="stat">
<span class="stat-value">100 Gbit/s</span>
<span class="stat-label">Saatavilla jopa</span>
</div>
</div>
</div>
<div class="hero-stats">
<div class="stat">
<span class="stat-value">99,9%</span>
<span class="stat-label">Käytettävyys SLA</span>
</div>
<div class="stat">
<span class="stat-value">24/7</span>
<span class="stat-label">Valvonta</span>
</div>
<div class="stat">
<span class="stat-value">100 Gbit/s</span>
<span class="stat-label">Saatavilla jopa</span>
<div class="hero-pricing">
<div class="hero-pricing-label">Hinnat alkaen</div>
<div class="hero-price-cards">
<a href="#hinnat" class="hero-price-card">
<span class="hero-price-name">1U</span>
<span class="hero-price-value">&euro;49<small>/kk</small></span>
</a>
<a href="#hinnat" class="hero-price-card hero-price-card-featured">
<span class="hero-price-badge">Suosituin</span>
<span class="hero-price-name">2U</span>
<span class="hero-price-value">&euro;79<small>/kk</small></span>
</a>
<a href="#hinnat" class="hero-price-card">
<span class="hero-price-name">4U</span>
<span class="hero-price-value">&euro;139<small>/kk</small></span>
</a>
</div>
<p class="hero-pricing-note">1 Gbit/s yhteys &amp; rajoittamaton liikenne sisältyy</p>
<a href="#yhteystiedot" class="btn btn-primary hero-pricing-cta">Pyydä tarjous</a>
</div>
</div>
</div>