162 lines
5.4 KiB
HTML
162 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Property Brochure Test</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
color: #fff;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
margin-bottom: 30px;
|
|
}
|
|
.property-details {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
.detail-card {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
}
|
|
.price {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
color: #4ade80;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
|
|
}
|
|
.features {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.features li {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
margin: 10px 0;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #4ade80;
|
|
}
|
|
.description {
|
|
line-height: 1.6;
|
|
margin: 20px 0;
|
|
text-align: justify;
|
|
}
|
|
.contact-info {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
}
|
|
.logo {
|
|
text-align: center;
|
|
font-size: 3em;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="logo">🏠</div>
|
|
<h1>Luxury Property Brochure</h1>
|
|
|
|
<div class="description">
|
|
<p>Welcome to this stunning luxury property located in the heart of the city. This magnificent home offers the perfect blend of modern design and classic elegance, featuring premium finishes and thoughtful details throughout.</p>
|
|
</div>
|
|
|
|
<div class="property-details">
|
|
<div class="detail-card">
|
|
<h3>Price</h3>
|
|
<div class="price">$1,250,000</div>
|
|
</div>
|
|
<div class="detail-card">
|
|
<h3>Location</h3>
|
|
<p>Downtown Luxury District</p>
|
|
<p>Prime City Center</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property-details">
|
|
<div class="detail-card">
|
|
<h3>Bedrooms</h3>
|
|
<p>4 Master Suites</p>
|
|
</div>
|
|
<div class="detail-card">
|
|
<h3>Bathrooms</h3>
|
|
<p>5 Full + 2 Half</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property-details">
|
|
<div class="detail-card">
|
|
<h3>Square Feet</h3>
|
|
<p>4,500 sq ft</p>
|
|
</div>
|
|
<div class="detail-card">
|
|
<h3>Lot Size</h3>
|
|
<p>0.75 acres</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Property Features</h2>
|
|
<ul class="features">
|
|
<li>🏊♂️ Infinity Pool with City Views</li>
|
|
<li>🍳 Chef's Kitchen with Premium Appliances</li>
|
|
<li>🎭 Home Theater with Surround Sound</li>
|
|
<li>🏋️♂️ Private Fitness Center</li>
|
|
<li>🚗 3-Car Garage with Electric Charging</li>
|
|
<li>🌿 Landscaped Gardens with Water Features</li>
|
|
<li>🔒 Smart Home Security System</li>
|
|
<li>☀️ Solar Panels for Energy Efficiency</li>
|
|
</ul>
|
|
|
|
<div class="description">
|
|
<p>This exceptional property offers an unparalleled living experience with its open-concept design, high ceilings, and floor-to-ceiling windows that flood the space with natural light. The gourmet kitchen features custom cabinetry, quartz countertops, and top-of-the-line appliances.</p>
|
|
|
|
<p>The master suite is a true sanctuary with a spa-like bathroom, walk-in closet, and private balcony. Additional amenities include a wine cellar, home office, and outdoor entertainment area perfect for hosting gatherings.</p>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<h3>Contact Information</h3>
|
|
<p>📞 (555) 123-4567</p>
|
|
<p>📧 info@luxuryproperties.com</p>
|
|
<p>🌐 www.luxuryproperties.com</p>
|
|
<p>📍 123 Luxury Lane, Downtown, City, State 12345</p>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 30px; font-size: 0.9em; opacity: 0.8;">
|
|
<p>This brochure was generated using the Property Brochure PDF Generator API</p>
|
|
<p>Generated on: <span id="current-date"></span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Add current date
|
|
document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|