Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pixelkraft | Digitale Lösungen mit Leidenschaft</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=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8f9fa; | |
| } | |
| .hero-section { | |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), | |
| url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(190, 30, 45, 0.9) 0%, rgba(120, 15, 25, 0.9) 100%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .playful-element { | |
| position: absolute; | |
| width: 100px; | |
| height: 100px; | |
| background-color: #BE1E2D; | |
| border-radius: 50%; | |
| opacity: 0.1; | |
| z-index: 0; | |
| } | |
| .nav-link:hover { | |
| color: #BE1E2D ; | |
| } | |
| .btn-primary { | |
| background-color: #BE1E2D; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #9e1928; | |
| transform: translateY(-2px); | |
| } | |
| .btn-outline { | |
| border: 2px solid #BE1E2D; | |
| color: #BE1E2D; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-outline:hover { | |
| background-color: #BE1E2D; | |
| color: white; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 0.8s ease forwards; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-900 flex items-center justify-center mr-3"> | |
| <span class="text-white font-bold text-xl">PK</span> | |
| </div> | |
| <a href="#" class="text-2xl font-bold text-gray-900">Pixelkraft</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#services" class="nav-link text-gray-600 hover:text-gray-900 transition">Leistungen</a> | |
| <a href="#portfolio" class="nav-link text-gray-600 hover:text-gray-900 transition">Portfolio</a> | |
| <a href="#about" class="nav-link text-gray-600 hover:text-gray-900 transition">Über uns</a> | |
| <a href="#contact" class="nav-link text-gray-600 hover:text-gray-900 transition">Kontakt</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none"> | |
| <i class="fas fa-bars text-2xl text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-section text-white py-20 md:py-32 relative overflow-hidden"> | |
| <div class="playful-element top-10 left-10"></div> | |
| <div class="playful-element bottom-20 right-20"></div> | |
| <div class="playful-element top-1/3 right-1/4"></div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="max-w-3xl"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Digitale Lösungen mit Leidenschaft</h1> | |
| <p class="text-xl md:text-2xl mb-8">Wir gestalten, optimieren und entwickeln digitale Erlebnisse, die Ihre Marke strahlen lassen.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="btn-primary text-white font-semibold py-3 px-8 rounded-full text-center">Projekt starten</a> | |
| <a href="#services" class="btn-outline bg-white bg-opacity-10 hover:bg-opacity-20 font-semibold py-3 px-8 rounded-full text-center">Unsere Leistungen</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Unsere Leistungen</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">Von der ersten Idee bis zur erfolgreichen Umsetzung - wir begleiten Sie durch den gesamten digitalen Prozess.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300 relative overflow-hidden"> | |
| <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-paint-brush text-2xl text-red-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Webdesign & Entwicklung</h3> | |
| <p class="text-gray-600 mb-4">Individuelle Websites, die nicht nur gut aussehen, sondern auch Ihre Ziele erreichen.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Responsive Design</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> CMS Integration</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> UI/UX Optimierung</li> | |
| </ul> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-2xl text-red-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">SEO & Online Marketing</h3> | |
| <p class="text-gray-600 mb-4">Mehr Sichtbarkeit, mehr Traffic, mehr Kunden - durch strategische Suchmaschinenoptimierung.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Keyword-Recherche</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> OnPage-Optimierung</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Content-Strategie</li> | |
| </ul> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-camera text-2xl text-red-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Fotografie & Videoproduktion</h3> | |
| <p class="text-gray-600 mb-4">Professionelle Bild- und Videoinhalte, die Ihre Marke authentisch präsentieren.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Produktfotografie</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Imagefilme</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Social Media Content</li> | |
| </ul> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-pen-fancy text-2xl text-red-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Grafikdesign & Branding</h3> | |
| <p class="text-gray-600 mb-4">Einprägsame visuelle Identitäten, die Ihre Marke unverwechselbar machen.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Logo-Design</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Corporate Design</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Printmedien</li> | |
| </ul> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-keyboard text-2xl text-red-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Texten & Content Creation</h3> | |
| <p class="text-gray-600 mb-4">Überzeugende Texte, die Ihre Zielgruppe ansprechen und zum Handeln bewegen.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Webtexte</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Blogartikel</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Werbetexte</li> | |
| </ul> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-white rounded-xl shadow-lg p-8 transition duration-300"> | |
| <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-headset text-2xl text-red-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Beratung & Strategie</h3> | |
| <p class="text-gray-600 mb-4">Individuelle Digitalstrategien, die zu Ihrem Unternehmen und Ihren Zielen passen.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Digitalstrategie</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Social Media Beratung</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-red-500 mr-2"></i> Workshops</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Ausgewählte Projekte</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">Ein Blick auf unsere Arbeit zeigt mehr als tausend Worte.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Project 1 --> | |
| <div class="group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Webdesign Projekt" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-500 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-2">E-Commerce Plattform</h3> | |
| <p class="text-gray-200">Umfassendes Shop-System mit individuellen Funktionen</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Corporate Design" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-500 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-2">Corporate Relaunch</h3> | |
| <p class="text-gray-200">Modernes Erscheinungsbild für etabliertes Unternehmen</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="SEO Optimierung" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-500 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-2">SEO Kampagne</h3> | |
| <p class="text-gray-200">+300% organischer Traffic in 6 Monaten</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="btn-outline font-semibold py-3 px-8 rounded-full inline-block">Mehr Projekte ansehen</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Wer wir sind</h2> | |
| <p class="text-gray-600 mb-6">Pixelkraft ist eine Digitalagentur mit Sitz in Berlin, die sich auf ganzheitliche digitale Lösungen spezialisiert hat. Unser Team aus Designern, Entwicklern, Marketingspezialisten und Kreativen verbindet technische Kompetenz mit gestalterischem Feingefühl.</p> | |
| <p class="text-gray-600 mb-8">Was uns antreibt? Die Leidenschaft für herausragende digitale Erlebnisse und der Anspruch, für jeden Kunden die beste Lösung zu finden - maßgeschneidert und zielgerichtet.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-trophy text-red-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">15+ Auszeichnungen</h4> | |
| <p class="text-sm text-gray-500">Für exzellentes Design</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-smile text-red-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">120+ zufriedene Kunden</h4> | |
| <p class="text-sm text-gray-500">In ganz Europa</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="playful-element -top-10 -left-10 w-40 h-40"></div> | |
| <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Unser Team" class="rounded-xl shadow-xl relative z-10"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Was unsere Kunden sagen</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">Erfahren Sie, was unsere Partner über die Zusammenarbeit mit uns denken.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Die Zusammenarbeit mit Pixelkraft hat unseren Online-Auftritt revolutioniert. Innerhalb von 3 Monaten haben wir eine Verdopplung unserer Leads erreicht."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Müller" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sarah Müller</h4> | |
| <p class="text-sm text-gray-500">Geschäftsführerin, ModeLabel</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Besonders beeindruckt hat uns die strategische Herangehensweise. Pixelkraft hat nicht nur eine Website gebaut, sondern ein ganzes Digitalkonzept entwickelt."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Thomas Weber" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Thomas Weber</h4> | |
| <p class="text-sm text-gray-500">Marketingleiter, TechSolutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Die Videoproduktion hat unsere Social-Media-Präsenz auf ein neues Level gehoben. Kreativ, professionell und immer ein offenes Ohr für unsere Ideen."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Julia Schmidt" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Julia Schmidt</h4> | |
| <p class="text-sm text-gray-500">CMO, FoodDelight</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Kontaktieren Sie uns</h2> | |
| <p class="text-gray-600 mb-8">Haben Sie ein Projekt, das wir gemeinsam umsetzen können? Schreiben Sie uns eine Nachricht oder rufen Sie uns an. Wir freuen uns auf Ihre Ideen!</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-map-marker-alt text-red-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Adresse</h4> | |
| <p class="text-gray-600">Pixelkraft GmbH<br>Digitalstraße 42<br>10115 Berlin</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-phone-alt text-red-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Telefon</h4> | |
| <p class="text-gray-600">+49 30 12345678</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-envelope text-red-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">E-Mail</h4> | |
| <p class="text-gray-600">hallo@pixelkraft.de</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h4 class="font-bold mb-4">Folgen Sie uns</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-red-600 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-red-600 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-red-600 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-red-600 hover:text-white transition"> | |
| <i class="fab fa-behance"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <form class="bg-gray-50 p-8 rounded-xl shadow-lg"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Ihr Name"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">E-Mail</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Ihre E-Mail-Adresse"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Betreff</label> | |
| <select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"> | |
| <option value="">Wählen Sie ein Thema</option> | |
| <option value="webdesign">Webdesign</option> | |
| <option value="seo">SEO</option> | |
| <option value="design">Grafikdesign</option> | |
| <option value="video">Videoproduktion</option> | |
| <option value="other">Anderes</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Nachricht</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Ihre Nachricht"></textarea> | |
| </div> | |
| <button type="submit" class="btn-primary text-white font-semibold py-3 px-8 rounded-full w-full">Nachricht senden</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-red-600 flex items-center justify-center mr-3"> | |
| <span class="text-white font-bold">PK</span> | |
| </div> | |
| <span class="text-xl font-bold">Pixelkraft</span> | |
| </div> | |
| <p class="text-gray-400 max-w-xs">Ihre Digitalagentur für ganzheitliche Lösungen im Webdesign, Marketing und Content Creation.</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Leistungen</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Webdesign</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">SEO</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Grafikdesign</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Fotografie</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Unternehmen</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Über uns</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Team</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Karriere</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Rechtliches</h4> | |
| <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> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Pixelkraft GmbH. Alle Rechte vorbehalten.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-behance"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('button').addEventListener('click', function() { | |
| const menu = document.querySelector('.md\\:flex'); | |
| menu.classList.toggle('hidden'); | |
| menu.classList.toggle('flex'); | |
| menu.classList.toggle('flex-col'); | |
| menu.classList.toggle('absolute'); | |
| menu.classList.toggle('top-16'); | |
| menu.classList.toggle('left-0'); | |
| menu.classList.toggle('right-0'); | |
| menu.classList.toggle('bg-white'); | |
| menu.classList.toggle('p-4'); | |
| menu.classList.toggle('shadow-md'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Add animation to service cards on scroll | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, {threshold: 0.1}); | |
| document.querySelectorAll('.service-card').forEach(card => { | |
| observer.observe(card); | |
| }); | |
| </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/netzfreude" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |