Architektur- und Design-Website mit Tailwind CSS

904 Metehan

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Architektur- und Design-Website mit Tailwind CSS

Empfohlen

30 November 2024

Reisewebsite mit umgekehrtem Rahmenradius

8 September 2025

CSS-Textanimation: Echoeffekt

30 October 2025

CSS-Code für Ladeanimation mit Augensymbol (HTML)

HTML

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Archinova Studio - Modern Architecture & Design</title>
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #111111;
            color: #E0E0E0;
        }
        /* Custom gold color */
        .text-gold { color: #D4AF37; }
        .bg-gold { background-color: #D4AF37; }
        .border-gold { border-color: #D4AF37; }
        
        /* Hero background with parallax effect */
        .hero-section {
            background-image: url('https://images.unsplash.com/photo-1581351722455-c35b27d3c12a?q=80&w=2940&auto=format&fit=crop');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

/* Sticky nav background on scroll */
        .nav-scrolled {
            background-color: rgba(17, 17, 17, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

/* Project gallery hover effect */
        .project-card .overlay {
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
        }
        .project-card:hover .overlay {
            opacity: 1;
        }
        .project-card img {
            transition: transform 0.4s ease-in-out;
        }
        .project-card:hover img {
            transform: scale(1.05);
        }

/* Timeline styles */
        .timeline-item {
            position: relative;
            padding-left: 2.5rem;
            padding-bottom: 2rem;
            border-left: 2px solid #333;
        }
        .timeline-item:last-child {
            border-left: 2px solid transparent;
        }
        .timeline-dot {
            position: absolute;
            left: -0.5rem;
            top: 0;
            height: 1rem;
            width: 1rem;
            background-color: #D4AF37;
            border-radius: 50%;
            border: 2px solid #111111;
        }
    </style>
</head>
<body class="antialiased">

<header id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                <a href="#" class="text-2xl font-bold text-white tracking-wider">ARCHINOVA</a>
                <nav class="hidden md:flex space-x-8 items-center">
                    <a href="#about" class="text-gray-300 hover:text-gold transition duration-300">About</a>
                    <a href="#projects" class="text-gray-300 hover:text-gold transition duration-300">Projects</a>
                    <a href="#services" class="text-gray-300 hover:text-gold transition duration-300">Services</a>
                    <a href="#team" class="text-gray-300 hover:text-gold transition duration-300">Team</a>
                    <a href="#blog" class="text-gray-300 hover:text-gold transition duration-300">Blog</a>
                    <a href="#contact" class="bg-transparent border border-gold text-gold px-4 py-2 rounded-md hover:bg-gold hover:text-black transition duration-300">Contact Us</a>
                </nav>
                <button id="mobile-menu-button" class="md:hidden text-white">
                    <svg class="w-6 h-6" 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="M4 6h16M4 12h16m-7 6h7"></path></svg>
                </button>
            </div>
        </div>
        
        <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-90">
            <a href="#about" class="block text-center py-3 text-gray-300 hover:text-gold transition duration-300">About</a>
            <a href="#projects" class="block text-center py-3 text-gray-300 hover:text-gold transition duration-300">Projects</a>
            <a href="#services" class="block text-center py-3 text-gray-300 hover:text-gold transition duration-300">Services</a>
            <a href="#team" class="block text-center py-3 text-gray-300 hover:text-gold transition duration-300">Team</a>
            <a href="#blog" class="block text-center py-3 text-gray-300 hover:text-gold transition duration-300">Blog</a>
            <a href="#contact" class="block text-center py-3 text-gold hover:text-black hover:bg-gold transition duration-300">Contact Us</a>
        </div>
    </header>

<main>
        
        <section class="hero-section h-screen flex items-center justify-center text-center text-white">
            <div class="bg-black bg-opacity-50 p-10 rounded-lg">
                <h1 data-aos="fade-down" class="text-5xl md:text-7xl font-extrabold leading-tight mb-4">Shaping Tomorrow's Skylines</h1>
                <p data-aos="fade-up" data-aos-delay="200" class="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl mx-auto">We design innovative and sustainable spaces that inspire and endure. Welcome to the future of architecture.</p>
                <a data-aos="zoom-in" data-aos-delay="400" href="#projects" class="bg-gold text-black font-bold py-3 px-8 rounded-lg text-lg hover:bg-yellow-500 transition duration-300 transform hover:scale-105">Explore Our Work</a>
            </div>
        </section>

<section id="about" class="py-20 bg-[#1a1a1a]">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12" data-aos="fade-up">
                    <h2 class="text-4xl font-bold text-white">About Archinova</h2>
                    <p class="text-gray-400 mt-2">Pioneering Design Since 2005</p>
                    <div class="w-20 h-1 bg-gold mx-auto mt-4"></div>
                </div>
                <div class="grid md:grid-cols-2 gap-12 items-center">
                    <div data-aos="fade-right">
                        <h3 class="text-2xl font-semibold text-white mb-4">Our Philosophy</h3>
                        <p class="text-gray-400 mb-6">At Archinova, we believe that great design is born from collaboration, innovation, and a deep respect for the environment. Our work is a testament to the power of architecture to transform communities and enhance human experience. We blend artistry with engineering to create structures that are not only beautiful but also functional and sustainable.</p>
                        <img src="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?q=80&w=2600&auto=format&fit=crop" alt="Modern interior design" class="rounded-lg shadow-2xl w-full h-auto object-cover">
                    </div>
                    <div data-aos="fade-left" data-aos-delay="200">
                        <h3 class="text-2xl font-semibold text-white mb-6">Our Journey</h3>
                        <div class="relative">
                            
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <h4 class="font-bold text-gold">2005 - Foundation</h4>
                                <p class="text-gray-400 text-sm">Archinova Studio was founded with a vision to redefine urban landscapes.</p>
                            </div>
                            
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <h4 class="font-bold text-gold">2010 - First Major Award</h4>
                                <p class="text-gray-400 text-sm">Received the 'Innovator in Design' award for the 'Zenith Tower' project.</p>
                            </div>
                            
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <h4 class="font-bold text-gold">2018 - Global Expansion</h4>
                                <p class="text-gray-400 text-sm">Opened our first international office, expanding our reach and expertise.</p>
                            </div>
                            
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <h4 class="font-bold text-gold">2024 - Sustainability Pledge</h4>
                                <p class="text-gray-400 text-sm">Committed to 100% carbon-neutral designs for all future projects.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="projects" class="py-20">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12" data-aos="fade-up">
                    <h2 class="text-4xl font-bold text-white">Featured Projects</h2>
                    <p class="text-gray-400 mt-2">A Glimpse into Our Portfolio</p>
                    <div class="w-20 h-1 bg-gold mx-auto mt-4"></div>
                </div>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    
                    <div class="project-card relative overflow-hidden rounded-lg shadow-lg group" data-aos="fade-up">
                        <img src="https://images.unsplash.com/photo-1511312936789-261009a15b6c?q=80&w=2940&auto=format&fit=crop" alt="Project 1" class="w-full h-full object-cover">
                        <div class="overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6">
                            <h3 class="text-2xl font-bold text-white mb-2">The Oculus Center</h3>
                            <p class="text-gold">Commercial Hub, Downtown</p>
                        </div>
                    </div>
                    
                    <div class="project-card relative overflow-hidden rounded-lg shadow-lg group" data-aos="fade-up" data-aos-delay="100">
                        <img src="https://images.unsplash.com/photo-1487958449943-2429e8be8625?q=80&w=2940&auto=format&fit=crop" alt="Project 2" class="w-full h-full object-cover">
                        <div class="overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6">
                            <h3 class="text-2xl font-bold text-white mb-2">Serenity Villa</h3>
                            <p class="text-gold">Private Residence, Coastline</p>
                        </div>
                    </div>
                    
                    <div class="project-card relative overflow-hidden rounded-lg shadow-lg group" data-aos="fade-up" data-aos-delay="200">
                        <img src="https://images.unsplash.com/photo-1542347348-80650c436512?q=80&w=2940&auto=format&fit=crop" alt="Project 3" class="w-full h-full object-cover">
                        <div class="overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6">
                            <h3 class="text-2xl font-bold text-white mb-2">Aethelred Museum</h3>
                            <p class="text-gold">Cultural Institution, City Park</p>
                        </div>
                    </div>
                    
                </div>
            </div>
        </section>

<section id="services" class="py-20 bg-[#1a1a1a]">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12" data-aos="fade-up">
                    <h2 class="text-4xl font-bold text-white">Our Services</h2>
                    <p class="text-gray-400 mt-2">Expertise Across All Scales</p>
                    <div class="w-20 h-1 bg-gold mx-auto mt-4"></div>
                </div>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 text-center">
                    
                    <div class="p-8 bg-[#222] rounded-lg" data-aos="fade-up">
                        <div class="flex justify-center mb-4">
                            <svg class="w-12 h-12 text-gold" 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="1.5" d="M3 21v-4m0 4v-4m0 4h4m-4 0H3m18-4v4m0-4v4m0-4h-4m4 0h4M3 7v4m0-4V7m0 0h4M3 7h4m14 0v4m0-4V7m0 0h-4m4 0h4M9 3v4m0 0v4m0-4h6m-6 0H9m6 18v-4m0 4v-4m0 4h-6m6 0h6"/></svg>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">Architectural Design</h3>
                        <p class="text-gray-400">From initial concept sketches to detailed construction documents, we craft buildings that are both iconic and practical.</p>
                    </div>
                    
                    <div class="p-8 bg-[#222] rounded-lg" data-aos="fade-up" data-aos-delay="100">
                        <div class="flex justify-center mb-4">
                           <svg class="w-12 h-12 text-gold" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5-1.5-.5M6.75 7.364V3h-3v18m3-13.636l1.5.545m-1.5-.545L5.25 9"/></svg>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">Interior Design</h3>
                        <p class="text-gray-400">We create cohesive and inspiring interior spaces that reflect your brand, culture, or personal lifestyle.</p>
                    </div>
                    
                    <div class="p-8 bg-[#222] rounded-lg" data-aos="fade-up" data-aos-delay="200">
                         <div class="flex justify-center mb-4">
                            <svg class="w-12 h-12 text-gold" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21M3 3h18M3 7.5h18M3 12h18m-4.5 9v-6.75a2.25 2.25 0 00-2.25-2.25h-1.5a2.25 2.25 0 00-2.25 2.25V21"/></svg>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-2">Urban Planning</h3>
                        <p class="text-gray-400">Shaping the future of cities through master planning, landscape architecture, and sustainable development strategies.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="team" class="py-20">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12" data-aos="fade-up">
                    <h2 class="text-4xl font-bold text-white">Meet Our Team</h2>
                    <p class="text-gray-400 mt-2">The Visionaries Behind Our Designs</p>
                    <div class="w-20 h-1 bg-gold mx-auto mt-4"></div>
                </div>
                <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    
                    <div class="text-center" data-aos="fade-up">
                        <img src="https://placehold.co/400x400/333333/E0E0E0?text=Ava+Chen" alt="Team Member 1" class="w-48 h-48 mx-auto rounded-full object-cover mb-4">
                        <h3 class="text-xl font-bold text-white">Ava Chen</h3>
                        <p class="text-gold">Lead Architect</p>
                        <p class="text-gray-400 text-sm mt-2">With over 15 years of experience, Ava is the creative force behind our most ambitious projects.</p>
                    </div>
                    
                    <div class="text-center" data-aos="fade-up" data-aos-delay="100">
                        <img src="https://placehold.co/400x400/333333/E0E0E0?text=Leo+Grant" alt="Team Member 2" class="w-48 h-48 mx-auto rounded-full object-cover mb-4">
                        <h3 class="text-xl font-bold text-white">Leo Grant</h3>
                        <p class="text-gold">Project Director</p>
                        <p class="text-gray-400 text-sm mt-2">Leo ensures that every project is delivered on time, on budget, and to the highest standard of quality.</p>
                    </div>
                    
                    <div class="text-center" data-aos="fade-up" data-aos-delay="200">
                        <img src="https://placehold.co/400x400/333333/E0E0E0?text=Mia+Kim" alt="Team Member 3" class="w-48 h-48 mx-auto rounded-full object-cover mb-4">
                        <h3 class="text-xl font-bold text-white">Mia Kim</h3>
                        <p class="text-gold">Head of Interior Design</p>
                        <p class="text-gray-400 text-sm mt-2">Mia's keen eye for detail and passion for materials transforms spaces into experiences.</p>
                    </div>
                    
                    <div class="text-center" data-aos="fade-up" data-aos-delay="300">
                        <img src="https://placehold.co/400x400/333333/E0E0E0?text=Sam+Rivera" alt="Team Member 4" class="w-48 h-48 mx-auto rounded-full object-cover mb-4">
                        <h3 class="text-xl font-bold text-white">Sam Rivera</h3>
                        <p class="text-gold">Sustainability Expert</p>
                        <p class="text-gray-400 text-sm mt-2">Sam integrates cutting-edge green technologies to create eco-friendly and efficient buildings.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="blog" class="py-20 bg-[#1a1a1a]">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12" data-aos="fade-up">
                    <h2 class="text-4xl font-bold text-white">Design Insights</h2>
                    <p class="text-gray-400 mt-2">From Our Studio to Your Screen</p>
                    <div class="w-20 h-1 bg-gold mx-auto mt-4"></div>
                </div>
                <div class="grid md:grid-cols-3 gap-8">
                    
                    <div class="bg-[#222] rounded-lg overflow-hidden" data-aos="fade-up">
                        <img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?q=80&w=2832&auto=format&fit=crop" alt="Blog post image" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <p class="text-sm text-gold mb-2">Trends | July 15, 2024</p>
                            <h3 class="text-xl font-bold text-white mb-3">The Rise of Biophilic Design in Urban Spaces</h3>
                            <a href="#" class="text-gray-300 hover:text-gold transition duration-300">Read More →</a>
                        </div>
                    </div>
                    
                    <div class="bg-[#222] rounded-lg overflow-hidden" data-aos="fade-up" data-aos-delay="100">
                        <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?q=80&w=2940&auto=format&fit=crop" alt="Blog post image" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <p class="text-sm text-gold mb-2">Technology | June 28, 2024</p>
                            <h3 class="text-xl font-bold text-white mb-3">How 3D Printing is Revolutionizing Architecture</h3>
                            <a href="#" class="text-gray-300 hover:text-gold transition duration-300">Read More →</a>
                        </div>
                    </div>
                    
                    <div class="bg-[#222] rounded-lg overflow-hidden" data-aos="fade-up" data-aos-delay="200">
                        <img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?q=80&w=2880&auto=format&fit=crop" alt="Blog post image" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <p class="text-sm text-gold mb-2">Case Study | June 10, 2024</p>
                            <h3 class="text-xl font-bold text-white mb-3">Sustainable Materials in the Serenity Villa Project</h3>
                            <a href="#" class="text-gray-300 hover:text-gold transition duration-300">Read More →</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="contact" class="py-20">
            <div class="container mx-auto px-6">
                <div class="text-center mb-12" data-aos="fade-up">
                    <h2 class="text-4xl font-bold text-white">Get in Touch</h2>
                    <p class="text-gray-400 mt-2">Let's build something amazing together.</p>
                    <div class="w-20 h-1 bg-gold mx-auto mt-4"></div>
                </div>
                <div class="grid lg:grid-cols-2 gap-12">
                    <div data-aos="fade-right">
                        <form id="contact-form" class="space-y-6">
                            <input type="text" placeholder="Your Name" class="w-full bg-[#222] border border-[#333] rounded-md p-3 text-white focus:outline-none focus:border-gold transition duration-300">
                            <input type="email" placeholder="Your Email" class="w-full bg-[#222] border border-[#333] rounded-md p-3 text-white focus:outline-none focus:border-gold transition duration-300">
                            <input placeholder="Your Message" rows="6" class="w-full bg-[#222] border border-[#333] rounded-md p-3 text-white focus:outline-none focus:border-gold transition duration-300"/>
                            <button type="submit" class="w-full bg-gold text-black font-bold py-3 px-8 rounded-lg text-lg hover:bg-yellow-500 transition duration-300">Send Message</button>
                        </form>
                        <p id="form-message" class="mt-4 text-center"></p>
                    </div>
                    <div data-aos="fade-left" data-aos-delay="200">
                        <div class="rounded-lg overflow-hidden h-full">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.086525999966!2d144.9537353159042!3d-37.81720974202115!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0x5045675218ce7e0!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sus!4v1625842824940!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

<footer class="bg-[#1a1a1a] pt-12 pb-8">
        <div class="container mx-auto px-6 text-center text-gray-400">
            <a href="#" class="text-3xl font-bold text-white tracking-wider mb-4 inline-block">ARCHINOVA</a>
            <div class="flex justify-center space-x-6 mb-8">
                <a href="#" class="hover:text-gold transition duration-300">Facebook</a>
                <a href="#" class="hover:text-gold transition duration-300">Instagram</a>
                <a href="#" class="hover:text-gold transition duration-300">LinkedIn</a>
                <a href="#" class="hover:text-gold transition duration-300">Twitter</a>
            </div>
            <p>© 2024 Archinova Studio. All Rights Reserved. Designed with passion.</p>
        </div>
    </footer>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        // Initialize Animate on Scroll
        AOS.init({
            duration: 800,
            once: true,
            offset: 50,
        });

// Navbar scroll effect
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('nav-scrolled');
            } else {
                navbar.classList.remove('nav-scrolled');
            }
        });

// Mobile menu toggle
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

// Close mobile menu when a link is clicked
        const mobileLinks = mobileMenu.getElementsByTagName('a');
        for (let link of mobileLinks) {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
            });
        }

// Contact form submission
        const contactForm = document.getElementById('contact-form');
        const formMessage = document.getElementById('form-message');
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            formMessage.textContent = 'Thank you for your message! We will get back to you shortly.';
            formMessage.style.color = '#D4AF37';
            contactForm.reset();
            setTimeout(() => {
                formMessage.textContent = '';
            }, 5000);
        });
    </script>
</body>
</html>

Empfohlen

Reisewebsite mit umgekehrtem Rahmenradius

CSS-Textanimation: Echoeffekt

CSS-Code für Ladeanimation mit Augensymbol (HTML)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS