A Code by Metehan

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atelier | Modern Architecture Studio</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=Montserrat:wght@300;400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
        
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #f9f9f9;
            color: #333;
            overflow-x: hidden;
        }
        
        .hero-image {
            background-image: url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            height: 100vh;
        }
        
        .project-card {
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
        }
        
        .project-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 14px 28px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.05);
        }
        
        .project-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
            padding: 2rem;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .project-card:hover .project-overlay {
            transform: translateY(0);
        }
        
        .nav-link {
            position: relative;
            padding-bottom: 5px;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #111;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fade-up {
            animation: fadeInUp 0.8s ease forwards;
        }
        
        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }
        
        .text-outline {
            -webkit-text-stroke: 1px #fff;
            color: transparent;
        }
        
        .service-icon {
            transition: all 0.3s ease;
        }
        
        .service-card:hover .service-icon {
            transform: scale(1.1);
            color: #111;
        }
        
        .testimonial-card {
            transition: all 0.3s ease;
        }
        
        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    
    <nav class="bg-white fixed w-full z-50">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                <div class="flex-shrink-0">
                    <h1 class="text-2xl font-bold font-serif">ATELIER</h1>
                </div>
                
                <div class="hidden md:flex items-center space-x-10">
                    <a href="#" class="nav-link text-gray-700 hover:text-black">Work</a>
                    <a href="#" class="nav-link text-gray-700 hover:text-black">Studio</a>
                    <a href="#" class="nav-link text-gray-700 hover:text-black">Approach</a>
                    <a href="#" class="nav-link text-gray-700 hover:text-black">Journal</a>
                    <a href="#" class="nav-link text-gray-700 hover:text-black">Contact</a>
                    <button class="bg-black text-white px-6 py-2 hover:bg-gray-800 transition duration-300">
                        Start a Project
                    </button>
                </div>
                
                <div class="md:hidden">
                    <button class="text-gray-700 focus:outline-none">
                        <svg class="h-6 w-6" 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>

<div class="hero-image relative">
        <div class="absolute inset-0 bg-black bg-opacity-30"></div>
        <div class="relative h-full flex items-center">
            <div class="max-w-7xl mx-auto px-6 w-full">
                <div class="max-w-2xl">
                    <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 animate-fade-up">
                        <span class="text-outline">Designing</span><br>
                        <span class="text-white">the future</span>
                    </h1>
                    <p class="text-xl text-white mb-8 max-w-lg animate-fade-up delay-1">
                        We create architecture that responds to its context, enhances human experience, and stands as timeless art.
                    </p>
                    <div class="flex space-x-4 animate-fade-up delay-2">
                        <a href="#" class="bg-white hover:bg-gray-100 text-black px-8 py-3 font-medium transition duration-300">
                            View Projects
                        </a>
                        <a href="#" class="border border-white hover:bg-white hover:text-black text-white px-8 py-3 font-medium transition duration-300">
                            Our Process
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

<section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex justify-between items-end mb-16">
                <div>
                    <h2 class="text-3xl font-bold mb-2 animate-fade-up">Selected Works</h2>
                    <p class="text-gray-500 animate-fade-up delay-1">Our most recent and notable projects</p>
                </div>
                <a href="#" class="text-black hover:underline hidden md:block animate-fade-up delay-2">
                    View All Projects →
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                
                <div class="project-card h-96 bg-gray-100 animate-fade-up delay-1">
                    <div class="h-full w-full bg-cover bg-center" 
                         style="background-image: url('https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')">
                        <div class="project-overlay text-white">
                            <h3 class="text-2xl font-bold mb-2">Cliffside Residence</h3>
                            <p class="mb-4">Malibu, California</p>
                            <a href="#" class="text-white hover:underline">Explore Project →</a>
                        </div>
                    </div>
                </div>
                
                
                <div class="project-card h-96 bg-gray-100 animate-fade-up delay-2">
                    <div class="h-full w-full bg-cover bg-center" 
                         style="background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2053&q=80')">
                        <div class="project-overlay text-white">
                            <h3 class="text-2xl font-bold mb-2">Urban Arts Center</h3>
                            <p class="mb-4">Brooklyn, New York</p>
                            <a href="#" class="text-white hover:underline">Explore Project →</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-8 md:hidden animate-fade-up delay-3">
                <a href="#" class="text-black hover:underline">
                    View All Projects →
                </a>
            </div>
        </div>
    </section>

<section class="py-24 bg-gray-100">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <div class="animate-fade-up">
                    <h2 class="text-3xl font-bold mb-6">The Atelier Approach</h2>
                    <p class="text-gray-600 mb-6">
                        Founded in 2012, Atelier is an internationally recognized architecture practice with studios in New York, Los Angeles, and London. Our team of architects, designers, and thinkers collaborate across disciplines to create meaningful spaces.
                    </p>
                    <p class="text-gray-600 mb-8">
                        We believe in architecture that tells a story, responds to its environment, and improves the lives of those who experience it. Our process combines rigorous research, technical innovation, and artistic vision.
                    </p>
                    <a href="#" class="inline-block border-b border-black pb-1 text-black font-medium hover:opacity-80 transition duration-300">
                        Learn About Our Process
                    </a>
                </div>
                
                <div class="grid grid-cols-2 gap-4 animate-fade-up delay-1">
                    <div class="bg-white p-8 h-48 flex flex-col justify-between">
                        <h3 class="text-4xl font-bold">50+</h3>
                        <p class="text-gray-600">Team Members</p>
                    </div>
                    <div class="bg-black text-white p-8 h-48 flex flex-col justify-between">
                        <h3 class="text-4xl font-bold">15</h3>
                        <p class="text-gray-300">International Awards</p>
                    </div>
                    <div class="bg-black text-white p-8 h-48 flex flex-col justify-between">
                        <h3 class="text-4xl font-bold">120+</h3>
                        <p class="text-gray-300">Projects Completed</p>
                    </div>
                    <div class="bg-white p-8 h-48 flex flex-col justify-between">
                        <h3 class="text-4xl font-bold">8</h3>
                        <p class="text-gray-600">Countries</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-16 animate-fade-up">
                <h2 class="text-3xl font-bold mb-4">Our Services</h2>
                <p class="text-gray-500 max-w-2xl mx-auto">
                    Comprehensive architectural solutions tailored to your vision and needs
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="service-card bg-gray-50 p-8 hover:bg-white hover:shadow-lg transition duration-300 animate-fade-up delay-1">
                    <div class="service-icon text-4xl mb-6 text-gray-400">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Residential Architecture</h3>
                    <p class="text-gray-600">
                        Custom homes, renovations, and multi-family housing that combine beauty, functionality, and sustainability.
                    </p>
                </div>
                
                <div class="service-card bg-gray-50 p-8 hover:bg-white hover:shadow-lg transition duration-300 animate-fade-up delay-2">
                    <div class="service-icon text-4xl mb-6 text-gray-400">
                        <i class="fas fa-building"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Commercial Design</h3>
                    <p class="text-gray-600">
                        Office spaces, retail environments, and mixed-use developments designed for business success.
                    </p>
                </div>
                
                <div class="service-card bg-gray-50 p-8 hover:bg-white hover:shadow-lg transition duration-300 animate-fade-up delay-3">
                    <div class="service-icon text-4xl mb-6 text-gray-400">
                        <i class="fas fa-city"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Urban Planning</h3>
                    <p class="text-gray-600">
                        Comprehensive master planning and urban design strategies for communities and cities.
                    </p>
                </div>
            </div>
        </div>
    </section>

<section class="py-24 bg-black text-white">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-16 animate-fade-up">
                <h2 class="text-3xl font-bold mb-4">Client Experiences</h2>
                <p class="text-gray-400 max-w-2xl mx-auto">
                    What our clients say about working with Atelier
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="testimonial-card bg-gray-900 p-8 animate-fade-up delay-1">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 rounded-full bg-gray-700 mr-4 overflow-hidden">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-bold">Emma Richardson</h4>
                            <p class="text-gray-400 text-sm">Founder, Verde Living</p>
                        </div>
                    </div>
                    <p class="text-gray-300">
                        "Atelier's ability to balance aesthetic vision with practical functionality is unmatched. They transformed our outdated space into a modern masterpiece."
                    </p>
                </div>
                
                <div class="testimonial-card bg-gray-900 p-8 animate-fade-up delay-2">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 rounded-full bg-gray-700 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">James Wilson</h4>
                            <p class="text-gray-400 text-sm">CEO, Urban Developments</p>
                        </div>
                    </div>
                    <p class="text-gray-300">
                        "Their sustainable design solutions not only reduced our environmental impact but also resulted in significant operational cost savings."
                    </p>
                </div>
                
                <div class="testimonial-card bg-gray-900 p-8 animate-fade-up delay-3">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 rounded-full bg-gray-700 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">Sophia Chen</h4>
                            <p class="text-gray-400 text-sm">Director, Harbor Properties</p>
                        </div>
                    </div>
                    <p class="text-gray-300">
                        "From concept to completion, Atelier demonstrated exceptional creativity and professionalism. We've worked with them on multiple projects."
                    </p>
                </div>
            </div>
        </div>
    </section>

<section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex justify-between items-end mb-16 animate-fade-up">
                <div>
                    <h2 class="text-3xl font-bold mb-2">From the Journal</h2>
                    <p class="text-gray-500">Insights and perspectives from our studio</p>
                </div>
                <a href="#" class="text-black hover:underline hidden md:block">
                    View All Articles →
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="animate-fade-up delay-1">
                    <div class="h-64 bg-gray-100 mb-4 bg-cover bg-center" 
                         style="background-image: url('https://images.unsplash.com/photo-1513519245088-0e12902e5a38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')"></div>
                    <h3 class="text-xl font-bold mb-2">The Future of Sustainable Materials</h3>
                    <p class="text-gray-500 mb-4">Exploring innovative materials that reduce environmental impact</p>
                    <a href="#" class="text-black hover:underline">Read Article →</a>
                </div>
                
                <div class="animate-fade-up delay-2">
                    <div class="h-64 bg-gray-100 mb-4 bg-cover bg-center" 
                         style="background-image: url('https://images.unsplash.com/photo-1600607688969-a5bfcd646554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')"></div>
                    <h3 class="text-xl font-bold mb-2">Urban Density and Quality of Life</h3>
                    <p class="text-gray-500 mb-4">Design strategies for high-density living environments</p>
                    <a href="#" class="text-black hover:underline">Read Article →</a>
                </div>
                
                <div class="animate-fade-up delay-3">
                    <div class="h-64 bg-gray-100 mb-4 bg-cover bg-center" 
                         style="background-image: url('https://images.unsplash.com/photo-1600566752229-250d1d0a7f22?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')"></div>
                    <h3 class="text-xl font-bold mb-2">The Art of Architectural Lighting</h3>
                    <p class="text-gray-500 mb-4">How lighting transforms spaces and experiences</p>
                    <a href="#" class="text-black hover:underline">Read Article →</a>
                </div>
            </div>
            
            <div class="mt-8 md:hidden animate-fade-up delay-4">
                <a href="#" class="text-black hover:underline">
                    View All Articles →
                </a>
            </div>
        </div>
    </section>

<section class="py-24 bg-gray-100">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
                <div class="animate-fade-up">
                    <h2 class="text-3xl font-bold mb-6">Start a Conversation</h2>
                    <p class="text-gray-600 mb-8 max-w-lg">
                        Interested in working with us or learning more about our services? We'd love to hear about your project.
                    </p>
                    
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="text-xl mr-4 text-gray-400">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">Our Studios</h4>
                                <p class="text-gray-600">New York • Los Angeles • London</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="text-xl mr-4 text-gray-400">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">Email Us</h4>
                                <p class="text-gray-600">hello@atelier.com</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="text-xl mr-4 text-gray-400">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 mb-1">Call Us</h4>
                                <p class="text-gray-600">+1 (212) 555-0199</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="animate-fade-up delay-1">
                    <form class="bg-white p-8">
                        <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-3 border border-gray-300 focus:outline-none focus:border-black">
                            </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-3 border border-gray-300 focus:outline-none focus:border-black">
                            </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-3 border border-gray-300 focus:outline-none focus:border-black">
                        </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-3 border border-gray-300 focus:outline-none focus:border-black"/>
                        </div>
                        
                        <button type="submit" class="w-full bg-black text-white py-3 hover:bg-gray-800 transition duration-300">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-black text-white py-16">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-16">
                <div>
                    <h3 class="text-2xl font-bold mb-4">ATELIER</h3>
                    <p class="text-gray-400">
                        Creating architecture that inspires and endures.
                    </p>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">Studio</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Team</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Approach</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">Work</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Residential</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Commercial</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Urban</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">All Projects</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">Connect</h4>
                    <div class="flex space-x-4 mb-6">
                        <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-xl">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-xl">
                            <i class="fab fa-linkedin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-xl">
                            <i class="fab fa-pinterest"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-xl">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                    
                    <h4 class="font-bold mb-4">Newsletter</h4>
                    <div class="flex">
                        <input type="email" placeholder="Your email" class="px-4 py-3 w-full bg-gray-900 text-white focus:outline-none">
                        <button class="bg-white text-black px-4 py-3 hover:bg-gray-200 transition duration-300">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 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-500 hover:text-white text-sm transition duration-300">Privacy Policy</a>
                    <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">Terms of Service</a>
                    <a href="#" class="text-gray-500 hover:text-white text-sm transition duration-300">Cookies</a>
                </div>
            </div>
        </div>
    </footer>

A Code by Metehan

Recommended

HTML Gradient Card

Brutalist Video Player

HTML Animation Container Example

HTML

CSS

JS

Recommended

HTML Gradient Card

Brutalist Video Player

HTML Animation Container Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS