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

Add background images to hero, stats break, and city CTA sections

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-09 22:16:22 +02:00
parent 8a66ce10e7
commit 81283cecb9
5 changed files with 149 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/city-network.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 452 KiB

BIN
images/fiber-light.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
images/hero-fiber.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 445 KiB

41
index.html
View File

@@ -28,14 +28,15 @@
</header>
<!-- Hero -->
<section class="hero">
<div class="container">
<section class="hero" style="background-image: url('images/hero-fiber.jpg')">
<div class="hero-overlay"></div>
<div class="container hero-container">
<div class="hero-badge">Turkulainen valokuituoperaattori</div>
<h1>Symmetristä valokuitua<br>jopa <span class="highlight">100 Gbps</span></h1>
<p class="hero-sub">Rakennamme nopeimmat ja luotettavimmat yhteydet yrityksille, taloyhtiöille ja konesaleihin. Ei kompromisseja nopeuden tai laadun suhteen.</p>
<div class="hero-actions">
<a href="#saatavuus" class="btn">Tee saatavuuskysely</a>
<a href="#palvelut" class="btn btn-outline">Tutustu palveluihin</a>
<a href="#palvelut" class="btn btn-outline-light">Tutustu palveluihin</a>
</div>
<div class="hero-stats">
<div class="hero-stat">
@@ -52,7 +53,6 @@
</div>
</div>
</div>
<div class="hero-bg"></div>
</section>
<!-- Palvelut -->
@@ -104,6 +104,29 @@
</div>
</section>
<!-- Kuvakaistale -->
<section class="image-break" style="background-image: url('images/fiber-light.jpg')">
<div class="image-break-overlay"></div>
<div class="container image-break-content">
<div class="image-break-stat">
<strong>100 Gbps</strong>
<span>Maksiminopeus</span>
</div>
<div class="image-break-stat">
<strong>Symmetrinen</strong>
<span>Sama nopeus molempiin suuntiin</span>
</div>
<div class="image-break-stat">
<strong>SLA</strong>
<span>Palvelutasotakuu</span>
</div>
<div class="image-break-stat">
<strong>Turku</strong>
<span>Paikallinen operaattori</span>
</div>
</div>
</section>
<!-- Miksi Cuitunet -->
<section id="miksi" class="why">
<div class="container">
@@ -156,6 +179,16 @@
</div>
</section>
<!-- Kaupunki-kuvakaistale -->
<section class="image-break image-break-tall" style="background-image: url('images/city-network.jpg')">
<div class="image-break-overlay image-break-overlay-warm"></div>
<div class="container image-break-cta">
<h2>Kiinnostaako kuituliittymä?</h2>
<p>Selvitä valokuidun saatavuus osoitteessasi — vastaamme 1–2 arkipäivässä.</p>
<a href="#saatavuus" class="btn">Tee saatavuuskysely</a>
</div>
</section>
<!-- Saatavuuskysely -->
<section id="saatavuus" class="availability">
<div class="container">

122
style.css
View File

@@ -178,33 +178,43 @@ img {
/* ---- Hero ---- */
.hero {
position: relative;
padding: 160px 0 100px;
padding: 180px 0 100px;
text-align: center;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-bg {
.hero-overlay {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--orange-light) 0%, transparent 70%);
z-index: -1;
background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);
z-index: 1;
}
.hero-container {
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-block;
padding: 6px 16px;
background: var(--orange-light);
color: var(--orange-dark);
background: rgba(255,255,255,0.15);
backdrop-filter: blur(4px);
color: var(--orange-light);
font-size: 0.82rem;
font-weight: 600;
border-radius: 100px;
margin-bottom: 24px;
border: 1px solid rgba(255,255,255,0.1);
}
.hero h1 {
font-size: 3.4rem;
font-weight: 800;
color: var(--dark);
color: #fff;
line-height: 1.15;
margin-bottom: 20px;
letter-spacing: -0.5px;
@@ -216,7 +226,7 @@ img {
.hero-sub {
font-size: 1.15rem;
color: var(--text-light);
color: rgba(255,255,255,0.8);
max-width: 560px;
margin: 0 auto 36px;
line-height: 1.7;
@@ -229,6 +239,19 @@ img {
margin-bottom: 64px;
}
.btn-outline-light {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.3);
}
.btn-outline-light:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.5);
box-shadow: none;
transform: translateY(-1px);
}
.hero-stats {
display: flex;
justify-content: center;
@@ -239,12 +262,74 @@ img {
display: block;
font-size: 1.4rem;
font-weight: 700;
color: var(--dark);
color: #fff;
}
.hero-stat span {
font-size: 0.85rem;
color: var(--text-light);
color: rgba(255,255,255,0.6);
}
/* ---- Image Break ---- */
.image-break {
position: relative;
padding: 64px 0;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.image-break-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.7);
}
.image-break-overlay-warm {
background: linear-gradient(135deg, rgba(30,20,10,0.8), rgba(100,60,20,0.7));
}
.image-break-content {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
gap: 64px;
}
.image-break-stat strong {
display: block;
font-size: 1.6rem;
font-weight: 800;
color: var(--orange);
}
.image-break-stat span {
font-size: 0.85rem;
color: rgba(255,255,255,0.7);
}
.image-break-tall {
padding: 120px 0;
}
.image-break-cta {
position: relative;
z-index: 2;
text-align: center;
}
.image-break-cta h2 {
font-size: 2.4rem;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
}
.image-break-cta p {
font-size: 1.1rem;
color: rgba(255,255,255,0.8);
margin-bottom: 28px;
}
/* ---- Services ---- */
@@ -570,6 +655,23 @@ img {
grid-template-columns: 1fr;
}
.image-break-content {
flex-direction: column;
gap: 32px;
}
.image-break {
background-attachment: scroll;
}
.image-break-tall {
padding: 80px 0;
}
.image-break-cta h2 {
font-size: 1.8rem;
}
.footer-top {
grid-template-columns: 1fr;
gap: 32px;