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>Elite Autos - Luxury Car Showroom</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0a0a0a;
--bg-secondary: #1a1a1a;
--bg-dark: #000000;
--gold-primary: #D4AF37;
--gold-light: #FAD5A5;
--gold-dark: #B8860B;
--silver-primary: #C0C0C0;
--silver-light: #E5E5E5;
--text-primary: #FFFFFF;
--text-secondary: #CCCCCC;
--accent-glow: rgba(212, 175, 55, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Montserrat', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
/* Header */
header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--gold-primary);
}
nav {
max-width: 1400px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--gold-primary);
text-decoration: none;
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
}
nav a {
color: var(--text-primary);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
}
nav a:hover {
color: var(--gold-primary);
}
nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--gold-primary);
transition: width 0.3s ease;
}
nav a:hover::after {
width: 100%;
}
/* Hero Section */
#hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse 80% 50% at 50% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(192, 192, 192, 0.1) 0%, transparent 50%),
linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #000 100%);
position: relative;
overflow: hidden;
}
#hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="g" cx="50%" cy="50%"><stop offset="0%" stop-color="%23D4AF37" stop-opacity="0.1"/><stop offset="70%" stop-color="%23D4AF37" stop-opacity="0"/></radialGradient></defs><circle cx="20" cy="20" r="1" fill="url(%23g)"><animate attributeName="r" values="1;2;1" dur="3s" repeatCount="indefinite"/></circle><circle cx="80" cy="80" r="1" fill="url(%23g)"><animate attributeName="r" values="1;2;1" dur="3s" repeatCount="indefinite" begin="1s"/></circle></svg>') repeat;
animation: sparkle 20s linear infinite;
opacity: 0.3;
}
@keyframes sparkle {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-100px) rotate(360deg); }
}
.hero-content {
text-align: center;
max-width: 1200px;
padding: 0 2rem;
z-index: 2;
position: relative;
}
.car-showcase {
margin-bottom: 3rem;
}
.car-placeholder {
width: 800px;
height: 450px;
margin: 0 auto;
background: linear-gradient(145deg, #333 0%, #555 30%, #222 70%, #111 100%);
border-radius: 20px;
position: relative;
box-shadow:
0 20px 60px rgba(0,0,0,0.8),
inset 0 0 50px rgba(212, 175, 55, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
font-weight: 700;
color: var(--gold-light);
text-shadow: 0 0 20px rgba(255,215,0,0.5);
}
.car-placeholder::before {
content: 'Porsche 911 GT3';
position: absolute;
}
.car-placeholder::after {
content: '';
position: absolute;
top: 20%;
right: 10%;
width: 200px;
height: 100px;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
border-radius: 50%;
animation: shine 4s ease-in-out infinite;
}
@keyframes shine {
0%, 100% { opacity: 0; transform: scale(0.5) translateX(0); }
50% { opacity: 1; transform: scale(1) translateX(20px); }
}
.hero-content h1 {
font-size: clamp(3rem, 8vw, 6rem);
margin-bottom: 1rem;
background: linear-gradient(45deg, var(--gold-primary), var(--silver-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-content p {
font-size: 1.4rem;
margin-bottom: 3rem;
color: var(--text-secondary);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Metallic Shimmer Button */
.btn, .cta-btn {
display: inline-block;
padding: 1rem 3rem;
background: linear-gradient(45deg, var(--gold-dark), var(--gold-primary), var(--gold-light), var(--gold-primary));
background-size: 300% 300%;
color: var(--bg-dark);
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
border-radius: 50px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
animation: shimmer 3s ease-in-out infinite;
}
.cta-btn {
font-size: 1.3rem;
padding: 1.2rem 4rem;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}
@keyframes shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.btn:hover, .cta-btn:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(212, 175, 55, 0.6);
}
/* Brand Bar */
#brands {
padding: 5rem 2rem;
background: var(--bg-secondary);
text-align: center;
}
#brands h2 {
font-size: 3rem;
margin-bottom: 3rem;
color: var(--gold-primary);
}
.brands-grid {
display: flex;
justify-content: center;
gap: 4rem;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.brand-logo {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 700;
color: var(--silver-light);
padding: 1rem 2rem;
background: linear-gradient(145deg, rgba(192,192,192,0.1), transparent);
border: 1px solid var(--silver-primary);
border-radius: 15px;
transition: all 0.3s ease;
min-width: 150px;
}
.brand-logo:hover {
color: var(--gold-primary);
background: linear-gradient(145deg, var(--gold-primary), var(--gold-dark));
transform: scale(1.05);
box-shadow: 0 10px 30px var(--accent-glow);
}
/* Vehicle Gallery */
#gallery {
padding: 5rem 2rem;
max-width: 1400px;
margin: 0 auto;
}
#gallery h2 {
text-align: center;
font-size: 3.5rem;
margin-bottom: 4rem;
color: var(--text-primary);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
}
.vehicle-card {
background: var(--bg-secondary);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.vehicle-card:hover {
transform: translateY(-15px);
box-shadow: 0 30px 80px rgba(212, 175, 55, 0.3);
}
.vehicle-image {
height: 250px;
background: linear-gradient(135deg, #444 0%, #666 30%, #333 70%, #222 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--gold-light);
position: relative;
}
.vehicle-image::before {
content: attr(data-model);
z-index: 2;
}
.vehicle-image::after {
content: '';
position: absolute;
top: 20%;
left: 20%;
width: 150px;
height: 80px;
background: radial-gradient(ellipse, rgba(255,255,255,0.4) 0%, transparent 60%);
border-radius: 20px;
animation: shine 2s ease-in-out infinite alternate;
}
.vehicle-card h3 {
padding: 1.5rem 1.5rem 0;
font-size: 1.8rem;
}
.vehicle-card p {
padding: 0 1.5rem 1.5rem;
color: var(--text-secondary);
font-size: 1.2rem;
}
/* CTA Sections */
.cta-section {
padding: 5rem 2rem;
background: var(--bg-secondary);
text-align: center;
}
.cta-section h2 {
font-size: 3rem;
margin-bottom: 3rem;
background: linear-gradient(45deg, var(--gold-primary), var(--silver-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
form {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
input, select, textarea {
padding: 1rem;
background: rgba(255,255,255,0.05);
border: 1px solid var(--silver-primary);
border-radius: 10px;
color: var(--text-primary);
font-size: 1rem;
transition: border-color 0.3s ease;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--gold-primary);
box-shadow: 0 0 10px var(--accent-glow);
}
.btn-full {
width: 100%;
background: linear-gradient(45deg, var(--gold-primary), var(--gold-light));
color: var(--bg-dark);
font-weight: 600;
border: none;
cursor: pointer;
animation: shimmer 3s ease-in-out infinite;
}
/* Footer */
footer {
padding: 2rem;
text-align: center;
background: var(--bg-dark);
border-top: 1px solid var(--silver-primary);
color: var(--text-secondary);
}
/* Responsive */
@media (max-width: 768px) {
nav ul {
gap: 1rem;
}
.hero-content h1 {
font-size: 3rem;
}
.car-placeholder {
width: 100%;
max-width: 400px;
height: 250px;
font-size: 2rem;
}
.brands-grid {
gap: 2rem;
}
.brand-logo {
font-size: 1.8rem;
min-width: 120px;
}
.gallery-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.cta-section {
padding: 3rem 1rem;
}
}
@media (max-width: 480px) {
nav {
flex-direction: column;
gap: 1rem;
}
nav ul {
gap: 1rem;
}
}
</style>
</head>
<body>
<header>
<nav>
<a href="#hero" class="logo">Elite Autos</a>
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#gallery">Inventory</a></li>
<li><a href="#testdrive">Test Drive</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<div class="hero-content">
<div class="car-showcase">
<div class="car-placeholder"></div>
</div>
<h1>Discover Unparalleled Luxury</h1>
<p>Step into a world of prestige and performance. Our showroom features the finest Porsche, Mercedes-Benz, Bentley, Lamborghini, and more.</p>
<a href="#gallery" class="cta-btn">Explore Collection</a>
</div>
</section>
<section id="brands" class="brand-bar">
<h2>Prestigious Brands</h2>
<div class="brands-grid">
<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">Ferrari</div>
<div class="brand-logo">Rolls-Royce</div>
</div>
</section>
<section id="gallery">
<h2>Featured Vehicles</h2>
<div class="gallery-grid">
<div class="vehicle-card">
<div class="vehicle-image" data-model="Porsche 911 Turbo S"></div>
<h3>Porsche 911 Turbo S</h3>
<p>Starting at $230,000 • 640 HP • 0-60 in 2.6s</p>
<a href="#" class="btn">View Details</a>
</div>
<div class="vehicle-card">
<div class="vehicle-image" data-model="Bentley Continental GT"></div>
<h3>Bentley Continental GT</h3>
<p>Starting at $245,000 • 650 HP • Ultimate Grand Tourer</p>
<a href="#" class="btn">View Details</a>
</div>
<div class="vehicle-card">
<div class="vehicle-image" data-model="Lamborghini Huracán"></div>
<h3>Lamborghini Huracán STO</h3>
<p>Starting at $330,000 • 630 HP • Track-Focused Beast</p>
<a href="#" class="btn">View Details</a>
</div>
<div class="vehicle-card">
<div class="vehicle-image" data-model="Mercedes-AMG One"></div>
<h3>Mercedes-AMG One</h3>
<p>Starting at $2.7M • 1063 HP • Hypercar Legend</p>
<a href="#" class="btn">View Details</a>
</div>
<div class="vehicle-card">
<div class="vehicle-image" data-model="Rolls-Royce Phantom"></div>
<h3>Rolls-Royce Phantom</h3>
<p>Starting at $465,000 • Bespoke Luxury • Silent Majesty</p>
<a href="#" class="btn">View Details</a>
</div>
<div class="vehicle-card">
<div class="vehicle-image" data-model="Ferrari SF90 Stradale"></div>
<h3>Ferrari SF90 Stradale</h3>
<p>Starting at $500,000 • 986 HP • Plug-in Hybrid</p>
<a href="#" class="btn">View Details</a>
</div>
</div>
</section>
<section id="testdrive" class="cta-section">
<h2>Book a Test Drive</h2>
<form>
<input type="text" placeholder="Full Name" required>
<input type="email" placeholder="Email Address" required>
<select required>
<option value="">Select Vehicle</option>
<option>Porsche 911 Turbo S</option>
<option>Bentley Continental GT</option>
<option>Lamborghini Huracán STO</option>
<option>Mercedes-AMG One</option>
</select>
<input type="date" required>
<textarea rows="4" placeholder="Preferred Time & Notes"></textarea>
<button type="submit" class="btn btn-full">Schedule Test Drive</button>
</form>
</section>
<section id="contact" class="cta-section">
<h2>Contact Our Team</h2>
<form>
<input type="text" placeholder="Full Name" required>
<input type="email" placeholder="Email Address" required>
<input type="tel" placeholder="Phone Number">
<textarea rows="5" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn-full">Send Message</button>
</form>
</section>
</main>
<footer>
<p>© 2024 Elite Autos. All rights reserved. | Premier Luxury Dealership</p>
</footer>
</body>
</html>
This self-contained HTML/CSS mockup delivers a prestigious, immersive luxury showroom experience. Key features:
- Hero: Cinematic full-width Porsche 911 placeholder with shine effects, gradients, and subtle sparkles.
- Gallery: Responsive grid of 6 vehicles with metallic hover animations.
- Brands: Hover-interactive logo bar.
- CTAs: Styled forms for test drives/contact.
- Luxury styling: Dark palette, gold/silver shimmers (animated gradients), elegant fonts (Playfair Display/Montserrat).
- Responsive: Desktop-optimized, mobile-friendly grids/forms.
- Effects: Pure CSS shimmer, glows, shines—no JS needed. Copy-paste to view.
Comments