Prompt Details
Model
(gemini-3.0-pro)
Token size
295
Example input
[BRAND_NAME]: LUX ESTATE
[PRIMARY_COLOR]: GOLD
Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="LUX ESTATE - The pinnacle of luxury real estate brokerage. Exclusive properties, bespoke service, and global reach.">
<meta property="og:title" content="LUX ESTATE | Premium Real Estate Brokerage">
<meta property="og:description" content="Curating the world's most exceptional properties for the discerning few.">
<meta property="og:image" content="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&q=80">
<meta property="og:type" content="website">
<title>LUX ESTATE | Exclusive Real Estate Portfolio</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=Cormorant+Garamond:wght@300;400;600&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
/* --- CSS VARIABLES & RESET --- */
:root {
--color-bg: #0a0a0a;
--color-surface: #141414;
--color-surface-glass: rgba(20, 20, 20, 0.85);
--color-text-main: #f0f0f0;
--color-text-muted: #a0a0a0;
/* Gold Gradient Palette */
--color-gold: #D4AF37;
--color-gold-light: #F3E5AB;
--color-gold-dark: #AA8828;
--gold-gradient: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Montserrat', sans-serif;
--transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.5);
--border-radius: 4px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background-color: var(--color-bg);
color: var(--color-text-main);
font-family: var(--font-body);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 400;
line-height: 1.2;
}
a { text-decoration: none; color: inherit; transition: var(--transition-smooth); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
/* --- UTILITIES --- */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.gold-text {
background: var(--gold-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
.section-padding { padding: 100px 0; }
.text-center { text-align: center; }
/* Scroll Reveal Effect */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* --- BUTTONS --- */
.btn {
display: inline-block;
padding: 16px 36px;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--transition-smooth);
border: 1px solid var(--color-gold);
}
.btn-primary {
background: var(--gold-gradient);
color: #000;
border: none;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}
.btn-secondary {
background: transparent;
color: var(--color-gold);
}
.btn-secondary:hover {
background: rgba(212, 175, 55, 0.1);
color: #fff;
}
/* --- HEADER --- */
header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
padding: 20px 0;
transition: var(--transition-smooth);
}
header.scrolled {
background: var(--color-surface-glass);
backdrop-filter: blur(15px);
padding: 15px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: var(--font-heading);
font-size: 1.8rem;
letter-spacing: 2px;
color: #fff;
font-weight: 600;
}
.logo span { color: var(--color-gold); }
nav ul { display: flex; gap: 40px; }
nav a {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text-main);
position: relative;
}
nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background: var(--color-gold);
transition: var(--transition-smooth);
}
nav a:hover::after { width: 100%; }
/* Mobile Menu Toggle */
.mobile-toggle { display: none; cursor: pointer; color: white; font-size: 1.5rem; }
/* --- HERO --- */
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: url('https://images.unsplash.com/photo-1600596542815-27bfef403117?auto=format&fit=crop&q=80') center/cover no-repeat;
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.8));
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
padding: 0 20px;
}
.hero h1 {
font-size: clamp(3rem, 5vw, 5rem);
color: #fff;
margin-bottom: 20px;
letter-spacing: -1px;
}
.hero p {
font-size: 1.2rem;
color: #ddd;
margin-bottom: 40px;
font-weight: 300;
letter-spacing: 1px;
}
.hero-btns {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
/* --- STATS BAR --- */
.stats-bar {
background: var(--color-surface);
padding: 40px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stats-grid {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
text-align: center;
}
.stat-item h3 {
font-size: 2.5rem;
color: var(--color-gold);
margin-bottom: 5px;
}
.stat-item p {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--color-text-muted);
}
/* --- ABOUT --- */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-image {
position: relative;
}
.about-image::before {
content: '';
position: absolute;
top: -20px; left: -20px;
width: 100%; height: 100%;
border: 1px solid var(--color-gold);
z-index: 0;
}
.about-image img {
position: relative;
z-index: 1;
box-shadow: var(--shadow-soft);
}
.section-title {
font-size: 3rem;
margin-bottom: 20px;
color: #fff;
}
.section-subtitle {
color: var(--color-gold);
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.8rem;
margin-bottom: 15px;
display: block;
font-weight: 600;
}
/* --- SERVICES/VALUE --- */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.service-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
padding: 40px;
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.service-card:hover {
transform: translateY(-10px);
background: rgba(255,255,255,0.05);
border-color: var(--color-gold);
}
.service-icon {
font-size: 2rem;
margin-bottom: 20px;
color: var(--color-gold);
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #fff;
}
.service-card p {
color: var(--color-text-muted);
font-size: 0.95rem;
}
/* --- TESTIMONIALS --- */
.testimonials {
background: linear-gradient(to right, #0a0a0a, #111, #0a0a0a);
}
.testimonial-card {
text-align: center;
padding: 40px;
max-width: 800px;
margin: 0 auto;
}
.quote-icon {
font-size: 3rem;
font-family: var(--font-heading);
color: var(--color-gold);
opacity: 0.5;
}
.testimonial-text {
font-family: var(--font-heading);
font-size: 1.8rem;
font-style: italic;
margin: 30px 0;
color: #e0e0e0;
}
.client-name {
font-weight: 600;
letter-spacing: 1px;
color: var(--color-gold);
}
/* --- FAQ --- */
.faq-item {
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 10px;
}
.faq-item summary {
padding: 20px 0;
cursor: pointer;
font-size: 1.2rem;
font-family: var(--font-heading);
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
color: #fff;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
color: var(--color-gold);
font-weight: 300;
font-size: 1.5rem;
transition: transform 0.3s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
padding-bottom: 20px;
color: var(--color-text-muted);
}
/* --- CONTACT --- */
.contact-section {
background: #0f0f0f;
}
.contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.contact-info h3 { font-size: 2rem; margin-bottom: 20px; }
.info-block { margin-bottom: 30px; }
.info-label { color: var(--color-gold); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; margin-bottom: 5px; display: block;}
.info-value { color: #fff; font-size: 1.1rem; }
form { display: flex; flex-direction: column; gap: 20px; }
.form-group input, .form-group textarea {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding: 15px 0;
color: #fff;
font-family: var(--font-body);
font-size: 1rem;
transition: var(--transition-smooth);
}
.form-group input:focus, .form-group textarea:focus {
outline: none;
border-bottom-color: var(--color-gold);
}
/* --- FOOTER --- */
footer {
border-top: 1px solid rgba(255,255,255,0.05);
padding: 50px 0 20px;
text-align: center;
}
.footer-logo { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 20px; color: #fff; }
.footer-logo span { color: var(--color-gold); }
.copyright { color: #666; font-size: 0.8rem; margin-top: 30px; }
/* --- BACK TO TOP --- */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--color-gold);
color: #000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: var(--transition-smooth);
z-index: 99;
font-size: 1.2rem;
}
.back-to-top.visible { opacity: 1; pointer-events: all; }
/* --- RESPONSIVE --- */
@media (max-width: 900px) {
.mobile-toggle { display: block; }
nav ul {
position: fixed;
top: 0; right: -100%;
width: 70%;
height: 100vh;
background: #000;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.4s ease;
z-index: 999;
}
nav ul.active { right: 0; }
.about-grid, .contact-layout { grid-template-columns: 1fr; }
.hero h1 { font-size: 2.5rem; }
}
</style>
</head>
<body>
<header id="header">
<div class="container nav-container">
<a href="#" class="logo">LUX<span>ESTATE</span></a>
<div class="mobile-toggle" onclick="toggleMenu()">☰</div>
<nav>
<ul id="nav-list">
<li><a href="#about" onclick="toggleMenu()">About</a></li>
<li><a href="#services" onclick="toggleMenu()">Services</a></li>
<li><a href="#portfolio" onclick="toggleMenu()">Portfolio</a></li>
<li><a href="#faq" onclick="toggleMenu()">FAQ</a></li>
<li><a href="#contact" onclick="toggleMenu()">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="hero-content reveal">
<h1>Curating Exceptional <span class="gold-text">Living</span></h1>
<p>Exclusive access to the world's most coveted properties. Where architectural mastery meets timeless elegance.</p>
<div class="hero-btns">
<a href="#contact" class="btn btn-primary">Inquire Now</a>
<a href="#services" class="btn btn-secondary">Explore Services</a>
</div>
</div>
</section>
<div class="stats-bar reveal">
<div class="container">
<div class="stats-grid">
<div class="stat-item">
<h3>$1.2B+</h3>
<p>Total Sales Volume</p>
</div>
<div class="stat-item">
<h3>15+</h3>
<p>Years of Excellence</p>
</div>
<div class="stat-item">
<h3>300+</h3>
<p>Private Sales</p>
</div>
</div>
</div>
</div>
<section id="about" class="section-padding">
<div class="container">
<div class="about-grid">
<div class="about-text reveal">
<span class="section-subtitle">Our Philosophy</span>
<h2 class="section-title">Beyond Real Estate. <br>A Lifestyle Legacy.</h2>
<p style="color: #bbb; margin-bottom: 20px;">
At LUX ESTATE, we understand that a home is more than a structure; it is the stage for your life's most significant moments. We specialize in the acquisition and sale of ultra-luxury properties across the globe.
</p>
<p style="color: #bbb; margin-bottom: 30px;">
With an unwavering commitment to discretion and excellence, we serve high-net-worth individuals who demand nothing but the extraordinary. Our off-market connections ensure you see what others cannot.
</p>
<a href="#contact" style="color: var(--color-gold); border-bottom: 1px solid var(--color-gold); padding-bottom: 5px;">Read Our Story</a>
</div>
<div class="about-image reveal">
<img src="https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=crop&q=80" alt="Luxury Interior">
</div>
</div>
</div>
</section>
<section id="services" class="section-padding" style="background: #0f0f0f;">
<div class="container">
<div class="text-center reveal">
<span class="section-subtitle">What We Offer</span>
<h2 class="section-title">Bespoke Advisory</h2>
</div>
<div class="services-grid">
<div class="service-card reveal">
<div class="service-icon">♔</div>
<h3>Private Buying</h3>
<p>Access exclusive off-market listings. We represent your interests with absolute anonymity and negotiation prowess.</p>
</div>
<div class="service-card reveal">
<div class="service-icon">⊞</div>
<h3>Luxury Selling</h3>
<p>World-class marketing strategies including cinematic videography, staging, and global press exposure.</p>
</div>
<div class="service-card reveal">
<div class="service-icon">📈</div>
<h3>Investment Consulting</h3>
<p>Data-driven insights for real estate portfolios. Maximize yields in emerging and established high-end markets.</p>
</div>
</div>
</div>
</section>
<section class="section-padding testimonials reveal">
<div class="container">
<div class="testimonial-card">
<div class="quote-icon">“</div>
<p class="testimonial-text">The level of professionalism and access LUX ESTATE provided was unparalleled. They found us a home that wasn't even on the market.</p>
<p class="client-name">JAMES & ELIZABETH S. — BEVERLY HILLS</p>
</div>
</div>
</section>
<section id="faq" class="section-padding">
<div class="container">
<div class="text-center reveal">
<span class="section-subtitle">Common Questions</span>
<h2 class="section-title">Expertise Shared</h2>
</div>
<div style="max-width: 800px; margin: 40px auto;" class="reveal">
<details class="faq-item">
<summary>Do you handle international transactions?</summary>
<p>Yes. We have a dedicated legal and financial team to facilitate seamless cross-border acquisitions in Europe, Asia, and the Americas.</p>
</details>
<details class="faq-item">
<summary>How do you ensure client privacy?</summary>
<p>Privacy is our currency. We utilize NDAs for all staff and potential buyers, ensuring your identity and financial details remain strictly confidential.</p>
</details>
<details class="faq-item">
<summary>What is your commission structure?</summary>
<p>Our fees are competitive within the ultra-luxury sector and are commensurate with the bespoke level of marketing and service provided. Contact us for a consultation.</p>
</details>
<details class="faq-item">
<summary>Do you have access to off-market properties?</summary>
<p>Approximately 40% of our transactions occur off-market ("pocket listings"). Our network gives you priority access before the public sees them.</p>
</details>
<details class="faq-item">
<summary>Can you assist with property management?</summary>
<p>While we focus on brokerage, we have a vetted list of white-glove property management partners we can refer you to post-acquisition.</p>
</details>
</div>
</div>
</section>
<section id="contact" class="section-padding contact-section">
<div class="container">
<div class="contact-layout">
<div class="contact-info reveal">
<span class="section-subtitle">Get in Touch</span>
<h3>Let's Discuss Your Vision</h3>
<p style="color: #bbb; margin-bottom: 40px;">Whether you are looking to acquire a trophy asset or divest a property, we are at your service.</p>
<div class="info-block">
<span class="info-label">Headquarters</span>
<div class="info-value">100 Luxury Lane, Penthouse Suite<br>Los Angeles, CA 90210</div>
</div>
<div class="info-block">
<span class="info-label">Contact</span>
<div class="info-value">vip@luxestate.com<br>+1 (310) 555-0199</div>
</div>
<div class="info-block">
<span class="info-label">Hours</span>
<div class="info-value">Mon - Sat: 9:00 AM - 7:00 PM<br>Sun: By Appointment</div>
</div>
</div>
<div class="reveal">
<form id="contactForm" onsubmit="handleFormSubmit(event)">
<div class="form-group">
<input type="text" id="name" placeholder="Full Name" required>
</div>
<div class="form-group">
<input type="email" id="email" placeholder="Email Address" required>
</div>
<div class="form-group">
<input type="tel" id="phone" placeholder="Phone Number (Optional)">
</div>
<div class="form-group">
<textarea id="message" rows="4" placeholder="How can we assist you?" required></textarea>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 10px;">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-logo">LUX<span>ESTATE</span></div>
<div style="display: flex; justify-content: center; gap: 20px; color: #888; font-size: 0.9rem;">
<a href="#">Instagram</a>
<a href="#">LinkedIn</a>
<a href="#">Facebook</a>
</div>
<div class="copyright">
© 2024 LUX ESTATE Brokerage. All Rights Reserved. Designed for Excellence.
</div>
</div>
</footer>
<div class="back-to-top" onclick="scrollToTop()">↑</div>
<script>
// Header Scroll Effect
const header = document.getElementById('header');
const backToTopBtn = document.querySelector('.back-to-top');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
header.classList.add('scrolled');
backToTopBtn.classList.add('visible');
} else {
header.classList.remove('scrolled');
backToTopBtn.classList.remove('visible');
}
});
// Scroll to Top
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// Mobile Menu Toggle
function toggleMenu() {
const navList = document.getElementById('nav-list');
if(window.innerWidth <= 900) {
navList.classList.toggle('active');
}
}
// Scroll Reveal Animation using Intersection Observer
const observerOptions = {
threshold: 0.15,
rootMargin: "0px 0px -50px 0px"
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
observer.unobserve(entry.target); // Only animate once
}
});
}, observerOptions);
document.querySelectorAll('.reveal').forEach(el => {
observer.observe(el);
});
// Form Handling
function handleFormSubmit(e) {
e.preventDefault();
const btn = e.target.querySelector('button');
const originalText = btn.innerText;
// Simulate sending
btn.innerText = "Sending...";
btn.style.opacity = "0.7";
setTimeout(() => {
btn.innerText = "Message Sent Successfully";
btn.style.background = "#4CAF50"; // Green for success
btn.style.color = "#fff";
btn.style.borderColor = "#4CAF50";
e.target.reset();
setTimeout(() => {
btn.innerText = originalText;
btn.style.background = "var(--gold-gradient)";
btn.style.color = "#000";
btn.style.borderColor = "none";
btn.style.opacity = "1";
}, 3000);
}, 1500);
}
</script>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
21
Views
GEMINI-3.0-PRO
This premium prompt generates a fully customized, luxury one-page website specifically designed for real estate professionals and high-end property brands. It produces a complete, self-contained HTML file with elegant design, industry-specific copywriting, and conversion-focused structure tailored to real estate sales and lead generation. Ideal for real estate agents, brokers, and agencies who want a modern, high-end online presence without hiring designers or developers. Mobile-first, SEO-ready
...more
Added over 1 month ago
