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>PRESTIGE MOTORS — Luxury Car Dealership</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&family=Cormorant+Garamond:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--gold: #C9A84C;
--gold-light: #E8D48B;
--gold-dark: #8B6914;
--silver: #C0C0C0;
--silver-light: #E8E8E8;
--platinum: #A9A9A9;
--black: #0A0A0A;
--black-soft: #111111;
--black-card: #161616;
--black-elevated: #1A1A1A;
--charcoal: #1E1E1E;
--dark-gray: #2A2A2A;
--text-primary: #F5F5F5;
--text-secondary: #999999;
--text-muted: #666666;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background: var(--black);
color: var(--text-primary);
overflow-x: hidden;
line-height: 1.6;
}
/* === GOLD SHIMMER ANIMATION === */
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-60px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(201, 168, 76, 0.2); }
50% { box-shadow: 0 0 40px rgba(201, 168, 76, 0.4); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes rotate-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.gold-text {
background: linear-gradient(
90deg,
var(--gold-dark) 0%,
var(--gold) 25%,
var(--gold-light) 50%,
var(--gold) 75%,
var(--gold-dark) 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 4s linear infinite;
}
.silver-text {
background: linear-gradient(
90deg,
var(--platinum) 0%,
var(--silver) 25%,
#FFFFFF 50%,
var(--silver) 75%,
var(--platinum) 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 5s linear infinite;
}
/* === NAVIGATION === */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 0 60px;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(180deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.0) 100%);
backdrop-filter: blur(10px);
transition: all 0.4s ease;
}
nav.scrolled {
background: rgba(10, 10, 10, 0.97);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(201, 168, 76, 0.15);
height: 70px;
}
.nav-logo {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
}
.nav-links {
display: flex;
gap: 40px;
list-style: none;
align-items: center;
}
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
transition: color 0.3s ease;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background: var(--gold);
transition: width 0.3s ease;
}
.nav-links a:hover {
color: var(--gold);
}
.nav-links a:hover::after {
width: 100%;
}
.nav-cta {
padding: 10px 28px;
border: 1px solid var(--gold);
color: var(--gold) !important;
font-size: 0.75rem !important;
letter-spacing: 2px;
transition: all 0.3s ease !important;
cursor: pointer;
}
.nav-cta:hover {
background: var(--gold);
color: var(--black) !important;
}
/* === HERO SECTION === */
.hero {
position: relative;
height: 100vh;
min-height: 700px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background: var(--black);
/* PLACEHOLDER: Full-bleed cinematic photo of a Porsche 911 GT3 in a dark studio,
dramatic side-angle with single spotlight creating deep shadows and reflections
on the paint. The car should be dark (black or deep blue) on a dark background. */
}
.hero-bg::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201, 168, 76, 0.04) 0%, transparent 70%),
radial-gradient(ellipse 120% 80% at 60% 50%, rgba(20, 20, 20, 0.3) 0%, transparent 50%);
}
/* Simulated car silhouette placeholder */
.hero-car-placeholder {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
width: 900px;
height: 320px;
background: linear-gradient(
135deg,
#1a1a1a 0%,
#252525 20%,
#1a1a1a 40%,
#2a2a2a 60%,
#1a1a1a 80%,
#252525 100%
);
border-radius: 0 0 50% 50% / 0 0 20% 20%;
clip-path: polygon(
5% 100%, 0% 70%, 5% 50%, 15% 30%, 25% 20%, 35% 15%,
42% 5%, 58% 5%, 70% 10%, 78% 18%, 88% 30%, 95% 50%,
100% 70%, 95% 100%
);
box-shadow:
0 40px 80px rgba(0,0,0,0.8),
0 0 120px rgba(201, 168, 76, 0.03);
animation: fadeIn 2s ease;
}
.hero-car-placeholder::after {
content: '[ Porsche 911 GT3 — Studio Shot ]';
position: absolute;
bottom: 30%;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.08);
font-size: 0.9rem;
letter-spacing: 3px;
white-space: nowrap;
font-family: 'Inter', sans-serif;
}
/* Spotlight effect */
.hero-spotlight {
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(ellipse, rgba(201, 168, 76, 0.06) 0%, transparent 70%);
pointer-events: none;
}
/* Floor reflection */
.hero-floor {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 200px;
background: linear-gradient(180deg, transparent 0%, rgba(201, 168, 76, 0.02) 100%);
}
.hero-floor::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.2), transparent);
}
.hero-content {
position: relative;
z-index: 10;
text-align: center;
padding: 0 20px;
margin-top: -15vh;
animation: fadeInUp 1.5s ease 0.3s both;
}
.hero-subtitle {
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 6px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
opacity: 0.9;
}
.hero-title {
font-family: 'Playfair Display', serif;
font-size: 5rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 10px;
letter-spacing: -1px;
}
.hero-model {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 300;
color: var(--text-secondary);
margin-bottom: 40px;
letter-spacing: 3px;
}
.hero-specs {
display: flex;
justify-content: center;
gap: 60px;
margin-bottom: 50px;
}
.hero-spec {
text-align: center;
}
.hero-spec-value {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 600;
color: var(--text-primary);
}
.hero-spec-label {
font-size: 0.7rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 4px;
}
.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
}
.btn-primary {
padding: 16px 48px;
background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light), var(--gold));
background-size: 200% 200%;
color: var(--black);
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: all 0.4s ease;
text-decoration: none;
display: inline-block;
animation: shimmer 3s ease infinite;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 40px rgba(201, 168, 76, 0.3);
}
.btn-secondary {
padding: 16px 48px;
background: transparent;
color: var(--silver-light);
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
border: 1px solid rgba(192, 192, 192, 0.3);
cursor: pointer;
transition: all 0.4s ease;
text-decoration: none;
display: inline-block;
}
.btn-secondary:hover {
border-color: var(--silver);
background: rgba(192, 192, 192, 0.05);
transform: translateY(-2px);
}
.hero-scroll {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
animation: float 3s ease infinite;
}
.hero-scroll span {
font-size: 0.65rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-muted);
}
.scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(180deg, var(--gold), transparent);
}
/* === SECTION STYLES === */
section {
padding: 120px 60px;
position: relative;
}
.section-label {
font-size: 0.7rem;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 15px;
font-weight: 500;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 600;
margin-bottom: 20px;
line-height: 1.2;
}
.section-desc {
font-size: 1rem;
color: var(--text-secondary);
max-width: 600px;
line-height: 1.8;
font-weight: 300;
}
.divider {
width: 60px;
height: 1px;
background: linear-gradient(90deg, var(--gold), var(--gold-dark));
margin: 20px 0;
}
/* === BRAND BAR === */
.brand-bar {
padding: 60px;
background: var(--black-soft);
border-top: 1px solid rgba(201, 168, 76, 0.08);
border-bottom: 1px solid rgba(201, 168, 76, 0.08);
}
.brand-bar-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 80px;
flex-wrap: wrap;
}
.brand-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
opacity: 0.4;
transition: opacity 0.4s ease, transform 0.4s ease;
cursor: pointer;
}
.brand-logo:hover {
opacity: 1;
transform: scale(1.05);
}
.brand-icon {
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid rgba(192, 192, 192, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
background: rgba(255,255,255,0.02);
transition: all 0.4s ease;
}
.brand-logo:hover .brand-icon {
border-color: var(--gold);
box-shadow: 0 0 20px rgba(201, 168, 76, 0.15);
}
.brand-name {
font-size: 0.65rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--silver);
}
/* === SHOWROOM GALLERY === */
.showroom {
background: var(--black);
}
.showroom-header {
text-align: center;
margin-bottom: 80px;
}
.showroom-header .section-desc {
margin: 0 auto;
}
.showroom-filters {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 40px;
}
.filter-btn {
padding: 8px 24px;
background: transparent;
border: 1px solid var(--dark-gray);
color: var(--text-secondary);
font-size: 0.75rem;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
}
.filter-btn.active, .filter-btn:hover {
border-color: var(--gold);
color: var(--gold);
background: rgba(201, 168, 76, 0.05);
}
.showroom-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1400px;
margin: 0 auto;
}
.car-card {
background: var(--black-card);
border: 1px solid rgba(255,255,255,0.04);
overflow: hidden;
transition: all 0.5s ease;
position: relative;
group: card;
}
.car-card:hover {
border-color: rgba(201, 168, 76, 0.2);
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 30px rgba(201, 168, 76, 0.05);
}
.car-card-image {
width: 100%;
height: 260px;
position: relative;
overflow: hidden;
/* PLACEHOLDER: High-quality photo of respective luxury car,
studio-lit on dark background, 3/4 front angle */
}
.car-card-image .placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
color: rgba(255,255,255,0.1);
letter-spacing: 2px;
text-transform: uppercase;
}
.car-img-1 .placeholder {
background: linear-gradient(135deg, #0d0d0d, #1a1510, #0d0d0d);
}
.car-img-2 .placeholder {
background: linear-gradient(135deg, #0d0d0d, #10151a, #0d0d0d);
}
.car-img-3 .placeholder {
background: linear-gradient(135deg, #0d0d0d, #1a1015, #0d0d0d);
}
.car-img-4 .placeholder {
background: linear-gradient(135deg, #0d0d0d, #151a10, #0d0d0d);
}
.car-img-5 .placeholder {
background: linear-gradient(135deg, #0d0d0d, #181818, #0d0d0d);
}
.car-img-6 .placeholder {
background: linear-gradient(135deg, #0d0d0d, #15101a, #0d0d0d);
}
.car-card-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60%;
background: linear-gradient(0deg, var(--black-card), transparent);
}
.car-badge {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
padding: 5px 14px;
font-size: 0.6rem;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
}
.badge-new {
background: var(--gold);
color: var(--black);
}
.badge-exclusive {
background: transparent;
border: 1px solid var(--silver);
color: var(--silver);
}
.car-card-info {
padding: 28px 28px 32px;
}
.car-brand {
font-size: 0.65rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 6px;
}
.car-name {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 12px;
}
.car-specs {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.car-spec {
font-size: 0.7rem;
color: var(--text-muted);
letter-spacing: 1px;
}
.car-price-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.car-price {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: 500;
}
.car-arrow {
width: 40px;
height: 40px;
border: 1px solid rgba(201, 168, 76, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
font-size: 1.1rem;
transition: all 0.3s ease;
cursor: pointer;
}
.car-card:hover .car-arrow {
background: var(--gold);
color: var(--black);
border-color: var(--gold);
}
/* Featured large card */
.car-card.featured {
grid-column: span 2;
}
.car-card.featured .car-card-image {
height: 360px;
}
/* === EXPERIENCE SECTION === */
.experience {
background: var(--black-soft);
border-top: 1px solid rgba(201, 168, 76, 0.06);
}
.experience-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
max-width: 1400px;
margin: 0 auto;
align-items: center;
}
.experience-image {
width: 100%;
height: 500px;
position: relative;
/* PLACEHOLDER: Interior shot of a luxury car showroom — polished dark floors,
moody lighting, cars on display like art pieces */
}
.experience-image .placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #111, #1a1510, #111, #15101a);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.07);
font-size: 0.75rem;
letter-spacing: 2px;
text-transform: uppercase;
border: 1px solid rgba(201, 168, 76, 0.08);
}
.experience-content {
padding: 40px 0;
}
.experience-features {
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 32px;
}
.exp-feature {
display: flex;
gap: 20px;
align-items: flex-start;
}
.exp-feature-icon {
width: 48px;
height: 48px;
min-width: 48px;
border: 1px solid rgba(201, 168, 76, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--gold);
}
.exp-feature h4 {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
margin-bottom: 4px;
}
.exp-feature p {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 300;
}
/* === CTA / TEST DRIVE === */
.cta-section {
position: relative;
padding: 140px 60px;
text-align: center;
overflow: hidden;
background: var(--black);
}
.cta-bg-pattern {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(201, 168, 76, 0.04) 0%, transparent 70%);
}
.cta-border-top {
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.3), transparent);
}
.cta-content {
position: relative;
z-index: 2;
max-width: 700px;
margin: 0 auto;
}
.cta-content .section-title {
font-size: 3.2rem;
margin-bottom: 20px;
}
.cta-content .section-desc {
margin: 0 auto 50px;
text-align: center;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
}
/* === CONTACT SECTION === */
.contact {
background: var(--black-soft);
border-top: 1px solid rgba(201, 168, 76, 0.06);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
max-width: 1400px;
margin: 0 auto;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 40px;
}
.form-row {
display: flex;
gap: 20px;
}
.form-group {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 0.7rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 14px 18px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text-primary);
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
transition: border-color 0.3s ease;
outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--gold);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.form-group select {
appearance: none;
cursor: pointer;
}
.contact-info {
padding: 40px 0;
}
.contact-details {
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 36px;
}
.contact-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.contact-icon {
width: 44px;
height: 44px;
min-width: 44px;
border: 1px solid rgba(201, 168, 76, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
font-size: 1rem;
}
.contact-item h4 {
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 4px;
}
.contact-item p {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight
This response may be incomplete — the model reached its output limit.
Comments