WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von Metehan
894
Metehan
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
22 April 2025
Ein Code von Metehan
18 December 2025
Kleinfischen
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Atelier | Architecture & Engineering</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=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #f8f5f0; color: #333; overflow-x: hidden; } .hero-image { background-image: url('https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-position: center; height: 80vh; } .project-card { transition: all 0.3s ease; } .project-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); } .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: #d87d56; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .language-selector { transition: all 0.3s ease; } .language-selector:hover { color: #d87d56; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.8s ease forwards; } .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; } </style> </head> <body> <!-- Navigation --> <nav class="bg-white bg-opacity-90 fixed w-full z-50 shadow-sm"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-24 items-center"> <div class="flex-shrink-0 flex items-center"> <h1 class="text-2xl font-bold text-gray-800 font-serif">ATELIER</h1> </div> <div class="hidden md:block"> <div class="ml-10 flex items-center space-x-8"> <a href="#" class="nav-link text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">Projects</a> <a href="#" class="nav-link text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">Studio</a> <a href="#" class="nav-link text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">Services</a> <a href="#" class="nav-link text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">Insights</a> <a href="#" class="nav-link text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">Contact</a> <div class="flex space-x-2"> <a href="#" class="language-selector text-gray-500 hover:text-gray-700 text-sm">EN</a> <span class="text-gray-300">|</span> <a href="#" class="language-selector text-gray-500 hover:text-gray-700 text-sm">FR</a> </div> </div> </div> <div class="-mr-2 flex md:hidden"> <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 focus:outline-none"> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button> </div> </div> </div> </nav> <!-- Hero Section --> <div class="hero-image relative pt-24"> <div class="absolute inset-0 bg-gradient-to-t from-white via-white/70 to-transparent"></div> <div class="relative h-full flex items-center"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full"> <div class="max-w-2xl animate-fade-in"> <h1 class="text-5xl md:text-6xl font-serif font-bold text-gray-800 mb-6">Architecture with <span class="text-amber-800">purpose</span></h1> <p class="text-lg text-gray-600 mb-8">We design spaces that inspire, function beautifully, and stand the test of time.</p> <div class="flex space-x-4"> <a href="#" class="bg-amber-800 hover:bg-amber-700 text-white px-6 py-3 rounded-sm font-medium transition duration-300">View Projects</a> <a href="#" class="border border-gray-800 hover:bg-gray-100 text-gray-800 px-6 py-3 rounded-sm font-medium transition duration-300">Our Process</a> </div> </div> </div> </div> </div> <!-- Featured Projects --> <section class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 animate-fade-in delay-1"> <h2 class="text-3xl font-serif font-bold text-gray-800 mb-4">Featured Projects</h2> <p class="text-gray-500 max-w-2xl mx-auto">Selected works that showcase our design philosophy and technical expertise</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Project 1 --> <div class="project-card bg-white rounded-sm overflow-hidden shadow-md animate-fade-in delay-1"> <div class="relative overflow-hidden h-64"> <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Modern Residence" class="w-full h-full object-cover transition duration-500 hover:scale-105"> </div> <div class="p-6"> <h3 class="text-xl font-serif font-bold text-gray-800 mb-2">Hillside Residence</h3> <p class="text-gray-500 mb-4">Los Angeles, California</p> <a href="#" class="text-amber-800 hover:text-amber-700 font-medium flex items-center"> View Project <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> </svg> </a> </div> </div> <!-- Project 2 --> <div class="project-card bg-white rounded-sm overflow-hidden shadow-md animate-fade-in delay-2"> <div class="relative overflow-hidden h-64"> <img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Commercial Building" class="w-full h-full object-cover transition duration-500 hover:scale-105"> </div> <div class="p-6"> <h3 class="text-xl font-serif font-bold text-gray-800 mb-2">Urban Office Complex</h3> <p class="text-gray-500 mb-4">New York, New York</p> <a href="#" class="text-amber-800 hover:text-amber-700 font-medium flex items-center"> View Project <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> </svg> </a> </div> </div> <!-- Project 3 --> <div class="project-card bg-white rounded-sm overflow-hidden shadow-md animate-fade-in delay-3"> <div class="relative overflow-hidden h-64"> <img src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Cultural Center" class="w-full h-full object-cover transition duration-500 hover:scale-105"> </div> <div class="p-6"> <h3 class="text-xl font-serif font-bold text-gray-800 mb-2">Cultural Arts Center</h3> <p class="text-gray-500 mb-4">Chicago, Illinois</p> <a href="#" class="text-amber-800 hover:text-amber-700 font-medium flex items-center"> View Project <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> </svg> </a> </div> </div> </div> <div class="text-center mt-12 animate-fade-in delay-3"> <a href="#" class="inline-flex items-center text-gray-800 hover:text-amber-800 font-medium"> View All Projects <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> </svg> </a> </div> </div> </section> <!-- About Studio --> <section class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="animate-fade-in"> <h2 class="text-3xl font-serif font-bold text-gray-800 mb-6">The Studio</h2> <p class="text-gray-600 mb-6">Founded in 2010, Atelier is an award-winning architecture and design practice with offices in New York, Los Angeles, and Paris. Our team of 50+ architects, designers, and engineers collaborate to create thoughtful, sustainable spaces.</p> <p class="text-gray-600 mb-8">We believe architecture should respond to its context, enhance human experience, and push boundaries while remaining functional and buildable.</p> <div class="flex flex-wrap gap-4"> <div class="bg-white p-6 shadow-sm w-full sm:w-auto"> <h3 class="text-2xl font-serif font-bold text-amber-800 mb-2">50+</h3> <p class="text-gray-600">Team Members</p> </div> <div class="bg-white p-6 shadow-sm w-full sm:w-auto"> <h3 class="text-2xl font-serif font-bold text-amber-800 mb-2">120+</h3> <p class="text-gray-600">Projects Completed</p> </div> <div class="bg-white p-6 shadow-sm w-full sm:w-auto"> <h3 class="text-2xl font-serif font-bold text-amber-800 mb-2">15</h3> <p class="text-gray-600">Industry Awards</p> </div> </div> </div> <div class="relative h-96 animate-fade-in delay-1"> <div class="absolute inset-0 bg-gray-200 overflow-hidden rounded-sm"> <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1916&q=80" alt="Studio Workspace" class="w-full h-full object-cover"> </div> <div class="absolute -bottom-6 -right-6 bg-white p-6 shadow-lg w-2/3"> <h3 class="font-serif font-bold text-gray-800 mb-2">Our Approach</h3> <p class="text-gray-600 text-sm">We combine rigorous research, technical expertise, and creative vision to deliver exceptional results for our clients.</p> </div> </div> </div> </div> </section> <!-- Services --> <section class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-3xl font-serif font-bold text-gray-800 mb-4">Our Services</h2> <p class="text-gray-500 max-w-2xl mx-auto">Comprehensive architecture and design solutions tailored to your needs</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-gray-50 p-8 rounded-sm hover:bg-amber-800 hover:text-white transition duration-300 group"> <div class="w-12 h-12 bg-amber-100 group-hover:bg-white text-amber-800 group-hover:text-amber-800 rounded-full flex items-center justify-center mb-6"> <i class="fas fa-home text-xl"></i> </div> <h3 class="text-xl font-serif font-bold mb-4">Residential Design</h3> <p class="text-gray-600 group-hover:text-white">Custom homes, renovations, and multi-family housing that combine beauty and functionality.</p> </div> <div class="bg-gray-50 p-8 rounded-sm hover:bg-amber-800 hover:text-white transition duration-300 group"> <div class="w-12 h-12 bg-amber-100 group-hover:bg-white text-amber-800 group-hover:text-amber-800 rounded-full flex items-center justify-center mb-6"> <i class="fas fa-building text-xl"></i> </div> <h3 class="text-xl font-serif font-bold mb-4">Commercial Architecture</h3> <p class="text-gray-600 group-hover:text-white">Office buildings, retail spaces, and mixed-use developments designed for business success.</p> </div> <div class="bg-gray-50 p-8 rounded-sm hover:bg-amber-800 hover:text-white transition duration-300 group"> <div class="w-12 h-12 bg-amber-100 group-hover:bg-white text-amber-800 group-hover:text-amber-800 rounded-full flex items-center justify-center mb-6"> <i class="fas fa-leaf text-xl"></i> </div> <h3 class="text-xl font-serif font-bold mb-4">Sustainable Design</h3> <p class="text-gray-600 group-hover:text-white">Energy-efficient, eco-friendly solutions that reduce environmental impact without compromising design.</p> </div> </div> </div> </section> <!-- Testimonials --> <section class="py-20 bg-amber-800 text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-3xl font-serif font-bold mb-4">Client Testimonials</h2> <p class="text-amber-100 max-w-2xl mx-auto">What our clients say about working with us</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white bg-opacity-10 p-8 rounded-sm backdrop-blur-sm"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden"> <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-full h-full object-cover"> </div> <div> <h4 class="font-bold">Sarah Johnson</h4> <p class="text-amber-100 text-sm">CEO, Urban Developments</p> </div> </div> <p>"Atelier transformed our vision into reality with their innovative approach and attention to detail. The final result exceeded all expectations."</p> </div> <div class="bg-white bg-opacity-10 p-8 rounded-sm backdrop-blur-sm"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover"> </div> <div> <h4 class="font-bold">Michael Chen</h4> <p class="text-amber-100 text-sm">Director, Harbor Properties</p> </div> </div> <p>"Their ability to balance aesthetic appeal with practical functionality is unmatched. We've worked with them on three projects and will continue to do so."</p> </div> <div class="bg-white bg-opacity-10 p-8 rounded-sm backdrop-blur-sm"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 overflow-hidden"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-full h-full object-cover"> </div> <div> <h4 class="font-bold">Elena Rodriguez</h4> <p class="text-amber-100 text-sm">Founder, Verde Living</p> </div> </div> <p>"The sustainable solutions they proposed not only reduced our carbon footprint but also resulted in significant long-term cost savings."</p> </div> </div> </div> </section> <!-- Contact --> <section class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div> <h2 class="text-3xl font-serif font-bold text-gray-800 mb-6">Get in Touch</h2> <p class="text-gray-600 mb-8">Interested in working with us or learning more about our services? Reach out to start the conversation.</p> <div class="space-y-6"> <div class="flex items-start"> <div class="bg-amber-100 text-amber-800 p-3 rounded-full mr-4"> <i class="fas fa-map-marker-alt"></i> </div> <div> <h4 class="font-bold text-gray-800 mb-1">Locations</h4> <p class="text-gray-600">New York • Los Angeles • Paris</p> </div> </div> <div class="flex items-start"> <div class="bg-amber-100 text-amber-800 p-3 rounded-full mr-4"> <i class="fas fa-envelope"></i> </div> <div> <h4 class="font-bold text-gray-800 mb-1">Email</h4> <p class="text-gray-600">info@atelier.com</p> </div> </div> <div class="flex items-start"> <div class="bg-amber-100 text-amber-800 p-3 rounded-full mr-4"> <i class="fas fa-phone"></i> </div> <div> <h4 class="font-bold text-gray-800 mb-1">Phone</h4> <p class="text-gray-600">+1 (212) 555-1234</p> </div> </div> </div> </div> <div class="bg-gray-50 p-8 rounded-sm"> <form> <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <div> <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-2 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-amber-500"> </div> <div> <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-amber-500"> </div> </div> <div class="mb-6"> <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-amber-500"> </div> <div class="mb-6"> <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> <input id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-amber-500"/> </div> <button type="submit" class="bg-amber-800 hover:bg-amber-700 text-white px-6 py-3 rounded-sm font-medium w-full transition duration-300">Send Message</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <h3 class="text-xl font-serif font-bold mb-4">ATELIER</h3> <p class="text-gray-400">Creating meaningful architecture that stands the test of time.</p> </div> <div> <h4 class="font-bold mb-4">Explore</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Projects</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Studio</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Services</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Insights</a></li> </ul> </div> <div> <h4 class="font-bold mb-4">Connect</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Instagram</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">LinkedIn</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Pinterest</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Behance</a></li> </ul> </div> <div> <h4 class="font-bold mb-4">Newsletter</h4> <p class="text-gray-400 mb-4">Subscribe to receive updates on our latest projects and insights.</p> <div class="flex"> <input type="email" placeholder="Your email" class="px-4 py-2 w-full bg-gray-800 text-white focus:outline-none"> <button class="bg-amber-800 hover:bg-amber-700 px-4 py-2 transition duration-300"> <i class="fas fa-paper-plane"></i> </button> </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 text-sm mb-4 md:mb-0">© 2023 Atelier Architecture. All rights reserved.</p> <div class="flex space-x-6"> <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Privacy Policy</a> <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Terms of Service</a> </div> </div> </div> </footer> <script> // Simple animation trigger on scroll document.addEventListener('DOMContentLoaded', function() { const animatedElements = document.querySelectorAll('.animate-fade-in'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = 1; entry.target.style.transform = 'translateY(0)'; } }); }, { threshold: 0.1 }); animatedElements.forEach(element => { observer.observe(element); }); }); </script> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
