Spaces:
Running
Running
Hier noch ein bisschen Text Input von der alten Webseite: ( netzfreude Logo Leistungen Über Uns Kontakt Modernes Büro mit iMac Computern Digitale Lösungen mit persönlicher Note Maßgeschneiderte Webseiten, professionelles Hosting und kompetente Beratung für Ihr Unternehmen. Kontakt aufnehmen Leistungen entdecken Unsere Leistungen Von der Webseiten-Gestaltung bis zum Online-Marketing – wir bieten alle digitalen Dienstleistungen aus einer Hand. Webdesign Maßgeschneiderte, responsive Webseiten für Ihr Unternehmen. Hosting Sicheres und zuverlässiges Hosting auf deutschen Servern. Wartung & Administration Regelmäßige Updates und professionelle Betreuung Ihrer Webseite. Content-Erstellung Ansprechende Texte und Inhalte, die Ihre Zielgruppe überzeugen. Webshop-Integration Professionelle E-Commerce-Lösungen für Ihren Online-Shop. Video-Produktion Hochwertige Videos für Ihre Website und Social Media Kanäle. Fotografie Professionelle Fotos für einen authentischen Auftritt. KI-Tools Innovative KI-Lösungen für moderne Geschäftsprozesse. Musikproduktion Professionelle Musikproduktionen von einem erfahrenen Musiker und Produzenten. Über netzfreude Als inhabergeführte Digitalagentur bieten wir maßgeschneiderte Lösungen für kleine und mittlere Unternehmen. Was uns besonders macht: Wir pflegen eine persönliche Beziehung zu unseren Kunden und arbeiten auf Augenhöhe. Unsere Stärken liegen in der kompetenten Beratung, der zuverlässigen Umsetzung und dem kontinuierlichen Support. Wir verstehen uns als langfristiger Partner für Ihren digitalen Erfolg. Neben digitalen Dienstleistungen bieten wir auch professionelle Musikproduktionen an. Als erfahrener Musiker und Produzent sorge ich für den perfekten Sound Ihres Projekts. 100% Kundenzufriedenheit Deutsch Serverstandort Fair Preisgestaltung Carsten Möhlenkamp Referenzprojekte Hier finden Sie eine Auswahl unserer realisierten Projekte. Entdecken Sie die Vielfalt unserer maßgeschneiderten Webprojekte. Screenshot von Beck HMS Beck HMS Unternehmenswebseite für Beck HMS Webseite besuchen Screenshot von Stimmenwerk Stimmenwerk Webauftritt für Stimmenwerk Webseite besuchen Screenshot von Baems-Atempause Baems-Atempause Webseite für Baems-Atempause Webseite besuchen Screenshot von DE Engineering DE Engineering Unternehmensseite für DE Engineering Webseite besuchen Screenshot von Monika Kansy Monika Kansy Persönliche Webseite für Monika Kansy Webseite besuchen Previous slide Next slide Kontaktieren Sie uns Haben Sie Fragen oder möchten Sie ein unverbindliches Angebot erhalten? Wir freuen uns auf Ihre Nachricht. Kontaktinformationen E-Mail hello@netzfreude.de Telefon 0176 3284 7345 Adresse Carsten Möhlenkamp Friedrichstr. 18 55246 Mainz-Kostheim Öffnungszeiten Mo-Fr: 9:00 - 18:00 Uhr Name Ihr Name E-Mail Ihre E-Mail Betreff Betreff Ihrer Anfrage Nachricht Ihre Nachricht an uns Nachricht senden netzfreude Logonetzfreude Schriftzug Ihre Digitalagentur für Webdesign, Hosting, Consulting und Musikproduktion mit persönlichem Service. hello@netzfreude.de 0176 3284 7345 Friedrichstr. 18, 55246 Mainz-Kostheim Services Webdesign Hosting Content-Erstellung Musikproduktion Über uns Unternehmen Referenzen Karriere Kontakt Rechtliches Impressum Datenschutz AGB © 2025 netzfreude. Alle Rechte vorbehalten.) - Initial Deployment
4b806b6 verified | <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Netzfreude - Digitale Agentur</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .hover-scale { | |
| transition: transform 0.3s ease; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.03); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-xl font-bold gradient-text">Netzfreude</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#services" class="text-gray-700 hover:text-blue-600 transition">Leistungen</a> | |
| <a href="#about" class="text-gray-700 hover:text-blue-600 transition">Über uns</a> | |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Kontakt</a> | |
| </div> | |
| <div class="md:hidden flex items-center"> | |
| <button id="menu-toggle" class="text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white pb-4 px-4"> | |
| <a href="#services" class="block py-2 text-gray-700 hover:text-blue-600 transition">Leistungen</a> | |
| <a href="#about" class="block py-2 text-gray-700 hover:text-blue-600 transition">Über uns</a> | |
| <a href="#contact" class="block py-2 text-gray-700 hover:text-blue-600 transition">Kontakt</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Digitale Lösungen mit <span class="gradient-text">persönlicher Note</span></h1> | |
| <p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto mb-10"> | |
| Maßgeschneiderte Webseiten, professionelles Hosting und kompetente Beratung für Ihr Unternehmen. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="#contact" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition-all duration-300 inline-block text-center"> | |
| Kontakt aufnehmen | |
| </a> | |
| <a href="#services" class="bg-white text-gray-800 border border-gray-300 px-8 py-3 rounded-full font-medium hover:shadow-lg transition-all duration-300 inline-block text-center"> | |
| Leistungen entdecken | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Unsere Leistungen</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-paint-brush text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Webdesign</h3> | |
| <p class="text-gray-600"> | |
| Maßgeschneiderte, responsive Webseiten für Ihr Unternehmen. | |
| </p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-server text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Hosting</h3> | |
| <p class="text-gray-600"> | |
| Sicheres und zuverlässiges Hosting auf deutschen Servern. | |
| </p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
| <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-tools text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Wartung & Administration</h3> | |
| <p class="text-gray-600"> | |
| Regelmäßige Updates und professionelle Betreuung Ihrer Webseite. | |
| </p> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
| <div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-edit text-yellow-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Content-Erstellung</h3> | |
| <p class="text-gray-600"> | |
| Ansprechende Texte und Inhalte, die Ihre Zielgruppe überzeugen. | |
| </p> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
| <div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-shopping-cart text-red-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Webshop-Integration</h3> | |
| <p class="text-gray-600"> | |
| Professionelle E-Commerce-Lösungen für Ihren Online-Shop. | |
| </p> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-video text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Video-Produktion</h3> | |
| <p class="text-gray-600"> | |
| Hochwertige Videos für Ihre Website und Social Media Kanäle. | |
| </p> | |
| </div> | |
| <!-- Service 7 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
| <div class="w-14 h-14 bg-pink-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-camera text-pink-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Fotografie</h3> | |
| <p class="text-gray-600"> | |
| Professionelle Fotos für einen authentischen Auftritt. | |
| </p> | |
| </div> | |
| <!-- Service 8 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
| <div class="w-14 h-14 bg-teal-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-robot text-teal-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">KI-Tools</h3> | |
| <p class="text-gray-600"> | |
| Innovative KI-Lösungen für moderne Geschäftsprozesse. | |
| </p> | |
| </div> | |
| <!-- Service 9 --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover-scale"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-music text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Musikproduktion</h3> | |
| <p class="text-gray-600"> | |
| Professionelle Musikproduktionen von einem erfahrenen Musiker und Produzenten. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Über netzfreude</h2> | |
| <p class="text-gray-600 mb-6"> | |
| Als inhabergeführte Digitalagentur bieten wir maßgeschneiderte Lösungen für kleine und mittlere Unternehmen. Was uns besonders macht: Wir pflegen eine persönliche Beziehung zu unseren Kunden und arbeiten auf Augenhöhe. | |
| </p> | |
| <p class="text-gray-600 mb-6"> | |
| Unsere Stärken liegen in der kompetenten Beratung, der zuverlässigen Umsetzung und dem kontinuierlichen Support. Wir verstehen uns als langfristiger Partner für Ihren digitalen Erfolg. | |
| </p> | |
| <p class="text-gray-600"> | |
| Neben digitalen Dienstleistungen bieten wir auch professionelle Musikproduktionen an. Als erfahrener Musiker und Produzent sorge ich für den perfekten Sound Ihres Projekts. | |
| </p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-8"> | |
| <div class="w-20 h-20 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white text-2xl font-bold mr-4"> | |
| JD | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold">Jan Doe</h3> | |
| <p class="text-gray-600">Gründer & Geschäftsführer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| "Ich liebe es, komplexe Probleme in elegante digitale Lösungen zu verwandeln. | |
| Bei Netzfreude arbeiten wir eng mit unseren Kunden zusammen, um genau das zu | |
| erreichen." | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-gray-800"> | |
| <i class="fab fa-xing text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </a> | |
| </div> | |
| <div class="flex items-start mt-6"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"> | |
| <i class="fas fa-clock text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Öffnungszeiten</h4> | |
| <p class="text-gray-600">Mo-Fr: 9:00 - 18:00 Uhr</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Kontaktieren Sie uns</h2> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h3 class="text-xl font-bold mb-6">Lassen Sie uns über Ihr Projekt sprechen</h3> | |
| <p class="text-gray-600 mb-8"> | |
| Sie haben eine Idee oder ein konkretes Projekt? Schreiben Sie uns eine Nachricht | |
| oder rufen Sie uns an. Wir melden uns innerhalb von 24 Stunden bei Ihnen zurück. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"> | |
| <i class="fas fa-map-marker-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Adresse</h4> | |
| <p class="text-gray-600">Musterstraße 123, 10115 Berlin</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"> | |
| <i class="fas fa-phone-alt text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Telefon</h4> | |
| <p class="text-gray-600">+49 30 12345678</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0"> | |
| <i class="fas fa-envelope text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Email</h4> | |
| <p class="text-gray-600">hallo@netzfreude.de</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 mb-2">Nachricht</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"></textarea> | |
| </div> | |
| <button type="submit" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition-all duration-300 w-full"> | |
| Nachricht senden | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="md:flex md:justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <a href="#" class="text-xl font-bold gradient-text">Netzfreude</a> | |
| <p class="mt-4 text-gray-400 max-w-md"> | |
| Ihre digitale Agentur für maßgeschneiderte Web- und App-Lösungen. | |
| Individuell, persönlich und mit viel Leidenschaft. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Navigation</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#services" class="text-gray-400 hover:text-white transition">Leistungen</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">Über uns</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Kontakt</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Rechtliches</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Impressum</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Datenschutz</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">AGB</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Social Media</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-xing text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm"> | |
| <p>© 2025 netzfreude. Alle Rechte vorbehalten.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=carmoe/netzfreude2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |