0
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
8 Responses
8 AI responses
0
Of course. Here is a single-page UI mockup for a luxury car dealership website, designed to be sleek, prestigious, and immersive.
This mockup uses HTML and embedded CSS to create a self-contained file. It incorporates a dark theme with gold and silver accents, elegant typography, and subtle visual effects to evoke a high-end showroom feel.
Key Design Elements:
- Color Palette: A sophisticated dark background (
#0a0a0a) allows the gold and silver metallic accents to stand out. - Typography:
Cormorant Garamondis used for headings to convey classic elegance, whileLatois used for body text for its modern readability. - Metallic Effects: CSS
linear-gradientis used on text and borders to simulate a metallic sheen. - Shimmer Animation: A subtle light-sweep animation is applied to the primary call-to-action button on hover, enhancing the sense of luxury and interactivity.
- Layout: The design uses Flexbox and CSS Grid for a clean, modern, and responsive structure.
Luxury Showroom UI Mockup
<!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 Showroom</title>
<style>
/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Lato:wght@300;400;700&display=swap');
/* --- CSS Variables (Theme) --- */
:root {
--color-dark-primary: #0a0a0a;
--color-dark-secondary: #141414;
--color-light: #f5f5f5;
--color-gold: #c09f6b;
--color-silver: #c0c0c0;
--color-text-muted: #888;
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Lato', sans-serif;
--gradient-gold: linear-gradient(145deg, #d4af37, #c09f6b, #b28c4b);
--gradient-silver: linear-gradient(145deg, #e0e0e0, #c0c0c0, #a9a9a9);
}
/* --- Base & Reset Styles --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background-color: var(--color-dark-primary);
color: var(--color-light);
line-height: 1.6;
}
h1, h2, h3 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1.5px;
}
h1 { font-size: 4rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }
p {
font-weight: 300;
margin-bottom: 1rem;
}
a {
color: var(--color-gold);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #fff;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
section {
padding: 6rem 0;
}
.section-title {
text-align: center;
margin-bottom: 4rem;
color: var(--color-light);
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 2px;
background: var(--gradient-gold);
margin: 1rem auto 0;
}
/* --- Button Styles --- */
.btn {
display: inline-block;
padding: 12px 30px;
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.btn-gold {
background: var(--gradient-gold);
color: var(--color-dark-primary);
border-color: var(--color-gold);
}
.btn-outline {
background: transparent;
color: var(--color-light);
border-color: var(--color-gold);
}
.btn-outline:hover {
background-color: var(--color-gold);
color: var(--color-dark-primary);
}
/* Shimmer effect for primary CTA */
.btn-gold::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(255, 255, 255, 0.2);
transform: rotate(45deg);
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-gold:hover::after {
transform: translate(50%, 50%) rotate(45deg);
}
/* --- Header --- */
.main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
background: rgba(10, 10, 10, 0.5);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 2px;
color: var(--color-light);
}
.logo span {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.nav-links ul {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2.5rem;
}
.nav-links a {
color: var(--color-light);
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
font-size: 0.9rem;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background: var(--color-gold);
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
/* --- Hero Section --- */
#hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 0;
position: relative;
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://placehold.co/1920x1080/000000/333333?text=Dramatic+Porsche+911') no-repeat center center/cover;
/* Placeholder for a dramatic, low-light shot of a Porsche 911 */
}
.hero-content {
max-width: 800px;
}
.hero-content h1 {
margin-bottom: 1rem;
text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
font-weight: 300;
}
/* --- Brand Bar Section --- */
#brands {
background-color: var(--color-dark-secondary);
padding: 3rem 0;
}
.brand-logos {
display: flex;
justify-content: space-around;
align-items: center;
filter: grayscale(100%) brightness(3);
opacity: 0.6;
transition: all 0.4s ease;
}
#brands:hover .brand-logos {
filter: grayscale(0) brightness(1);
opacity: 1;
}
.brand-logos span {
font-family: var(--font-heading);
font-size: 1.5rem;
letter-spacing: 2px;
/* In a real site, these would be <img> or <svg> tags */
}
/* --- Showroom Section --- */
#showroom {
background-color: var(--color-dark-primary);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.car-card {
background-color: var(--color-dark-secondary);
overflow: hidden;
border: 1px solid #222;
transition: transform 0.4s ease, border-color 0.4s ease;
}
.car-card:hover {
transform: translateY(-10px);
border-color: var(--color-gold);
}
.car-image {
height: 250px;
background-color: #333;
background-size: cover;
background-position: center;
}
.car-info {
padding: 1.5rem;
}
.car-info h3 {
color: var(--color-light);
margin-bottom: 0.5rem;
}
.car-info p {
color: var(--color-text-muted);
font-size: 0.9rem;
margin-bottom: 0;
}
/* --- CTA Test Drive Section --- */
#cta-test-drive {
padding: 8rem 0;
text-align: center;
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://placehold.co/1920x800/000000/333333?text=Luxury+Car+Interior') no-repeat center center/cover;
/* Placeholder for a detailed shot of a luxury car's interior cockpit */
}
#cta-test-drive h2 {
margin-bottom: 2rem;
}
/* --- Footer --- */
footer {
background-color: var(--color-dark-secondary);
padding: 4rem 0 2rem;
color: var(--color-text-muted);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.footer-content h4 {
font-family: var(--font-heading);
color: var(--color-light);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.1rem;
margin-bottom: 1rem;
position: relative;
}
.footer-content h4::after {
content: '';
position: absolute;
left: 0;
bottom: -5px;
height: 2px;
width: 30px;
background: var(--gradient-gold);
}
.footer-content ul {
list-style: none;
}
.footer-content li {
margin-bottom: 0.5rem;
}
.footer-content a {
color: var(--color-text-muted);
}
.footer-content a:hover {
color: var(--color-gold);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #222;
font-size: 0.9rem;
}
</style>
</head>
<body>
<!-- === HEADER === -->
<header class="main-header">
<a href="#hero" class="logo">Prestige<span>Motors</span></a>
<nav class="nav-links">
<ul>
<li><a href="#showroom">Showroom</a></li>
<li><a href="#cta-test-drive">Test Drive</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- === HERO SECTION === -->
<section id="hero">
<div class="hero-content">
<h1>The Legend, Redefined</h1>
<p>Experience the 2024 Porsche 911. Uncompromising performance meets timeless design.</p>
<a href="#showroom" class="btn btn-gold">Explore The Collection</a>
</div>
</section>
<!-- === BRAND BAR === -->
<section id="brands">
<div class="container">
<div class="brand-logos">
<span>PORSCHE</span>
<span>MERCEDES-BENZ</span>
<span>BENTLEY</span>
<span>LAMBORGHINI</span>
<span>ROLLS-ROYCE</span>
</div>
</div>
</section>
<!-- === SHOWROOM SECTION === -->
<section id="showroom">
<div class="container">
<h2 class="section-title">Our Curated Showroom</h2>
<div class="gallery-grid">
<!-- Car 1 -->
<div class="car-card">
<div class="car-image" style="background-image: url('https://placehold.co/600x400/111111/555555?text=Bentley+Continental+GT');"></div>
<div class="car-info">
<h3>Bentley Continental GT</h3>
<p>Grand Touring, Redefined.</p>
</div>
</div>
<!-- Car 2 -->
<div class="car-card">
<div class="car-image" style="background-image: url('https://placehold.co/600x400/111111/555555?text=Lamborghini+Huracan');"></div>
<div class="car-info">
<h3>Lamborghini Huracán</h3>
<p>Instinctive Technology.</p>
</div>
</div>
<!-- Car 3 -->
<div class="car-card">
<div class="car-image" style="background-image: url('https://placehold.co/600x400/111111/555555?text=Mercedes-AMG+G63');"></div>
<div class="car-info">
<h3>Mercedes-AMG G 63</h3>
<p>Stronger Than Time.</p>
</div>
</div>
<!-- Car 4 -->
<div class="car-card">
<div class="car-image" style="background-image: url('https://placehold.co/600x400/111111/555555?text=Porsche+Taycan');"></div>
<div class="car-info">
<h3>Porsche Taycan Turbo S</h3>
<p>Soul, Electrified.</p>
</div>
</div>
<!-- Car 5 -->
<div class="car-card">
<div class="car-image" style="background-image: url('https://placehold.co/600x400/111111/555555?text=Rolls-Royce+Ghost');"></div>
<div class="car-info">
<h3>Rolls-Royce Ghost</h3>
<p>Post-Opulent Design.</p>
</div>
</div>
<!-- Car 6 -->
<div class="car-card">
<div class="car-image" style="background-image: url('https://placehold.co/600x400/111111/555555?text=Porsche+911+GT3');"></div>
<div class="car-info">
<h3>Porsche 911 GT3 RS</h3>
<p>Born on the Racetrack.</p>
</div>
</div>
</div>
</div>
</section>
<!-- === CTA TEST DRIVE SECTION === -->
<section id="cta-test-drive">
<div class="container">
<h2>Feel The Power In Your Hands</h2>
<p>Your journey into unparalleled performance begins with a test drive. <br>Schedule your private appointment today.</p>
<a href="#" class="btn btn-gold">Book A Test Drive</a>
</div>
</section>
</main>
<!-- === FOOTER === -->
<footer id="footer">
<div class="container">
<div class="footer-content">
<div class="footer-about">
<h4>Prestige<span>Motors</span></h4>
<p>The premier destination for the world's most sought-after luxury and performance vehicles.</p>
</div>
<div class="footer-contact">
<h4>Contact Us</h4>
<ul>
<li>123 Luxury Lane, Beverly Hills, CA 90210</li>
<li>(310) 555-0189</li>
<li>concierge@prestigemotors.example</li>
</ul>
</div>
<div class="footer-hours">
<h4>Showroom Hours</h4>
<ul>
<li>Monday - Friday: 9am - 7pm</li>
<li>Saturday: 10am - 6pm</li>
<li>Sunday: By Appointment</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Prestige Motors. All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
</html>
Comments
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
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
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
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
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
0
Luxury Car Dealership Showroom Website UI Mockup
I'll create a sleek, immersive single-page website mockup for a luxury car dealership with a cinematic feel. 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>Prestige 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>
/* CSS Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--color-dark: #0a0a0a;
--color-darker: #050505;
--color-gold: #d4af37;
--color-gold-light: #f4e4a6;
--color-silver: #c0c0c0;
--color-silver-light: #e8e8e8;
--color-white: #ffffff;
--color-gray: #1a1a1a;
--color-gray-light: #2a2a2a;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--color-dark);
color: var(--color-white);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
font-weight: 600;
letter-spacing: 0.5px;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 60px;
position: relative;
}
.section-title h2 {
font-size: 2.8rem;
display: inline-block;
position: relative;
}
.section-title h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.btn {
display: inline-block;
padding: 16px 32px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 2px;
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.9rem;
cursor: pointer;
border: none;
}
.btn-primary {
background-color: var(--color-gold);
color: var(--color-dark);
}
.btn-primary:hover {
background-color: var(--color-gold-light);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}
.btn-secondary {
background-color: transparent;
color: var(--color-white);
border: 1px solid var(--color-silver);
}
.btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: var(--color-white);
}
/* Header & Navigation */
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);
}
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: 1.8rem;
font-weight: 700;
color: var(--color-white);
text-decoration: none;
position: relative;
}
.logo span {
color: var(--color-gold);
}
.logo::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, var(--color-gold), transparent);
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 40px;
}
nav ul li a {
color: var(--color-white);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.5px;
transition: color 0.3s ease;
position: relative;
}
nav ul li a:hover {
color: var(--color-gold);
}
nav ul li a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background-color: var(--color-gold);
transition: width 0.3s ease;
}
nav ul li a:hover::after {
width: 100%;
}
/* Hero Section */
.hero {
height: 100vh;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
margin-top: 80px;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 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;
}
.hero-content {
max-width: 700px;
z-index: 2;
}
.hero h1 {
font-size: 4rem;
margin-bottom: 20px;
line-height: 1.1;
}
.hero h1 span {
color: var(--color-gold);
position: relative;
display: inline-block;
}
.hero h1 span::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--color-gold), transparent);
}
.hero p {
font-size: 1.2rem;
margin-bottom: 40px;
color: var(--color-silver);
max-width: 600px;
}
.hero-btns {
display: flex;
gap: 20px;
}
/* Brand Bar */
.brands {
background-color: var(--color-darker);
padding: 40px 0;
}
.brands-container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.brand-logo {
height: 60px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.7;
transition: all 0.3s ease;
}
.brand-logo:hover {
opacity: 1;
transform: translateY(-5px);
}
/* Showroom Section */
.showroom {
background-color: var(--color-dark);
}
.showroom-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
}
.car-card {
background-color: var(--color-gray);
border-radius: 5px;
overflow: hidden;
transition: all 0.4s ease;
position: relative;
}
.car-card:hover {
transform: translateY(-15px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.car-image {
height: 220px;
background-color: var(--color-gray-light);
background-size: cover;
background-position: center;
position: relative;
}
.car-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8));
}
.car-info {
padding: 25px;
}
.car-info h3 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.car-info p {
color: var(--color-silver);
margin-bottom: 20px;
font-size: 0.95rem;
}
.car-price {
font-size: 1.3rem;
color: var(--color-gold);
font-weight: 600;
margin-bottom: 20px;
display: block;
}
.car-price::before {
content: 'From ';
font-size: 0.9rem;
color: var(--color-silver);
}
.car-features {
display: flex;
justify-content: space-between;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--color-gray-light);
}
.feature {
text-align: center;
}
.feature i {
color: var(--color-gold);
margin-bottom: 5px;
font-size: 1.2rem;
}
.feature span {
display: block;
font-size: 0.8rem;
color: var(--color-silver);
}
/* CTA Sections */
.cta-section {
background-color: var(--color-darker);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 30%, rgba(212, 175, 55, 0.05) 50%, transparent 70%);
z-index: 1;
}
.cta-container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 2;
}
.cta-content {
flex: 1;
max-width: 600px;
}
.cta-content h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.cta-content p {
color: var(--color-silver);
margin-bottom: 30px;
font-size: 1.1rem;
}
.cta-image {
flex: 1;
height: 400px;
background-color: var(--color-gray-light);
background-size: cover;
background-position: center;
border-radius: 5px;
margin-left: 50px;
}
.test-drive .cta-image {
background-image: url('https://images.unsplash.com/photo-1553440569-bcc63803a83d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2025&q=80');
}
.contact .cta-image {
background-image: url('https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
}
/* Footer */
footer {
background-color: var(--color-darker);
padding: 60px 0 30px;
border-top: 1px solid var(--color-gray);
}
.footer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-column h3 {
font-size: 1.3rem;
margin-bottom: 25px;
color: var(--color-white);
position: relative;
display: inline-block;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 2px;
background-color: var(--color-gold);
}
.footer-column p, .footer-column a {
color: var(--color-silver);
margin-bottom: 15px;
display: block;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column a:hover {
color: var(--color-gold);
}
.social-icons {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--color-gray);
color: var(--color-white);
transition: all 0.3s ease;
}
.social-icons a:hover {
background-color: var(--color-gold);
color: var(--color-dark);
transform: translateY(-5px);
}
.copyright {
text-align: center;
padding-top: 30px;
border-top: 1px solid var(--color-gray);
color: var(--color-silver);
font-size: 0.9rem;
}
/* Metallic Effects */
.metallic-text {
background: linear-gradient(90deg, var(--color-gold), var(--color-silver), var(--color-gold));
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 3s linear infinite;
}
.metallic-border {
border: 1px solid;
border-image: linear-gradient(90deg, var(--color-gold), var(--color-silver), var(--color-gold)) 1;
animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
/* Responsive Design */
@media (max-width: 1024px) {
.hero h1 {
font-size: 3.2rem;
}
.cta-container {
flex-direction: column;
}
.cta-image {
margin-left: 0;
margin-top: 40px;
width: 100%;
}
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero-btns {
flex-direction: column;
align-items: flex-start;
}
.brands-container {
justify-content: center;
gap: 30px;
}
.brand-logo {
height: 40px;
margin: 0 15px;
}
nav ul {
display: none;
}
.mobile-menu-btn {
display: block;
background: none;
border: none;
color: var(--color-white);
font-size: 1.5rem;
cursor: pointer;
}
}
@media (max-width: 480px) {
.hero h1 {
font-size: 2rem;
}
.section-title h2 {
font-size: 2rem;
}
.showroom-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Header & Navigation -->
<header id="header">
<div class="container header-container">
<a href="#" class="logo">Prestige<span>Motors</span></a>
<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" id="home">
<div class="hero-bg"></div>
<div class="container">
<div class="hero-content">
<h1>Experience <span class="metallic-text">Ultimate Luxury</span></h1>
<p>Welcome to Prestige Motors, where automotive excellence meets unparalleled luxury. Discover the world's most exclusive vehicles in an environment designed for the discerning enthusiast.</p>
<div class="hero-btns">
<a href="#showroom" class="btn btn-primary">Explore Collection</a>
<a href="#test-drive" class="btn btn-secondary">Book a Test Drive</a>
</div>
</div>
</div>
</section>
<!-- Brand Bar -->
<section class="brands" id="brands">
<div class="container brands-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Porsche_logo.svg/2560px-Porsche_logo.svg.png" alt="Porsche" class="brand-logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Mercedes-Logo.svg/2560px-Mercedes-Logo.svg.png" alt="Mercedes-Benz" class="brand-logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Bentley_logo.svg/2560px-Bentley_logo.svg.png" alt="Bentley" class="brand-logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Lamborghini_logo.svg/2560px-Lamborghini_logo.svg.png" alt="Lamborghini" class="brand-logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Rolls-Royce_Motor_Cars_logo.svg/2560px-Rolls-Royce_Motor_Cars_logo.svg.png" alt="Rolls-Royce" class="brand-logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Aston_Martin_Lagonda_logo.svg/2560px-Aston_Martin_Lagonda_logo.svg.png" alt="Aston Martin" class="brand-logo">
</div>
</section>
<!-- Showroom Section -->
<section class="showroom" id="showroom">
<div class="container">
<div class="section-title">
<h2>Our Exclusive Collection</h2>
</div>
<div class="showroom-grid">
<!-- Car 1 -->
<div class="car-card">
<div class="car-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="car-info">
<h3>Porsche 911 Turbo S</h3>
<p>The epitome of sports car performance with luxurious refinement. Experience breathtaking acceleration and precision handling.</p>
<span class="car-price">$215,000</span>
<a href="#test-drive" class="btn btn-secondary" style="width: 100%; text-align: center;">Inquire</a>
<div class="car-features">
<div class="feature">
<i class="fas fa-tachometer-alt"></i>
<span>205 mph</span>
</div>
<div class="feature">
<i class="fas fa-bolt"></i>
<span>640 HP</span>
</div>
<div class="feature">
<i class="fas fa-cogs"></i>
<span>PDK Auto</span>
</div>
</div>
</div>
</div>
<!-- Car 2 -->
<div class="car-card">
<div class="car-image" style="background-image: url('https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2067&q=80');"></div>
<div class="car-info">
<h3>Mercedes-Benz S-Class</h3>
<p>The benchmark for luxury sedans, combining cutting-edge technology with unparalleled comfort and refinement.</p>
<span class="car-price">$118,000</span>
<a href="#test-drive" class="btn btn-secondary" style="width: 100%; text-align: center;">Inquire</a>
<div class="car-features">
<div class="feature">
<i class="fas fa-chair"></i>
<span>Massage Seats</span>
</div>
<div class="feature">
<i class="fas fa-microchip"></i>
<span>MBUX AI</span>
</div>
<div class="feature">
<i class="fas fa-shield-alt"></i>
<span>Driving Assist</span>
</div>
</div>
</div>
</div>
<!-- Car 3 -->
<div class="car-card">
<div class="car-image" style="background-image: url('https://images.unsplash.com/photo-1621007947382-bb3c3994e3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
<div class="car-info">
<h3>Bentley Continental GT</h3>
<p>A grand tourer that redefines automotive luxury with handcrafted interiors and formidable performance.</p>
<span class="car-price">$245,000</span>
<a href="#test-drive" class="btn btn-secondary" style="width: 100%; text-align: center;">Inquire</a>
<div class="car-features">
<div class="feature">
<i class="fas fa-horse-head"></i>
<span>542 HP</span>
</div>
<div class="feature">
<i class="fas fa-couch"></i>
<span>Handcrafted</span>
</div>
<div class="feature">
<i class="fas fa-wind"></i>
<span>All-Wheel Drive</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Test Drive CTA -->
<section class="cta-section test-drive" id="test-drive">
<div class="container cta-container">
<div class="cta-content">
<h2>Experience Performance Firsthand</h2>
<p>Schedule a private test drive with one of our luxury vehicles. Our concierge service will arrange everything for your exclusive driving experience.</p>
<a href="#contact" class="btn btn-primary">Book a Test Drive</a>
</div>
<div class="cta-image"></div>
</div>
</section>
<!-- Contact CTA -->
<section class="cta-section contact" id="contact">
<div class="container cta-container">
<div class="cta-content">
<h2>Personalized Consultation</h2>
<p>Our luxury automotive specialists are available to provide personalized guidance in selecting the perfect vehicle for your lifestyle.</p>
<a href="tel:+18005551234" class="btn btn-primary">Contact Our Specialists</a>
</div>
<div class="cta-image"></div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-container">
<div class="footer-column">
<h3>Prestige Motors</h3>
<p>Where automotive excellence meets unparalleled luxury. Experience the world's most exclusive vehicles in an environment designed for the discerning enthusiast.</p>
<div class="social-icons">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<a href="#home">Home</a>
<a href="#showroom">Showroom</a>
<a href="#brands">Brands</a>
<a href="#test-drive">Test Drive</a>
<a href="#contact">Contact</a>
</div>
<div class="footer-column">
<h3>Contact Us</h3>
<p><i class="fas fa-map-marker-alt" style="margin-right: 10px; color: var(--color-gold);"></i> 123 Luxury Avenue, Beverly Hills, CA 90210</p>
<p><i class="fas fa-phone" style="margin-right: 10px; color: var(--color-gold);"></i> +1 (800) 555-1234</p>
<p><i class="fas fa-envelope" style="margin-right: 10px; color: var(--color-gold);"></i> info@prestigemotors.com</p>
</div>
</div>
<div class="copyright">
<p>© 2023 Prestige Motors. All rights reserved. | Luxury Automotive Dealership</p>
</div>
</div>
</footer>
<script>
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.getElementById('header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// Smooth scrolling for anchor 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. Cinematic Hero Section
- Full-width background with a dramatic Porsche 911 image
- Gradient overlay for depth and contrast
- Animated metallic text effect on "Ultimate Luxury"
- Prominent call-to-action buttons with hover effects
2. Luxury Color Palette
- Dark/black backgrounds (#0a0a0a, #050505)
- Gold accents (#d4af37) for premium feel
- Silver/metallic tones (#c0c0c0) for sophistication
- Subtle gradients creating reflective effects
3. Premium Typography
- Playfair Display for headings (elegant, serif font)
- Inter for body text (clean, modern sans-serif)
- Careful spacing and hierarchy for readability
4. Brand Bar
- Logos of six luxury automotive brands
- Hover effects with subtle animation
- Consistent styling that maintains the luxury aesthetic
5. Showroom Gallery
- Responsive grid layout with hover animations
- Each car card includes:
- High-quality placeholder image
- Key specifications
- Price with metallic styling
- Feature icons
- Inquiry button
6. Call-to-Action Sections
- Two distinct CTA sections (Test Drive and Contact)
- Background images with gradient overlays
- Prominent buttons with hover effects
- Balanced layout with imagery and content
7. Visual Effects
- Metallic text animation using CSS gradients
- Subtle shimmer effects on gold elements
- Card hover animations with elevation and shadow
- Gradient borders for premium feel
8. Responsive Design
- Mobile-friendly navigation (hidden on smaller screens)
- Flexible grid layouts that adapt to screen size
- Typography scaling for different viewports
- Touch-friendly interface elements
The design creates an immersive, high-end experience that mimics the feeling of walking into a luxury car showroom, with careful attention to visual hierarchy, premium aesthetics, and user interaction.
Comments
0
Luxury Car Dealership Showroom Website
Here's a complete, single-page luxury car dealership website with a cinematic, high-end aesthetic:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elite Motors - Luxury Car Dealership</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--gold: #D4AF37;
--silver: #C0C0C0;
--dark-bg: #0a0a0a;
--card-bg: #1a1a1a;
--text-light: #f5f5f5;
--text-muted: #b0b0b0;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--dark-bg);
color: var(--text-light);
line-height: 1.6;
overflow-x: hidden;
}
/* Navigation */
nav {
position: fixed;
top: 0;
width: 100%;
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(10px);
padding: 1.5rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(135deg, var(--gold) 0%, #f4d03f 50%, var(--gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 2px;
}
.nav-links {
display: flex;
gap: 3rem;
list-style: none;
}
.nav-links a {
color: var(--text-light);
text-decoration: none;
font-weight: 400;
font-size: 0.95rem;
letter-spacing: 1px;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--gold);
}
/* Hero Section */
.hero {
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 1200px;
padding: 0 2rem;
}
.hero-image {
width: 80%;
max-width: 900px;
height: 400px;
margin: 0 auto 2rem;
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
border-radius: 20px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 60px rgba(212, 175, 55, 0.3);
}
.hero-image::after {
content: 'PORSCHE 911 TURBO S';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: rgba(212, 175, 55, 0.3);
letter-spacing: 3px;
}
.hero h1 {
font-family: 'Playfair Display', serif;
font-size: 4rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--gold) 0%, #f4d03f 50%, var(--gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero p {
font-size: 1.3rem;
color: var(--text-muted);
margin-bottom: 2rem;
letter-spacing: 2px;
font-weight: 300;
}
.cta-button {
display: inline-block;
padding: 1rem 3rem;
background: linear-gradient(135deg, var(--gold) 0%, #f4d03f 100%);
color: var(--dark-bg);
text-decoration: none;
font-weight: 600;
letter-spacing: 2px;
border-radius: 50px;
transition: all 0.3s;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
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.3), transparent);
transition: left 0.5s;
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5);
}
/* Brand Bar */
.brand-bar {
padding: 4rem 5%;
background: var(--card-bg);
border-top: 1px solid rgba(212, 175, 55, 0.2);
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.brand-bar h2 {
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 2rem;
margin-bottom: 3rem;
color: var(--gold);
letter-spacing: 2px;
}
.brands {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
align-items: center;
}
.brand-logo {
height: 80px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(192, 192, 192, 0.3);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
color: var(--silver);
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.brand-logo::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(192, 192, 192, 0.1), transparent);
transform: rotate(45deg);
transition: all 0.5s;
}
.brand-logo:hover {
border-color: var(--gold);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}
.brand-logo:hover::before {
top: 100%;
left: 100%;
}
/* Showroom Section */
.showroom {
padding: 6rem 5%;
background: var(--dark-bg);
}
.showroom-header {
text-align: center;
margin-bottom: 4rem;
}
.showroom-header h2 {
font-family: 'Playfair Display', serif;
font-size: 3rem;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--silver) 0%, #ffffff 50%, var(--silver) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.showroom-header p {
font-size: 1.1rem;
color: var(--text-muted);
letter-spacing: 1px;
}
.vehicle-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
}
.vehicle-card {
background: var(--card-bg);
border-radius: 15px;
overflow: hidden;
transition: all 0.3s;
border: 1px solid rgba(192, 192, 192, 0.2);
position: relative;
}
.vehicle-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.vehicle-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(212, 175, 55, 0.3);
border-color: var(--gold);
}
.vehicle-card:hover::before {
opacity: 1;
}
.vehicle-image {
width: 100%;
height: 250px;
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: rgba(192, 192, 192, 0.3);
position: relative;
overflow: hidden;
}
.vehicle-image::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border: 3px solid rgba(212, 175, 55, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.vehicle-info {
padding: 2rem;
}
.vehicle-info h3 {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
margin-bottom: 0.5rem;
color: var(--gold);
}
.vehicle-info .model {
font-size: 1.1rem;
color: var(--text-muted);
margin-bottom: 1rem;
}
.specs {
display: flex;
gap: 1.5rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--text-muted);
}
.spec-item {
display: flex;
flex-direction: column;
}
.spec-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--silver);
}
.price {
font-size: 1.8rem;
font-weight: 600;
color: var(--gold);
margin-bottom: 1rem;
}
.view-details {
display: inline-block;
padding: 0.75rem 2rem;
background: transparent;
color: var(--gold);
border: 2px solid var(--gold);
text-decoration: none;
font-weight: 500;
letter-spacing: 1px;
border-radius: 50px;
transition: all 0.3s;
}
.view-details:hover {
background: var(--gold);
color: var(--dark-bg);
}
/* CTA Section */
.cta-section {
padding: 6rem 5%;
background: linear-gradient(135deg, var(--card-bg) 0%, #0a0a0a 100%);
border-top: 1px solid rgba(212, 175, 55, 0.2);
}
.cta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
}
.cta-card {
background: var(--card-bg);
padding: 3rem;
border-radius: 15px;
text-align: center;
border: 1px solid rgba(192, 192, 192, 0.2);
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.cta-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
transition: left 0.5s;
}
.cta-card:hover::before {
left: 100%;
}
.cta-card:hover {
border-color: var(--gold);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);
}
.cta-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--gold) 0%, #f4d03f 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.cta-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
margin-bottom: 1rem;
color: var(--silver);
}
.cta-card p {
color: var(--text-muted);
margin-bottom: 2rem;
line-height: 1.8;
}
.cta-card .cta-button {
display: inline-block;
}
/* Footer */
footer {
background: var(--card-bg);
padding: 3rem 5%;
text-align: center;
border-top: 1px solid rgba(212, 175, 55, 0.2);
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
}
.footer-links {
display: flex;
justify-content: center;
gap: 3rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.footer-links a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.3s;
font-size: 0.9rem;
letter-spacing: 1px;
}
.footer-links a:hover {
color: var(--gold);
}
.copyright {
color: var(--text-muted);
font-size: 0.85rem;
letter-spacing: 1px;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1rem;
}
.nav-links {
gap: 1.5rem;
font-size: 0.85rem;
}
.logo {
font-size: 1.4rem;
}
.vehicle-grid {
grid-template-columns: 1fr;
}
.showroom-header h2 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav>
<div class="logo">ELITE MOTORS</div>
<ul class="nav-links">
<li><a href="#showroom">SHOWROOM</a></li>
<li><a href="#brands">BRANDS</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#test-drive">TEST DRIVE</a></li>
</ul>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<div class="hero-image">
<!-- Placeholder for hero car image: Full-width dramatic shot of Porsche 911 Turbo S, cinematic lighting, dark background -->
</div>
<h1>LEGENDARY PERFORMANCE</h1>
<p>EXPERIENCE THE PINNACLE OF AUTOMOTIVE EXCELLENCE</p>
<a href="#showroom" class="cta-button">EXPLORE COLLECTION</a>
</div>
</section>
<!-- Brand Bar -->
<section class="brand-bar" id="brands">
<h2>REPRESENTING THE WORLD'S FINEST</h2>
<div class="brands">
<div class="brand-logo">PORSCHE</div>
<div class="brand-logo">MERCEDES</div>
<div class="brand-logo">BENTLEY</div>
<div class="brand-logo">LAMBORGHINI</div>
<div class="brand-logo">FERRARI</div>
<div class="brand-logo">ASTON MARTIN</div>
</div>
</section>
<!-- Showroom Section -->
<section class="showroom" id="showroom">
<div class="showroom-header">
<h2>CURATED COLLECTION</h2>
<p>Discover our handpicked selection of the world's most prestigious automobiles</p>
</div>
<div class="vehicle-grid">
<!-- Vehicle Card 1 -->
<div class="vehicle-card">
<div class="vehicle-image">PORSCHE 911</div>
<div class="vehicle-info">
<h3>Porsche</h3>
<div class="model">911 Turbo S</div>
<div class="specs">
<div class="spec-item">
<span class="spec-label">Power</span>
<span>640 HP</span>
</div>
<div class="spec-item">
<span class="spec-label">0-60 MPH</span>
<span>2.6s</span>
</div>
<div class="spec-item">
<span class="spec-label">Year</span>
<span>2024</span>
</div>
</div>
<div class="price">$230,400</div>
<a href="#" class="view-details">VIEW DETAILS</a>
</div>
</div>
<!-- Vehicle Card 2 -->
<div class="vehicle-card">
<div class="vehicle-image">LAMBORGHINI</div>
<div class="vehicle-info">
<h3>Lamborghini</h3>
<div class="model">Huracán EVO</div>
<div class="specs">
<div class="spec-item">
<span class="spec-label">Power</span>
<span>630 HP</span>
</div>
<div class="spec-item">
<span class="spec-label">0-60 MPH</span>
<span>2.9s</span>
</div>
<div class="spec-item">
<span class="spec-label">Year</span>
<span>2024</span>
</div>
</div>
<div class="price">$274,390</div>
<a href="#" class="view-details">VIEW DETAILS</a>
</div>
</div>
<!-- Vehicle Card 3 -->
<div class="vehicle-card">
<div class="vehicle-image">MERCEDES</div>
<div class="vehicle-info">
<h3>Mercedes-Benz</h3>
<div class="model">AMG GT R</div>
<div class="specs">
<div class="spec-item">
<span class="spec-label">Power</span>
<span>577 HP</span>
</div>
<div class="spec-item">
<span class="spec-label">0-60 MPH</span>
<span>3.5s</span>
</div>
<div class="spec-item">
<span class="spec-label">Year</span>
<span>2024</span>
</div>
</div>
<div class="price">$198,500</div>
<a href="#" class="view-details">VIEW DETAILS</a>
</div>
</div>
<!-- Vehicle Card 4 -->
<div class="vehicle-card">
<div class="vehicle-image">BENTLEY</div>
<div class="vehicle-info">
<h3>Bentley</h3>
<div class="model">Continental GT</div>
<div class="specs">
<div class="spec-item">
<span class="spec-label">Power</span>
<span>650 HP</span>
</div>
<div class="spec-item">
<span class="spec-label">0-60 MPH</span>
<span>3.6s</span>
</div>
<div class="spec-item">
<span class="spec-label">Year</span>
<span>2024</span>
</div>
</div>
<div class="price">$245,000</div>
<a href="#" class="view-details">VIEW DETAILS</a>
</div>
</div>
<!-- Vehicle Card 5 -->
<div class="vehicle-card">
<div class="vehicle-image">ASTON MARTIN</div>
<div class="vehicle-info">
<h3>Aston Martin</h3>
<div class="model">DB12</div>
<div class="specs">
<div class="spec-item">
<span class="spec-label">Power</span>
<span>671 HP</span>
</div>
<div class="spec-item">
<span class="spec-label">0-60 MPH</span>
<span>3.5s</span>
</div>
<div class="spec-item">
<span class="spec-label">Year</span>
<span>2024</span>
</div>
</div>
<div class="price">$248,000</div>
<a href="#" class="view-details">VIEW DETAILS</a>
</div>
</div>
<!-- Vehicle Card 6 -->
<div class="vehicle-card">
<div class="vehicle-image">FERRARI</div>
<div class="vehicle-info">
<h3>Ferrari</h3>
<div class="model">F8 Tributo</div>
<div class="specs">
<div class="spec-item">
<span class="spec-label">Power</span>
<span>710 HP</span>
</div>
<div class="spec-item">
<span class="spec-label">0-60 MPH</span>
<span>2.9s</span>
</div>
<div class="spec-item">
<span class="spec-label">Year</span>
<span>2024</span>
</div>
</div>
<div class="price">$283,950</div>
<a href="#" class="view-details">VIEW DETAILS</a>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section" id="contact">
<div class="cta-grid">
<div class="cta-card" id="test-drive">
<div class="cta-icon">🏁</div>
<h3>Book a Test Drive</h3>
<p>Experience the thrill firsthand. Schedule your exclusive test drive with one of our automotive specialists.</p>
<a href="#" class="cta-button">RESERVE NOW</a>
</div>
<div class="cta-card">
<div class="cta-icon">💼</div>
<h3>Speak to a Specialist</h3>
<p>Our luxury automotive consultants are ready to guide you through your dream car selection process.</p>
<a href="#" class="cta-button">CONTACT US</a>
</div>
<div class="cta-card">
<div class="cta-icon">✨</div>
<h3>Private Viewing</h3>
<p>Schedule an exclusive, private showroom experience tailored to your preferences and schedule.</p>
<a href="#" class="cta-button">SCHEDULE</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-links">
<a href="#">About Us</a>
<a href="#">Financing</a>
<a href="#">Trade-In</a>
<a href="#">Service</a>
<a href="#">Careers</a>
<a href="#">Privacy Policy</a>
</div>
<div class="copyright">
© 2024 Elite Motors. All Rights Reserved. | Luxury Automotive Excellence Since 1995
</div>
</div>
</footer>
</body>
</html>
Key Design Features
Visual Effects:
- Shimmer animations on gold gradient text for metallic shine
- Hover glide effects that sweep across elements
- Smooth transforms on cards and buttons for premium feel
- Layered gradients creating depth and sophistication
Color Implementation:
- Dark backgrounds (#0a0a0a, #1a1a1a) for luxury showroom atmosphere
- Gold accents (#D4AF37) with gradient effects for prestige
- Silver highlights (#C0C0C0) for metallic contrast
- Subtle transparency and blurs for glass-morphism effects
Typography:
- Playfair Display for elegant headlines (serif luxury aesthetic)
- Montserrat for clean body text (modern readability)
- Letter-spacing for premium, spaced-out look
- Gradient text fills for metallic shimmer
Layout Highlights:
- Fixed navigation with backdrop blur
- Full-viewport hero with dramatic showcase
- 6-card vehicle grid with hover animations
- Responsive brand bar with 6 luxury marques
- 3-column CTA section for engagement
- Clean footer with links and branding
The design captures the essence of walking into a high-end dealership—dark, sophisticated, with carefully placed gold accents that draw the eye to key elements. Every interaction feels polished and intentional.
Comments