tino-ardez-website/index.html

271 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tino Andri | SelbstHeilungsTechnik & QuantenHeilung | Ardez & Scuol</title>
<meta name="description" content="Tino Andri bietet SelbstHeilungsTechnik und QuantenHeilung für Erwachsene, Jugendliche und Kinder in Ardez und Scuol, Engadin.">
<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Nunito+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<div class="nav-container">
<a href="#" class="nav-logo">Tino Andri</a>
<button class="nav-toggle" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-menu">
<li><a href="#about">Über mich</a></li>
<li><a href="#services">Angebote</a></li>
<li><a href="#locations">Standorte</a></li>
<li><a href="#workshops">Workshops</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<header class="hero">
<div class="hero-content">
<p class="hero-subtitle">SelbstHeilungsTechnik & QuantenHeilung</p>
<h1 class="hero-title">Tino Andri</h1>
<p class="hero-tagline">Heilung beginnt in dir selbst</p>
<a href="#contact" class="btn btn-primary">Termin vereinbaren</a>
</div>
<div class="hero-image">
<img src="images/tino-aurora.jpg" alt="Nordlichter über den Engadiner Bergen" class="hero-img">
</div>
</header>
<!-- About Section -->
<section id="about" class="section about">
<div class="container">
<div class="about-grid">
<div class="about-image">
<img src="images/tino-portrait.jpg" alt="Tino Andri Portrait" class="about-img">
</div>
<div class="about-content">
<h2 class="section-title">Über mich</h2>
<div class="about-text">
<p>Zwischen meinem 18. und 24. Lebensjahr litt ich unter starken Rückenschmerzen durch Bandscheibenvorfälle, einem gerissenen Kreuzband, Meniskusriss, einer ausgekugelten Schulter, zwei Leistenbrüchen und einem geplatzten Blinddarm.</p>
<p>Ich fühlte mich körperlich und energetisch am falschen Ort, begleitet von einer tiefen Unzufriedenheit mit meinem Leben.</p>
<p>Vor fünf Jahren öffnete mir eine geführte Selbstheilungsmeditation die Augen. Dies weckte mein Interesse daran, wie Heilung funktioniert. Ich besuchte intensive Kurse und praktiziere nun seit vier Jahren.</p>
<p>Heute begleite ich Menschen auf ihrem eigenen Heilungsweg Erwachsene, Jugendliche und Kinder.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="section services">
<div class="container">
<h2 class="section-title section-title-center">Angebote</h2>
<p class="section-intro">Ich biete verschiedene Heilungssitzungen an, die auf Ihre individuellen Bedürfnisse abgestimmt sind.</p>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</div>
<h3>SelbstHeilungsTechnik (SHT)</h3>
<p>Eine sanfte Methode, die Ihren Körper dabei unterstützt, seine natürlichen Selbstheilungskräfte zu aktivieren und Blockaden zu lösen.</p>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
<path d="M2 12h20"/>
</svg>
</div>
<h3>QuantenHeilung</h3>
<p>Arbeiten auf der Quantenebene, um tiefgreifende Veränderungen im Energiefeld zu bewirken und das innere Gleichgewicht wiederherzustellen.</p>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<h3>Sitzungen für alle Altersgruppen</h3>
<p>Ob Erwachsene, Jugendliche oder Kinder jeder Mensch kann von der Selbstheilung profitieren. Die Sitzungen werden individuell angepasst.</p>
</div>
</div>
</div>
</section>
<!-- Quote Section -->
<section class="quote-section">
<div class="container">
<blockquote class="quote">
<p>"Dein Körper weiss, wie er heilen kann. Manchmal braucht er nur die richtige Unterstützung, um den Weg zu finden."</p>
<cite>— Tino Andri</cite>
</blockquote>
</div>
</section>
<!-- Locations Section -->
<section id="locations" class="section locations">
<div class="container">
<h2 class="section-title section-title-center">Standorte</h2>
<p class="section-intro">Besuchen Sie mich in einem meiner zwei Praxisräume im wunderschönen Engadin.</p>
<div class="locations-grid">
<div class="location-card">
<div class="location-image">
<img src="images/tino-workshop.jpg" alt="Praxis Ardez - Tino Andri Werkstatt" class="location-img">
</div>
<div class="location-content">
<h3>Praxis Ardez</h3>
<address>
Chanvers 197<br>
7546 Ardez
</address>
<p>Im Herzen des malerischen Bergdorfes Ardez, umgeben von der atemberaubenden Engadiner Landschaft.</p>
</div>
</div>
<div class="location-card">
<div class="location-image">
<img src="images/scuol-palace.jpg" alt="Scuol Palace - Heilungspraxis" class="location-img">
</div>
<div class="location-content">
<h3>Scuol Palace</h3>
<address>
Nairs 500<br>
7550 Scuol
</address>
<p>Im historischen Scuol Palace, einem Ort der Ruhe und Erholung mit langer Wellness-Tradition.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Workshops Section -->
<section id="workshops" class="section workshops">
<div class="container">
<h2 class="section-title section-title-center">Workshops</h2>
<p class="section-intro">Erleben Sie die Kraft der Selbstheilung in der einzigartigen Atmosphäre der Engadiner Berge.</p>
<div class="workshop-card">
<div class="workshop-image">
<img src="images/engadin-hiking.jpg" alt="Workshop in den Engadiner Bergen" class="workshop-img">
</div>
<div class="workshop-content">
<span class="workshop-tag">Nächster Workshop</span>
<h3>Selbstheilung in den Bergen</h3>
<div class="workshop-details">
<div class="workshop-detail">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
<line x1="16" y1="2" x2="16" y2="6"/>
<line x1="8" y1="2" x2="8" y2="6"/>
<line x1="3" y1="10" x2="21" y2="10"/>
</svg>
<span>Datum wird bekannt gegeben</span>
</div>
<div class="workshop-detail">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
<span>Chamonna Cler, Ardez (2475 m ü.M.)</span>
</div>
</div>
<p>Ein besonderes Erlebnis auf 2475 Metern Höhe. Treffpunkt am Bahnhof Ardez um 09:15 Uhr, Aufstieg zur Alp Murtera, gefolgt von einer kurzen 20-minütigen Wanderung zur Chamonna Cler.</p>
<p>In der kraftvollen Bergumgebung tauchen wir gemeinsam in die Welt der Selbstheilung ein.</p>
<a href="#contact" class="btn btn-secondary">Interesse anmelden</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section contact">
<div class="container">
<div class="contact-grid">
<div class="contact-info">
<h2 class="section-title">Kontakt</h2>
<p>Ich freue mich auf Ihre Nachricht. Gemeinsam finden wir den richtigen Weg für Ihre Heilung.</p>
<div class="contact-details">
<div class="contact-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
<span>+41 XX XXX XX XX</span>
</div>
<div class="contact-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
<span>info@tino-ardez.ch</span>
</div>
</div>
</div>
<form class="contact-form" action="#" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">E-Mail</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Telefon (optional)</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<label for="message">Nachricht</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary btn-full">Nachricht senden</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<span class="footer-logo">Tino Andri</span>
<p>SelbstHeilungsTechnik & QuantenHeilung</p>
</div>
<div class="footer-links">
<a href="#about">Über mich</a>
<a href="#services">Angebote</a>
<a href="#locations">Standorte</a>
<a href="#workshops">Workshops</a>
<a href="#contact">Kontakt</a>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 Tino Andri. Alle Rechte vorbehalten.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>