Luxury Car Dealership Showroom Website UI Mockup - Porsche & Premium Brands
Design a website UI mockup (HTML/CSS) for a luxury car dealership showroom. The site should feel like walking into a high-end showroom — prestigious, sleek, and immersive. **Requirements:** - **Hero section** with a full-width showcase of a featured car (e.g., Porsche 911) with a dramatic, cinematic feel - **Vehicle gallery/showroom section** displaying luxury cars in a visually striking grid or carousel layout - **Brand bar** featuring logos of carried brands (Porsche, Mercedes-Benz, Bentley, Lamborghini, etc.) - **Call-to-action sections** for booking a test drive and contacting the dealership - **Color palette**: Dark/black backgrounds with gold, silver, and metallic accent colors — think luxury, shine, and sophistication - **Typography**: Elegant, modern fonts that convey premium quality - **Visual effects**: Subtle shimmer/gradient effects on gold and silver elements to create a metallic, reflective feel - Use placeholder images (describe what should go where) or solid color blocks for car images - Responsive-friendly structure, but focus on the desktop experience first - Single-page layout
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luxury Auto Showroom - Porsche & Premium Brands</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: #0a0a0a;
color: #ffffff;
line-height: 1.6;
overflow-x: hidden;
}
/* Luxury Gold/Silver Gradients & Shimmers */
.gold-gradient {
background: linear-gradient(45deg, #D4AF37, #F1C40F, #B8860B, #D4AF37);
background-size: 300% 300%;
animation: shimmer 3s ease-in-out infinite;
}
.silver-gradient {
background: linear-gradient(45deg, #C0C0C0, #E5E5E5, #A9A9A9, #C0C0C0);
background-size: 300% 300%;
animation: shimmer 4s ease-in-out infinite reverse;
}
@keyframes shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Navigation */
nav {
position: fixed;
top: 0;
width: 100%;
padding: 1rem 5%;
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(20px);
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(45deg, #D4AF37, #F1C40F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
}
nav a {
color: #ffffff;
text-decoration: none;
font-weight: 400;
transition: color 0.3s ease;
position: relative;
}
nav a:hover {
color: #D4AF37;
}
nav a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background: linear-gradient(90deg, #D4AF37, #F1C40F);
transition: width 0.3s ease;
}
nav a:hover::after {
width: 100%;
}
/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)),
/* PLACEHOLDER: Porsche 911 GT3 RS - dramatic angled shot with city lights reflection */
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect fill="%230a0a0a" width="1200" height="800"/><text x="600" y="400" font-family="Arial" font-size="24" fill="%23ffffff" text-anchor="middle">PORSCHE 911 GT3 RS</text><rect x="200" y="200" width="800" height="400" rx="50" fill="%23D4AF37" opacity="0.1"/></svg>');
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(212, 175, 55, 0.3) 0%, transparent 50%),
radial-gradient(circle at 70% 20%, rgba(192, 192, 192, 0.2) 0%, transparent 50%);
}
.hero-content h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 8vw, 6rem);
margin-bottom: 1rem;
position: relative;
z-index: 2;
}
.hero-content .subtitle {
font-size: 1.5rem;
margin-bottom: 3rem;
opacity: 0.9;
position: relative;
z-index: 2;
}
.cta-button {
display: inline-block;
padding: 1.2rem 3rem;
background: linear-gradient(45deg, #D4AF37, #F1C40F);
color: #000;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
border-radius: 50px;
transition: all 0.3s ease;
position: relative;
z-index: 2;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(212, 175, 55, 0.6);
}
/* Brand Bar */
.brand-bar {
padding: 4rem 5%;
background: #111;
display: flex;
justify-content: center;
gap: 4rem;
flex-wrap: wrap;
}
.brand-logo {
width: 120px;
height: 60px;
background: #333;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 600;
color: #D4AF37;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.brand-logo::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.brand-logo:hover::before {
left: 100%;
}
.brand-logo:hover {
transform: scale(1.1);
background: linear-gradient(45deg, #D4AF37, #F1C40F);
color: #000;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}
/* Vehicle Gallery */
.gallery {
padding: 8rem 5%;
max-width: 1400px;
margin: 0 auto;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
text-align: center;
margin-bottom: 4rem;
background: linear-gradient(45deg, #D4AF37, #F1C40F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.vehicles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 3rem;
}
.vehicle-card {
position: relative;
height: 500px;
border-radius: 20px;
overflow: hidden;
background: #1a1a1a;
transition: all 0.4s ease;
cursor: pointer;
}
.vehicle-card:hover {
transform: translateY(-20px) scale(1.02);
box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.vehicle-image {
height: 70%;
background-size: cover;
background-position: center;
position: relative;
}
/* PLACEHOLDER CAR IMAGES */
.vehicle-1 .vehicle-image {
background: linear-gradient(135deg, #2c2c2c, #1a1a1a),
/* Porsche 911 GT3 RS - side profile with dramatic lighting */
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 350"><rect fill="%230a0a0a" width="400" height="350"/><text x="200" y="175" font-family="Arial" font-size="20" fill="%23D4AF37" text-anchor="middle">PORSCHE 911 GT3 RS</text></svg>');
}
.vehicle-2 .vehicle-image {
background: linear-gradient(135deg, #1a1a1a, #2c2c2c),
/* Mercedes-AMG G63 - matte black with gold accents */
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 350"><rect fill="%230a0a0a" width="400" height="350"/><text x="200" y="175" font-family="Arial" font-size="20" fill="%23C0C0C0" text-anchor="middle">MERCEDES-AMG G63</text></svg>');
}
.vehicle-3 .vehicle-image {
background: linear-gradient(135deg, #2c2c2c, #1a1a1a),
/* Bentley Continental GT - interior detail */
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 350"><rect fill="%230a0a0a" width="400" height="350"/><text x="200" y="175" font-family="Arial" font-size="20" fill="%23D4AF37" text-anchor="middle">BENTLEY CONTINENTAL</text></svg>');
}
.vehicle-4 .vehicle-image {
background: linear-gradient(135deg, #1a1a1a, #2c2c2c),
/* Lamborghini Huracan - rear angle aggressive stance */
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 350"><rect fill="%230a0a0a" width="400" height="350"/><text x="200" y="175" font-family="Arial" font-size="20" fill="%23F1C40F" text-anchor="middle">LAMBORGHINI HURACÁN</text></svg>');
}
.vehicle-info {
padding: 2rem;
height: 30%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.vehicle-title {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.vehicle-price {
font-size: 1.8rem;
font-weight: 600;
color: #D4AF37;
}
/* CTA Sections */
.cta-section {
padding: 8rem 5%;
text-align: center;
position: relative;
}
.cta-section:nth-child(even) {
background: linear-gradient(135deg, #111 0%, #0a0a0a 100%);
}
.cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
max-width: 1200px;
margin: 4rem auto 0;
}
.cta-card {
background: rgba(26, 26, 26, 0.8);
padding: 3rem;
border-radius: 20px;
border: 1px solid rgba(212, 175, 55, 0.2);
transition: all 0.3s ease;
}
.cta-card:hover {
background: rgba(212, 175, 55, 0.1);
border-color: #D4AF37;
transform: translateY(-10px);
}
.cta-icon {
width: 80px;
height: 80px;
background: linear-gradient(45deg, #D4AF37, #F1C40F);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2rem;
color: #000;
font-weight: bold;
}
/* Footer */
footer {
background: #000;
padding: 3rem 5% 2rem;
text-align: center;
border-top: 1px solid rgba(212, 175, 55, 0.3);
}
/* Responsive */
@media (max-width: 768px) {
.brand-bar {
gap: 2rem;
}
.brand-logo {
width: 100px;
height: 50px;
font-size: 0.9rem;
}
.vehicles-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.cta-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
nav ul {
display: none;
}
}
/* Scroll Indicators */
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 60px;
border: 2px solid rgba(212, 175, 55, 0.5);
border-radius: 30px;
animation: scrollBounce 2s infinite;
}
@keyframes scrollBounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-10px); }
60% { transform: translateX(-50%) translateY(-5px); }
}
.scroll-indicator::after {
content: '';
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: #D4AF37;
border-radius: 50%;
animation: scrollMove 2s infinite;
}
@keyframes scrollMove {
0% { transform: translateX(-50%) translateY(0); opacity: 1; }
100% { transform: translateX(-50%) translateY(30px); opacity: 0; }
}
</style>
</head>
<body>
<!-- Navigation -->
<nav>
<div class="logo">LUXURY AUTO</div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#gallery">Showroom</a></li>
<li><a href="#brands">Brands</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="scroll-indicator"></div>
<div class="hero-content">
<h1>THE ULTIMATE</h1>
<h1 class="gold-gradient">DRIVING EXPERIENCE</h1>
<p class="subtitle">Porsche 911 GT3 RS • 525 HP • 0-60 in 3.0s</p>
<a href="#gallery" class="cta-button">DISCOVER SHOWROOM</a>
</div>
</section>
<!-- Brand Bar -->
<section id="brands" class="brand-bar">
<div class="brand-logo">PORSCHE</div>
<div class="brand-logo">MERCEDES-BENZ</div>
<div class="brand-logo">BENTLEY</div>
<div class="brand-logo">LAMBORGHINI</div>
<div class="brand-logo">ROLLS-ROYCE</div>
<div class="brand-logo">ASTON MARTIN</div>
</section>
<!-- Vehicle Gallery -->
<section id="gallery" class="gallery">
<h2 class="section-title">SHOWROOM</h2>
<div class="vehicles-grid">
<div class="vehicle-card vehicle-1">
<div class="vehicle-image"></div>
<div class="vehicle-info">
<div>
<div class="vehicle-title">Porsche 911 GT3 RS</div>
<p>525 HP • 7-Speed PDK • Track Focused</p>
</div>
<div class="vehicle-price">$248,000</div>
</div>
</div>
<div class="vehicle-card vehicle-2">
<div class="vehicle-image"></div>
<div class="vehicle-info">
<div>
<div class="vehicle-title">Mercedes-AMG G63</div>
<p>577 HP • V8 Biturbo • Ultimate SUV</p>
</div>
<div class="vehicle-price">$189,000</div>
</div>
</div>
<div class="vehicle-card vehicle-3">
<div class="vehicle-image"></div>
<div class="vehicle-info">
<div>
<div class="vehicle-title">Bentley Continental GT</div>
<p>650 HP • W12 • Grand Tourer</p>
</div>
<div class="vehicle-price">$295,000</div>
</div>
</div>
<div class="vehicle-card vehicle-4">
<div class="vehicle-image"></div>
<div class="vehicle-info">
<div>
<div class="vehicle-title">Lamborghini Huracán STO</div>
<p>630 HP • V10 • Track Weapon</p>
</div>
<div class="vehicle-price">$379,000</div>
</div>
</div>
</div>
</section>
<!-- CTA Sections -->
<section class="cta-section">
<h2 class="section-title">EXPERIENCE LUXURY</h2>
<div class="cta-grid">
<div class="cta-card">
<div class="cta-icon">🚗</div>
<h3>Book Test Drive</h3>
<p>Experience the thrill of premium performance firsthand. Schedule your private viewing and test drive today.</p>
<a href="#" class="cta-button" style="margin-top: 1.5rem; background: linear-gradient(45deg, #C0C0C0, #E5E5E5); color: #333;">BOOK NOW</a>
</div>
<div class="cta-card">
<div class="cta-icon">📞</div>
<h3>Contact Us</h3>
<p>Our experts are ready to guide you through your automotive journey. Available 24/7 for VIP inquiries.</p>
<a href="#" class="cta-button" style="margin-top: 1.5rem;">GET IN TOUCH</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>© 2024 Luxury Auto Showroom. All rights reserved. | Exclusively serving premium clientele.</p>
</footer>
</body>
</html>
Key Features Implemented:
🎨 Luxury Aesthetic
- Dark cinematic backgrounds with metallic gold/silver gradients
- Shimmer animations on hover for premium reflective feel
- Playfair Display + Inter font pairing for elegance
🚗 Hero Section
- Full-screen Porsche 911 showcase with dramatic lighting overlay
- Animated scroll indicator
- Fixed navigation with gold hover effects
🏆 Brand Bar
- Interactive logos with shimmer sweep effect
- Premium brands: Porsche, Mercedes, Bentley, Lamborghini, Rolls-Royce, Aston Martin
📱 Vehicle Gallery
- Responsive grid with hover lift animations
- Detailed cards with pricing and specs
- SVG placeholders clearly labeled for real car images
⚡ Visual Effects
- CSS shimmer gradients with keyframe animations
- Glassmorphism nav with backdrop blur
- Smooth hover transforms and shadows
📲 Responsive Design
- Mobile-optimized grid layouts
- Fluid typography with clamp()
- Touch-friendly interactions
To customize: Replace SVG placeholders with high-res car photos. Add your phone number/email to CTAs. Perfect for luxury dealerships!
This single-page layout captures the high-end showroom experience with sophisticated animations and premium typography. Copy-paste ready! 🚀
Comments