Website-Vorlage für Holzbearbeitung | Tailwind CSS, Artisan Design

405 Metehan

Im Editor öffnen Veröffentlichen Sie Ihren Code

Website-Vorlage für Holzbearbeitung | Tailwind CSS, Artisan Design

Empfohlen

12 October 2025

Beispiel für CSS-Animationsebenen

20 September 2025

HTML-Beispiel für eine CSS-Kugelanimation

20 August 2025

HTML-Vorlage für modernes Design-Blog

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>TimberCraft | Artisan Woodworking</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">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#d4a76a',
                            DEFAULT: '#b78d4a',
                            dark: '#9a7230',
                        },
                        secondary: {
                            light: '#5e4b3c',
                            DEFAULT: '#3e2e23',
                            dark: '#2a1e16',
                        },
                    },
                    fontFamily: {
                        sans: ['Montserrat', 'sans-serif'],
                        serif: ['Playfair Display', 'serif'],
                    },
                    animation: {
                        'fade-in': 'fadeIn 1s ease-in-out',
                        'fade-in-up': 'fadeInUp 1s ease-out',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': {
                                opacity: '0'
                            },
                            '100%': {
                                opacity: '1'
                            },
                        },
                        fadeInUp: {
                            '0%': {
                                opacity: '0',
                                transform: 'translateY(20px)'
                            },
                            '100%': {
                                opacity: '1',
                                transform: 'translateY(0)'
                            },
                        },
                    },
                },
            },
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
        .hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

.hero-overlay {
            background-color: rgba(0, 0, 0, 0.4);
        }

.dark .hero-overlay {
            background-color: rgba(0, 0, 0, 0.6);
        }

.masonry-grid {
            column-count: 3;
            column-gap: 1rem;
        }

@media (max-width: 1024px) {
            .masonry-grid {
                column-count: 2;
            }
        }

@media (max-width: 640px) {
            .masonry-grid {
                column-count: 1;
            }
        }

.masonry-item {
            break-inside: avoid;
            margin-bottom: 1rem;
        }

.parallax {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

.service-card:hover .service-icon {
            transform: rotateY(180deg);
        }

.service-icon {
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

.testimonial-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);
        }

.testimonial-card {
            transition: all 0.3s ease;
        }

.animate-fade-in {
            animation: fadeIn 1s ease-in-out;
        }

.animate-fade-in-up {
            animation: fadeInUp 1s ease-out;
        }

.nav-link::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #d4a76a;
            transition: width .3s;
        }

.nav-link:hover::after {
            width: 100%;
        }

.mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
        }

.mobile-menu.open {
            max-height: 500px;
        }
    </style>
</head>

<body class="bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-200 font-sans transition-colors duration-300">
    
    <nav class="fixed w-full bg-white/90 dark:bg-gray-900/90 backdrop-blur-md z-50 shadow-sm transition-colors duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center mr-2">
                        <i class="fas fa-hammer text-secondary-dark text-xl"></i>
                    </div>
                    <span class="text-xl font-bold text-secondary-dark dark:text-primary-light font-serif">TimberCraft</span>
                </a>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#home" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Home</a>
                <a href="#about" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">About</a>
                <a href="#services" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Services</a>
                <a href="#portfolio" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Portfolio</a>
                <a href="#testimonials" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Testimonials</a>
                <a href="#blog" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Blog</a>
                <a href="#contact" class="nav-link text-secondary-dark dark:text-primary-light hover:text-primary-light dark:hover:text-primary-dark font-medium">Contact</a>
            </div>
            <div class="flex items-center space-x-4">
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
                    <i class="fas fa-moon dark:hidden"></i>
                    <i class="fas fa-sun hidden dark:block"></i>
                </button>
                <button id="mobile-menu-button" class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        
        <div id="mobile-menu" class="mobile-menu md:hidden bg-white dark:bg-gray-800 transition-all duration-300">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
                <a href="#home" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Home</a>
                <a href="#about" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">About</a>
                <a href="#services" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Services</a>
                <a href="#portfolio" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Portfolio</a>
                <a href="#testimonials" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Testimonials</a>
                <a href="#blog" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Blog</a>
                <a href="#contact" class="py-2 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Contact</a>
            </div>
        </div>
    </nav>

<section id="home" class="relative h-screen flex items-center justify-center overflow-hidden">
        <video autoplay muted loop class="hero-video">
            <source src="https://assets.mixkit.co/videos/preview/mixkit-carpenter-sanding-a-wooden-board-22530-large.mp4" type="video/mp4">
        </video>
        <div class="hero-overlay absolute inset-0"></div>
        <div class="container mx-auto px-4 z-10 text-center animate-fade-in-up">
            <h1 class="text-4xl md:text-6xl font-serif font-bold text-white mb-6">Handcrafted Woodwork <span class="text-primary-light">Perfection</span></h1>
            <p class="text-xl md:text-2xl text-gray-200 mb-8 max-w-3xl mx-auto">Where tradition meets innovation in every grain. Custom woodworking crafted with passion and precision.</p>
            <a href="#services" class="bg-primary-light hover:bg-primary-dark text-white font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
                Explore Our Craft <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
        <div class="absolute bottom-10 left-0 right-0 flex justify-center animate-bounce">
            <a href="#about" class="text-white hover:text-primary-light transition-colors">
                <i class="fas fa-chevron-down text-2xl"></i>
            </a>
        </div>
    </section>

<section id="about" class="py-20 bg-gray-50 dark:bg-gray-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">OUR STORY</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">Crafting With Passion Since 1985</h2>
            </div>
            <div class="flex flex-col lg:flex-row items-center gap-12">
                <div class="lg:w-1/2 relative">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="relative h-64 rounded-lg overflow-hidden shadow-lg animate-fade-in">
                            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our workshop" class="w-full h-full object-cover">
                        </div>
                        <div class="relative h-64 rounded-lg overflow-hidden shadow-lg animate-fade-in" style="animation-delay: 0.2s;">
                            <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Craftsman working" class="w-full h-full object-cover">
                        </div>
                        <div class="relative h-64 rounded-lg overflow-hidden shadow-lg animate-fade-in" style="animation-delay: 0.4s;">
                            <img src="https://images.unsplash.com/photo-1583845112208-9b0700e05fc6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Wood materials" class="w-full h-full object-cover">
                        </div>
                        <div class="relative h-64 rounded-lg overflow-hidden shadow-lg animate-fade-in" style="animation-delay: 0.6s;">
                            <img src="https://images.unsplash.com/photo-1606744837616-56c9a5c6a6eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Finished product" class="w-full h-full object-cover">
                        </div>
                    </div>
                </div>
                <div class="lg:w-1/2 animate-fade-in-up">
                    <h3 class="text-2xl font-serif font-bold text-secondary-dark dark:text-white mb-4">The TimberCraft Philosophy</h3>
                    <p class="text-gray-600 dark:text-gray-300 mb-6">Founded by master carpenter Jacob Wilson in 1985, TimberCraft began as a small workshop dedicated to preserving traditional woodworking techniques while embracing modern design sensibilities.</p>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="w-8 h-8 rounded-full bg-primary-light/20 flex items-center justify-center">
                                    <i class="fas fa-check text-primary-light"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <h4 class="text-lg font-medium text-secondary-dark dark:text-white">Sustainable Materials</h4>
                                <p class="text-gray-600 dark:text-gray-300">We source only ethically harvested, FSC-certified wood to ensure our craft respects nature.</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="w-8 h-8 rounded-full bg-primary-light/20 flex items-center justify-center">
                                    <i class="fas fa-check text-primary-light"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <h4 class="text-lg font-medium text-secondary-dark dark:text-white">Artisan Craftsmanship</h4>
                                <p class="text-gray-600 dark:text-gray-300">Each piece is handcrafted by our team of skilled artisans with decades of experience.</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <div class="w-8 h-8 rounded-full bg-primary-light/20 flex items-center justify-center">
                                    <i class="fas fa-check text-primary-light"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <h4 class="text-lg font-medium text-secondary-dark dark:text-white">Lifetime Guarantee</h4>
                                <p class="text-gray-600 dark:text-gray-300">We stand behind our work with a comprehensive guarantee on all craftsmanship.</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-8 flex flex-wrap gap-4">
                        <a href="#contact" class="bg-primary-light hover:bg-primary-dark text-white font-medium py-3 px-6 rounded-full transition-all duration-300 inline-flex items-center">
                            Meet Our Team <i class="fas fa-users ml-2"></i>
                        </a>
                        <a href="#portfolio" class="border border-primary-light text-primary-light hover:bg-primary-light hover:text-white font-medium py-3 px-6 rounded-full transition-all duration-300 inline-flex items-center">
                            View Our Work <i class="fas fa-eye ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="services" class="py-20 bg-white dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">WHAT WE OFFER</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">Our Woodworking Services</h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mt-4">From concept to completion, we provide comprehensive woodworking solutions tailored to your unique vision.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                
                <div class="service-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300">
                    <div class="service-icon w-16 h-16 bg-primary-light/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-couch text-3xl text-primary-light"></i>
                    </div>
                    <h3 class="text-xl font-serif font-bold text-center text-secondary-dark dark:text-white mb-3">Custom Furniture</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center">Bespoke pieces designed to your specifications, crafted with premium materials and timeless techniques.</p>
                    <div class="mt-6 text-center">
                        <a href="#" class="text-primary-light hover:text-primary-dark font-medium inline-flex items-center">
                            Learn More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <div class="service-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300">
                    <div class="service-icon w-16 h-16 bg-primary-light/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-home text-3xl text-primary-light"></i>
                    </div>
                    <h3 class="text-xl font-serif font-bold text-center text-secondary-dark dark:text-white mb-3">Interior Wood Design</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center">Custom millwork, paneling, and architectural elements that elevate your living spaces.</p>
                    <div class="mt-6 text-center">
                        <a href="#" class="text-primary-light hover:text-primary-dark font-medium inline-flex items-center">
                            Learn More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <div class="service-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300">
                    <div class="service-icon w-16 h-16 bg-primary-light/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-history text-3xl text-primary-light"></i>
                    </div>
                    <h3 class="text-xl font-serif font-bold text-center text-secondary-dark dark:text-white mb-3">Wood Restoration</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center">Expert repair and refinishing services to bring new life to your cherished wooden items.</p>
                    <div class="mt-6 text-center">
                        <a href="#" class="text-primary-light hover:text-primary-dark font-medium inline-flex items-center">
                            Learn More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <div class="service-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300">
                    <div class="service-icon w-16 h-16 bg-primary-light/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fas fa-chess-queen text-3xl text-primary-light"></i>
                    </div>
                    <h3 class="text-xl font-serif font-bold text-center text-secondary-dark dark:text-white mb-3">Decorative Details</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center">Intricate carvings, inlays, and ornamental woodwork that adds character to any space.</p>
                    <div class="mt-6 text-center">
                        <a href="#" class="text-primary-light hover:text-primary-dark font-medium inline-flex items-center">
                            Learn More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mt-16 text-center">
                <a href="#contact" class="bg-primary-light hover:bg-primary-dark text-white font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
                    Get a Free Consultation <i class="fas fa-calendar-check ml-2"></i>
                </a>
            </div>
        </div>
    </section>

<section id="portfolio" class="py-20 bg-gray-50 dark:bg-gray-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">OUR WORK</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">Crafted With Precision</h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mt-4">Explore our gallery of completed projects that showcase the quality and diversity of our craftsmanship.</p>
            </div>
            <div class="mb-8 flex justify-center">
                <div class="inline-flex rounded-md shadow-sm">
                    <button type="button" class="portfolio-filter px-4 py-2 text-sm font-medium rounded-l-lg border border-primary-light bg-primary-light text-white" data-filter="all">
                        All Works
                    </button>
                    <button type="button" class="portfolio-filter px-4 py-2 text-sm font-medium border-t border-b border-primary-light text-primary-light hover:bg-primary-light/10" data-filter="furniture">
                        Furniture
                    </button>
                    <button type="button" class="portfolio-filter px-4 py-2 text-sm font-medium border-t border-b border-primary-light text-primary-light hover:bg-primary-light/10" data-filter="interiors">
                        Interiors
                    </button>
                    <button type="button" class="portfolio-filter px-4 py-2 text-sm font-medium border-t border-b border-primary-light text-primary-light hover:bg-primary-light/10" data-filter="restoration">
                        Restoration
                    </button>
                    <button type="button" class="portfolio-filter px-4 py-2 text-sm font-medium rounded-r-lg border border-primary-light text-primary-light hover:bg-primary-light/10" data-filter="decorative">
                        Decorative
                    </button>
                </div>
            </div>
            <div class="masonry-grid">
                
                <div class="masonry-item portfolio-item furniture">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Custom dining table" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">Walnut Dining Table</h3>
                                <p class="text-gray-200">Custom 8-seater with butterfly joints</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="masonry-item portfolio-item interiors">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1600210492493-0946911123ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Wooden wall paneling" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">Oak Wall Paneling</h3>
                                <p class="text-gray-200">Custom designed for a modern loft</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="masonry-item portfolio-item restoration">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1604754742629-3e5728249d73?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Restored antique chair" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">19th Century Chair</h3>
                                <p class="text-gray-200">Complete restoration with traditional methods</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="masonry-item portfolio-item decorative">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1606744837616-56c9a5c6a6eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Wooden sculpture" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">Abstract Sculpture</h3>
                                <p class="text-gray-200">Hand-carved from a single piece of cherry</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="masonry-item portfolio-item furniture">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Custom bookshelf" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">Floor-to-Ceiling Bookshelf</h3>
                                <p class="text-gray-200">Custom designed for a private library</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="masonry-item portfolio-item interiors">
                    <div class="relative rounded-lg overflow-hidden shadow-lg group">
                        <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Kitchen cabinetry" class="w-full h-auto transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <div class="text-center p-4">
                                <h3 class="text-white text-xl font-serif font-bold mb-2">Custom Kitchen Cabinets</h3>
                                <p class="text-gray-200">Handcrafted maple with walnut accents</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-12 text-center">
                <a href="#contact" class="border border-primary-light text-primary-light hover:bg-primary-light hover:text-white font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
                    Start Your Project <i class="fas fa-hammer ml-2"></i>
                </a>
            </div>
        </div>
    </section>

<section id="testimonials" class="py-20 bg-white dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">CLIENT VOICES</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">What Our Clients Say</h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mt-4">The satisfaction of our clients is the true measure of our success. Here's what they have to say about working with us.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="testimonial-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md">
                    <div class="flex items-center mb-6">
                        <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full object-cover">
                        <div class="ml-4">
                            <h4 class="text-lg font-bold text-secondary-dark dark:text-white">Sarah Johnson</h4>
                            <p class="text-gray-500 dark:text-gray-400">Interior Designer</p>
                        </div>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mb-6">"TimberCraft transformed my vision into reality with their exquisite custom dining table. The craftsmanship is impeccable, and their attention to detail is unmatched."</p>
                    <div class="flex text-yellow-400">
                        <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>
                
                <div class="testimonial-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md">
                    <div class="flex items-center mb-6">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full object-cover">
                        <div class="ml-4">
                            <h4 class="text-lg font-bold text-secondary-dark dark:text-white">Michael Chen</h4>
                            <p class="text-gray-500 dark:text-gray-400">Homeowner</p>
                        </div>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mb-6">"The restoration work on my grandfather's antique desk was breathtaking. They preserved its history while making it functional for today. Truly masters of their craft."</p>
                    <div class="flex text-yellow-400">
                        <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>
                
                <div class="testimonial-card bg-gray-50 dark:bg-gray-800 rounded-xl p-8 shadow-md">
                    <div class="flex items-center mb-6">
                        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emily Rodriguez" class="w-12 h-12 rounded-full object-cover">
                        <div class="ml-4">
                            <h4 class="text-lg font-bold text-secondary-dark dark:text-white">Emily Rodriguez</h4>
                            <p class="text-gray-500 dark:text-gray-400">Architect</p>
                        </div>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mb-6">"I've collaborated with TimberCraft on multiple projects. Their professionalism, communication, and ability to execute complex architectural woodwork is second to none."</p>
                    <div class="flex text-yellow-400">
                        <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>
            </div>
        </div>
    </section>

<section id="blog" class="py-20 bg-gray-50 dark:bg-gray-800">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">OUR JOURNAL</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">From the Workshop</h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mt-4">Insights, stories, and tips from our master craftsmen. A look behind the scenes at TimberCraft.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden group">
                    <img src="https://images.unsplash.com/photo-1595504136421-8292d07a16a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wood grains" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300">
                    <div class="p-6">
                        <p class="text-sm text-gray-500 dark:text-gray-400">July 15, 2024</p>
                        <h3 class="text-xl font-serif font-bold text-secondary-dark dark:text-white mt-2 mb-3">Choosing the Right Wood: A Guide</h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4">Understanding the characteristics of different woods is key to a successful project. We explore the differences...</p>
                        <a href="#" class="font-medium text-primary-light hover:text-primary-dark">Read More →</a>
                    </div>
                </div>
                
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden group">
                    <img src="https://images.unsplash.com/photo-1506782081239-583915d3a512?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wood joinery" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300">
                    <div class="p-6">
                        <p class="text-sm text-gray-500 dark:text-gray-400">June 28, 2024</p>
                        <h3 class="text-xl font-serif font-bold text-secondary-dark dark:text-white mt-2 mb-3">The Art of Dovetail Joints</h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4">A hallmark of fine craftsmanship, the dovetail joint is both strong and beautiful. Learn about its history and use...</p>
                        <a href="#" class="font-medium text-primary-light hover:text-primary-dark">Read More →</a>
                    </div>
                </div>
                
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden group">
                    <img src="https://images.unsplash.com/photo-1581091220250-92a832189e3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wood finishing" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300">
                    <div class="p-6">
                        <p class="text-sm text-gray-500 dark:text-gray-400">June 10, 2024</p>
                        <h3 class="text-xl font-serif font-bold text-secondary-dark dark:text-white mt-2 mb-3">5 Tips for a Perfect Wood Finish</h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4">The final finish can make or break a piece. Our experts share their secrets for a durable and beautiful result...</p>
                        <a href="#" class="font-medium text-primary-light hover:text-primary-dark">Read More →</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-white dark:bg-gray-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-primary-light font-medium">GET IN TOUCH</span>
                <h2 class="text-3xl md:text-4xl font-serif font-bold text-secondary-dark dark:text-white mt-2">Let's Create Something Together</h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mt-4">Have an idea for a project? We'd love to hear about it. Contact us for a free, no-obligation consultation.</p>
            </div>
            <div class="max-w-4xl mx-auto bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-lg">
                <form action="#" method="POST">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
                            <input type="text" name="name" id="name" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary-light focus:ring-primary-light dark:bg-gray-700">
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                            <input type="email" name="email" id="email" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary-light focus:ring-primary-light dark:bg-gray-700">
                        </div>
                        <div class="md:col-span-2">
                            <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Subject</label>
                            <input type="text" name="subject" id="subject" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary-light focus:ring-primary-light dark:bg-gray-700">
                        </div>
                        <div class="md:col-span-2">
                            <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
                            <input id="message" name="message" rows="4" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary-light focus:ring-primary-light dark:bg-gray-700"/>
                        </div>
                    </div>
                    <div class="mt-6 text-right">
                        <button type="submit" class="bg-primary-light hover:bg-primary-dark text-white font-bold py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
                            Send Message <i class="fas fa-paper-plane ml-2"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

<footer class="bg-secondary-dark text-gray-300">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-serif font-bold text-white mb-4">TimberCraft</h3>
                    <p class="text-sm text-gray-400">Handcrafted woodwork perfection since 1985. Passion and precision in every grain.</p>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest-p"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-serif font-bold text-white mb-4">Quick Links</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#about" class="text-gray-400 hover:text-white">About Us</a></li>
                        <li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li>
                        <li><a href="#portfolio" class="text-gray-400 hover:text-white">Portfolio</a></li>
                        <li><a href="#blog" class="text-gray-400 hover:text-white">Blog</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-serif font-bold text-white mb-4">Contact Us</h3>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li class="flex items-start"><i class="fas fa-map-marker-alt mt-1 mr-2"></i>123 Woodwork Lane, Artisan City, 10101</li>
                        <li class="flex items-start"><i class="fas fa-phone mt-1 mr-2"></i>(555) 123-4567</li>
                        <li class="flex items-start"><i class="fas fa-envelope mt-1 mr-2"></i>contact@timbercraft.com</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-serif font-bold text-white mb-4">Newsletter</h3>
                    <p class="text-sm text-gray-400 mb-2">Subscribe for workshop updates and special offers.</p>
                    <form>
                        <div class="flex">
                            <input type="email" placeholder="Your Email" class="w-full px-3 py-2 text-sm text-gray-800 rounded-l-md focus:outline-none">
                            <button type="submit" class="bg-primary-light hover:bg-primary-dark text-white px-4 rounded-r-md">→</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="mt-8 border-t border-gray-700 pt-6 text-center text-sm text-gray-500">
                <p>© 2024 TimberCraft. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

themeToggle.addEventListener('click', () => {
            html.classList.toggle('dark');
            localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
        });

// On page load, check for saved theme
        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
        } else {
            html.classList.remove('dark');
        }
        
        // Mobile Menu
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const mobileMenuLinks = mobileMenu.querySelectorAll('a');

mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('open');
        });

// Close mobile menu when a link is clicked
        mobileMenuLinks.forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.remove('open');
            });
        });

// Portfolio Filter
        const filterButtons = document.querySelectorAll('.portfolio-filter');
        const portfolioItems = document.querySelectorAll('.portfolio-item');

filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                const filter = button.dataset.filter;

// Update button styles
                filterButtons.forEach(btn => {
                    btn.classList.remove('bg-primary-light', 'text-white');
                    btn.classList.add('text-primary-light', 'hover:bg-primary-light/10');
                });
                button.classList.add('bg-primary-light', 'text-white');
                button.classList.remove('text-primary-light', 'hover:bg-primary-light/10');

// Filter items
                portfolioItems.forEach(item => {
                    if (filter === 'all' || item.classList.contains(filter)) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
    </script>

</body>

</html>

Empfohlen

Beispiel für CSS-Animationsebenen

HTML-Beispiel für eine CSS-Kugelanimation

HTML-Vorlage für modernes Design-Blog

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS