<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sägehölzle - Tradition seit 1898</title> <link rel="stylesheet" href="css/styles.css"> <script src="js/main.js" defer></script> </head> <body> <header class="main-header"> <div class="header-content"> <h1><img src="images/logo.png" alt="Sägehölzle Logo"></h1> <nav class="main-nav"> <button class="hamburger" aria-label="Menü">☰</button> <ul> <li><a href="index.html">Start</a></li> <li><a href="about.html">Über uns</a></li> <li><a href="services.html">Leistungen</a></li> <li><a href="gallery.html">Bildergalerie</a></li> <li><a href="contact.html">Kontakt</a></li> </ul> </nav> </div> </header> <main> <section class="hero"> <div class="hero-content"> <h2>Traditionelle Holzwirtschaft im Schwarzwald</h2> <p>Seit 1898 Familienbetrieb</p> </div> </section> <section class="timeline-section"> <h3>Unsere Geschichte</h3> <div class="timeline" id="timeline"> <div class="timeline-item"> <div class="timeline-year">1898</div> <div class="timeline-content">Gründung durch Gustav Holz</div> </div>  </div> </section> </main> <footer class="main-footer"> <div class="footer-content"> <nav class="footer-nav"> <ul> <li><a href="impressum.html">Impressum</a></li> <li><a href="datenschutz.html">Datenschutz</a></li> </ul> </nav> <p>© Sägehölzle 2023</p> </div> </footer> </body> </html> * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; scroll-behavior: smooth; } body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; } .main-header { background: #2c5234; padding: 1rem 0; } .header-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; } .main-nav ul { display: flex; list-style: none; } .main-nav a { color: white; text-decoration: none; padding: 1rem 2rem; font-size: 1.6rem; } .hero { background: url('../images/hero-bg.jpg') center/cover; height: 60vh; display: flex; align-items: center; justify-content: center; color: white; text-align: center; } .timeline-section { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; } .timeline { position: relative; padding: 2rem 0; } .timeline-item { display: flex; margin: 2rem 0; align-items: center; } .timeline-year { background: #2c5234; color: white; padding: 1rem 2rem; border-radius: 5px; margin-right: 2rem; } @media (max-width: 768px) { .main-nav ul { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #2c5234; flex-direction: column; text-align: center; } .main-nav.active ul { display: flex; } .hamburger { display: block; color: white; font-size: 2.4rem; background: none; border: none; cursor: pointer; } } document.addEventListener('DOMContentLoaded', () => { // Mobile Navigation const hamburger = document.querySelector('.hamburger'); const mainNav = document.querySelector('.main-nav'); hamburger.addEventListener('click', () => { mainNav.classList.toggle('active'); }); // Interactive Timeline const timelineItems = document.querySelectorAll('.timeline-item'); timelineItems.forEach(item => { item.addEventListener('click', () => { item.classList.toggle('active'); }); }); // Smooth Scroll document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); }); <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Impressum - Sägehölzle</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header class="main-header">  </header> <main class="impressum-content"> <h2>Impressum</h2> <section> <h3>Angaben gemäß § 5 TMG</h3> <p>Sägehölzle GmbH<br> Musterstraße 123<br> 78120 Furtwangen im Schwarzwald</p> </section>  </main>  </body> </html> <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Kontakt - Sägehölzle</title> <link rel="stylesheet" href="css/styles.css"> </head> <body>  <main class="contact-form"> <h2>Kontaktieren Sie uns</h2> <form id="contactForm"> <div class="form-group"> <label for="name">Name:</label> <input type="text" id="name" required> </div> <div class="form-group"> <label for="email">E-Mail:</label> <input type="email" id="email" required> </div> <div class="form-group"> <label for="message">Nachricht:</label> <textarea id="message" required></textarea> </div> <button type="submit">Absenden</button> </form> <div id="formMessage"></div> </main> <script> document.getElementById('contactForm').addEventListener('submit', function(e) { e.preventDefault(); // Formularverarbeitung document.getElementById('formMessage').textContent = 'Vielen Dank für Ihre Nachricht!'; this.reset(); }); </script> </body> </html>