374 lines
12 KiB
HTML
374 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Real Estate Modern Home - Template Preview</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
|
|
|
|
:root {
|
|
--color-primary: #003366;
|
|
--color-accent: #f39c12;
|
|
--color-background: #ffffff;
|
|
--color-text-light: #ffffff;
|
|
--color-text-dark: #333333;
|
|
--color-text-muted: #666666;
|
|
--color-background-light: #f8f9fa;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Lato', sans-serif;
|
|
background-color: #e9e9e9;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
margin: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.brochure {
|
|
width: 400px;
|
|
height: 600px;
|
|
background-color: var(--color-background);
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero {
|
|
height: 40%;
|
|
background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
|
|
background-size: cover;
|
|
background-position: center;
|
|
position: relative;
|
|
color: var(--color-text-light);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.hero-overlay {
|
|
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 100%);
|
|
padding: 30px;
|
|
}
|
|
|
|
.property-name {
|
|
font-size: 32px;
|
|
font-weight: 900;
|
|
margin: 0;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.property-address {
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
margin: 6px 0 18px 0;
|
|
border-left: 3px solid var(--color-accent);
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.hero-details {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.price {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.stats {
|
|
display: flex;
|
|
gap: 15px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.content {
|
|
padding: 30px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.description h2 {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--color-primary);
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.description p {
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--color-text-muted);
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
.specs-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.spec-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.spec-item strong {
|
|
font-weight: 700;
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
.spec-item span {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.amenities-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.amenity-item {
|
|
background-color: var(--color-background);
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid #e8e8e8;
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.amenity-item .icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: var(--color-accent);
|
|
color: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Static preview gallery (separate & static) */
|
|
.gallery-section {
|
|
margin: 22px 0 10px 0;
|
|
}
|
|
.gallery-title {
|
|
color: var(--color-primary);
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
margin: 0 0 10px 0;
|
|
border-bottom: 2px solid var(--color-primary);
|
|
padding-bottom: 6px;
|
|
}
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: 90px 90px;
|
|
gap: 8px;
|
|
}
|
|
.gallery-item {
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.gallery-item::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));
|
|
}
|
|
.gallery-item span {
|
|
position: absolute;
|
|
left: 8px;
|
|
bottom: 6px;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
z-index: 1;
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
|
|
}
|
|
.g-item-1 { grid-column: 1 / 3; grid-row: 1 / 2; }
|
|
.g-item-2 { grid-column: 3 / 4; grid-row: 1 / 3; }
|
|
.g-item-3 { grid-column: 1 / 2; grid-row: 2 / 3; }
|
|
.g-item-4 { grid-column: 2 / 3; grid-row: 2 / 3; }
|
|
|
|
.agent-footer {
|
|
border-top: 3px solid var(--color-accent);
|
|
padding-top: 15px;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.agent-info h3 {
|
|
margin: 0 0 3px 0;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
.agent-info p {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.agent-contact-details {
|
|
text-align: right;
|
|
}
|
|
|
|
.agent-contact-details p {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--color-primary);
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.page-footer {
|
|
margin-top: auto;
|
|
background-color: var(--color-primary);
|
|
color: var(--color-text-light);
|
|
padding: 15px 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.page-footer strong {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.back-button {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 20px;
|
|
background: rgba(255,255,255,0.9);
|
|
color: #333;
|
|
padding: 10px 20px;
|
|
border-radius: 25px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
|
backdrop-filter: blur(10px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="template-preview.html" class="back-button">
|
|
<i class="fa-solid fa-arrow-left"></i> Back to Templates
|
|
</a>
|
|
|
|
<div class="brochure">
|
|
<div class="hero">
|
|
<div class="hero-overlay">
|
|
<h1 class="property-name">Modern Villa</h1>
|
|
<p class="property-address">123 Luxury Lane, Prestige City, PC 45678</p>
|
|
<div class="hero-details">
|
|
<div class="price">$2,500,000</div>
|
|
<div class="stats">
|
|
<span class="stat-item"><i class="fa-solid fa-bed"></i> 4 Beds</span>
|
|
<span class="stat-item"><i class="fa-solid fa-bath"></i> 3 Baths</span>
|
|
<span class="stat-item"><i class="fa-solid fa-ruler-combined"></i> 3,200 sq. ft.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="description">
|
|
<h2>About this Property</h2>
|
|
<p>This stunning modern villa offers contemporary living with premium finishes and an open-concept design perfect for entertaining. Features include a gourmet kitchen, spacious living areas, and beautiful outdoor spaces.</p>
|
|
</div>
|
|
|
|
<div class="specs-grid">
|
|
<div class="spec-item"><strong>Status:</strong> <span>For Sale</span></div>
|
|
<div class="spec-item"><strong>Type:</strong> <span>Single-Family</span></div>
|
|
<div class="spec-item"><strong>Year Built:</strong> <span>2023</span></div>
|
|
<div class="spec-item"><strong>Parking:</strong> <span>2-Car Garage</span></div>
|
|
<div class="spec-item"><strong>Floor:</strong> <span>2 Levels</span></div>
|
|
<div class="spec-item"><strong>Furnishing:</strong> <span>Unfurnished</span></div>
|
|
</div>
|
|
|
|
<div class="amenities-grid">
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Gourmet Kitchen</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Master Suite</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Open Floor Plan</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Private Garden</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Smart Home</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>Energy Efficient</span></div>
|
|
</div>
|
|
|
|
<!-- Static, separate preview gallery grid -->
|
|
<section class="gallery-section">
|
|
<h2 class="gallery-title">Property Gallery</h2>
|
|
<div class="gallery-grid">
|
|
<div class="gallery-item g-item-1" style="background-image:url('https://images.unsplash.com/photo-1616046229478-9901c5536a45?auto=format&fit=crop&w=800&q=80');"><span>Living Room</span></div>
|
|
<div class="gallery-item g-item-2" style="background-image:url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&w=800&q=80');"><span>Master Bedroom</span></div>
|
|
<div class="gallery-item g-item-3" style="background-image:url('https://images.unsplash.com/photo-1600121848594-d8644e57abab?auto=format&fit=crop&w=800&q=80');"><span>Kitchen</span></div>
|
|
<div class="gallery-item g-item-4" style="background-image:url('https://images.unsplash.com/photo-1595526114035-0d45ed16433d?auto=format&fit=crop&w=800&q=80');"><span>Bathroom</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="agent-footer">
|
|
<div class="agent-info">
|
|
<h3>Sarah Johnson</h3>
|
|
<p>Your Real Estate Professional</p>
|
|
</div>
|
|
<div class="agent-contact-details">
|
|
<p>(555) 123-4567</p>
|
|
<p>sarah@realestate.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="page-footer">
|
|
<div class="reference-id">
|
|
<strong>Reference ID:</strong> MH-2024-001
|
|
</div>
|
|
<div class="owner-info">
|
|
<strong>Owner Info:</strong> John Smith, (555) 987-6543
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html> |