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 sleek, immersive single-page website UI for a luxury car dealership with a dark metallic aesthetic. Here's the complete HTML/CSS implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vantage Motors | Luxury Automotive Showroom</title>
<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=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--dark-bg: #0a0a0a;
--darker-bg: #050505;
--gold-primary: #d4af37;
--gold-secondary: #b8941f;
--gold-glow: rgba(212, 175, 55, 0.2);
--silver: #e8e8e8;
--silver-accent: #c0c0c0;
--light-text: #f5f5f5;
--medium-text: #b0b0b0;
--section-padding: 100px 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--dark-bg);
color: var(--light-text);
overflow-x: hidden;
line-height: 1.6;
}
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
font-weight: 600;
letter-spacing: 0.5px;
}
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
/* Navigation */
.main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 20px 0;
transition: all 0.3s ease;
background-color: rgba(10, 10, 10, 0.9);
backdrop-filter: blur(10px);
}
.main-header.scrolled {
padding: 15px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 28px;
font-weight: 700;
color: var(--gold-primary);
text-decoration: none;
position: relative;
padding-bottom: 5px;
}
.logo::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, var(--gold-primary), transparent);
}
.main-nav ul {
display: flex;
list-style: none;
gap: 40px;
}
.main-nav a {
color: var(--light-text);
text-decoration: none;
font-weight: 500;
font-size: 16px;
transition: color 0.3s ease;
position: relative;
}
.main-nav a:hover {
color: var(--gold-primary);
}
.main-nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background-color: var(--gold-primary);
transition: width 0.3s ease;
}
.main-nav a:hover::after {
width: 100%;
}
/* Hero Section */
.hero-section {
height: 100vh;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
margin-top: 80px;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(5, 5, 5, 0.7), rgba(5, 5, 5, 0.9)), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
z-index: -1;
animation: cinematicPan 30s infinite alternate ease-in-out;
}
@keyframes cinematicPan {
0% {
transform: scale(1);
}
100% {
transform: scale(1.05);
}
}
.hero-content {
max-width: 700px;
position: relative;
z-index: 2;
}
.hero-tag {
display: inline-block;
background: linear-gradient(90deg, var(--gold-primary), var(--gold-secondary));
color: var(--dark-bg);
padding: 8px 20px;
font-weight: 600;
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 30px;
border-radius: 2px;
text-transform: uppercase;
box-shadow: 0 0 20px var(--gold-glow);
}
.hero-title {
font-size: 64px;
line-height: 1.1;
margin-bottom: 20px;
background: linear-gradient(to right, var(--light-text), var(--silver-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-subtitle {
font-size: 20px;
color: var(--medium-text);
margin-bottom: 40px;
max-width: 600px;
}
.cta-button {
display: inline-block;
background: linear-gradient(90deg, var(--gold-primary), var(--gold-secondary));
color: var(--dark-bg);
padding: 16px 40px;
font-weight: 600;
font-size: 16px;
text-decoration: none;
border-radius: 2px;
transition: all 0.3s ease;
box-shadow: 0 0 20px var(--gold-glow);
position: relative;
overflow: hidden;
}
.cta-button::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.7s ease;
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px var(--gold-glow);
}
/* Brand Bar */
.brands-section {
padding: 60px 0;
background-color: var(--darker-bg);
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.section-title {
text-align: center;
font-size: 32px;
margin-bottom: 50px;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}
.brands-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 40px;
align-items: center;
}
.brand-item {
text-align: center;
padding: 20px;
background-color: rgba(255, 255, 255, 0.03);
border-radius: 4px;
transition: all 0.3s ease;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.brand-item:hover {
background-color: rgba(255, 255, 255, 0.08);
transform: translateY(-5px);
}
.brand-logo {
font-family: 'Playfair Display', serif;
font-size: 28px;
font-weight: 700;
color: var(--silver);
position: relative;
}
.brand-logo.porsche {
color: var(--gold-primary);
}
/* Showroom Section */
.showroom-section {
padding: var(--section-padding);
}
.showroom-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-top: 60px;
}
.vehicle-card {
background-color: rgba(255, 255, 255, 0.03);
border-radius: 8px;
overflow: hidden;
transition: all 0.4s ease;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.vehicle-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
border-color: rgba(212, 175, 55, 0.2);
}
.vehicle-image {
height: 240px;
background-size: cover;
background-position: center;
position: relative;
}
.vehicle-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 60%, rgba(10, 10, 10, 0.9));
}
.vehicle-info {
padding: 25px;
}
.vehicle-name {
font-size: 24px;
margin-bottom: 10px;
color: var(--silver);
}
.vehicle-price {
color: var(--gold-primary);
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
.vehicle-specs {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.spec-item {
display: flex;
align-items: center;
gap: 8px;
color: var(--medium-text);
font-size: 14px;
}
.vehicle-cta {
display: inline-block;
color: var(--gold-primary);
text-decoration: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 3px;
border-bottom: 1px solid var(--gold-primary);
transition: all 0.3s ease;
}
.vehicle-cta:hover {
color: var(--silver);
border-bottom-color: var(--silver);
}
/* CTA Sections */
.cta-sections {
padding-bottom: var(--section-padding);
}
.cta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-top: 60px;
}
.cta-card {
padding: 60px 50px;
border-radius: 8px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.cta-card.test-drive {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(10, 10, 10, 0.9)), url('https://images.unsplash.com/photo-1553440569-bcc63803a83d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2025&q=80');
background-size: cover;
background-position: center;
border: 1px solid rgba(212, 175, 55, 0.2);
}
.cta-card.contact {
background: linear-gradient(135deg, rgba(200, 200, 200, 0.1), rgba(10, 10, 10, 0.9)), url('https://images.unsplash.com/photo-1492144434756-ad413e7e6b0d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
border: 1px solid rgba(200, 200, 200, 0.2);
}
.cta-title {
font-size: 36px;
margin-bottom: 20px;
color: var(--silver);
}
.cta-description {
margin-bottom: 30px;
color: var(--medium-text);
font-size: 18px;
}
.contact-info {
margin-top: 20px;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
color: var(--medium-text);
}
/* Footer */
.main-footer {
background-color: var(--darker-bg);
padding: 60px 0 30px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-content {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.footer-logo {
font-family: 'Playfair Display', serif;
font-size: 28px;
font-weight: 700;
color: var(--gold-primary);
margin-bottom: 20px;
}
.footer-description {
color: var(--medium-text);
max-width: 300px;
margin-bottom: 25px;
}
.social-links {
display: flex;
gap: 15px;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 50%;
color: var(--medium-text);
text-decoration: none;
transition: all 0.3s ease;
}
.social-link:hover {
background-color: var(--gold-primary);
color: var(--dark-bg);
}
.footer-links {
display: flex;
gap: 80px;
}
.footer-column h4 {
font-size: 18px;
margin-bottom: 20px;
color: var(--silver);
}
.footer-column ul {
list-style: none;
}
.footer-column li {
margin-bottom: 12px;
}
.footer-column a {
color: var(--medium-text);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column a:hover {
color: var(--gold-primary);
}
.footer-bottom {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
color: var(--medium-text);
font-size: 14px;
}
/* Responsive Design */
@media (max-width: 1200px) {
.showroom-grid {
grid-template-columns: repeat(2, 1fr);
}
.brands-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 992px) {
.hero-title {
font-size: 52px;
}
.cta-grid {
grid-template-columns: 1fr;
}
.footer-content {
flex-direction: column;
gap: 40px;
}
.footer-links {
gap: 40px;
flex-wrap: wrap;
}
}
@media (max-width: 768px) {
.container {
padding: 0 20px;
}
.hero-title {
font-size: 42px;
}
.showroom-grid {
grid-template-columns: 1fr;
}
.brands-grid {
grid-template-columns: repeat(2, 1fr);
}
.main-nav ul {
gap: 20px;
}
}
/* Metallic Effects */
.metallic-gold {
background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
display: inline-block;
}
.metallic-gold::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3), transparent);
opacity: 0.5;
}
.metallic-silver {
background: linear-gradient(135deg, var(--silver), var(--silver-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<!-- Header/Navigation -->
<header class="main-header">
<div class="container header-container">
<a href="#" class="logo">VANTAGE MOTORS</a>
<nav class="main-nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#showroom">Showroom</a></li>
<li><a href="#brands">Brands</a></li>
<li><a href="#test-drive">Test Drive</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero-section" id="home">
<div class="hero-background"></div>
<div class="container">
<div class="hero-content">
<span class="hero-tag">Limited Edition</span>
<h1 class="hero-title">Porsche 911 <span class="metallic-gold">Turbo S</span></h1>
<p class="hero-subtitle">Experience unparalleled performance with the 2024 Porsche 911 Turbo S. 640 horsepower, 0-60 mph in 2.6 seconds, and a masterpiece of German engineering.</p>
<a href="#test-drive" class="cta-button">Book Exclusive Preview</a>
</div>
</div>
</section>
<!-- Brands Section -->
<section class="brands-section" id="brands">
<div class="container">
<h2 class="section-title">Curated Luxury Brands</h2>
<div class="brands-grid">
<div class="brand-item">
<div class="brand-logo porsche">PORSCHE</div>
</div>
<div class="brand-item">
<div class="brand-logo">MERCEDES-BENZ</div>
</div>
<div class="brand-item">
<div class="brand-logo">BENTLEY</div>
</div>
<div class="brand-item">
<div class="brand-logo">LAMBORGHINI</div>
</div>
<div class="brand-item">
<div class="brand-logo">ROLLS-ROYCE</div>
</div>
</div>
</div>
</section>
<!-- Showroom Section -->
<section class="showroom-section" id="showroom">
<div class="container">
<h2 class="section-title">Exclusive <span class="metallic-gold">Showroom</span></h2>
<div class="showroom-grid">
<!-- Vehicle 1 -->
<div class="vehicle-card">
<div class="vehicle-image" style="background-image: url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
<div class="vehicle-info">
<h3 class="vehicle-name">Porsche 911 Turbo S</h3>
<div class="vehicle-price">$216,100</div>
<div class="vehicle-specs">
<div class="spec-item">
<i class="fas fa-tachometer-alt"></i>
<span>205 mph</span>
</div>
<div class="spec-item">
<i class="fas fa-horse-head"></i>
<span>640 HP</span>
</div>
<div class="spec-item">
<i class="fas fa-bolt"></i>
<span>2.6s 0-60</span>
</div>
</div>
<a href="#" class="vehicle-cta">Explore Details</a>
</div>
</div>
<!-- Vehicle 2 -->
<div class="vehicle-card">
<div class="vehicle-image" style="background-image: url('https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2067&q=80');"></div>
<div class="vehicle-info">
<h3 class="vehicle-name">Mercedes-AMG GT</h3>
<div class="vehicle-price">$163,800</div>
<div class="vehicle-specs">
<div class="spec-item">
<i class="fas fa-tachometer-alt"></i>
<span>195 mph</span>
</div>
<div class="spec-item">
<i class="fas fa-horse-head"></i>
<span>523 HP</span>
</div>
<div class="spec-item">
<i class="fas fa-bolt"></i>
<span>3.7s 0-60</span>
</div>
</div>
<a href="#" class="vehicle-cta">Explore Details</a>
</div>
</div>
<!-- Vehicle 3 -->
<div class="vehicle-card">
<div class="vehicle-image" style="background-image: url('https://images.unsplash.com/photo-1621393101101-1c61e6a57d8d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2069&q=80');"></div>
<div class="vehicle-info">
<h3 class="vehicle-name">Bentley Continental GT</h3>
<div class="vehicle-price">$245,000</div>
<div class="vehicle-specs">
<div class="spec-item">
<i class="fas fa-tachometer-alt"></i>
<span>208 mph</span>
</div>
<div class="spec-item">
<i class="fas fa-horse-head"></i>
<span>650 HP</span>
</div>
<div class="spec-item">
<i class="fas fa-bolt"></i>
<span>3.6s 0-60</span>
</div>
</div>
<a href="#" class="vehicle-cta">Explore Details</a>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Sections -->
<section class="cta-sections">
<div class="container">
<div class="cta-grid">
<!-- Test Drive CTA -->
<div class="cta-card test-drive" id="test-drive">
<h2 class="cta-title">Experience <span class="metallic-gold">Performance</span></h2>
<p class="cta-description">Schedule a private test drive with one of our luxury vehicles. Our concierge service will tailor the experience to your preferences.</p>
<a href="#" class="cta-button">Book a Test Drive</a>
</div>
<!-- Contact CTA -->
<div class="cta-card contact" id="contact">
<h2 class="cta-title">Personal <span class="metallic-silver">Consultation</span></h2>
<p class="cta-description">Contact our luxury automotive specialists for a confidential consultation about your next vehicle acquisition.</p>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>+1 (888) 555-0147</span>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span>concierge@vantagemotors.com</span>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>450 Park Avenue, New York, NY</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="main-footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<div class="footer-logo">VANTAGE MOTORS</div>
<p class="footer-description">The premier destination for luxury automotive excellence, offering exclusive vehicles and personalized service for discerning clients.</p>
<div class="social-links">
<a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-link"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-links">
<div class="footer-column">
<h4>Showroom</h4>
<ul>
<li><a href="#">New Arrivals</a></li>
<li><a href="#">Porsche Collection</a></li>
<li><a href="#">Limited Editions</a></li>
<li><a href="#">Pre-Owned Selection</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Services</h4>
<ul>
<li><a href="#">Vehicle Financing</a></li>
<li><a href="#">Concierge Delivery</a></li>
<li><a href="#">Maintenance Plans</a></li>
<li><a href="#">Trade-In Evaluation</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Company</h4>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Our History</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Vantage Motors Luxury Automotive. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.querySelector('.main-header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
</script>
</body>
</html>
Key Design Features
1. Hero Section
- Full-width cinematic background with subtle pan animation
- Gold accent gradient on the "Limited Edition" tag
- Dramatic typography with metallic text effects
- Prominent CTA button with shimmer animation
2. Brand Bar
- Elegant display of luxury automotive brands
- Hover effects with subtle elevation
- Gold accent for Porsche as the featured brand
- Metallic silver text for other brands
3. Showroom Section
- Responsive grid of luxury vehicles
- Each card includes vehicle image, specs, and pricing
- Hover effects with elevation and gold border glow
- Consistent metallic design language
4. CTA Sections
- Two visually distinct call-to-action areas
- Test drive section with gold metallic theme
- Contact section with silver metallic theme
- Both include background imagery for immersion
5. Visual Effects
- Metallic text gradients using CSS
background-clip - Gold shimmer animation on buttons
- Subtle hover animations throughout
- Dark background with metallic accents
6. Responsive Design
- Mobile-friendly layout that adapts to different screen sizes
- Maintains luxury aesthetic across all devices
The design creates an immersive, high-end experience that evokes the feeling of walking into a luxury car showroom, with careful attention to typography, color psychology, and subtle animations that suggest quality and exclusivity.
Comments