Header
Kopieren, einfügen, Inhalte ersetzen. Styles kommen aus css/.
<header class="header" id="header">
<div class="header-inner">
<a href="./" class="logo">
<span class="logo-mark">FN</span>
<span>Firmenname</span>
</a>
<nav class="nav">
<ul class="nav-links">
<li><a href="#leistungen" class="nav-link">Leistungen</a></li>
<li><a href="#ueber-uns" class="nav-link">Über uns</a></li>
<li><a href="#faq" class="nav-link">FAQ</a></li>
<li><a href="#kontakt" class="nav-link">Kontakt</a></li>
</ul>
<a href="#kontakt" class="btn btn-primary btn-sm">Anfrage</a>
<button class="mobile-menu-btn" aria-label="Menü öffnen" onclick="toggleMobileMenu()">
☰
</button>
</nav>
</div>
</header>
Hero (Centered)
Kopieren, einfügen, Inhalte ersetzen. Styles kommen aus css/.
<section class="hero-centered">
<div class="hero-content">
<div class="badge badge-dark">
Ihr Partner in der Region
</div>
<h1 class="hero-title" style="margin-top: var(--sp-6);">
Headline die den <span class="highlight">Kundennutzen</span> zeigt
</h1>
<p class="hero-subtitle">
Ein bis zwei Sätze die erklären, was Sie machen und warum
der Besucher bei Ihnen richtig ist.
</p>
<div class="hero-actions">
<a href="#kontakt" class="btn btn-primary btn-lg">
Kostenloses Erstgespräch
</a>
<a href="#leistungen" class="btn btn-ghost">
Mehr erfahren ↓
</a>
</div>
</div>
</section>
Leistungen (Services)
Kopieren, einfügen, Inhalte ersetzen. Styles kommen aus css/.
<section class="section section-alt" id="leistungen">
<div class="container">
<header class="section-header">
<h2 class="section-title">Unsere Leistungen</h2>
<p class="section-subtitle">
Was wir für Sie tun können
</p>
</header>
<div class="grid grid-auto stagger">
<article class="card card-hover fade-in">
<div class="icon-box"></div>
<h3 class="feature-title">Leistung 1</h3>
<p class="feature-text">
Kurze Beschreibung was der Kunde bekommt.
Fokus auf Nutzen, nicht Features.
</p>
</article>
<article class="card card-hover fade-in">
<div class="icon-box">⚡</div>
<h3 class="feature-title">Leistung 2</h3>
<p class="feature-text">
Kurze Beschreibung was der Kunde bekommt.
Fokus auf Nutzen, nicht Features.
</p>
</article>
<article class="card card-hover fade-in">
<div class="icon-box">✨</div>
<h3 class="feature-title">Leistung 3</h3>
<p class="feature-text">
Kurze Beschreibung was der Kunde bekommt.
Fokus auf Nutzen, nicht Features.
</p>
</article>
<article class="card card-hover fade-in">
<div class="icon-box"></div>
<h3 class="feature-title">Leistung 4</h3>
<p class="feature-text">
Kurze Beschreibung was der Kunde bekommt.
Fokus auf Nutzen, nicht Features.
</p>
</article>
</div>
</div>
</section>
Über uns (Vorteile)
Kopieren, einfügen, Inhalte ersetzen. Styles kommen aus css/.
<section class="section" id="ueber-uns">
<div class="container">
<header class="section-header">
<h2 class="section-title">Warum wir?</h2>
<p class="section-subtitle">
Das macht uns besonders
</p>
</header>
<div class="grid grid-3 stagger">
<div class="feature-card fade-in">
<div class="icon-box icon-box-lg"></div>
<h3 class="feature-title">15+ Jahre Erfahrung</h3>
<p class="feature-text">
Bewährte Expertise in der Region
</p>
</div>
<div class="feature-card fade-in">
<div class="icon-box icon-box-lg">⭐</div>
<h3 class="feature-title">500+ zufriedene Kunden</h3>
<p class="feature-text">
Vertrauen durch Qualität
</p>
</div>
<div class="feature-card fade-in">
<div class="icon-box icon-box-lg"></div>
<h3 class="feature-title">Persönliche Betreuung</h3>
<p class="feature-text">
Direkter Ansprechpartner
</p>
</div>
</div>
</div>
</section>
Testimonial
Kopieren, einfügen, Inhalte ersetzen. Styles kommen aus css/.
<section class="section section-alt">
<div class="container container-narrow">
<div class="testimonial-card fade-in">
<p class="testimonial-text">
Hier kommt ein Zitat von einem zufriedenen Kunden.
Es sollte konkret sein und einen spezifischen Nutzen erwähnen.
</p>
<div class="testimonial-author">
<div class="testimonial-avatar">MK</div>
<div>
<p class="testimonial-name">Max Kunde</p>
<p class="testimonial-role">Geschäftsführer, Firma AG</p>
</div>
</div>
</div>
</div>
</section>
FAQ
Kopieren, einfügen, Inhalte ersetzen. Styles kommen aus css/.
<section class="section" id="faq">
<div class="container">
<header class="section-header">
<h2 class="section-title">Häufige Fragen</h2>
<p class="section-subtitle">
Antworten auf die wichtigsten Fragen
</p>
</header>
<div class="accordion">
<details class="accordion-item">
<summary class="accordion-trigger">
Wie läuft eine Zusammenarbeit ab?
<svg class="accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg>
</summary>
<div class="accordion-content">
<p>Hier kommt die Antwort. Sie sollte kurz und hilfreich sein.
Beschreiben Sie den Prozess in einfachen Schritten.</p>
</div>
</details>
<details class="accordion-item">
<summary class="accordion-trigger">
Was kostet das?
<svg class="accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg>
</summary>
<div class="accordion-content">
<p>Transparente Preisauskunft oder Erklärung, dass Sie
individuelle Angebote machen.</p>
</div>
</details>
<details class="accordion-item">
<summary class="accordion-trigger">
Wie schnell können Sie starten?
<svg class="accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg>
</summary>
<div class="accordion-content">
<p>Informationen zu Verfügbarkeit und typischen Zeitrahmen.</p>
</div>
</details>
<details class="accordion-item">
<summary class="accordion-trigger">
Welche Garantien bieten Sie?
<svg class="accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg>
</summary>
<div class="accordion-content">
<p>Informationen zu Garantie, Gewährleistung oder
Zufriedenheitsversprechen.</p>
</div>
</details>
</div>
</div>
</section>
Kontakt
Kopieren, einfügen, Inhalte ersetzen. Styles kommen aus css/.
<section class="section section-alt" id="kontakt">
<div class="container">
<header class="section-header">
<h2 class="section-title">Kontakt aufnehmen</h2>
<p class="section-subtitle">
Wir freuen uns auf Ihre Anfrage
</p>
</header>
<div class="contact-box fade-in">
<a href="tel:+41XXXXXXXXX" class="contact-item">
+41 XX XXX XX XX
</a>
<a href="mailto:info@example.ch" class="contact-item">
✉️ info@example.ch
</a>
<div class="divider">oder schreiben Sie uns</div>
<!-- Kontaktformular -->
<form class="contact-form" action="#" method="POST">
<div class="form-row">
<div class="form-group">
<label for="name" class="form-label">Name *</label>
<input type="text" id="name" name="name" class="form-input" required>
</div>
<div class="form-group">
<label for="phone" class="form-label">Telefon</label>
<input type="tel" id="phone" name="phone" class="form-input">
</div>
</div>
<div class="form-group">
<label for="email" class="form-label">E-Mail *</label>
<input type="email" id="email" name="email" class="form-input" required>
</div>
<div class="form-group">
<label for="message" class="form-label">Nachricht *</label>
<textarea id="message" name="message" class="form-textarea" rows="4" required></textarea>
</div>
<label class="form-check">
<input type="checkbox" required>
<span class="form-check-label">
Ich akzeptiere die <a href="#">Datenschutzerklärung</a>
</span>
</label>
<button type="submit" class="btn btn-primary btn-block">
Nachricht senden
</button>
</form>
</div>
</div>
</section>
Footer
Kopieren, einfügen, Inhalte ersetzen. Styles kommen aus css/.
<footer class="footer">
<div class="footer-inner">
<div class="footer-grid">
<div class="footer-brand">
<a href="./" class="logo">
<span class="logo-mark">FN</span>
<span>Firmenname</span>
</a>
<p style="margin-top: var(--sp-4);">
Kurze Beschreibung der Firma.
Was Sie machen und für wen.
</p>
</div>
<nav>
<h4 class="footer-title">Navigation</h4>
<ul class="footer-links">
<li><a href="#leistungen">Leistungen</a></li>
<li><a href="#ueber-uns">Über uns</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
<nav>
<h4 class="footer-title">Rechtliches</h4>
<ul class="footer-links">
<li><a href="#">Impressum</a></li>
<li><a href="#">Datenschutz</a></li>
<li><a href="#">AGB</a></li>
</ul>
</nav>
<div>
<h4 class="footer-title">Kontakt</h4>
<p>Strasse 123<br>1234 Ort</p>
<p style="margin-top: var(--sp-3);">+41 XX XXX XX XX</p>
<p>info@example.ch</p>
</div>
</div>
<div class="footer-bottom">
<p>© <span id="year"></span> Firmenname. Alle Rechte vorbehalten.</p>
<nav class="footer-legal">
<a href="#">Impressum</a>
<a href="#">Datenschutz</a>
</nav>
</div>
</div>
</footer>
Scroll-to-top
Kopieren, einfügen, Inhalte ersetzen. Styles kommen aus css/.
<button class="scroll-top" id="scrollTop" aria-label="Nach oben scrollen" onclick="scrollToTop()">
↑
</button>