208 lines
13 KiB
HTML
208 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Architekten-Portfolio: Form & Fundament</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
/* Custom configuration for Tailwind */
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
'primary-stone': '#4a4a4a',
|
||
'secondary-sand': '#e0d4c8',
|
||
'accent-terracotta': '#c07c5c',
|
||
'dark-charcoal': '#1a1a1a',
|
||
},
|
||
fontFamily: {
|
||
serif: ['Playfair Display', 'serif'],
|
||
sans: ['Inter', 'sans-serif'],
|
||
},
|
||
keyframes: {
|
||
'fade-in': {
|
||
'from': { opacity: 0, transform: 'translateY(20px)' },
|
||
'to': { opacity: 1, transform: 'translateY(0)' },
|
||
},
|
||
'border-pulse': {
|
||
'0%,': { 'box-shadow': '0 0 0 0 rgba(192, 124, 92, 0.5)' },
|
||
'50%': { 'box-shadow': '0 0 0 10px rgba(192, 124, 92, 0)' },
|
||
'100%': { 'box-shadow': '0 0 0 0 rgba(192, 124, 92, 0)' },
|
||
}
|
||
},
|
||
animation: {
|
||
'fade-in-up': 'fade-in 1s ease-out',
|
||
'pulse-border': 'border-pulse 3s infinite',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Custom styles */
|
||
.portfolio-card:hover {
|
||
transform: translateY(-8px) scale(1.02);
|
||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
|
||
}
|
||
.nav-link:hover {
|
||
border-bottom: 3px solid #c07c5c;
|
||
}
|
||
.btn-primary {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.btn-primary:hover {
|
||
background-color: #c07c5c;
|
||
transform: translateY(-2px);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-secondary-sand text-dark-charcoal font-sans antialiased">
|
||
|
||
<header class="sticky top-0 z-50 bg-dark-charcoal bg-opacity-95 shadow-lg">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-between items-center h-20">
|
||
<!-- Logo/Name -->
|
||
<h1 class="text-3xl font-serif font-bold text-white tracking-widest cursor-pointer" onclick="document.getElementById('hero').scrollIntoView({ behavior: 'smooth' })">
|
||
ARCHITEKT.haus
|
||
</h1>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="flex space-x-8">
|
||
<a href="#projekte" class="nav-link text-lg hover:text-white transition duration-200 border-b-2 border-transparent">Projekte</a>
|
||
<a href="#philosophie" class="nav-link text-lg hover:text-white transition duration-200 border-b-2 border-transparent">Philosophie</a>
|
||
<a href="#kontakt" class="nav-link text-lg hover:text-white transition duration-200 border-b-2 border-transparent">Kontakt</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Hero Section -->
|
||
<section id="hero" class="relative h-[70vh] flex items-center justify-center bg-cover bg-center"
|
||
style="background-image: url('https://images.unsplash.com/photo-1581377386568-9d480a54e8a8?w=1600&auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
|
||
|
||
<!-- Overlay for better text contrast -->
|
||
<div class="absolute inset-0 bg-dark-charcoal bg-opacity-40"></div>
|
||
|
||
<div class="relative z-10 text-center px-4">
|
||
<h2 class="text-6xl md:text-8xl font-serif text-white drop-shadow-lg leading-tight animate-fade-in-up">
|
||
Form & Fundament
|
||
</h2>
|
||
<p class="mt-4 text-xl md:text-2xl text-secondary-sand font-light tracking-widest animate-fade-in-up" style="animation-delay: 0.5s;">
|
||
Architektonische Klarheit. Nachhaltiges Design.
|
||
</p>
|
||
<a href="#projekte" class="btn-primary mt-8 inline-block bg-accent-terracotta text-dark-charcoal font-semibold py-3 px-8 text-lg rounded-lg shadow-lg transition duration-300">
|
||
Projekte entdecken
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Portfolio Section -->
|
||
<section id="projekte" 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-up" style="animation-delay: 0.2s;">
|
||
<h3 class="text-5xl font-serif text-primary-stone mb-3">Unsere Arbeiten</h3>
|
||
<p class="text-xl text-gray-600">Ein Blick in ausgewählte Bauvorhaben, die Tradition und Moderne vereinen.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||
|
||
<!-- Projekt 1 -->
|
||
<div class="portfolio-card bg-white shadow-xl rounded-xl overflow-hidden cursor-pointer transform transition duration-300 border-t-8 border-accent-terracotta"
|
||
style="animation: fade-in-up 1s ease-out 0.3s;">
|
||
<div class="relative overflow-hidden">
|
||
<img src="https://images.unsplash.com/photo-1542751371-adc314580f67?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bW9kZHxlbnwwfDB8MHx8fDA%3D"
|
||
alt="Modernes Wohnhaus in Holzoptik" class="w-full h-72 object-cover transition duration-500 hover:scale-105">
|
||
<div class="absolute inset-0 bg-dark-charcoal bg-opacity-20 hover:bg-opacity-40 transition duration-300 flex items-center justify-center">
|
||
<p class="text-white text-lg font-semibold tracking-widest">Mehr erfahren</p>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 text-center bg-gray-50">
|
||
<h4 class="text-2xl font-serif text-primary-stone mb-2">Wohnensemble 'Waldlicht'</h4>
|
||
<p class="text-gray-500 mb-4">Nachhaltiges Familienhaus mit Fokus auf natürliche Materialien und Lichtführung.</p>
|
||
<span class="inline-block bg-accent-terracotta text-white text-sm font-medium py-1 px-3 rounded-full">Wohnbau</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Projekt 2 -->
|
||
<div class="portfolio-card bg-white shadow-xl rounded-xl overflow-hidden cursor-pointer transform transition duration-300 border-t-8 border-primary-stone"
|
||
style="animation: fade-in-up 1s ease-out 0.6s;">
|
||
<div class="relative overflow-hidden">
|
||
<img src="https://images.unsplash.com/photo-1520085170860-5007c072029f?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZGlzY2FwZXJ8ZW58MHx8fDA%3D"
|
||
alt="Elegantes Bürogebäude mit Steinfassade" class="w-full h-72 object-cover transition duration-500 hover:scale-105">
|
||
<div class="absolute inset-0 bg-dark-charcoal bg-opacity-20 hover:bg-opacity-40 transition duration-300 flex items-center justify-center">
|
||
<p class="text-white text-lg font-semibold tracking-widest">Mehr erfahren</p>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 text-center bg-gray-50">
|
||
<h4 class="text-2xl font-serif text-primary-stone mb-2">Bürokomplex 'Steinburg'</h4>
|
||
<p class="text-gray-500 mb-4">Ein repräsentativer Raum für moderne Unternehmensstrukturen in urbaner Umgebung.</p>
|
||
<span class="inline-block bg-primary-stone text-white text-sm font-medium py-1 px-3 rounded-full">Kommerziell</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Projekt 3 -->
|
||
<div class="portfolio-card bg-white shadow-xl rounded-xl overflow-hidden cursor-pointer transform transition duration-300 border-t-8 border-accent-terracotta"
|
||
style="animation: fade-in-up 1s ease-out 0.9s;">
|
||
<div class="relative overflow-hidden">
|
||
<img src="https://images.unsplash.com/photo-1533109012210-82f4d598a1f5?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8c2VydmljZSUyMGRpZXNlcnxlbnwwfDB8MHx8fDA%3D"
|
||
alt="Rustikales Ferienhaus mit Dachüberstand" class="w-full h-72 object-cover transition duration-500 hover:scale-105">
|
||
<div class="absolute inset-0 bg-dark-charcoal bg-opacity-20 hover:bg-opacity-40 transition duration-300 flex items-center justify-center">
|
||
<p class="text-white text-lg font-semibold tracking-widest">Mehr erfahren</p>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 text-center bg-gray-50">
|
||
<h4 class="text-2xl font-serif text-primary-stone mb-2">Ferienhaus 'Alpenruh'</h4>
|
||
<p class="text-gray-500 mb-4">Ein Rückzugsort, der lokale Traditionen und moderne Komfortansprüche integriert.</p>
|
||
<span class="inline-block bg-primary-stone text-white text-sm font-medium py-1 px-3 rounded-full">Freizeitinfrastruktur</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Philosophy Section -->
|
||
<section id="philosophie" class="py-24 bg-secondary-sand">
|
||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<h3 class="text-4xl font-serif text-dark-charcoal mb-3">Unsere Philosophie</h3>
|
||
<p class="text-lg text-primary-stone">Mehr als nur Bauen – wir gestalten Lebensräume und funktionale Strukturen.</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
|
||
<!-- Wert 1 -->
|
||
<div class="text-center p-8 bg-white shadow-lg rounded-lg border-t-4 border-accent-terracotta transition duration-300 hover:shadow-2xl hover:border-accent-terracotta transform hover:scale-105">
|
||
<div class="text-6xl mb-4 text-accent-terracotta">🏛️</div>
|
||
<h4 class="text-2xl font-serif text-dark-charcoal mb-2">Authentizität</h4>
|
||
<p class="text-gray-600">Wir setzen auf Materialien und Formen, die eine tiefe, erdige Ehrlichkeit vermitteln. Jede Linie hat eine Geschichte.</p>
|
||
</div>
|
||
|
||
<!-- Wert 2 -->
|
||
<div class="text-center p-8 bg-white shadow-lg rounded-lg border-t-4 border-primary-stone transition duration-300 hover:shadow-2xl hover:border-primary-stone transform hover:scale-105">
|
||
<div class="text-6xl mb-4 text-primary-stone">🌿</div>
|
||
<h4 class="text-2xl font-serif text-dark-charcoal mb-2">Nachhaltigkeit</h4>
|
||
<p class="text-gray-600">Energieeffizienz und die Verwendung regionaler, langlebiger Baumaterialien sind unser täglicher Standard.</p>
|
||
</div>
|
||
|
||
<!-- Wert 3 -->
|
||
<div class="text-center p-8 bg-white shadow-lg rounded-lg border-t-4 border-accent-terracotta transition duration-300 hover:shadow-2xl hover:border-accent-terracotta transform hover:scale-105">
|
||
<div class="text-6xl mb-4 text-accent-terracotta">📐</div>
|
||
<h4 class="text-2xl font-serif text-dark-charcoal mb-2">Klarheit</h4>
|
||
<p class="text-gray-600">Komplexe Ideen destillieren wir auf ihre essenziellsten architektonischen Ausdrucksformen herunter.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Kontakt Section -->
|
||
<section id="kontakt" class="py-24 bg-white">
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="text-center mb-12">
|
||
<h3 class="text-5xl font-serif text-dark-charcoal mb-3">Projekt starten</h3>
|
||
<p class="text-xl text-primary-stone">Ihre Vision ist unsere Leinwand. Nehmen Sie Kontakt auf für ein Erstgespräch.</p>
|
||
</div>
|
||
|
||
<div class="bg-gray-50 p-8 sm:<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 29.60s</div> |