426 lines
17 KiB
HTML
426 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Editorial Real Estate Brochure - Updated</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;
|
||
}
|
||
|
||
/* --- 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: 210mm;
|
||
height: 297mm;
|
||
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: 70px 60px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.p1-header .collection {
|
||
font-size: 0.9rem;
|
||
letter-spacing: 3px;
|
||
color: var(--color-text-secondary);
|
||
text-transform: uppercase;
|
||
}
|
||
.p1-main-title {
|
||
font-family: var(--font-serif);
|
||
font-size: 5rem;
|
||
font-weight: 600;
|
||
line-height: 1.1;
|
||
color: var(--color-text-primary);
|
||
margin: 20px 0;
|
||
}
|
||
.p1-address {
|
||
font-size: 1rem;
|
||
color: var(--color-text-secondary);
|
||
border-left: 3px solid var(--color-accent-beige);
|
||
padding-left: 20px;
|
||
}
|
||
.p1-ref-id {
|
||
font-size: 0.9rem;
|
||
color: var(--color-text-secondary);
|
||
margin-top: 15px;
|
||
padding-left: 23px;
|
||
}
|
||
.p1-footer {
|
||
font-size: 0.9rem;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
.p1-footer strong {
|
||
color: var(--color-text-primary);
|
||
}
|
||
.p1-footer .area {
|
||
font-size: 1rem;
|
||
color: var(--color-text-primary);
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* --- SHARED STYLES for Content Pages --- */
|
||
.page-layout {
|
||
padding: 70px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.page-number {
|
||
position: absolute;
|
||
top: 70px; right: 70px;
|
||
font-family: var(--font-serif);
|
||
font-size: 1.2rem;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
.page-title-main {
|
||
font-family: var(--font-serif);
|
||
font-size: 3.5rem;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 15px 0;
|
||
line-height: 1;
|
||
}
|
||
.page-title-sub {
|
||
font-size: 1rem;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 50px;
|
||
}
|
||
.content-divider {
|
||
border: 0;
|
||
height: 1px;
|
||
background-color: var(--color-border);
|
||
margin: 30px 0;
|
||
}
|
||
.section-title {
|
||
font-family: var(--font-serif);
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
margin-bottom: 20px;
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* --- PAGE 2: INTRODUCTION & NARRATIVE --- */
|
||
.p2-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 60px;
|
||
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: 1rem;
|
||
line-height: 1.8;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
.p2-text p:first-of-type::first-letter {
|
||
font-family: var(--font-serif);
|
||
font-size: 4rem;
|
||
float: left;
|
||
line-height: 1;
|
||
margin-right: 15px;
|
||
color: var(--color-accent-beige);
|
||
}
|
||
.pull-quote {
|
||
border-left: 3px solid var(--color-accent-beige);
|
||
padding-left: 25px;
|
||
margin: 30px 0;
|
||
font-family: var(--font-serif);
|
||
font-size: 1.5rem;
|
||
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: 30px;
|
||
padding: 30px;
|
||
background-color: var(--color-off-white);
|
||
}
|
||
.spec-item { text-align: center; }
|
||
.spec-item .value {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--color-text-primary);
|
||
}
|
||
.spec-item .label {
|
||
font-size: 0.8rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
.details-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px 40px;
|
||
}
|
||
.details-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid var(--color-border);
|
||
padding-bottom: 10px;
|
||
font-size: 0.9rem;
|
||
}
|
||
.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: 40px;}
|
||
.amenities-list li {
|
||
margin-bottom: 12px;
|
||
color: var(--color-text-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 0.9rem;
|
||
-webkit-column-break-inside: avoid;
|
||
page-break-inside: avoid;
|
||
break-inside: avoid;
|
||
}
|
||
.amenities-list li i { color: var(--color-accent-beige); margin-right: 12px; }
|
||
|
||
/* --- PAGE 4: REVISED LAYOUT --- */
|
||
.p4-section-title {
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 20px 0;
|
||
}
|
||
.p4-floorplan-container {
|
||
height: 320px;
|
||
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: 40px;
|
||
}
|
||
.p4-info-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 60px;
|
||
margin-bottom: 40px;
|
||
}
|
||
.info-list .info-item, .location-list .item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
font-size: 0.9rem;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
.info-list .info-item strong, .location-list .item strong {
|
||
color: var(--color-text-primary);
|
||
margin-right: 15px;
|
||
}
|
||
.p4-contact-row {
|
||
display: flex;
|
||
gap: 40px;
|
||
justify-content: center;
|
||
margin-top: auto;
|
||
}
|
||
.contact-card {
|
||
background-color: var(--color-off-white);
|
||
padding: 20px;
|
||
text-align: center;
|
||
flex: 1;
|
||
max-width: 300px;
|
||
}
|
||
.contact-card .title {
|
||
font-size: 0.8rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 8px;
|
||
}
|
||
.contact-card .name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; }
|
||
.contact-card .phone, .contact-card .email { font-size: 0.9rem; margin: 4px 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: 30px;">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> |