v1.0.2-rc
This commit is contained in:
Ubuntu
parent
aecc59c4f9
commit
3c7e8f40bd
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
499
template samples/real estate modern home-A3.html
Normal file
499
template samples/real estate modern home-A3.html
Normal file
@ -0,0 +1,499 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Property Brochure - A3 Size</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Print Media Queries for A3 --- */
|
||||||
|
@media print {
|
||||||
|
@page {
|
||||||
|
size: A3;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.brochure {
|
||||||
|
width: 297mm !important;
|
||||||
|
height: 420mm !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
page-break-after: always;
|
||||||
|
}
|
||||||
|
.brochure:last-child {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 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 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- A3 Page Container --- */
|
||||||
|
.brochure {
|
||||||
|
width: 297mm;
|
||||||
|
height: 420mm;
|
||||||
|
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: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-primary);
|
||||||
|
margin: 0 0 25px 0;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
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: 50px;
|
||||||
|
}
|
||||||
|
.property-name {
|
||||||
|
font-size: 64px;
|
||||||
|
font-weight: 900;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
.property-address {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 300;
|
||||||
|
margin: 12px 0 32px 0;
|
||||||
|
border-left: 3px solid var(--color-accent);
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
.hero-details {
|
||||||
|
display: flex;
|
||||||
|
gap: 40px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
.stats {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.stat-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 50px;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.description h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-primary);
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.description p {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.agent-footer {
|
||||||
|
border-top: 4px solid var(--color-accent);
|
||||||
|
padding-top: 25px;
|
||||||
|
margin-top: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.agent-info h3 {
|
||||||
|
margin: 0 0 6px 0;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-text-dark);
|
||||||
|
}
|
||||||
|
.agent-info p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
}
|
||||||
|
.agent-contact-details {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.agent-contact-details p {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-primary);
|
||||||
|
margin: 3px 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: 50px;
|
||||||
|
}
|
||||||
|
.visual-header h1 {
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 900;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
.visual-header p {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 300;
|
||||||
|
margin: 12px 0 0 0;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.content.grid-layout {
|
||||||
|
padding: 50px;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1.2fr;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
.spec-list {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.spec-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 15px 12px;
|
||||||
|
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: 15px;
|
||||||
|
}
|
||||||
|
.amenity-item {
|
||||||
|
background-color: var(--color-background);
|
||||||
|
padding: 15px 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
border: 1px solid #e8e8e8;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
.amenity-item span {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text-dark);
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
.amenity-item .icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-color: var(--color-accent);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Page 3: Back Page Styles --- */
|
||||||
|
.location-section {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 40px;
|
||||||
|
padding: 50px;
|
||||||
|
background-color: var(--color-background-light);
|
||||||
|
flex: 1.5;
|
||||||
|
}
|
||||||
|
.map-container {
|
||||||
|
position: relative;
|
||||||
|
top: 40px;
|
||||||
|
height: 600px;
|
||||||
|
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: 20px;
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nearby-list .icon { font-size: 28px; color: var(--color-primary); width: 35px; }
|
||||||
|
.nearby-list strong { font-size: 18px; font-weight: 700; }
|
||||||
|
.nearby-list span { font-size: 18px; color: var(--color-text-muted); }
|
||||||
|
.additional-info-section {
|
||||||
|
padding: 50px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.info-list {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 15px 12px;
|
||||||
|
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: 25px 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.page-footer strong {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.pagination a {
|
||||||
|
color: var(--color-text-light);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 6px 12px;
|
||||||
|
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>
|
||||||
499
template samples/real estate modern home-A4.html
Normal file
499
template samples/real estate modern home-A4.html
Normal file
@ -0,0 +1,499 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Property Brochure - A4 Size</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Print Media Queries for A4 --- */
|
||||||
|
@media print {
|
||||||
|
@page {
|
||||||
|
size: A4;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.brochure {
|
||||||
|
width: 210mm !important;
|
||||||
|
height: 297mm !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
page-break-after: always;
|
||||||
|
}
|
||||||
|
.brochure:last-child {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 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>
|
||||||
423
template samples/the grand oak villa-A3.html
Normal file
423
template samples/the grand oak villa-A3.html
Normal file
@ -0,0 +1,423 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Prestige Real Estate Brochure - 4 Page - A3 Size</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=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
/* --- DESIGN SYSTEM & VARIABLES --- */
|
||||||
|
:root {
|
||||||
|
/* Color Palette */
|
||||||
|
--color-dark-charcoal: #121212;
|
||||||
|
--color-light-gray: #F5F5F5;
|
||||||
|
--color-text-primary: #D1D1D1;
|
||||||
|
--color-text-secondary: #888888;
|
||||||
|
--color-accent-gold: #C0A062;
|
||||||
|
--color-white: #FFFFFF;
|
||||||
|
--color-border: #2a2a2a;
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-primary: 'Montserrat', sans-serif;
|
||||||
|
--font-secondary: 'Playfair Display', serif;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--padding-page: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Print Media Queries for A3 --- */
|
||||||
|
@media print {
|
||||||
|
@page {
|
||||||
|
size: A3;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.brochure-page {
|
||||||
|
width: 297mm !important;
|
||||||
|
height: 420mm !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
page-break-after: always;
|
||||||
|
}
|
||||||
|
.brochure-page:last-child {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- GLOBAL & BODY STYLES --- */
|
||||||
|
body {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 50px;
|
||||||
|
margin: 0;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brochure-page {
|
||||||
|
width: 297mm;
|
||||||
|
height: 420mm;
|
||||||
|
background-color: var(--color-white);
|
||||||
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- PAGE 1: FRONT COVER --- */
|
||||||
|
.cover-page {
|
||||||
|
position: relative;
|
||||||
|
background-image: url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
color: var(--color-white);
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.cover-overlay {
|
||||||
|
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||||
|
background: linear-gradient(180deg, rgba(18, 18, 18, 0.8) 0%, rgba(18, 18, 18, 0.3) 100%);
|
||||||
|
}
|
||||||
|
.cover-header {
|
||||||
|
position: relative; padding: var(--padding-page); display: flex;
|
||||||
|
justify-content: space-between; align-items: center;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
font-family: var(--font-secondary); font-size: 2rem; font-weight: 700;
|
||||||
|
letter-spacing: 2px; border: 2px solid var(--color-white); padding: 12px 20px;
|
||||||
|
}
|
||||||
|
.property-status {
|
||||||
|
background-color: var(--color-accent-gold); color: var(--color-dark-charcoal);
|
||||||
|
padding: 12px 25px; font-weight: 600; font-size: 1.1rem; text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.cover-content { position: relative; padding: var(--padding-page); max-width: 65%; }
|
||||||
|
.cover-title {
|
||||||
|
font-family: var(--font-secondary); font-size: 6rem; font-weight: 700;
|
||||||
|
line-height: 1.1; margin: 0 0 15px 0; color: var(--color-white);
|
||||||
|
}
|
||||||
|
.cover-address {
|
||||||
|
font-size: 1.6rem; font-weight: 400; display: flex;
|
||||||
|
align-items: center; gap: 15px; color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
.cover-address i { color: var(--color-accent-gold); }
|
||||||
|
.cover-footer {
|
||||||
|
position: relative; background-color: rgba(18, 18, 18, 0.9);
|
||||||
|
padding: 40px var(--padding-page); display: grid; grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 30px; text-align: center;
|
||||||
|
}
|
||||||
|
.feature-item { border-right: 1px solid var(--color-border); }
|
||||||
|
.feature-item:last-child { border-right: none; }
|
||||||
|
.feature-item .value {
|
||||||
|
font-size: 2rem; font-weight: 600;
|
||||||
|
color: var(--color-white); margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.feature-item .label {
|
||||||
|
font-size: 1rem; color: var(--color-text-secondary);
|
||||||
|
text-transform: uppercase; letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- SHARED STYLES for Content Pages --- */
|
||||||
|
.content-body {
|
||||||
|
background-color: var(--color-dark-charcoal); color: var(--color-text-primary);
|
||||||
|
flex-grow: 1; padding: var(--padding-page); display: flex; flex-direction: column;
|
||||||
|
}
|
||||||
|
.page-header {
|
||||||
|
display: flex; justify-content: space-between; align-items: baseline;
|
||||||
|
padding-bottom: 25px; margin-bottom: 40px; border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.page-header .title {
|
||||||
|
font-family: var(--font-secondary); font-size: 3rem; color: var(--color-white);
|
||||||
|
}
|
||||||
|
.page-header .title span { color: var(--color-accent-gold); }
|
||||||
|
.page-header .property-name {
|
||||||
|
font-size: 1.3rem; font-weight: 600; color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
font-weight: 600; font-size: 1.3rem; color: var(--color-white);
|
||||||
|
margin: 0 0 30px 0; text-transform: uppercase; letter-spacing: 2px;
|
||||||
|
position: relative; padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
.section-title::after {
|
||||||
|
content: ''; position: absolute; bottom: 0; left: 0;
|
||||||
|
width: 60px; height: 3px; background-color: var(--color-accent-gold);
|
||||||
|
}
|
||||||
|
.main-content { flex-grow: 1; }
|
||||||
|
.page-footer {
|
||||||
|
background-color: #0A0A0A;
|
||||||
|
padding: 25px var(--padding-page);
|
||||||
|
font-size: 1.1rem; color: var(--color-text-secondary);
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.page-footer strong { color: var(--color-accent-gold); font-weight: 600; }
|
||||||
|
|
||||||
|
/* --- PAGE 2: DETAILS --- */
|
||||||
|
.details-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
.description p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
.specs-and-amenities {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 70px;
|
||||||
|
}
|
||||||
|
.spec-list .item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: 15px 0;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.spec-list .item:first-child { padding-top: 0; }
|
||||||
|
.spec-list .item .key { font-weight: 600; color: var(--color-text-secondary); }
|
||||||
|
.spec-list .item .value { font-weight: 400; color: var(--color-white); }
|
||||||
|
.amenities-list { list-style: none; padding: 0; margin: 0; columns: 2; gap: 20px; }
|
||||||
|
.amenities-list li { font-size: 1.1rem; margin-bottom: 20px; display: flex; align-items: center; }
|
||||||
|
.amenities-list i { color: var(--color-accent-gold); margin-right: 15px; font-size: 1.3rem; }
|
||||||
|
|
||||||
|
/* --- PAGE 3: LOCATION (NEW LAYOUT) --- */
|
||||||
|
.location-body { padding: 0; } /* Override default padding */
|
||||||
|
.location-map-container {
|
||||||
|
height: 45%;
|
||||||
|
background-image: url('https://images.unsplash.com/photo-1549880181-56a44cf4a9a5?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center 75%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.location-map-container::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 70%;
|
||||||
|
background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, var(--color-dark-charcoal) 90%);
|
||||||
|
}
|
||||||
|
.location-content { padding: var(--padding-page); }
|
||||||
|
.poi-grid {
|
||||||
|
display: grid; grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 40px; margin-top: 50px;
|
||||||
|
}
|
||||||
|
.poi-item { text-align: center; }
|
||||||
|
.poi-item .icon {
|
||||||
|
font-size: 3.5rem; color: var(--color-accent-gold); margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.poi-item .title {
|
||||||
|
font-weight: 600; font-size: 1.3rem; color: var(--color-white); margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.poi-item .details { font-size: 1.1rem; color: var(--color-text-secondary); }
|
||||||
|
|
||||||
|
/* --- PAGE 4: LAYOUT & LIFESTYLE (REVISED) --- */
|
||||||
|
.page-split-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.6fr 1fr;
|
||||||
|
gap: 70px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.gallery-section, .additional-info-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.additional-info-section .spec-list {
|
||||||
|
margin-top: 35px;
|
||||||
|
}
|
||||||
|
.photo-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
gap: 30px;
|
||||||
|
margin-top: 35px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.photo-item {
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.photo-item-1 {
|
||||||
|
grid-column: 1 / -1; /* Span full width */
|
||||||
|
background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
|
||||||
|
}
|
||||||
|
.photo-item-2 {
|
||||||
|
background-image: url('https://images.unsplash.com/photo-1600585152225-3579fe9d7ae2?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
|
||||||
|
}
|
||||||
|
.photo-item-3 {
|
||||||
|
background-image: url('https://images.unsplash.com/photo-1600585153325-1a75f8a4f631?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="brochure-page cover-page">
|
||||||
|
<div class="cover-overlay"></div>
|
||||||
|
<header class="cover-header"><div class="logo">Elysian</div><div class="property-status">FOR SALE</div></header>
|
||||||
|
<main class="cover-content">
|
||||||
|
<h1 class="cover-title">The Grand Oak Villa</h1>
|
||||||
|
<p class="cover-address"><i class="fa-solid fa-location-dot"></i> 123 Luxury Lane, Prestige City, PC 45678</p>
|
||||||
|
</main>
|
||||||
|
<footer class="cover-footer">
|
||||||
|
<div class="feature-item"><div class="value">5</div><div class="label">Bedrooms</div></div>
|
||||||
|
<div class="feature-item"><div class="value">6</div><div class="label">Bathrooms</div></div>
|
||||||
|
<div class="feature-item"><div class="value">6,200</div><div class="label">Sq. Ft.</div></div>
|
||||||
|
<div class="feature-item"><div class="value">$4,500,000</div><div class="label">Price</div></div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="content-body">
|
||||||
|
<header class="page-header"><h1 class="title">Property <span>Overview</span></h1><span class="property-name">The Grand Oak Villa</span></header>
|
||||||
|
<main class="main-content details-grid">
|
||||||
|
<div>
|
||||||
|
<h2 class="section-title">Description</h2>
|
||||||
|
<div class="description">
|
||||||
|
<p>Nestled in the heart of Prestige City, The Grand Oak Villa is a masterpiece of modern architecture and timeless elegance. This expansive 6,200 sq. ft. residence offers unparalleled luxury and privacy.</p>
|
||||||
|
<p>With soaring ceilings, bespoke finishes, and panoramic views from every room, this home is designed for those who appreciate the finer things in life. The open-plan living space is perfect for entertaining, featuring a gourmet chef's kitchen, a formal dining area, and a grand living room with a statement fireplace.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="specs-and-amenities">
|
||||||
|
<div>
|
||||||
|
<h2 class="section-title">Specifications</h2>
|
||||||
|
<div class="spec-list">
|
||||||
|
<div class="item"><span class="key">Reference ID:</span> <span class="value">[Reference ID]</span></div>
|
||||||
|
<div class="item"><span class="key">Status:</span> <span class="value">[Status]</span></div>
|
||||||
|
<div class="item"><span class="key">Type:</span> <span class="value">[Property Type]</span></div>
|
||||||
|
<div class="item"><span class="key">Year Built:</span> <span class="value">[Year Built]</span></div>
|
||||||
|
<div class="item"><span class="key">Floor:</span> <span class="value">[Floor]</span></div>
|
||||||
|
<div class="item"><span class="key">Parking:</span> <span class="value">[Parking]</span></div>
|
||||||
|
<div class="item"><span class="key">Furnishing:</span> <span class="value">[Furnishing]</span></div>
|
||||||
|
<div class="item"><span class="key">Maintenance Fee:</span> <span class="value">[Maintenance Fee]</span></div>
|
||||||
|
<div class="item"><span class="key">Service Charge:</span> <span class="value">[Service Charge]</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="section-title">Amenities & Features</h2>
|
||||||
|
<ul class="amenities-list">
|
||||||
|
<li><i class="fa-solid fa-check"></i> Infinity Pool</li><li><i class="fa-solid fa-check"></i> Private Home Theater</li><li><i class="fa-solid fa-check"></i> Gourmet Chef's Kitchen</li><li><i class="fa-solid fa-check"></i> Wine Cellar</li><li><i class="fa-solid fa-check"></i> Smart Home Automation</li><li><i class="fa-solid fa-check"></i> Spa & Sauna Room</li><li><i class="fa-solid fa-check"></i> Landscaped Gardens</li><li><i class="fa-solid fa-check"></i> Outdoor Fire Pit</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<footer class="page-footer">
|
||||||
|
<div><strong>Agent:</strong> [Agent Name] | [Agent Phone] | [Agent Email]</div>
|
||||||
|
<div><strong>Owner:</strong> [Owner Name] | [Owner Phone] | [Owner Email]</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="content-body location-body">
|
||||||
|
<div class="location-map-container"></div>
|
||||||
|
<div class="location-content">
|
||||||
|
<header class="page-header" style="margin-bottom: 0;">
|
||||||
|
<h1 class="title">An Unrivaled <span>Setting</span></h1>
|
||||||
|
<span class="property-name">123 Luxury Lane, Prestige City</span>
|
||||||
|
</header>
|
||||||
|
<div class="poi-grid">
|
||||||
|
<div class="poi-item">
|
||||||
|
<div class="icon"><i class="fa-solid fa-school"></i></div>
|
||||||
|
<div class="title">Schools</div>
|
||||||
|
<div class="details">[Schools]</div>
|
||||||
|
</div>
|
||||||
|
<div class="poi-item">
|
||||||
|
<div class="icon"><i class="fa-solid fa-shopping-cart"></i></div>
|
||||||
|
<div class="title">Shopping</div>
|
||||||
|
<div class="details">[Shopping Centers]</div>
|
||||||
|
</div>
|
||||||
|
<div class="poi-item">
|
||||||
|
<div class="icon"><i class="fa-solid fa-plane"></i></div>
|
||||||
|
<div class="title">Airport</div>
|
||||||
|
<div class="details">[Airport Distance]</div>
|
||||||
|
</div>
|
||||||
|
<div class="poi-item">
|
||||||
|
<div class="icon"><i class="fa-solid fa-landmark"></i></div>
|
||||||
|
<div class="title">Landmarks</div>
|
||||||
|
<div class="details">[Nearby Landmarks]</div>
|
||||||
|
</div>
|
||||||
|
<div class="poi-item">
|
||||||
|
<div class="icon"><i class="fa-solid fa-bus"></i></div>
|
||||||
|
<div class="title">Transportation</div>
|
||||||
|
<div class="details">[Transportation]</div>
|
||||||
|
</div>
|
||||||
|
<div class="poi-item">
|
||||||
|
<div class="icon"><i class="fa-solid fa-hospital"></i></div>
|
||||||
|
<div class="title">Hospitals</div>
|
||||||
|
<div class="details">[Hospitals]</div>
|
||||||
|
</div>
|
||||||
|
<div class="poi-item">
|
||||||
|
<div class="icon"><i class="fa-solid fa-umbrella-beach"></i></div>
|
||||||
|
<div class="title">Beach</div>
|
||||||
|
<div class="details">[Beach Distance]</div>
|
||||||
|
</div>
|
||||||
|
<div class="poi-item">
|
||||||
|
<div class="icon"><i class="fa-solid fa-subway"></i></div>
|
||||||
|
<div class="title">Metro</div>
|
||||||
|
<div class="details">[Metro Distance]</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="page-footer">
|
||||||
|
<div><strong>Agent:</strong> [Agent Name] | [Agent Phone] | [Agent Email]</div>
|
||||||
|
<div><strong>Owner:</strong> [Owner Name] | [Owner Phone] | [Owner Email]</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="content-body">
|
||||||
|
<header class="page-header">
|
||||||
|
<h1 class="title">Layout & <span>Lifestyle</span></h1>
|
||||||
|
<span class="property-name">The Grand Oak Villa</span>
|
||||||
|
</header>
|
||||||
|
<main class="main-content page-split-layout">
|
||||||
|
<section class="gallery-section">
|
||||||
|
<h2 class="section-title">A Glimpse Inside</h2>
|
||||||
|
<div class="photo-grid">
|
||||||
|
<div class="photo-item photo-item-1"></div>
|
||||||
|
<div class="photo-item photo-item-2"></div>
|
||||||
|
<div class="photo-item photo-item-3"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="additional-info-section">
|
||||||
|
<h2 class="section-title">Additional Information</h2>
|
||||||
|
<div class="spec-list">
|
||||||
|
<div class="item"><span class="key">Pet Friendly:</span> <span class="value">[Pet Friendly Status]</span></div>
|
||||||
|
<div class="item"><span class="key">Smoking:</span> <span class="value">[Smoking Allowed]</span></div>
|
||||||
|
<div class="item"><span class="key">Available From:</span> <span class="value">[Available From Date]</span></div>
|
||||||
|
<div class="item"><span class="key">Minimum Contract:</span> <span class="value">[Minimum Contract Duration]</span></div>
|
||||||
|
<div class="item"><span class="key">Security Deposit:</span> <span class="value">[Security Deposit]</span></div>
|
||||||
|
<div class="item"><span class="key">Utilities Included:</span> <span class="value">[Utilities Included]</span></div>
|
||||||
|
<div class="item"><span class="key">Internet Included:</span> <span class="value">[Internet Included]</span></div>
|
||||||
|
<div class="item"><span class="key">Cable Included:</span> <span class="value">[Cable Included]</span></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<footer class="page-footer">
|
||||||
|
<div><strong>Agent:</strong> [Agent Name] | [Agent Phone] | [Agent Email]</div>
|
||||||
|
<div><strong>Owner:</strong> [Owner Name] | [Owner Phone] | [Owner Email]</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Prestige Real Estate Brochure - 4 Page</title>
|
<title>Prestige Real Estate Brochure - 4 Page - A4 Size</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||||
@ -28,6 +28,28 @@
|
|||||||
--padding-page: 60px;
|
--padding-page: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Print Media Queries for A4 --- */
|
||||||
|
@media print {
|
||||||
|
@page {
|
||||||
|
size: A4;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.brochure-page {
|
||||||
|
width: 210mm !important;
|
||||||
|
height: 297mm !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
page-break-after: always;
|
||||||
|
}
|
||||||
|
.brochure-page:last-child {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* --- GLOBAL & BODY STYLES --- */
|
/* --- GLOBAL & BODY STYLES --- */
|
||||||
body {
|
body {
|
||||||
font-family: var(--font-primary);
|
font-family: var(--font-primary);
|
||||||
448
template samples/the serenity house-A3.html
Normal file
448
template samples/the serenity house-A3.html
Normal file
@ -0,0 +1,448 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Editorial Real Estate Brochure - Updated - A3 Size</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=Lato:wght@300;400;700&family=Cormorant+Garamond:wght@400;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
/* --- DESIGN SYSTEM & VARIABLES --- */
|
||||||
|
:root {
|
||||||
|
/* Color Palette */
|
||||||
|
--color-bg: #FFFFFF;
|
||||||
|
--color-off-white: #F8F7F5;
|
||||||
|
--color-text-primary: #333333;
|
||||||
|
--color-text-secondary: #777777;
|
||||||
|
--color-accent-beige: #D4C7B8;
|
||||||
|
--color-border: #EAEAEA;
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-serif: 'Cormorant Garamond', serif;
|
||||||
|
--font-sans: 'Lato', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Print Media Queries for A3 --- */
|
||||||
|
@media print {
|
||||||
|
@page {
|
||||||
|
size: A3;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.brochure-page {
|
||||||
|
width: 297mm !important;
|
||||||
|
height: 420mm !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
page-break-after: always;
|
||||||
|
}
|
||||||
|
.brochure-page:last-child {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- GLOBAL & BODY STYLES --- */
|
||||||
|
body {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
background-color: #d8d8d8;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 50px;
|
||||||
|
margin: 0;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brochure-page {
|
||||||
|
width: 297mm;
|
||||||
|
height: 420mm;
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- PAGE 1: FRONT COVER --- */
|
||||||
|
.p1-container {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.p1-image-side {
|
||||||
|
flex: 1.2;
|
||||||
|
background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1200');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.p1-content-side {
|
||||||
|
flex: 1;
|
||||||
|
padding: 90px 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.p1-header .collection {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.p1-main-title {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 6.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
.p1-address {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
border-left: 3px solid var(--color-accent-beige);
|
||||||
|
padding-left: 25px;
|
||||||
|
}
|
||||||
|
.p1-ref-id {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-left: 28px;
|
||||||
|
}
|
||||||
|
.p1-footer {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.p1-footer strong {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
.p1-footer .area {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- SHARED STYLES for Content Pages --- */
|
||||||
|
.page-layout {
|
||||||
|
padding: 90px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.page-number {
|
||||||
|
position: absolute;
|
||||||
|
top: 90px; right: 90px;
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.page-title-main {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 4.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.page-title-sub {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.content-divider {
|
||||||
|
border: 0;
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--color-border);
|
||||||
|
margin: 40px 0;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
margin-bottom: 25px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- PAGE 2: INTRODUCTION & NARRATIVE --- */
|
||||||
|
.p2-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 80px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.p2-image {
|
||||||
|
background-image: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.p2-text p {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.p2-text p:first-of-type::first-letter {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 5.5rem;
|
||||||
|
float: left;
|
||||||
|
line-height: 1;
|
||||||
|
margin-right: 20px;
|
||||||
|
color: var(--color-accent-beige);
|
||||||
|
}
|
||||||
|
.pull-quote {
|
||||||
|
border-left: 3px solid var(--color-accent-beige);
|
||||||
|
padding-left: 30px;
|
||||||
|
margin: 40px 0;
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 2rem;
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- PAGE 3: DETAILS & AMENITIES --- */
|
||||||
|
.p3-main-content { flex-grow: 1; }
|
||||||
|
.spec-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 40px;
|
||||||
|
padding: 40px;
|
||||||
|
background-color: var(--color-off-white);
|
||||||
|
}
|
||||||
|
.spec-item { text-align: center; }
|
||||||
|
.spec-item .value {
|
||||||
|
font-size: 2.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
.spec-item .label {
|
||||||
|
font-size: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.details-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 20px 50px;
|
||||||
|
}
|
||||||
|
.details-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
padding-bottom: 12px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
.details-item .label { color: var(--color-text-secondary); }
|
||||||
|
.details-item .value { color: var(--color-text-primary); font-weight: 700; }
|
||||||
|
.amenities-list { list-style: none; padding: 0; column-count: 2; column-gap: 50px;}
|
||||||
|
.amenities-list li {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
-webkit-column-break-inside: avoid;
|
||||||
|
page-break-inside: avoid;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
.amenities-list li i { color: var(--color-accent-beige); margin-right: 15px; }
|
||||||
|
|
||||||
|
/* --- PAGE 4: REVISED LAYOUT --- */
|
||||||
|
.p4-section-title {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
margin: 0 0 25px 0;
|
||||||
|
}
|
||||||
|
.p4-floorplan-container {
|
||||||
|
height: 400px;
|
||||||
|
background-color: var(--color-off-white);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
background-image: url('https://cdn.shopify.com/s/files/1/0024/0495/3953/files/Architect_s_floor_plan_for_a_house_in_black_and_white_large.jpg');
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
.p4-info-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 80px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
.info-list .info-item, .location-list .item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 12px 0;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.info-list .info-item strong, .location-list .item strong {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.p4-contact-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 50px;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
.contact-card {
|
||||||
|
background-color: var(--color-off-white);
|
||||||
|
padding: 25px;
|
||||||
|
text-align: center;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
.contact-card .title {
|
||||||
|
font-size: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.contact-card .name { font-family: var(--font-serif); font-size: 2rem; font-weight: 600; }
|
||||||
|
.contact-card .phone, .contact-card .email { font-size: 1.1rem; margin: 6px 0; color: var(--color-text-secondary); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="p1-container">
|
||||||
|
<div class="p1-image-side"></div>
|
||||||
|
<div class="p1-content-side">
|
||||||
|
<header class="p1-header">
|
||||||
|
<div class="collection">Elysian Estates Collection</div>
|
||||||
|
<h1 class="p1-main-title">The Serenity House</h1>
|
||||||
|
<p class="p1-address">123 Luxury Lane, Prestige City, PC 45678</p>
|
||||||
|
<p class="p1-ref-id">Reference ID: ES-8821</p>
|
||||||
|
</header>
|
||||||
|
<footer class="p1-footer">
|
||||||
|
<div class="area">6,200 Sq. Ft. • 5 Bedrooms • 6 Bathrooms</div>
|
||||||
|
An architectural marvel of curated living space.
|
||||||
|
<br>
|
||||||
|
<strong>Offered at $4,500,000</strong>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="page-layout">
|
||||||
|
<span class="page-number">02</span>
|
||||||
|
<h1 class="page-title-main">A Sanctuary of Modern Design</h1>
|
||||||
|
<p class="page-title-sub">Where light, space, and nature converge to create an unparalleled living experience.</p>
|
||||||
|
<div class="p2-grid">
|
||||||
|
<div class="p2-text">
|
||||||
|
<p>Designed by the world-renowned architect, Helena Vance, The Serenity House is more than a home; it is a living sculpture. Every line, material, and detail has been thoughtfully considered to evoke a sense of peace and connection with the surrounding landscape. Soaring ceilings and floor-to-ceiling glass walls dissolve the boundaries between inside and out, flooding the space with natural light.</p>
|
||||||
|
<p class="pull-quote">A timeless residence built not just for living, but for thriving.</p>
|
||||||
|
<p>The interior palette is a harmonious blend of natural oak, Italian travertine, and warm bronze accents, creating an atmosphere of understated luxury. This property represents a unique opportunity to own a piece of architectural history.</p>
|
||||||
|
</div>
|
||||||
|
<div class="p2-image"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="page-layout">
|
||||||
|
<span class="page-number">03</span>
|
||||||
|
<h1 class="page-title-main">Property Specifications</h1>
|
||||||
|
<p class="page-title-sub">A comprehensive overview of the property's features, details, and amenities.</p>
|
||||||
|
|
||||||
|
<div class="p3-main-content">
|
||||||
|
<div class="spec-grid">
|
||||||
|
<div class="spec-item"><div class="value">5</div><div class="label">Bedrooms</div></div>
|
||||||
|
<div class="spec-item"><div class="value">6</div><div class="label">Bathrooms</div></div>
|
||||||
|
<div class="spec-item"><div class="value">6,200</div><div class="label">Square Feet</div></div>
|
||||||
|
<div class="spec-item"><div class="value">0.75</div><div class="label">Acres</div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="content-divider">
|
||||||
|
|
||||||
|
<h3 class="section-title">Property Details</h3>
|
||||||
|
<div class="details-grid">
|
||||||
|
<div class="details-item"><span class="label">Status</span><span class="value">For Sale</span></div>
|
||||||
|
<div class="details-item"><span class="label">Year Built</span><span class="value">2023</span></div>
|
||||||
|
<div class="details-item"><span class="label">Type</span><span class="value">Single-Family Home</span></div>
|
||||||
|
<div class="details-item"><span class="label">Furnishing</span><span class="value">Partially Furnished</span></div>
|
||||||
|
<div class="details-item"><span class="label">Floor</span><span class="value">2 Levels</span></div>
|
||||||
|
<div class="details-item"><span class="label">Maintenance Fee</span><span class="value">$1,200 / month</span></div>
|
||||||
|
<div class="details-item"><span class="label">Parking</span><span class="value">3-Car Garage</span></div>
|
||||||
|
<div class="details-item"><span class="label">Service Charge</span><span class="value">Included</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="content-divider">
|
||||||
|
|
||||||
|
<h3 class="section-title">Amenities & Features</h3>
|
||||||
|
<ul class="amenities-list">
|
||||||
|
<li><i class="fa-solid fa-check"></i> Primary Suite with Spa-Bath</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Radiant Heated Flooring</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Custom Walk-in Closets</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Smart Home Automation</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Infinity Edge Saline Pool</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Private Cinema Room</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Temperature-Controlled Wine Cellar</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Landscaped Gardens & Terrace</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Gourmet Chef's Kitchen</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Floor-to-Ceiling Glass Walls</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="page-layout">
|
||||||
|
<span class="page-number">04</span>
|
||||||
|
<h1 class="page-title-main" style="margin-bottom: 40px;">Floor Plan & Details</h1>
|
||||||
|
|
||||||
|
<div class="p4-info-grid">
|
||||||
|
<div class="location-list">
|
||||||
|
<h2 class="p4-section-title">Location & Nearby</h2>
|
||||||
|
<div class="item"><strong>Schools</strong> <span>5 min drive</span></div>
|
||||||
|
<div class="item"><strong>Shopping</strong> <span>10 min drive</span></div>
|
||||||
|
<div class="item"><strong>Hospitals</strong> <span>12 min drive</span></div>
|
||||||
|
<div class="item"><strong>Country Club</strong> <span>8 min drive</span></div>
|
||||||
|
<div class="item"><strong>Airport</strong> <span>20 min drive</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="info-list">
|
||||||
|
<h2 class="p4-section-title">Additional Information</h2>
|
||||||
|
<div class="info-item"><strong>Pet-Friendly</strong> <span>By Approval</span></div>
|
||||||
|
<div class="info-item"><strong>Smoking</strong> <span>Not Permitted</span></div>
|
||||||
|
<div class="info-item"><strong>Availability</strong> <span>Immediate</span></div>
|
||||||
|
<div class="info-item"><strong>Utilities</strong> <span>Not Included</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="content-divider">
|
||||||
|
|
||||||
|
<h2 class="p4-section-title">Floor Plan & Location</h2>
|
||||||
|
<div class="p4-floorplan-container"></div>
|
||||||
|
|
||||||
|
<div class="p4-contact-row">
|
||||||
|
<div class="contact-card">
|
||||||
|
<div class="title">Owner Information</div>
|
||||||
|
<div class="name">John & Jane Doe</div>
|
||||||
|
<p class="phone">(555) 111-2222</p>
|
||||||
|
<p class="email">owner.serenity@email.com</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact-card">
|
||||||
|
<div class="title">Agent Information</div>
|
||||||
|
<div class="name">Olivia Sterling</div>
|
||||||
|
<p class="phone">(555) 987-6543</p>
|
||||||
|
<p class="email">olivia@elysianestates.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Editorial Real Estate Brochure - Updated</title>
|
<title>Editorial Real Estate Brochure - Updated - A4 Size</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Cormorant+Garamond:wght@400;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Cormorant+Garamond:wght@400;600;700&display=swap" rel="stylesheet">
|
||||||
@ -24,6 +24,28 @@
|
|||||||
--font-sans: 'Lato', sans-serif;
|
--font-sans: 'Lato', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Print Media Queries for A4 --- */
|
||||||
|
@media print {
|
||||||
|
@page {
|
||||||
|
size: A4;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.brochure-page {
|
||||||
|
width: 210mm !important;
|
||||||
|
height: 297mm !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
page-break-after: always;
|
||||||
|
}
|
||||||
|
.brochure-page:last-child {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* --- GLOBAL & BODY STYLES --- */
|
/* --- GLOBAL & BODY STYLES --- */
|
||||||
body {
|
body {
|
||||||
font-family: var(--font-sans);
|
font-family: var(--font-sans);
|
||||||
@ -321,7 +343,9 @@
|
|||||||
<p class="page-title-sub">Where light, space, and nature converge to create an unparalleled living experience.</p>
|
<p class="page-title-sub">Where light, space, and nature converge to create an unparalleled living experience.</p>
|
||||||
<div class="p2-grid">
|
<div class="p2-grid">
|
||||||
<div class="p2-text">
|
<div class="p2-text">
|
||||||
[Description HTML]
|
<p>Designed by the world-renowned architect, Helena Vance, The Serenity House is more than a home; it is a living sculpture. Every line, material, and detail has been thoughtfully considered to evoke a sense of peace and connection with the surrounding landscape. Soaring ceilings and floor-to-ceiling glass walls dissolve the boundaries between inside and out, flooding the space with natural light.</p>
|
||||||
|
<p class="pull-quote">A timeless residence built not just for living, but for thriving.</p>
|
||||||
|
<p>The interior palette is a harmonious blend of natural oak, Italian travertine, and warm bronze accents, creating an atmosphere of understated luxury. This property represents a unique opportunity to own a piece of architectural history.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="p2-image"></div>
|
<div class="p2-image"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -332,7 +356,7 @@
|
|||||||
<div class="page-layout">
|
<div class="page-layout">
|
||||||
<span class="page-number">03</span>
|
<span class="page-number">03</span>
|
||||||
<h1 class="page-title-main">Property Specifications</h1>
|
<h1 class="page-title-main">Property Specifications</h1>
|
||||||
<p class="page-title-sub">A comprehensive overview of the property’s features, details, and amenities.</p>
|
<p class="page-title-sub">A comprehensive overview of the property's features, details, and amenities.</p>
|
||||||
|
|
||||||
<div class="p3-main-content">
|
<div class="p3-main-content">
|
||||||
<div class="spec-grid">
|
<div class="spec-grid">
|
||||||
626
template samples/the vertice-A3.html
Normal file
626
template samples/the vertice-A3.html
Normal file
@ -0,0 +1,626 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Modern Urban Residences Brochure - Updated - A3 Size</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=Inter:wght@300;400;500;700;800&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
/* --- DESIGN SYSTEM & VARIABLES --- */
|
||||||
|
:root {
|
||||||
|
/* Color Palette */
|
||||||
|
--color-dark: #111111;
|
||||||
|
--color-light: #FFFFFF;
|
||||||
|
--color-accent-green: #0A6847;
|
||||||
|
--color-grey-bg: #F0F0F0;
|
||||||
|
--color-text-dark: #222222;
|
||||||
|
--color-text-light: #EFEFEF;
|
||||||
|
--color-text-muted: #888888;
|
||||||
|
--color-border: #DDDDDD;
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-main: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Print Media Queries for A3 --- */
|
||||||
|
@media print {
|
||||||
|
@page {
|
||||||
|
size: A3;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.brochure-page {
|
||||||
|
width: 297mm !important;
|
||||||
|
height: 420mm !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
page-break-after: always;
|
||||||
|
}
|
||||||
|
.brochure-page:last-child {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- GLOBAL & BODY STYLES --- */
|
||||||
|
body {
|
||||||
|
font-family: var(--font-main);
|
||||||
|
background-color: #d8d8d8;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 50px;
|
||||||
|
margin: 0;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brochure-page {
|
||||||
|
width: 297mm;
|
||||||
|
height: 420mm;
|
||||||
|
background-color: var(--color-light);
|
||||||
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- PAGE 1: COVER PAGE --- */
|
||||||
|
.cover-page {
|
||||||
|
background-image: url('https://plus.unsplash.com/premium_photo-1677474827617-6a7269f97574?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
color: var(--color-light);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.cover-overlay {
|
||||||
|
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||||
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3));
|
||||||
|
}
|
||||||
|
.cover-content {
|
||||||
|
position: relative; z-index: 2; padding: 70px;
|
||||||
|
}
|
||||||
|
.cover-content .subtitle {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
.cover-content .main-title {
|
||||||
|
font-size: 8rem;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.1;
|
||||||
|
margin: 15px 0 30px 0;
|
||||||
|
text-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
.cover-content .address {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 400;
|
||||||
|
border-top: 1px solid var(--color-accent-green);
|
||||||
|
display: inline-block;
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
.cover-footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50px;
|
||||||
|
left: 50px; right: 50px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- SHARED STYLES --- */
|
||||||
|
.page-container {
|
||||||
|
padding: 90px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.page-title {
|
||||||
|
font-size: 3.2rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--color-dark);
|
||||||
|
}
|
||||||
|
.page-title span {
|
||||||
|
color: var(--color-accent-green);
|
||||||
|
}
|
||||||
|
.page-subtitle {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
}
|
||||||
|
.page-footer-bar {
|
||||||
|
margin-top: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 25px;
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
}
|
||||||
|
.page-footer-bar .property-name {
|
||||||
|
color: var(--color-dark);
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.9rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-dark);
|
||||||
|
margin-bottom: 30px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.detail-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: 15px 0;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.detail-item .label { color: var(--color-text-muted); }
|
||||||
|
.detail-item .value { color: var(--color-text-dark); font-weight: 600; text-align: right; }
|
||||||
|
|
||||||
|
/* --- PAGE 2: THE VISION --- */
|
||||||
|
.vision-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 80px;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.vision-image {
|
||||||
|
background-image: url('https://images.unsplash.com/photo-1626704359446-0de90350b4e7?q=80&w=736&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.vision-text h3 {
|
||||||
|
font-size: 2.3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-dark);
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.vision-text p {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- PAGE 3: RESIDENCES GALLERY --- */
|
||||||
|
.gallery-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-template-rows: 320px 320px 320px;
|
||||||
|
gap: 25px;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.gallery-item {
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
color: var(--color-light);
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.gallery-item::after {
|
||||||
|
content: ''; position: absolute; top:0; left: 0; width: 100%; height: 100%;
|
||||||
|
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
|
||||||
|
}
|
||||||
|
.gallery-item span { font-weight: 600; z-index: 2; font-size: 1.1rem; }
|
||||||
|
.g-item-1 { grid-column: 1 / 3; grid-row: 1 / 2; background-image: url('https://images.unsplash.com/photo-1616046229478-9901c5536a45?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); }
|
||||||
|
.g-item-2 { grid-column: 3 / 4; grid-row: 1 / 3; background-image: url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); }
|
||||||
|
.g-item-3 { grid-column: 1 / 2; grid-row: 2 / 4; background-image: url('https://images.unsplash.com/photo-1600121848594-d8644e57abab?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); }
|
||||||
|
.g-item-4 { grid-column: 2 / 3; grid-row: 2 / 3; background-image: url('https://images.unsplash.com/photo-1595526114035-0d45ed16433d?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); }
|
||||||
|
.g-item-5 { grid-column: 2 / 4; grid-row: 3 / 4; background-image: url('https://images.unsplash.com/photo-1512918728675-ed5a71a580a9?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800'); }
|
||||||
|
|
||||||
|
/* --- PAGE 4: AMENITIES & FEATURES (REVISED V2) --- */
|
||||||
|
.amenities-intro {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
margin: 15px 0 25px 0;
|
||||||
|
}
|
||||||
|
.page4-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1.2fr;
|
||||||
|
gap: 70px;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.page4-image {
|
||||||
|
background-image: url('https://plus.unsplash.com/premium_photo-1675745330187-a6f001a21abe?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
min-height: 100%;
|
||||||
|
border: 8px solid var(--color-accent-green);
|
||||||
|
}
|
||||||
|
.page4-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.amenities-list-p4 {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 0 40px 0;
|
||||||
|
column-count: 2;
|
||||||
|
column-gap: 40px;
|
||||||
|
}
|
||||||
|
.amenities-list-p4 li {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
-webkit-column-break-inside: avoid;
|
||||||
|
page-break-inside: avoid;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
.amenities-list-p4 i {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--color-accent-green);
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 25px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- PAGE 5: FLOOR PLANS & SPECS (REVISED V2) --- */
|
||||||
|
.page5-main {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 35px;
|
||||||
|
}
|
||||||
|
.floorplan-showcase {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 280px 1fr;
|
||||||
|
gap: 35px;
|
||||||
|
background-color: var(--color-grey-bg);
|
||||||
|
padding: 25px;
|
||||||
|
border-left: 6px solid var(--color-accent-green);
|
||||||
|
}
|
||||||
|
.floorplan-image-p5 {
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
min-height: 250px;
|
||||||
|
}
|
||||||
|
.floorplan-image-p5.residence {
|
||||||
|
background-image: url('https://images.unsplash.com/photo-1740446568651-1d31966b228a?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
||||||
|
}
|
||||||
|
.floorplan-image-p5.penthouse {
|
||||||
|
background-image: url('https://images.unsplash.com/photo-1721522281545-fad32dd5107a?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
||||||
|
}
|
||||||
|
.floorplan-info-p5 h4 {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
}
|
||||||
|
.floorplan-stats-p5 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.floorplan-stats-p5 .stat .value {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
.floorplan-stats-p5 .stat .label {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.floorplan-info-p5 .description {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
.additional-specs-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.spec-item {
|
||||||
|
background-color: var(--color-grey-bg);
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.spec-item .label {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.spec-item .value {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- PAGE 6: LOCATION & CONTACT (REVISED V3) --- */
|
||||||
|
.page6-main {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 80px;
|
||||||
|
align-content: start;
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
.page6-main p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.contact-person-p6 {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.contact-person-p6 .name {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: var(--color-dark);
|
||||||
|
}
|
||||||
|
.contact-person-p6 .title {
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.contact-person-p6 .details {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
.highlights-list-p6 {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.highlights-list-p6 li {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.highlights-list-p6 i {
|
||||||
|
color: var(--color-accent-green);
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 25px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="brochure-page cover-page">
|
||||||
|
<div class="cover-overlay"></div>
|
||||||
|
<div class="cover-content">
|
||||||
|
<div class="subtitle">An Urban Oasis</div>
|
||||||
|
<h1 class="main-title">THE VERTICE</h1>
|
||||||
|
<div class="address">18 Skyline Avenue, Metropolis Centre, MC 90210</div>
|
||||||
|
</div>
|
||||||
|
<div class="cover-footer">
|
||||||
|
<span>Residences Starting from $1,200,000</span>
|
||||||
|
<span>Ref ID: VP-2025-001</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="page-container">
|
||||||
|
<header class="page-header">
|
||||||
|
<h1 class="page-title">Elevated <span>Living</span></h1>
|
||||||
|
<span class="page-subtitle">Discover Your Sanctuary in the Sky</span>
|
||||||
|
</header>
|
||||||
|
<main class="vision-grid">
|
||||||
|
<div class="vision-text">
|
||||||
|
<h3>Where Design Meets Desire.</h3>
|
||||||
|
<p>The Vertice is not just a building; it's a bold statement on modern urban living. Conceived for the discerning individual, it offers a unique blend of architectural prowess, bespoke interiors, and an unparalleled lifestyle experience right in the heart of the city.</p>
|
||||||
|
<p>Every residence is a testament to quality, featuring panoramic city views from floor-to-ceiling windows, intelligent home systems, and finishes selected from the finest materials around the globe. This is more than a home; it's a new perspective.</p>
|
||||||
|
</div>
|
||||||
|
<div class="vision-image"></div>
|
||||||
|
</main>
|
||||||
|
<footer class="page-footer-bar">
|
||||||
|
<span class="property-name">THE VERTICE</span>
|
||||||
|
<span>Page 02 / 06</span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="page-container">
|
||||||
|
<header class="page-header">
|
||||||
|
<h1 class="page-title">Exquisite <span>Interiors</span></h1>
|
||||||
|
<span class="page-subtitle">A Canvas for Your Life</span>
|
||||||
|
</header>
|
||||||
|
<main class="gallery-grid">
|
||||||
|
<div class="gallery-item g-item-1"><span>Open-Concept Living Space</span></div>
|
||||||
|
<div class="gallery-item g-item-2"><span>Master Bedroom Suite</span></div>
|
||||||
|
<div class="gallery-item g-item-3"><span>Gourmet Chef's Kitchen</span></div>
|
||||||
|
<div class="gallery-item g-item-4"><span>Spa-Inspired Bathroom</span></div>
|
||||||
|
<div class="gallery-item g-item-5"><span>Private Balcony Views</span></div>
|
||||||
|
</main>
|
||||||
|
<footer class="page-footer-bar">
|
||||||
|
<span class="property-name">THE VERTICE</span>
|
||||||
|
<span>Page 03 / 06</span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="page-container">
|
||||||
|
<header class="page-header">
|
||||||
|
<h1 class="page-title">Amenities & <span>Features</span></h1>
|
||||||
|
<span class="page-subtitle">Beyond the Expected</span>
|
||||||
|
</header>
|
||||||
|
<p class="amenities-intro">An unrivaled collection of amenities offers residents a resort-style living experience. From the serene rooftop pool to the state-of-the-art wellness center, every detail is crafted for comfort, convenience, and luxury.</p>
|
||||||
|
<main class="page4-grid">
|
||||||
|
<div class="page4-image"></div>
|
||||||
|
<div class="page4-content">
|
||||||
|
<div>
|
||||||
|
<h3 class="section-title">Lifestyle Amenities</h3>
|
||||||
|
<ul class="amenities-list-p4">
|
||||||
|
<li><i class="fa-solid fa-water-ladder"></i> Rooftop Infinity Pool</li>
|
||||||
|
<li><i class="fa-solid fa-dumbbell"></i> Fitness Center</li>
|
||||||
|
<li><i class="fa-solid fa-martini-glass-empty"></i> Residents' Sky Lounge</li>
|
||||||
|
<li><i class="fa-solid fa-film"></i> Private Cinema Room</li>
|
||||||
|
<li><i class="fa-solid fa-spa"></i> Wellness Spa & Sauna</li>
|
||||||
|
<li><i class="fa-solid fa-briefcase"></i> Business Center</li>
|
||||||
|
<li><i class="fa-solid fa-shield-halved"></i> 24/7 Concierge</li>
|
||||||
|
<li><i class="fa-solid fa-car"></i> Secure Parking</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="section-title">Key Specifications</h3>
|
||||||
|
<div class="detail-item"><span class="label">Status</span> <span class="value">New Development</span></div>
|
||||||
|
<div class="detail-item"><span class="label">Property Type</span> <span class="value">Condominium</span></div>
|
||||||
|
<div class="detail-item"><span class="label">Year Built</span> <span class="value">2025</span></div>
|
||||||
|
<div class="detail-item"><span class="label">Technology</span> <span class="value">Integrated Smart Home</span></div>
|
||||||
|
<div class="detail-item"><span class="label">Design</span> <span class="value">Sustainable & Eco-Friendly</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="page-footer-bar">
|
||||||
|
<span class="property-name">THE VERTICE</span>
|
||||||
|
<span>Page 04 / 06</span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="page-container">
|
||||||
|
<header class="page-header">
|
||||||
|
<h1 class="page-title">Floor Plans & <span>Details</span></h1>
|
||||||
|
<span class="page-subtitle">Designed for Modern Life</span>
|
||||||
|
</header>
|
||||||
|
<main class="page5-main">
|
||||||
|
<div class="floorplan-showcase">
|
||||||
|
<div class="floorplan-image-p5 residence"></div>
|
||||||
|
<div class="floorplan-info-p5">
|
||||||
|
<h4>Two-Bedroom Residence</h4>
|
||||||
|
<div class="floorplan-stats-p5">
|
||||||
|
<div class="stat">
|
||||||
|
<div class="value">1,450</div>
|
||||||
|
<div class="label">SQ. FT.</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="value">2</div>
|
||||||
|
<div class="label">BEDROOMS</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="value">2</div>
|
||||||
|
<div class="label">BATHROOMS</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="value">1</div>
|
||||||
|
<div class="label">BALCONY</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="description">A thoughtfully designed space perfect for urban professionals or small families, combining comfort with panoramic city views.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="floorplan-showcase">
|
||||||
|
<div class="floorplan-image-p5 penthouse"></div>
|
||||||
|
<div class="floorplan-info-p5">
|
||||||
|
<h4>Three-Bedroom Penthouse</h4>
|
||||||
|
<div class="floorplan-stats-p5">
|
||||||
|
<div class="stat">
|
||||||
|
<div class="value">3,200</div>
|
||||||
|
<div class="label">SQ. FT.</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="value">3</div>
|
||||||
|
<div class="label">BEDROOMS</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="value">3.5</div>
|
||||||
|
<div class="label">BATHROOMS</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="value">1</div>
|
||||||
|
<div class="label">TERRACE</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="description">The pinnacle of luxury living, this penthouse offers expansive spaces, premium finishes, and exclusive access to a private rooftop terrace.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="section-title">Additional Information</h3>
|
||||||
|
<div class="additional-specs-grid">
|
||||||
|
<div class="spec-item"><div class="label">Pets</div><div class="value">Allowed (w/ restrictions)</div></div>
|
||||||
|
<div class="spec-item"><div class="label">Smoking</div><div class="value">In designated areas</div></div>
|
||||||
|
<div class="spec-item"><div class="label">Availability</div><div class="value">Q4 2025</div></div>
|
||||||
|
<div class="spec-item"><div class="label">Parking</div><div class="value">2 Spaces per Unit</div></div>
|
||||||
|
<div class="spec-item"><div class="label">Security Deposit</div><div class="value">2 Months</div></div>
|
||||||
|
<div class="spec-item"><div class="label">Utilities</div><div class="value">Sub-metered</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="page-footer-bar">
|
||||||
|
<span class="property-name">THE VERTICE</span>
|
||||||
|
<span>Page 05 / 06</span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brochure-page">
|
||||||
|
<div class="page-container">
|
||||||
|
<header class="page-header">
|
||||||
|
<h1 class="page-title">Location & <span>Inquiry</span></h1>
|
||||||
|
<span class="page-subtitle">Your Future Awaits</span>
|
||||||
|
</header>
|
||||||
|
<main class="page6-main">
|
||||||
|
<div>
|
||||||
|
<h3 class="section-title">Schedule a Private Viewing</h3>
|
||||||
|
<p>Experience The Vertice firsthand. Contact our sales executive to arrange an exclusive tour of the property and available residences.</p>
|
||||||
|
<div class="contact-person-p6">
|
||||||
|
<div class="name">Alexander Valentine</div>
|
||||||
|
<div class="title">Sales Executive, Elysian Properties</div>
|
||||||
|
<div class="details">
|
||||||
|
(555) 123-9876<br>
|
||||||
|
alex.v@elysian.com
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="section-title">Neighborhood Highlights</h3>
|
||||||
|
<ul class="highlights-list-p6">
|
||||||
|
<li><i class="fa-solid fa-tree-city"></i> <strong>Landmarks:</strong> Central Park (5 min)</li>
|
||||||
|
<li><i class="fa-solid fa-train-subway"></i> <strong>Transportation:</strong> Metro Line A (2 min walk)</li>
|
||||||
|
<li><i class="fa-solid fa-school"></i> <strong>Schools:</strong> Metropolis Intl. (10 min)</li>
|
||||||
|
<li><i class="fa-solid fa-cart-shopping"></i> <strong>Shopping:</strong> The Galleria Mall (8 min)</li>
|
||||||
|
<li><i class="fa-solid fa-plane-departure"></i> <strong>Airport:</strong> 25 min drive</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="page-footer-bar">
|
||||||
|
<span class="property-name">THE VERTICE</span>
|
||||||
|
<span>Page 06 / 06</span>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Modern Urban Residences Brochure - Updated</title>
|
<title>Modern Urban Residences Brochure - Updated - A4 Size</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&display=swap" rel="stylesheet">
|
||||||
@ -25,6 +25,28 @@
|
|||||||
--font-main: 'Inter', sans-serif;
|
--font-main: 'Inter', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Print Media Queries for A4 --- */
|
||||||
|
@media print {
|
||||||
|
@page {
|
||||||
|
size: A4;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.brochure-page {
|
||||||
|
width: 210mm !important;
|
||||||
|
height: 297mm !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
page-break-after: always;
|
||||||
|
}
|
||||||
|
.brochure-page:last-child {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* --- GLOBAL & BODY STYLES --- */
|
/* --- GLOBAL & BODY STYLES --- */
|
||||||
body {
|
body {
|
||||||
font-family: var(--font-main);
|
font-family: var(--font-main);
|
||||||
@ -396,31 +418,32 @@
|
|||||||
<div class="brochure-page cover-page">
|
<div class="brochure-page cover-page">
|
||||||
<div class="cover-overlay"></div>
|
<div class="cover-overlay"></div>
|
||||||
<div class="cover-content">
|
<div class="cover-content">
|
||||||
<div class="subtitle">[Cover Subtitle]</div>
|
<div class="subtitle">An Urban Oasis</div>
|
||||||
<h1 class="main-title">[Property Name]</h1>
|
<h1 class="main-title">THE VERTICE</h1>
|
||||||
<div class="address">[Address]</div>
|
<div class="address">18 Skyline Avenue, Metropolis Centre, MC 90210</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cover-footer">
|
<div class="cover-footer">
|
||||||
<span>Residences starting from [Starting Price]</span>
|
<span>Residences Starting from $1,200,000</span>
|
||||||
<span>Ref ID: [Reference ID]</span>
|
<span>Ref ID: VP-2025-001</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="brochure-page">
|
<div class="brochure-page">
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<header class="page-header">
|
<header class="page-header">
|
||||||
<h1 class="page-title">[Page 2 Title]</h1>
|
<h1 class="page-title">Elevated <span>Living</span></h1>
|
||||||
<span class="page-subtitle">[Page 2 Subtitle]</span>
|
<span class="page-subtitle">Discover Your Sanctuary in the Sky</span>
|
||||||
</header>
|
</header>
|
||||||
<main class="vision-grid">
|
<main class="vision-grid">
|
||||||
<div class="vision-text">
|
<div class="vision-text">
|
||||||
<h3>[Vision Heading]</h3>
|
<h3>Where Design Meets Desire.</h3>
|
||||||
<div class="vision-text-content">[Vision HTML]</div>
|
<p>The Vertice is not just a building; it's a bold statement on modern urban living. Conceived for the discerning individual, it offers a unique blend of architectural prowess, bespoke interiors, and an unparalleled lifestyle experience right in the heart of the city.</p>
|
||||||
|
<p>Every residence is a testament to quality, featuring panoramic city views from floor-to-ceiling windows, intelligent home systems, and finishes selected from the finest materials around the globe. This is more than a home; it's a new perspective.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="vision-image"></div>
|
<div class="vision-image"></div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="page-footer-bar">
|
<footer class="page-footer-bar">
|
||||||
<span class="property-name">[Property Name]</span>
|
<span class="property-name">THE VERTICE</span>
|
||||||
<span>Page 02 / 06</span>
|
<span>Page 02 / 06</span>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
@ -433,14 +456,14 @@
|
|||||||
<span class="page-subtitle">A Canvas for Your Life</span>
|
<span class="page-subtitle">A Canvas for Your Life</span>
|
||||||
</header>
|
</header>
|
||||||
<main class="gallery-grid">
|
<main class="gallery-grid">
|
||||||
<div class="gallery-item g-item-1"><span>[Gallery Label 1]</span></div>
|
<div class="gallery-item g-item-1"><span>Open-Concept Living Space</span></div>
|
||||||
<div class="gallery-item g-item-2"><span>[Gallery Label 2]</span></div>
|
<div class="gallery-item g-item-2"><span>Master Bedroom Suite</span></div>
|
||||||
<div class="gallery-item g-item-3"><span>[Gallery Label 3]</span></div>
|
<div class="gallery-item g-item-3"><span>Gourmet Chef's Kitchen</span></div>
|
||||||
<div class="gallery-item g-item-4"><span>[Gallery Label 4]</span></div>
|
<div class="gallery-item g-item-4"><span>Spa-Inspired Bathroom</span></div>
|
||||||
<div class="gallery-item g-item-5"><span>[Gallery Label 5]</span></div>
|
<div class="gallery-item g-item-5"><span>Private Balcony Views</span></div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="page-footer-bar">
|
<footer class="page-footer-bar">
|
||||||
<span class="property-name">[Property Name]</span>
|
<span class="property-name">THE VERTICE</span>
|
||||||
<span>Page 03 / 06</span>
|
<span>Page 03 / 06</span>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
@ -459,28 +482,28 @@
|
|||||||
<div>
|
<div>
|
||||||
<h3 class="section-title">Lifestyle Amenities</h3>
|
<h3 class="section-title">Lifestyle Amenities</h3>
|
||||||
<ul class="amenities-list-p4">
|
<ul class="amenities-list-p4">
|
||||||
<li><i class="fa-solid fa-water-ladder"></i> [Amenity 1]</li>
|
<li><i class="fa-solid fa-water-ladder"></i> Rooftop Infinity Pool</li>
|
||||||
<li><i class="fa-solid fa-dumbbell"></i> [Amenity 2]</li>
|
<li><i class="fa-solid fa-dumbbell"></i> Fitness Center</li>
|
||||||
<li><i class="fa-solid fa-martini-glass-empty"></i> [Amenity 3]</li>
|
<li><i class="fa-solid fa-martini-glass-empty"></i> Residents' Sky Lounge</li>
|
||||||
<li><i class="fa-solid fa-film"></i> [Amenity 4]</li>
|
<li><i class="fa-solid fa-film"></i> Private Cinema Room</li>
|
||||||
<li><i class="fa-solid fa-spa"></i> [Amenity 5]</li>
|
<li><i class="fa-solid fa-spa"></i> Wellness Spa & Sauna</li>
|
||||||
<li><i class="fa-solid fa-briefcase"></i> [Amenity 6]</li>
|
<li><i class="fa-solid fa-briefcase"></i> Business Center</li>
|
||||||
<li><i class="fa-solid fa-shield-halved"></i> [Amenity 7]</li>
|
<li><i class="fa-solid fa-shield-halved"></i> 24/7 Concierge</li>
|
||||||
<li><i class="fa-solid fa-car"></i> [Amenity 8]</li>
|
<li><i class="fa-solid fa-car"></i> Secure Parking</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="section-title">Key Specifications</h3>
|
<h3 class="section-title">Key Specifications</h3>
|
||||||
<div class="detail-item"><span class="label">Status</span> <span class="value">[Status]</span></div>
|
<div class="detail-item"><span class="label">Status</span> <span class="value">New Development</span></div>
|
||||||
<div class="detail-item"><span class="label">Property Type</span> <span class="value">[Property Type]</span></div>
|
<div class="detail-item"><span class="label">Property Type</span> <span class="value">Condominium</span></div>
|
||||||
<div class="detail-item"><span class="label">Year Built</span> <span class="value">[Year Built]</span></div>
|
<div class="detail-item"><span class="label">Year Built</span> <span class="value">2025</span></div>
|
||||||
<div class="detail-item"><span class="label">Technology</span> <span class="value">[Technology]</span></div>
|
<div class="detail-item"><span class="label">Technology</span> <span class="value">Integrated Smart Home</span></div>
|
||||||
<div class="detail-item"><span class="label">Design</span> <span class="value">[Design]</span></div>
|
<div class="detail-item"><span class="label">Design</span> <span class="value">Sustainable & Eco-Friendly</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="page-footer-bar">
|
<footer class="page-footer-bar">
|
||||||
<span class="property-name">[Property Name]</span>
|
<span class="property-name">THE VERTICE</span>
|
||||||
<span>Page 04 / 06</span>
|
<span>Page 04 / 06</span>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
@ -496,67 +519,67 @@
|
|||||||
<div class="floorplan-showcase">
|
<div class="floorplan-showcase">
|
||||||
<div class="floorplan-image-p5 residence"></div>
|
<div class="floorplan-image-p5 residence"></div>
|
||||||
<div class="floorplan-info-p5">
|
<div class="floorplan-info-p5">
|
||||||
<h4>[Floorplan 1 Title]</h4>
|
<h4>Two-Bedroom Residence</h4>
|
||||||
<div class="floorplan-stats-p5">
|
<div class="floorplan-stats-p5">
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="value">[Floorplan 1 Area]</div>
|
<div class="value">1,450</div>
|
||||||
<div class="label">SQ. FT.</div>
|
<div class="label">SQ. FT.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="value">[Floorplan 1 Bedrooms]</div>
|
<div class="value">2</div>
|
||||||
<div class="label">BEDROOMS</div>
|
<div class="label">BEDROOMS</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="value">[Floorplan 1 Bathrooms]</div>
|
<div class="value">2</div>
|
||||||
<div class="label">BATHROOMS</div>
|
<div class="label">BATHROOMS</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="value">[Floorplan 1 Balcony]</div>
|
<div class="value">1</div>
|
||||||
<div class="label">BALCONY</div>
|
<div class="label">BALCONY</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="description">[Floorplan 1 Description HTML]</div>
|
<p class="description">A thoughtfully designed space perfect for urban professionals or small families, combining comfort with panoramic city views.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="floorplan-showcase">
|
<div class="floorplan-showcase">
|
||||||
<div class="floorplan-image-p5 penthouse"></div>
|
<div class="floorplan-image-p5 penthouse"></div>
|
||||||
<div class="floorplan-info-p5">
|
<div class="floorplan-info-p5">
|
||||||
<h4>[Floorplan 2 Title]</h4>
|
<h4>Three-Bedroom Penthouse</h4>
|
||||||
<div class="floorplan-stats-p5">
|
<div class="floorplan-stats-p5">
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="value">[Floorplan 2 Area]</div>
|
<div class="value">3,200</div>
|
||||||
<div class="label">SQ. FT.</div>
|
<div class="label">SQ. FT.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="value">[Floorplan 2 Bedrooms]</div>
|
<div class="value">3</div>
|
||||||
<div class="label">BEDROOMS</div>
|
<div class="label">BEDROOMS</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="value">[Floorplan 2 Bathrooms]</div>
|
<div class="value">3.5</div>
|
||||||
<div class="label">BATHROOMS</div>
|
<div class="label">BATHROOMS</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="value">[Floorplan 2 Terrace]</div>
|
<div class="value">1</div>
|
||||||
<div class="label">TERRACE</div>
|
<div class="label">TERRACE</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="description">[Floorplan 2 Description HTML]</div>
|
<p class="description">The pinnacle of luxury living, this penthouse offers expansive spaces, premium finishes, and exclusive access to a private rooftop terrace.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="section-title">Additional Information</h3>
|
<h3 class="section-title">Additional Information</h3>
|
||||||
<div class="additional-specs-grid">
|
<div class="additional-specs-grid">
|
||||||
<div class="spec-item"><div class="label">Pets</div><div class="value">[Pets]</div></div>
|
<div class="spec-item"><div class="label">Pets</div><div class="value">Allowed (w/ restrictions)</div></div>
|
||||||
<div class="spec-item"><div class="label">Smoking</div><div class="value">[Smoking]</div></div>
|
<div class="spec-item"><div class="label">Smoking</div><div class="value">In designated areas</div></div>
|
||||||
<div class="spec-item"><div class="label">Availability</div><div class="value">[Availability]</div></div>
|
<div class="spec-item"><div class="label">Availability</div><div class="value">Q4 2025</div></div>
|
||||||
<div class="spec-item"><div class="label">Parking</div><div class="value">[Parking]</div></div>
|
<div class="spec-item"><div class="label">Parking</div><div class="value">2 Spaces per Unit</div></div>
|
||||||
<div class="spec-item"><div class="label">Security Deposit</div><div class="value">[Security Deposit]</div></div>
|
<div class="spec-item"><div class="label">Security Deposit</div><div class="value">2 Months</div></div>
|
||||||
<div class="spec-item"><div class="label">Utilities</div><div class="value">[Utilities]</div></div>
|
<div class="spec-item"><div class="label">Utilities</div><div class="value">Sub-metered</div></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="page-footer-bar">
|
<footer class="page-footer-bar">
|
||||||
<span class="property-name">[Property Name]</span>
|
<span class="property-name">THE VERTICE</span>
|
||||||
<span>Page 05 / 06</span>
|
<span>Page 05 / 06</span>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
@ -571,29 +594,29 @@
|
|||||||
<main class="page6-main">
|
<main class="page6-main">
|
||||||
<div>
|
<div>
|
||||||
<h3 class="section-title">Schedule a Private Viewing</h3>
|
<h3 class="section-title">Schedule a Private Viewing</h3>
|
||||||
<p>[Viewing CTA Text]</p>
|
<p>Experience The Vertice firsthand. Contact our sales executive to arrange an exclusive tour of the property and available residences.</p>
|
||||||
<div class="contact-person-p6">
|
<div class="contact-person-p6">
|
||||||
<div class="name">[Contact Name]</div>
|
<div class="name">Alexander Valentine</div>
|
||||||
<div class="title">[Contact Title]</div>
|
<div class="title">Sales Executive, Elysian Properties</div>
|
||||||
<div class="details">
|
<div class="details">
|
||||||
[Contact Phone]<br>
|
(555) 123-9876<br>
|
||||||
[Contact Email]
|
alex.v@elysian.com
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="section-title">Neighborhood Highlights</h3>
|
<h3 class="section-title">Neighborhood Highlights</h3>
|
||||||
<ul class="highlights-list-p6">
|
<ul class="highlights-list-p6">
|
||||||
<li><i class="fa-solid fa-tree-city"></i> <strong>Landmarks:</strong> [Landmarks]</li>
|
<li><i class="fa-solid fa-tree-city"></i> <strong>Landmarks:</strong> Central Park (5 min)</li>
|
||||||
<li><i class="fa-solid fa-train-subway"></i> <strong>Transportation:</strong> [Transportation]</li>
|
<li><i class="fa-solid fa-train-subway"></i> <strong>Transportation:</strong> Metro Line A (2 min walk)</li>
|
||||||
<li><i class="fa-solid fa-school"></i> <strong>Schools:</strong> [Schools]</li>
|
<li><i class="fa-solid fa-school"></i> <strong>Schools:</strong> Metropolis Intl. (10 min)</li>
|
||||||
<li><i class="fa-solid fa-cart-shopping"></i> <strong>Shopping:</strong> [Shopping]</li>
|
<li><i class="fa-solid fa-cart-shopping"></i> <strong>Shopping:</strong> The Galleria Mall (8 min)</li>
|
||||||
<li><i class="fa-solid fa-plane-departure"></i> <strong>Airport:</strong> [Airport]</li>
|
<li><i class="fa-solid fa-plane-departure"></i> <strong>Airport:</strong> 25 min drive</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="page-footer-bar">
|
<footer class="page-footer-bar">
|
||||||
<span class="property-name">[Property Name]</span>
|
<span class="property-name">THE VERTICE</span>
|
||||||
<span>Page 06 / 06</span>
|
<span>Page 06 / 06</span>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user