477 lines
17 KiB
HTML
477 lines
17 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</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
/* --- Google Font --- */
|
|
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
|
|
|
|
/* --- Design System Variables --- */
|
|
:root {
|
|
--color-primary: #003366; /* Deep Navy Blue */
|
|
--color-accent: #f39c12; /* Warm Gold/Orange */
|
|
--color-background: #ffffff;
|
|
--color-text-light: #ffffff;
|
|
--color-text-dark: #333333;
|
|
--color-text-muted: #666666;
|
|
--color-background-light: #f8f9fa;
|
|
}
|
|
|
|
/* --- Basic Setup --- */
|
|
body {
|
|
font-family: 'Lato', sans-serif;
|
|
background-color: #e9e9e9;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 40px;
|
|
margin: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
gap: 40px; /* Space between pages */
|
|
}
|
|
|
|
/* --- A4 Page Container --- */
|
|
.brochure {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
background-color: var(--color-background);
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* --- Shared Section Title --- */
|
|
h2.section-title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--color-primary);
|
|
margin: 0 0 20px 0;
|
|
padding-bottom: 8px;
|
|
border-bottom: 3px solid var(--color-accent);
|
|
}
|
|
|
|
/* --- Page 1: Front Page Styles --- */
|
|
.hero {
|
|
height: 60%;
|
|
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: 40px;
|
|
}
|
|
.property-name {
|
|
font-size: 48px;
|
|
font-weight: 900;
|
|
margin: 0;
|
|
line-height: 1.1;
|
|
}
|
|
.property-address {
|
|
font-size: 18px;
|
|
font-weight: 300;
|
|
margin: 8px 0 24px 0;
|
|
border-left: 3px solid var(--color-accent);
|
|
padding-left: 12px;
|
|
}
|
|
.hero-details {
|
|
display: flex;
|
|
gap: 30px;
|
|
align-items: center;
|
|
}
|
|
.price {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: var(--color-accent);
|
|
}
|
|
.stats {
|
|
display: flex;
|
|
gap: 20px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.content {
|
|
padding: 40px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.description h2 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--color-primary);
|
|
margin-top: 0;
|
|
margin-bottom: 12px;
|
|
}
|
|
.description p {
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
color: var(--color-text-muted);
|
|
margin: 0;
|
|
}
|
|
.agent-footer {
|
|
border-top: 4px solid var(--color-accent);
|
|
padding-top: 20px;
|
|
margin-top: 30px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.agent-info h3 {
|
|
margin: 0 0 4px 0;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--color-text-dark);
|
|
}
|
|
.agent-info p {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
color: var(--color-text-muted);
|
|
}
|
|
.agent-contact-details {
|
|
text-align: right;
|
|
}
|
|
.agent-contact-details p {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--color-primary);
|
|
margin: 2px 0;
|
|
}
|
|
|
|
/* --- Page 2: Middle Page Styles --- */
|
|
.visual-header {
|
|
height: 45%;
|
|
background-image: url('https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?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;
|
|
}
|
|
.visual-overlay {
|
|
background: linear-gradient(to top, rgba(0, 20, 40, 0.8) 0%, rgba(0,0,0,0.0) 100%);
|
|
padding: 40px;
|
|
}
|
|
.visual-header h1 {
|
|
font-size: 42px;
|
|
font-weight: 900;
|
|
margin: 0;
|
|
line-height: 1.2;
|
|
}
|
|
.visual-header p {
|
|
font-size: 18px;
|
|
font-weight: 300;
|
|
margin: 8px 0 0 0;
|
|
opacity: 0.9;
|
|
}
|
|
.content.grid-layout {
|
|
padding: 40px;
|
|
flex-grow: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.2fr;
|
|
gap: 40px;
|
|
}
|
|
.spec-list {
|
|
font-size: 15px;
|
|
}
|
|
.spec-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 12px 10px;
|
|
border-bottom: 1px solid #eee;
|
|
transition: background-color 0.2s ease-in-out;
|
|
}
|
|
|
|
.spec-item:first-of-type { border-top: 1px solid #eee; }
|
|
.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: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
.amenity-item {
|
|
background-color: var(--color-background);
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
border: 1px solid #e8e8e8;
|
|
border-radius: 6px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
}
|
|
.amenity-item span {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--color-text-dark);
|
|
line-height: 1.3;
|
|
}
|
|
.amenity-item .icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: var(--color-accent);
|
|
color: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* --- Page 3: Back Page Styles --- */
|
|
.location-section {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
padding: 40px;
|
|
background-color: var(--color-background-light);
|
|
flex: 1.5;
|
|
}
|
|
.map-container {
|
|
position: relative;
|
|
top: 30px;
|
|
height:480px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
border: 2px solid #e0e0e0;
|
|
}
|
|
.map-container img {
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
.nearby-list .nearby-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 10px;
|
|
margin-bottom: 5px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s ease-in-out;
|
|
}
|
|
|
|
.nearby-list .icon { font-size: 24px; color: var(--color-primary); width: 30px; }
|
|
.nearby-list strong { font-size: 15px; font-weight: 700; }
|
|
.nearby-list span { font-size: 15px; color: var(--color-text-muted); }
|
|
.additional-info-section {
|
|
padding: 40px;
|
|
flex: 1;
|
|
}
|
|
.info-list {
|
|
font-size: 15px;
|
|
}
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 12px 10px;
|
|
border-bottom: 1px solid #eee;
|
|
transition: background-color 0.2s ease-in-out;
|
|
}
|
|
|
|
.info-item:first-of-type {
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.info-item strong {
|
|
font-weight: 700;
|
|
color: var(--color-text-dark);
|
|
}
|
|
.info-item span {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* --- Shared Footer Styles --- */
|
|
.page-footer {
|
|
margin-top: auto;
|
|
background-color: var(--color-primary);
|
|
color: var(--color-text-light);
|
|
padding: 20px 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
}
|
|
.page-footer strong {
|
|
color: var(--color-accent);
|
|
}
|
|
.pagination {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
.pagination a {
|
|
color: var(--color-text-light);
|
|
text-decoration: none;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.pagination a.active {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-primary);
|
|
font-weight: 700;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="brochure" id="page1">
|
|
<div class="hero">
|
|
<div class="hero-overlay">
|
|
<h1 class="property-name">[Property Name]</h1>
|
|
<p class="property-address">[Property Address]</p>
|
|
<div class="hero-details">
|
|
<div class="price">[Price]</div>
|
|
<div class="stats">
|
|
<span class="stat-item"><i class="fa-solid fa-bed"></i> [Bedrooms] Beds</span>
|
|
<span class="stat-item"><i class="fa-solid fa-bath"></i> [Bathrooms] Baths</span>
|
|
<span class="stat-item"><i class="fa-solid fa-ruler-combined"></i> [Area] sq. ft.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="description">
|
|
<h2>About this Property</h2>
|
|
<p>[Property Description goes here... This section provides a compelling overview of the property's main selling points, its unique character, and the lifestyle it offers. It should be engaging and concise.]</p>
|
|
</div>
|
|
|
|
<div class="agent-footer">
|
|
<div class="agent-info">
|
|
<h3>[Agent Name]</h3>
|
|
<p>Your Real Estate Professional</p>
|
|
</div>
|
|
<div class="agent-contact-details">
|
|
<p>[Agent Phone]</p>
|
|
<p>[Agent Email]</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="page-footer">
|
|
<div class="reference-id">
|
|
<strong>Reference ID:</strong> [Reference ID]
|
|
</div>
|
|
<div class="owner-info">
|
|
<strong>Owner Info:</strong> [Owner Name], [Owner Phone]
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="brochure" id="page2">
|
|
<div class="visual-header">
|
|
<div class="visual-overlay">
|
|
<h1>In-depth Details</h1>
|
|
<p>A closer look at the property's features and specifications.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content grid-layout">
|
|
<div class="specifications-section">
|
|
<h2 class="section-title">Specifications</h2>
|
|
<div class="spec-list">
|
|
<div class="spec-item"><strong>Status:</strong> <span>[Status]</span></div>
|
|
<div class="spec-item"><strong>Type:</strong> <span>[Type]</span></div>
|
|
<div class="spec-item"><strong>Floor:</strong> <span>[Floor]</span></div>
|
|
<div class="spec-item"><strong>Parking:</strong> <span>[Parking]</span></div>
|
|
<div class="spec-item"><strong>Year Built:</strong> <span>[Year Built]</span></div>
|
|
<div class="spec-item"><strong>Furnishing:</strong> <span>[Furnishing]</span></div>
|
|
<div class="spec-item"><strong>Maintenance Fee:</strong> <span>[Maintenance Fee]</span></div>
|
|
<div class="spec-item"><strong>Service Charge:</strong> <span>[Service Charge]</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="amenities-section">
|
|
<h2 class="section-title">Amenities & Features</h2>
|
|
<div class="amenities-grid">
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 1]</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 2]</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 3]</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 4]</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 5]</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 6]</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 7]</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 8]</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 9]</span></div>
|
|
<div class="amenity-item"><i class="icon fa-solid fa-check"></i><span>[Amenity/Feature 10]</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="page-footer">
|
|
<div class="reference-id">
|
|
<strong>Reference ID:</strong> [Reference ID]
|
|
</div>
|
|
<div class="owner-info">
|
|
<strong>Owner Info:</strong> [Owner Name], [Owner Phone]
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="brochure" id="page3">
|
|
<section class="location-section">
|
|
<div>
|
|
<h2 class="section-title">Location & Nearby</h2>
|
|
<div class="nearby-list">
|
|
<div class="nearby-item"><i class="icon fa-solid fa-location-dot"></i><div><strong>Landmarks:</strong> <span>[Nearby Landmarks]</span></div></div>
|
|
<div class="nearby-item"><i class="icon fa-solid fa-train-subway"></i><div><strong>Transportation:</strong> <span>[Transportation]</span></div></div>
|
|
<div class="nearby-item"><i class="icon fa-solid fa-graduation-cap"></i><div><strong>Schools:</strong> <span>[Schools]</span></div></div>
|
|
<div class="nearby-item"><i class="icon fa-solid fa-hospital"></i><div><strong>Hospitals:</strong> <span>[Hospitals]</span></div></div>
|
|
<div class="nearby-item"><i class="icon fa-solid fa-cart-shopping"></i><div><strong>Shopping:</strong> <span>[Shopping Centers]</span></div></div>
|
|
<div class="nearby-item"><i class="icon fa-solid fa-plane-departure"></i><div><strong>Airport:</strong> <span>[Airport Distance]</span></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="map-container">
|
|
<img src="https://plus.unsplash.com/premium_photo-1676467963268-5a20d7a7a448?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="additional-info-section">
|
|
<h2 class="section-title">Additional Information</h2>
|
|
<div class="info-list">
|
|
<div class="info-item"><strong>Pet Friendly:</strong> <span>[Pet Friendly Status]</span></div>
|
|
<div class="info-item"><strong>Smoking:</strong> <span>[Smoking Allowed]</span></div>
|
|
<div class="info-item"><strong>Available From:</strong> <span>[Available From Date]</span></div>
|
|
<div class="info-item"><strong>Minimum Contract:</strong> <span>[Minimum Contract Duration]</span></div>
|
|
<div class="info-item"><strong>Security Deposit:</strong> <span>[Security Deposit]</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="page-footer">
|
|
<div class="reference-id">
|
|
<strong>Reference ID:</strong> [Reference ID]
|
|
</div>
|
|
<div class="owner-info">
|
|
<strong>Owner Info:</strong> [Owner Name], [Owner Phone]
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |