From 6f157a39cffdcfeb21cb9fa3beb051f1b4d16716 Mon Sep 17 00:00:00 2001 From: Jukka Lampikoski Date: Mon, 9 Mar 2026 19:56:12 +0200 Subject: [PATCH] Initial cuitunet.fi website - HTML + CSS Static site with hero, services, why section, contact form. No WordPress - pure HTML/CSS. Co-Authored-By: Claude Opus 4.6 --- index.html | 130 +++++++++++++++++++++++ style.css | 295 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 425 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..afb4b8d --- /dev/null +++ b/index.html @@ -0,0 +1,130 @@ + + + + + + Cuitunet Oy – Nopeinta kaistaa verkkoon + + + + + +
+
+ + + +
+
+ +
+
+

Nopeinta kaistaa verkkoon

+

Symmetriset valokuituyhteydet yrityksille ja taloyhtiöille — 1 Gbps:stä aina 10 Gbps:iin.

+ Pyydä tarjous +
+
+ +
+
+

Palvelut

+
+ +
+
💼
+

Yritysliittymä

+

Nopeita ja turvallisia valokuituyhteyksiä kaikenkokoisille yrityksille. Symmetriset nopeudet ja palvelutasotakuu.

+
+ +
+
🏢
+

Kiinteistöliittymä

+

Symmetriset kuituyhteydet taloyhtiöille — etätyö ja suoratoisto sujuvat ilman katkoja.

+
+ +
+
🖥
+

Konesalipalvelut

+

Yhteydet laitetiloihin ja kolmansien osapuolien konesaleihin jopa 10 Gbps nopeudella.

+
+ +
+
🔒
+

VPN-yhteydet

+

Virtuaaliset erillisverkot toimipisteiden yhdistämiseen turvallisesti ja luotettavasti.

+
+ +
+
+
+ +
+
+

Miksi Cuitunet?

+
+
+ Symmetriset nopeudet +

Lataus ja lähetys samalla nopeudella — ei pullonkauloja.

+
+
+ 24/7 vikapalvelu +

Ympärivuorokautinen tuki pitää yhteytesi toiminnassa.

+
+
+ Skaalautuvuus +

Kasva 1 Gbps:stä 10 Gbps:iin tarpeidesi mukaan.

+
+
+ Paikallinen palvelu +

Turkulainen operaattori — nopea ja henkilökohtainen asiakaspalvelu.

+
+
+
+
+ +
+
+

Yhteystiedot

+
+
+

Cuitunet Oy

+

Latokarinkatu 3
20200 Turku

+

+ 02 077 80731
+ 0400 3900 32 +

+

asiakaspalvelu@cuitunet.fi

+

Asiakaspalvelu: ma–pe 8:00–17:00
Vikapalvelu: 24/7

+
+
+

Pyydä tarjous

+
+ + + + + +
+
+
+
+
+ +
+
+

© 2026 Cuitunet Oy. Kaikki oikeudet pidätetään.

+
+
+ + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..b118f5f --- /dev/null +++ b/style.css @@ -0,0 +1,295 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary: #0057b8; + --primary-dark: #003d82; + --accent: #00b4d8; + --dark: #1a1a2e; + --gray: #f4f5f7; + --text: #333; + --white: #fff; + --radius: 12px; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + color: var(--text); + line-height: 1.6; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 0 20px; +} + +a { + color: var(--primary); + text-decoration: none; +} + +/* Header */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + background: var(--white); + box-shadow: 0 2px 20px rgba(0,0,0,0.08); + z-index: 100; +} + +.header-inner { + display: flex; + align-items: center; + justify-content: space-between; + height: 70px; +} + +.logo { + font-size: 1.5rem; + font-weight: 800; + color: var(--primary); + letter-spacing: -0.5px; +} + +.nav { + display: flex; + gap: 32px; +} + +.nav a { + color: var(--text); + font-weight: 500; + transition: color 0.2s; +} + +.nav a:hover { + color: var(--primary); +} + +.nav-toggle { + display: none; + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + color: var(--text); +} + +/* Hero */ +.hero { + padding: 160px 0 100px; + background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dark) 100%); + color: var(--white); + text-align: center; +} + +.hero h1 { + font-size: 3rem; + font-weight: 800; + margin-bottom: 16px; + letter-spacing: -1px; +} + +.hero p { + font-size: 1.25rem; + opacity: 0.9; + max-width: 600px; + margin: 0 auto 32px; +} + +.btn { + display: inline-block; + padding: 14px 36px; + background: var(--accent); + color: var(--white); + font-size: 1rem; + font-weight: 600; + border: none; + border-radius: var(--radius); + cursor: pointer; + transition: background 0.2s, transform 0.2s; +} + +.btn:hover { + background: #009bb8; + transform: translateY(-2px); +} + +/* Services */ +.services { + padding: 80px 0; +} + +.services h2, +.why h2, +.contact h2 { + text-align: center; + font-size: 2rem; + font-weight: 700; + margin-bottom: 48px; + color: var(--dark); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 24px; +} + +.service-card { + background: var(--white); + border: 1px solid #e8e8ee; + border-radius: var(--radius); + padding: 32px 24px; + text-align: center; + transition: box-shadow 0.3s, transform 0.3s; +} + +.service-card:hover { + box-shadow: 0 8px 30px rgba(0,0,0,0.1); + transform: translateY(-4px); +} + +.service-icon { + font-size: 2.5rem; + margin-bottom: 16px; +} + +.service-card h3 { + font-size: 1.2rem; + margin-bottom: 8px; + color: var(--dark); +} + +.service-card p { + font-size: 0.95rem; + color: #666; +} + +/* Why section */ +.why { + padding: 80px 0; + background: var(--gray); +} + +.why-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 32px; +} + +.why-item { + text-align: center; +} + +.why-item strong { + display: block; + font-size: 1.1rem; + margin-bottom: 8px; + color: var(--primary); +} + +.why-item p { + color: #666; + font-size: 0.95rem; +} + +/* Contact */ +.contact { + padding: 80px 0; +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + align-items: start; +} + +.contact-info p { + margin-bottom: 12px; + line-height: 1.8; +} + +.contact-form h3 { + font-size: 1.3rem; + margin-bottom: 20px; + color: var(--dark); +} + +.contact-form input, +.contact-form textarea { + width: 100%; + padding: 12px 16px; + margin-bottom: 12px; + border: 1px solid #ddd; + border-radius: 8px; + font-size: 1rem; + font-family: inherit; + transition: border-color 0.2s; +} + +.contact-form input:focus, +.contact-form textarea:focus { + outline: none; + border-color: var(--primary); +} + +.contact-form .btn { + width: 100%; +} + +/* Footer */ +.footer { + padding: 24px 0; + background: var(--dark); + color: rgba(255,255,255,0.6); + text-align: center; + font-size: 0.9rem; +} + +/* Mobile */ +@media (max-width: 768px) { + .nav { + display: none; + position: absolute; + top: 70px; + left: 0; + right: 0; + background: var(--white); + flex-direction: column; + padding: 20px; + gap: 16px; + box-shadow: 0 8px 20px rgba(0,0,0,0.1); + } + + .nav.open { + display: flex; + } + + .nav-toggle { + display: block; + } + + .hero { + padding: 120px 0 60px; + } + + .hero h1 { + font-size: 2rem; + } + + .hero p { + font-size: 1.05rem; + } + + .contact-grid { + grid-template-columns: 1fr; + } +}