init: uusi moderni kipinalomat webbisivu
This commit is contained in:
Jaakko Vanhala
257
index.html
Normal file
257
index.html
Normal file
@@ -0,0 +1,257 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fi">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Kipinä Lomat - Tervetuloa luonnon rauhaan</title>
|
||||
<!-- Google Fonts: Inter ja Outfit -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@500;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" id="navbar">
|
||||
<div class="nav-container container">
|
||||
<div class="logo">
|
||||
<h1>Kipinä<span>Lomat</span></h1>
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#majoitus">Majoitus</a></li>
|
||||
<li><a href="#palvelut">Palvelut</a></li>
|
||||
<li><a href="#hinnasto">Hinnasto</a></li>
|
||||
<li><a href="#galleria">Galleria</a></li>
|
||||
<li>
|
||||
<button id="theme-toggle" class="theme-toggle" aria-label="Vaihda teemaa">
|
||||
<svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||||
<svg id="sun-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun" style="display:none;"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li><a href="#yhteystiedot" class="btn-primary-sm">Ota yhteyttä</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="hero" id="home">
|
||||
<div class="hero-bg" style="background-image: url('/img/kipinatie10_3.jpeg');"></div>
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="container hero-content">
|
||||
<h1 class="hero-title reveal-up">Nauti luonnon rauhasta <br>Kipinässä!</h1>
|
||||
<p class="hero-subtitle reveal-up delay-1">Tervetuloa luonnonläheiseen aamiaismajoitukseen Sotkamon Iso-Sapsojärven rannalle.</p>
|
||||
<div class="hero-actions reveal-up delay-2">
|
||||
<a href="#majoitus" class="btn-primary">Tutustu tiloihin</a>
|
||||
<a href="#palvelut" class="btn-outline">Palvelut</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="majoitus" class="section about-section">
|
||||
<div class="container about-grid">
|
||||
<div class="about-text scroll-reveal">
|
||||
<h2 class="section-title">Aamiaismajoitus & Juhlatilat</h2>
|
||||
<p class="lead">Käytettävissäsi on majoitustilat 24:lle hengelle sekä tilausravintola juhlien järjestämistä varten jopa 50:lle henkilölle.</p>
|
||||
<p>Sijaitsemme luonnon keskellä, kohtuullisen välimatkan päästä Vuokatin (5 km) ja Sotkamon (6 km) sykkeestä, sekä Kajaanista ja vilskeestä. Täydellinen irtiotto arjesta.</p>
|
||||
<ul class="feature-list">
|
||||
<li>Majoitusrakennus ja rantasauna</li>
|
||||
<li>Kaksi vuokramökkiä järvinäköalalla</li>
|
||||
<li>Iso-Sapsojärven kauniit rannat</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about-image-wrapper scroll-reveal delay-1">
|
||||
<div class="about-image-card">
|
||||
<img src="/img/ranta-aurinko.jpeg" alt="Sapsojärven ranta" class="about-img">
|
||||
<div class="img-badge">Rantasauna tilauksesta</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="palvelut" class="section features-section">
|
||||
<div class="container text-center">
|
||||
<h2 class="section-title scroll-reveal">Majoittujan palvelut</h2>
|
||||
<p class="section-desc scroll-reveal delay-1">Kohteesta löytyy kaikki mitä tarvitset onnistuneeseen lomaan.</p>
|
||||
|
||||
<div class="features-grid">
|
||||
<!-- Kortti 1 -->
|
||||
<div class="feature-card scroll-reveal">
|
||||
<div class="card-img-wrapper">
|
||||
<img src="/img/kipinatie10_28.jpeg" alt="Viihtyisät huoneet">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>Viihtyisät huoneet</h3>
|
||||
<p>Mukavilla sängyillä varustellut huoneet ja kaksi omaa mökkiä järvinäköalalla. Liinavaatteet ja pyyhkeet kuuluvat hintaan, kuten myös ilmainen WiFi.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kortti 2 -->
|
||||
<div class="feature-card scroll-reveal delay-1">
|
||||
<div class="card-img-wrapper">
|
||||
<img src="/img/aamiainen-2-768x432.jpeg" alt="Aamiainen">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>Aamiainen</h3>
|
||||
<p>Runsas ja ravitseva aamiainen mukavan päivän käynnistämiseksi. Herkullisia perinteisiä ja paikallisia makuja pöytään katettuna.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kortti 3 -->
|
||||
<div class="feature-card scroll-reveal delay-2">
|
||||
<div class="card-img-wrapper">
|
||||
<img src="/img/kipinatie10_20.jpeg" alt="Kotoisa tunnelma">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>Kotoisa tunnelma</h3>
|
||||
<p>Tilat on kalustettu kodinomaisiksi. Käytössä on yhteiset oleskelutilat ja terassi, jossa voit istua iltaa nauttien luonnon äänistä.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="hinnasto" class="section pricing-section">
|
||||
<div class="container">
|
||||
<div class="text-center scroll-reveal">
|
||||
<h2 class="section-title">Hinnasto</h2>
|
||||
<p class="section-desc">Valitse tarpeisiisi sopiva majoitusvaihtoehto.</p>
|
||||
</div>
|
||||
|
||||
<div class="pricing-grid">
|
||||
<div class="price-card scroll-reveal">
|
||||
<div class="price-header">
|
||||
<h3>Kahden hengen huone</h3>
|
||||
<div class="price">98 € <span>/ yö</span></div>
|
||||
<p>9 huonetta kahdella sängyllä (yhdistettävissä).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="price-card scroll-reveal delay-1">
|
||||
<div class="price-header highlight">
|
||||
<h3>Perhehuone</h3>
|
||||
<div class="price">135 € <span>/ yö</span></div>
|
||||
<p>Tilaa 3-4 hengelle, minijääkaappi ja säilytystilat.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="price-card scroll-reveal delay-2">
|
||||
<div class="price-header">
|
||||
<h3>Näköalamökit (Tuli/Loimu)</h3>
|
||||
<div class="price">135 € <span>/ yö</span></div>
|
||||
<p>Oma rauha, aamuaurinko ja kaunis järvinäköala. Oma WC, suihku ja minikeittiö.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="price-card scroll-reveal delay-1">
|
||||
<div class="price-header">
|
||||
<h3>Aitta (kesäisin)</h3>
|
||||
<div class="price">35 € <span>/ yö</span></div>
|
||||
<p>Pieni aitta sähköllä ja kahdella vuoteella.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="extras-grid scroll-reveal">
|
||||
<div class="extra-item">
|
||||
<h4>Lisäpalvelut</h4>
|
||||
<ul>
|
||||
<li><span>Aamiainen</span> 12,50 € / hlö</li>
|
||||
<li><span>Telttapaikka & Matkaparkki</span> 25 € / yö (sis. suihku & sähkö)</li>
|
||||
<li><span>Sauna</span> 30 € / h (rantasauna + tynnyrisauna)</li>
|
||||
<li><span>SUP-lauta</span> 7,50 € / h tai 40 € / päivä</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="galleria" class="section gallery-section">
|
||||
<div class="container text-center scroll-reveal">
|
||||
<h2 class="section-title">Kuvagalleria</h2>
|
||||
<p class="section-desc">Pulahda mukaan Kipinän luonnolliseen tunnelmaan.</p>
|
||||
</div>
|
||||
<div class="gallery-grid scroll-reveal delay-1" id="gallery-grid">
|
||||
<!-- JS populates these thumbnails -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section cta-section">
|
||||
<div class="hero-bg cta-bg" style="background-image: url('/img/kipinatie10_65.jpeg');"></div>
|
||||
<div class="hero-overlay cta-overlay"></div>
|
||||
<div class="container text-center cta-content scroll-reveal">
|
||||
<h2 class="outfit-h2">Kiinnostuitko?</h2>
|
||||
<p>Varaa majoitus tai kysy lisää tilausravintolan ja rantasaunan käytöstä.</p>
|
||||
<a href="#yhteystiedot" class="btn-primary mt-4">Ota meihin yhteyttä</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="yhteystiedot" class="section contact-section">
|
||||
<div class="container">
|
||||
<div class="text-center scroll-reveal">
|
||||
<h2 class="section-title">Yhteystiedot</h2>
|
||||
<p class="section-desc">Otamme sinut ilolla vastaan Sapsojärven rannalle.</p>
|
||||
</div>
|
||||
|
||||
<div class="contact-grid">
|
||||
<div class="contact-card scroll-reveal">
|
||||
<div class="contact-icon">📍</div>
|
||||
<h3>Osoite</h3>
|
||||
<p>Löydät meidät Vuokatin läheisyydestä, Iso-Sapsojärven rannalta.</p>
|
||||
<h4>Kipinäntie 10, 88600 Sotkamo</h4>
|
||||
</div>
|
||||
|
||||
<div class="contact-card scroll-reveal delay-1">
|
||||
<div class="contact-icon">📞</div>
|
||||
<h3>Puhelinnumero</h3>
|
||||
<p>Voit soittaa tai laittaa viestiä Jaakolle alla olevaan numeroon.</p>
|
||||
<h4>+358 50 311 9461</h4>
|
||||
</div>
|
||||
|
||||
<div class="contact-card scroll-reveal delay-2">
|
||||
<div class="contact-icon">✉️</div>
|
||||
<h3>Sähköposti</h3>
|
||||
<p>Tavoitat meidät tarvittaessa myös sähköpostilla.</p>
|
||||
<h4>jaakko@kipinalomat.com</h4>
|
||||
<p class="mt-2 text-sm"><a href="https://instagram.com/kipinalomat" target="_blank" class="instagram-link">Instagram: @kipinalomat</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="map-container scroll-reveal delay-1">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1796.340947703889!2d28.2625!3d64.125!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4682cc560e22ea7f%3A0x6bbaaba6fcad41f7!2sKipin%C3%A4ntie%2010%2C%2088600%20Sotkamo!5e0!3m2!1sfi!2sfi!4v1714813906000" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container footer-grid">
|
||||
<div class="footer-brand">
|
||||
<h2>Kipinä<span>Lomat</span></h2>
|
||||
<p>Luonnon helmaa Vuokatin ja Sotkamon kupeessa.</p>
|
||||
</div>
|
||||
<div class="footer-contact">
|
||||
<h3>Yhteystiedot</h3>
|
||||
<p>Kipinäntie 10, 88600 Sotkamo</p>
|
||||
<p>Email: jaakko@kipinalomat.com</p>
|
||||
<p>Puh: +358 50 311 9461</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom text-center">
|
||||
<p>© 2026 Kipinä Lomat — Uudistettu modernisti by Kipinä Technologies & Antigravity</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Lightbox Modal -->
|
||||
<div id="lightbox" class="lightbox">
|
||||
<span class="lightbox-close" id="lightbox-close" aria-label="Sulje">×</span>
|
||||
<button class="lightbox-btn prev" id="lightbox-prev" aria-label="Edellinen kuva">❮</button>
|
||||
<div class="lightbox-content-wrapper">
|
||||
<img class="lightbox-image" id="lightbox-img" src="" alt="Kipinä Lomat suurennos">
|
||||
<div class="lightbox-caption" id="lightbox-caption"></div>
|
||||
</div>
|
||||
<button class="lightbox-btn next" id="lightbox-next" aria-label="Seuraava kuva">❯</button>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user