[studio]

<title>Aperture Studios | Professional Photography</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=Montserrat:wght@300;400;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: Warm Neutral (Off-white, Charcoal, Muted Gold Accent) -->
<!-- Application Structure Plan: A single-page application with four distinct, scrollable sections: Home (full-screen hero slideshow), Services (interactive grid), Gallery (filterable with lightbox), and Contact. A fixed top navigation allows smooth scrolling to each section. This structure condenses the original 3-page concept into a fluid, modern SPA, allowing users to see the studio's best work and offerings in a single, continuous experience, which is more engaging than clicking between pages. -->
<!-- Visualization & Content Choices: Hero Section -> Goal: Impress -> Presentation: Full-screen JS slideshow -> Interaction: Passive visual -> Justification: Creates an immediate, high-impact first impression. Services Section -> Goal: Inform -> Presentation: CSS Grid of cards -> Interaction: Hover effects -> Justification: Cleanly organizes offerings. Gallery Section -> Goal: Showcase/Organize -> Presentation: CSS Grid with a Modal Lightbox -> Interaction: JS-powered category filtering and lightbox navigation -> Justification: Allows users to easily explore the portfolio without leaving the page. Contact Section -> Goal: Action -> Presentation: Two-column layout with form -> Interaction: Standard form -> Justification: Clear and direct path to inquiry. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Montserrat', sans-serif;
background-color: #F8F5F2;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
}
.hero-section {
transition: background-image 1.5s ease-in-out;
}
.nav-link {
position: relative;
transition: color 0.3s;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
background-color: #C0A080;
transition: width 0.3s ease-in-out;
}
.nav-link:hover::after, .nav-link.active::after {
width: 100%;
}
.gallery-item img {
transition: transform 0.3s ease-in-out;
}
.gallery-item:hover img {
transform: scale(1.05);
}
</style>
<header id="header" class="bg-transparent text-white fixed top-0 left-0 right-0 z-50 transition-all duration-300">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="#home" class="text-2xl font-bold font-serif tracking-wider">Aperture</a>
<div class="hidden md:flex items-center space-x-8">
<a href="#home" class="nav-link active">Home</a>
<a href="#services" class="nav-link">Services</a>
<a href="#gallery" class="nav-link">Gallery</a>
<a href="#contact" class="nav-link">Contact</a>
</div>
<button id="mobile-menu-button" class="md:hidden focus:outline-none">
<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>
</nav>
<div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-70">
<a href="#home" class="block text-center py-3">Home</a>
<a href="#services" class="block text-center py-3">Services</a>
<a href="#gallery" class="block text-center py-3">Gallery</a>
<a href="#contact" class="block text-center py-3">Contact</a>
</div>
</header>
<main>
<section id="home" class="hero-section h-screen w-screen bg-cover bg-center bg-no-repeat flex items-center justify-center text-white" style="background-image: url('https://placehold.co/1920x1080/333333/FFFFFF?text=Elegant+Wedding+Photo');">
<div class="bg-black bg-opacity-50 absolute inset-0"></div>
<div class="text-center z-10 p-4">
<h1 class="text-5xl md:text-7xl lg:text-8xl font-bold mb-4">Capturing Life's Moments</h1>
<p class="text-lg md:text-xl max-w-2xl mx-auto">We create timeless, beautiful photographs that tell your unique story.</p>
</div>
</section>
<section id="services" class="py-20 md:py-32">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold">What We Offer</h2>
<p class="text-lg text-gray-600 mt-4 max-w-3xl mx-auto">This section provides an overview of our professional photography services. We aim to deliver exceptional quality and a personalized experience, whether we're capturing your special day, showcasing a property, or creating professional portraits.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="service-card text-center group">
<div class="overflow-hidden rounded-lg shadow-lg">
<img src="https://placehold.co/600x400/D3B8A4/333333?text=Weddings" alt="Wedding Photography" class="w-full h-64 object-cover transform transition-transform duration-300 group-hover:scale-110">
</div>
<h3 class="text-2xl font-bold mt-6 mb-2">Wedding Photography</h3>
<p class="text-gray-600">Capturing the emotion and beauty of your special day.</p>
</div>
<div class="service-card text-center group">
<div class="overflow-hidden rounded-lg shadow-lg">
<img src="https://placehold.co/600x400/A4B8D3/333333?text=Real+Estate" alt="Real Estate Photography" class="w-full h-64 object-cover transform transition-transform duration-300 group-hover:scale-110">
</div>
<h3 class="text-2xl font-bold mt-6 mb-2">Real Estate</h3>
<p class="text-gray-600">Showcasing properties with stunning, high-quality images.</p>
</div>
<div class="service-card text-center group">
<div class="overflow-hidden rounded-lg shadow-lg">
<img src="https://placehold.co/600x400/B8A4D3/333333?text=Portraits" alt="Portrait Photography" class="w-full h-64 object-cover transform transition-transform duration-300 group-hover:scale-110">
</div>
<h3 class="text-2xl font-bold mt-6 mb-2">Portraits</h3>
<p class="text-gray-600">Creating professional and personal portraits that shine.</p>
</div>
<div class="service-card text-center group md:col-span-2 lg:col-span-1 lg:col-start-2">
<div class="overflow-hidden rounded-lg shadow-lg">
<img src="https://placehold.co/600x400/A4D3B8/333333?text=Training" alt="Photography Training" class="w-full h-64 object-cover transform transition-transform duration-300 group-hover:scale-110">
</div>
<h3 class="text-2xl font-bold mt-6 mb-2">Training</h3>
<p class="text-gray-600">Learn photography from professionals in hands-on workshops.</p>
</div>
<div class="service-card text-center group hidden lg:block">
<div class="overflow-hidden rounded-lg shadow-lg">
<img src="https://placehold.co/600x400/D3A4B8/333333?text=Studio+Hire" alt="Studio Hire" class="w-full h-64 object-cover transform transition-transform duration-300 group-hover:scale-110">
</div>
<h3 class="text-2xl font-bold mt-6 mb-2">Studio Hire</h3>
<p class="text-gray-600">Rent our fully-equipped studio space for your projects.</p>
</div>
</div>
</div>
</section>
<section id="gallery" class="py-20 md:py-32 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold">Our Work</h2>
<p class="text-lg text-gray-600 mt-4 max-w-3xl mx-auto">Explore our portfolio to see the quality and style we bring to every project. Use the filters to navigate through different categories of our work. Click on any image to view it in a larger format.</p>
</div>
<div class="flex justify-center space-x-2 md:space-x-4 mb-12">
<button class="filter-btn active bg-gray-800 text-white px-4 py-2 rounded-full" data-filter="all">All</button>
<button class="filter-btn bg-gray-200 text-gray-700 px-4 py-2 rounded-full" data-filter="weddings">Weddings</button>
<button class="filter-btn bg-gray-200 text-gray-700 px-4 py-2 rounded-full" data-filter="real-estate">Real Estate</button>
<button class="filter-btn bg-gray-200 text-gray-700 px-4 py-2 rounded-full" data-filter="portraits">Portraits</button>
</div>
<div id="gallery-grid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="weddings" data-src="https://placehold.co/1200x800/D3B8A4/333333?text=Wedding+1">
<img src="https://placehold.co/600x400/D3B8A4/333333?text=Wedding+1" alt="Wedding Photo 1" class="w-full h-full object-cover">
</div>
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="real-estate" data-src="https://placehold.co/1200x800/A4B8D3/333333?text=Real+Estate+1">
<img src="https://placehold.co/600x400/A4B8D3/333333?text=Real+Estate+1" alt="Real Estate Photo 1" class="w-full h-full object-cover">
</div>
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="portraits" data-src="https://placehold.co/1200x800/B8A4D3/333333?text=Portrait+1">
<img src="https://placehold.co/600x400/B8A4D3/333333?text=Portrait+1" alt="Portrait Photo 1" class="w-full h-full object-cover">
</div>
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="weddings" data-src="https://placehold.co/1200x800/D3B8A4/333333?text=Wedding+2">
<img src="https://placehold.co/600x400/D3B8A4/333333?text=Wedding+2" alt="Wedding Photo 2" class="w-full h-full object-cover">
</div>
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="weddings" data-src="https://placehold.co/1200x800/D3B8A4/333333?text=Wedding+3">
<img src="https://placehold.co/600x400/D3B8A4/333333?text=Wedding+3" alt="Wedding Photo 3" class="w-full h-full object-cover">
</div>
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="portraits" data-src="https://placehold.co/1200x800/B8A4D3/333333?text=Portrait+2">
<img src="https://placehold.co/600x400/B8A4D3/333333?text=Portrait+2" alt="Portrait Photo 2" class="w-full h-full object-cover">
</div>
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="real-estate" data-src="https://placehold.co/1200x800/A4B8D3/333333?text=Real+Estate+2">
<img src="https://placehold.co/600x400/A4B8D3/333333?text=Real+Estate+2" alt="Real Estate Photo 2" class="w-full h-full object-cover">
</div>
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="weddings" data-src="https://placehold.co/1200x800/D3B8A4/333333?text=Wedding+4">
<img src="https://placehold.co/600x400/D3B8A4/333333?text=Wedding+4" alt="Wedding Photo 4" class="w-full h-full object-cover">
</div>
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="real-estate" data-src="https://placehold.co/1200x800/A4B8D3/333333?text=Real+Estate+3">
<img src="https://placehold.co/600x400/A4B8D3/333333?text=Real+Estate+3" alt="Real Estate Photo 3" class="w-full h-full object-cover">
</div>
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="portraits" data-src="https://placehold.co/1200x800/B8A4D3/333333?text=Portrait+3">
<img src="https://placehold.co/600x400/B8A4D3/333333?text=Portrait+3" alt="Portrait Photo 3" class="w-full h-full object-cover">
</div>
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="weddings" data-src="https://placehold.co/1200x800/D3B8A4/333333?text=Wedding+5">
<img src="https://placehold.co/600x400/D3B8A4/333333?text=Wedding+5" alt="Wedding Photo 5" class="w-full h-full object-cover">
</div>
<div class="gallery-item overflow-hidden rounded-lg cursor-pointer" data-category="portraits" data-src="https://placehold.co/1200x800/B8A4D3/333333?text=Portrait+4">
<img src="https://placehold.co/600x400/B8A4D3/333333?text=Portrait+4" alt="Portrait Photo 4" class="w-full h-full object-cover">
</div>
</div>
</div>
</section>
<section id="contact" class="py-20 md:py-32">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold">Get In Touch</h2>
<p class="text-lg text-gray-600 mt-4 max-w-3xl mx-auto">We'd love to hear about your project. Please fill out the form below to get in touch, and we'll get back to you as soon as possible. Let's create something beautiful together.</p>
</div>
<div class="max-w-4xl mx-auto bg-white p-8 md:p-12 rounded-lg shadow-lg">
<form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<input type="text" placeholder="Your Name" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#C0A080]">
<input type="email" placeholder="Your Email" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#C0A080]">
</div>
<div class="mb-6">
<select class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#C0A080] text-gray-500">
<option>Select a service (optional)</option>
<option>Wedding Photography</option>
<option>Real Estate</option>
<option>Portraits</option>
<option>Training</option>
<option>Studio Hire</option>
</select>
</div>
<div class="mb-6">
<textarea placeholder="Your Message" rows="5" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#C0A080]"></textarea>
</div>
<div class="text-center">
<button type="submit" class="bg-[#333] text-white font-bold py-3 px-8 rounded-full hover:bg-[#C0A080] transition-colors duration-300">Send Message</button>
</div>
</form>
</div>
</div>
</section>
</main>
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-6 text-center">
<p class="text-2xl font-serif mb-4">Aperture Studios</p>
<p class="mb-6">hello@aperturestudios.com | (555) 123-4567</p>
<div class="flex justify-center space-x-6">
<a href="#" class="hover:text-[#C0A080] transition-colors">Facebook</a>
<a href="#" class="hover:text-[#C0A080] transition-colors">Instagram</a>
<a href="#" class="hover:text-[#C0A080] transition-colors">Twitter</a>
</div>
</div>
</footer>
<div id="lightbox" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden">
<img id="lightbox-img" src="" alt="Full size view" class="max-w-[90vw] max-h-[80vh] object-contain">
<button id="lightbox-close" class="absolute top-6 right-8 text-white text-4xl font-bold">&times;</button>
<button id="lightbox-prev" class="absolute left-8 top-1/2 -translate-y-1/2 text-white text-4xl font-bold">&#10094;</button>
<button id="lightbox-next" class="absolute right-8 top-1/2 -translate-y-1/2 text-white text-4xl font-bold">&#10095;</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const header = document.getElementById('header');
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
header.classList.add('bg-black', 'bg-opacity-70', 'shadow-md');
header.classList.remove('bg-transparent');
} else {
header.classList.remove('bg-black', 'bg-opacity-70', 'shadow-md');
header.classList.add('bg-transparent');
}
});
const heroImages = [
'https://placehold.co/1920x1080/333333/FFFFFF?text=Elegant+Wedding+Photo',
'https://placehold.co/1920x1080/555555/FFFFFF?text=Modern+Architecture',
'https://placehold.co/1920x1080/444444/FFFFFF?text=Candid+Portrait'
];
let currentImageIndex = 0;
const heroSection = document.getElementById('home');
setInterval(() => {
currentImageIndex = (currentImageIndex + 1) % heroImages.length;
heroSection.style.backgroundImage = `url('${heroImages[currentImageIndex]}')`;
}, 5000);
const filterButtons = document.querySelectorAll('.filter-btn');
const galleryItems = document.querySelectorAll('.gallery-item');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
filterButtons.forEach(btn => {
btn.classList.remove('active', 'bg-gray-800', 'text-white');
btn.classList.add('bg-gray-200', 'text-gray-700');
});
button.classList.add('active', 'bg-gray-800', 'text-white');
button.classList.remove('bg-gray-200', 'text-gray-700');
const filter = button.getAttribute('data-filter');
galleryItems.forEach(item => {
if (filter === 'all' || item.getAttribute('data-category') === filter) {
item.classList.remove('hidden');
} else {
item.classList.add('hidden');
}
});
});
});
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxClose = document.getElementById('lightbox-close');
const lightboxPrev = document.getElementById('lightbox-prev');
const lightboxNext = document.getElementById('lightbox-next');
let currentLightboxIndex;
let visibleItems = [];
function updateVisibleItems() {
visibleItems = Array.from(galleryItems).filter(item => !item.classList.contains('hidden'));
}
galleryItems.forEach(item => {
item.addEventListener('click', () => {
updateVisibleItems();
const itemSrc = item.getAttribute('data-src');
currentLightboxIndex = visibleItems.indexOf(item);
lightboxImg.src = itemSrc;
lightbox.classList.remove('hidden');
});
});
lightboxClose.addEventListener('click', () => {
lightbox.classList.add('hidden');
});
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.classList.add('hidden');
}
});
function showImage(index) {
lightboxImg.src = visibleItems[index].getAttribute('data-src');
currentLightboxIndex = index;
}
lightboxPrev.addEventListener('click', () => {
const newIndex = (currentLightboxIndex - 1 + visibleItems.length) % visibleItems.length;
showImage(newIndex);
});
lightboxNext.addEventListener('click', () => {
const newIndex = (currentLightboxIndex + 1) % visibleItems.length;
showImage(newIndex);
});
const sections = document.querySelectorAll('main section');
const navLinks = document.querySelectorAll('.nav-link');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
if (pageYOffset >= sectionTop - 60) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
});
</script>