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
Luxury Car Dealership Showroom Website UI
I'll create a sophisticated, single-page luxury dealership site with cinematic styling, metallic accents, and premium UX.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prestige Motors – Luxury Automotive Showroom</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--dark-bg: #0a0a0a;
--dark-secondary: #1a1a1a;
--gold: #d4af37;
--silver: #c0c0c0;
--platinum: #e8e8e8;
--accent-dark: #2d2d2d;
--text-light: #f5f5f5;
--text-muted: #a0a0a0;
}
body {
background-color: var(--dark-bg);
color: var(--text-light);
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
overflow-x: hidden;
}
/* ===== HEADER/NAV ===== */
header {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
padding: 1.5rem 3rem;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #d4af37, #c0c0c0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 2px;
}
nav ul {
display: flex;
list-style: none;
gap: 3rem;
}
nav a {
color: var(--text-light);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: color 0.3s ease;
position: relative;
}
nav a:hover {
color: var(--gold);
}
nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--gold), transparent);
transition: width 0.3s ease;
}
nav a:hover::after {
width: 100%;
}
/* ===== HERO SECTION ===== */
.hero {
height: 100vh;
margin-top: 60px;
background: linear-gradient(135deg, var(--dark-bg) 0%, var(--accent-dark) 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at 30% 50%, rgba(212, 175, 55, 0.15) 0%, transparent 50%);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
max-width: 1400px;
width: 100%;
padding: 0 3rem;
}
.hero-text h1 {
font-family: 'Playfair Display', serif;
font-size: 4rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
letter-spacing: -1px;
}
.hero-text p {
font-size: 1.1rem;
color: var(--text-muted);
margin-bottom: 2rem;
font-weight: 300;
}
.hero-cta {
display: flex;
gap: 1.5rem;
}
.btn {
padding: 1rem 2.5rem;
border: none;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
border-radius: 2px;
text-decoration: none;
display: inline-block;
letter-spacing: 1px;
}
.btn-primary {
background: linear-gradient(135deg, var(--gold) 0%, #f0d680 100%);
color: var(--dark-bg);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5);
}
.btn-secondary {
border: 2px solid var(--gold);
color: var(--gold);
background: transparent;
}
.btn-secondary:hover {
background: rgba(212, 175, 55, 0.1);
transform: translateY(-2px);
}
.hero-car {
position: relative;
height: 500px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(192, 192, 192, 0.05));
border: 2px solid rgba(212, 175, 55, 0.3);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
animation: carGlow 3s ease-in-out infinite;
}
@keyframes carGlow {
0%, 100% {
box-shadow: 0 0 30px rgba(212, 175, 55, 0.2), inset 0 0 30px rgba(212, 175, 55, 0.05);
}
50% {
box-shadow: 0 0 50px rgba(212, 175, 55, 0.4), inset 0 0 50px rgba(212, 175, 55, 0.1);
}
}
.car-placeholder {
font-size: 6rem;
color: rgba(212, 175, 55, 0.4);
font-weight: 700;
}
/* ===== BRAND BAR ===== */
.brands {
background: var(--dark-secondary);
padding: 4rem 3rem;
border-top: 1px solid rgba(212, 175, 55, 0.2);
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.brands-container {
max-width: 1400px;
margin: 0 auto;
}
.brands-title {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
margin-bottom: 2rem;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 3px;
}
.brands-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
align-items: center;
justify-items: center;
}
.brand-logo {
width: 120px;
height: 80px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(192, 192, 192, 0.05));
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--text-muted);
transition: all 0.3s ease;
}
.brand-logo:hover {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(192, 192, 192, 0.1));
color: var(--gold);
border-color: var(--gold);
transform: scale(1.05);
}
/* ===== SHOWROOM GALLERY ===== */
.showroom {
padding: 6rem 3rem;
max-width: 1400px;
margin: 0 auto;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
margin-bottom: 1rem;
text-align: center;
}
.section-subtitle {
color: var(--text-muted);
text-align: center;
margin-bottom: 4rem;
font-size: 1.1rem;
font-weight: 300;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
}
.car-card {
background: linear-gradient(135deg, var(--accent-dark), var(--dark-secondary));
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 8px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.car-card:hover {
transform: translateY(-10px);
border-color: var(--gold);
box-shadow: 0 20px 50px rgba(212, 175, 55, 0.3);
}
.car-image {
width: 100%;
height: 300px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(192, 192, 192, 0.05));
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: rgba(212, 175, 55, 0.3);
position: relative;
overflow: hidden;
}
.car-image::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.car-card:hover .car-image::after {
left: 100%;
}
.car-info {
padding: 2rem;
}
.car-name {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.car-model {
color: var(--gold);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
}
.car-specs {
display: flex;
justify-content: space-between;
margin: 1.5rem 0;
padding: 1rem 0;
border-top: 1px solid rgba(212, 175, 55, 0.1);
border-bottom: 1px solid rgba(212, 175, 55, 0.1);
font-size: 0.9rem;
color: var(--text-muted);
}
.spec-item {
text-align: center;
}
.spec-value {
display: block;
color: var(--gold);
font-weight: 600;
}
.car-price {
font-size: 1.3rem;
font-weight: 600;
color: var(--gold);
margin: 1.5rem 0;
}
.car-btn {
width: 100%;
padding: 0.75rem;
background: rgba(212, 175, 55, 0.15);
border: 1px solid var(--gold);
color: var(--gold);
cursor: pointer;
border-radius: 4px;
transition: all 0.3s ease;
font-weight: 600;
}
.car-btn:hover {
background: var(--gold);
color: var(--dark-bg);
}
/* ===== CTA SECTION ===== */
.cta-section {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(192, 192, 192, 0.02));
border-top: 1px solid rgba(212, 175, 55, 0.3);
border-bottom: 1px solid rgba(212, 175, 55, 0.3);
padding: 6rem 3rem;
}
.cta-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.cta-box {
padding: 3rem;
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 8px;
background: rgba(10, 10, 10, 0.5);
backdrop-filter: blur(10px);
text-align: center;
}
.cta-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.cta-box h3 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
margin-bottom: 1rem;
}
.cta-box p {
color: var(--text-muted);
margin-bottom: 2rem;
font-weight: 300;
}
/* ===== FOOTER ===== */
footer {
background: var(--dark-secondary);
border-top: 1px solid rgba(212, 175, 55, 0.2);
padding: 3rem;
text-align: center;
color: var(--text-muted);
}
footer p {
margin-bottom: 1rem;
}
.footer-links {
margin-bottom: 2rem;
}
.footer-links a {
color: var(--gold);
text-decoration: none;
margin: 0 1rem;
font-weight: 500;
}
.footer-links a:hover {
color: var(--platinum);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
header {
padding: 1rem;
}
nav ul {
display: none;
}
.hero-content {
grid-template-columns: 1fr;
padding: 0 1.5rem;
}
.hero-text h1 {
font-size: 2.5rem;
}
.hero-car {
height: 350px;
}
.car-placeholder {
font-size: 4rem;
}
.gallery-grid {
grid-template-columns: 1fr;
}
.cta-container {
grid-template-columns: 1fr;
}
.showroom {
padding: 3rem 1.5rem;
}
.cta-section {
padding: 3rem 1.5rem;
}
}
</style>
</head>
<body>
<!-- HEADER -->
<header>
<nav>
<div class="logo">PRESTIGE</div>
<ul>
<li><a href="#showroom">Our Fleet</a></li>
<li><a href="#brands">Brands</a></li>
<li><a href="#cta">Contact</a></li>
</ul>
</nav>
</header>
<!-- HERO SECTION -->
<section class="hero">
<div class="hero-content">
<div class="hero-text">
<h1>The Art of Performance</h1>
<p>Experience the pinnacle of automotive luxury. Meticulously curated vehicles from the world's most prestigious manufacturers.</p>
<div class="hero-cta">
<button class="btn btn-primary">Book Test Drive</button>
<button class="btn btn-secondary">Learn More</button>
</div>
</div>
<div class="hero-car">
<div class="car-placeholder">🏎️</div>
</div>
</div>
</section>
<!-- BRAND BAR -->
<section class="brands">
<div class="brands-container">
<h2 class="brands-title">Featured Brands</h2>
<div class="brands-grid">
<div class="brand-logo">Porsche</div>
<div class="brand-logo">Mercedes-Benz</div>
<div class="brand-logo">Lamborghini</div>
<div class="brand-logo">Bentley</div>
<div class="brand-logo">Ferrari</div>
<div class="brand-logo">Aston Martin</div>
</div>
</div>
</section>
<!-- SHOWROOM GALLERY -->
<section class="showroom" id="showroom">
<h2 class="section-title">Curated Showroom</h2>
<p class="section-subtitle">Handpicked luxury vehicles available for immediate delivery</p>
<div class="gallery-grid">
<!-- Car Card 1 -->
<div class="car-card">
<div class="car-image">🏎️</div>
<div class="car-info">
<div class="car-model">2024 Porsche</div>
<h3 class="car-name">911 Turbo S</h3>
<div class="car-specs">
<div class="spec-item">
<span class="spec-value">640 HP</span>
<span>Power</span>
</div>
<div class="spec-item">
<span class="spec-value">2.7s</span>
<span>0-60</span>
</div>
<div class="spec-item">
<span class="spec-value">205 mph</span>
<span>Top Speed</span>
</div>
</div>
<div class="car-price">$216,500</div>
<button class="car-btn">View Details</button>
</div>
</div>
<!-- Car Card 2 -->
<div class="car-card">
<div class="car-image">✨</div>
<div class="car-info">
<div class="car-model">2024 Mercedes-Benz</div>
<h3 class="car-name">AMG GT 63</h3>
<div class="car-specs">
<div class="spec-item">
<span class="spec-value">630 HP</span>
<span>Power</span>
</div>
<div class="spec-item">
<span class="spec-value">3.0s</span>
<span>0-60</span>
</div>
<div class="spec-item">
<span class="spec-value">198 mph</span>
<span>Top Speed</span>
</div>
</div>
<div class="car-price">$180,000</div>
<button class="car-btn">View Details</button>
</div>
</div>
<!-- Car Card 3 -->
<div class="car-card">
<div class="car-image">⚡</div>
<div class="car-info">
<div class="car-model">2024 Lamborghini</div>
<h3 class="car-name">Revuelto</h3>
<div class="car-specs">
<div class="spec-item">
<span class="spec-value">1001 HP</span>
<span>Power</span>
</div>
<div class="spec-item">
<span class="spec-value">2.5s</span>
<span>0-60</span>
</div>
<div class="spec-item">
<span class="spec-value">220+ mph</span>
<span>Top Speed</span>
</div>
</div>
<div class="car-price">$645,000</div>
<button class="car-btn">View Details</button>
</div>
</div>
<!-- Car Card 4 -->
<div class="car-card">
<div class="car-image">💎</div>
<div class="car-info">
<div class="car-model">2024 Bentley</div>
<h3 class="car-name">Continental GT</h3>
<div class="car-specs">
<div class="spec-item">
<span class="spec-value">635 HP</span>
<span>Power</span>
</div>
<div class="spec-item">
<span class="spec-value">3.5s</span>
<span>0-60</span>
</div>
<div class="spec-item">
<span class="spec-value">208 mph</span>
<span>Top Speed</span>
</div>
</div>
<div class="car-price">$214,000</div>
<button class="car-btn">View Details</button>
</div>
</div>
<!-- Car Card 5 -->
<div class="car-card">
<div class="car-image">🔴</div>
<div class="car-info">
<div class="car-model">2024 Ferrari</div>
<h3 class="car-name">SF90 Stradale</h3>
<div class="car-specs">
<div class="spec-item">
<span class="spec-value">986 HP</span>
<span>Power</span>
</div>
<div class="spec-item">
<span class="spec-value">2.5s</span>
<span>0-60</span>
</div>
<div class="spec-item">
<span class="spec-value">211 mph</span>
<span>Top Speed</span>
</div>
</div>
<div class="car-price">$625,000</div>
<button class="car-btn">View Details</button>
</div>
</div>
<!-- Car Card 6 -->
<div class="car-card">
<div class="car-image">🌟</div>
<div class="car-info">
<div class="car-model">2024 Aston Martin</div>
<h3 class="car-name">DB12</h3>
<div class="car-specs">
<div class="spec-item">
<span class="spec-value">671 HP</span>
<span>Power</span>
</div>
<div class="spec-item">
<span class="spec-value">3.2s</span>
<span>0-60</span>
</div>
<div class="spec-item">
<span class="spec-value">211 mph</span>
<span>Top Speed</span>
</div>
</div>
<div class="car-price">$301,500</div>
<button class="car-btn">View Details</button>
</div>
</div>
</div>
</section>
<!-- CTA SECTION -->
<section class="cta-section" id="cta">
<div class="cta-container">
<div class="cta-box">
<div class="cta-icon">🚗</div>
<h3>Book a Test Drive</h3>
<p>Experience the extraordinary performance and luxury firsthand. Schedule your private test drive today.</p>
<button class="btn btn-primary">Schedule Now</button>
</div>
<div class="cta-box">
<div class="cta-icon">📞</div>
<h3>Contact Our Specialists</h3>
<p>Our expert team is ready to assist. Call us or fill out a contact form for personalized consultation.</p>
<button class="btn btn-primary">Get in Touch</button>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<p>© 2024 Prestige Motors. All rights reserved.</p>
<div class="footer-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Contact</a>
</div>
<p>Luxury automotive excellence since 2010</p>
</footer>
</body>
</html>
Key Features
🎨 Design Elements:
- Dark luxury theme with black backgrounds and gold/silver accents
- Metallic shimmer effects on hover (glow animations, gradient underlines)
- Premium typography using Playfair Display for headings and Montserrat for body
- Sophisticated color palette: #0a0a0a (dark), #d4af37 (gold), #c0c0c0 (silver)
🏗️ Sections:
- Fixed header with brand logo and navigation
- Cinematic hero with text + car showcase (glowing animation)
- Brand bar with luxury brand logos (hover effects)
- Showroom gallery with 6 car cards featuring specs and pricing
- CTA section for test drives and contact
- Footer with links
✨ Special Effects:
- Animated glow on hero car container
- Shimmer effect on card hover
- Smooth gradient transitions
- Backdrop blur on header
- Elegant underline animations on nav links
📱 Responsive: The layout adapts to tablets/mobile—navigation hides, hero goes single-column, gallery becomes single-column grid.
Replace placeholder emojis with actual car images in a real implementation. The structure is clean and production-ready!
Comments