438 lines
12 KiB
HTML
438 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Apartment vs House/Townhouse</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--apt: #C8A96E;
|
||
--house: #6E9EC8;
|
||
--dark: #0f0f0f;
|
||
--mid: #1a1a1a;
|
||
--light: #f0ece4;
|
||
--muted: #888;
|
||
}
|
||
|
||
body {
|
||
background: var(--dark);
|
||
color: var(--light);
|
||
font-family: 'DM Sans', sans-serif;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.slides-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
.slide {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 3rem;
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
pointer-events: none;
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
|
||
.slide.active {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
pointer-events: all;
|
||
}
|
||
|
||
/* TITLE SLIDE */
|
||
.slide-title {
|
||
text-align: center;
|
||
}
|
||
.slide-title .eyebrow {
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.3em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.slide-title h1 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(2.5rem, 6vw, 5rem);
|
||
line-height: 1.1;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.slide-title h1 .apt { color: var(--apt); }
|
||
.slide-title h1 .house { color: var(--house); }
|
||
.slide-title .sub {
|
||
font-size: 1rem;
|
||
color: var(--muted);
|
||
font-weight: 300;
|
||
}
|
||
.divider {
|
||
width: 60px;
|
||
height: 1px;
|
||
background: var(--muted);
|
||
margin: 1.5rem auto;
|
||
}
|
||
|
||
/* COMPARISON SLIDE */
|
||
.slide-compare {
|
||
max-width: 900px;
|
||
width: 100%;
|
||
}
|
||
.slide-compare .slide-heading {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(1.5rem, 3vw, 2.5rem);
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
}
|
||
.slide-compare .slide-heading .tag {
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.25em;
|
||
text-transform: uppercase;
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.slide-compare .slide-heading .tag.apt { color: var(--apt); }
|
||
.slide-compare .slide-heading .tag.house { color: var(--house); }
|
||
|
||
.two-col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.col {
|
||
background: var(--mid);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
border-top: 3px solid;
|
||
}
|
||
.col.apt { border-color: var(--apt); }
|
||
.col.house { border-color: var(--house); }
|
||
|
||
.col h3 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
.col.apt h3 { color: var(--apt); }
|
||
.col.house h3 { color: var(--house); }
|
||
|
||
.col ul {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.6rem;
|
||
}
|
||
.col ul li {
|
||
font-size: 0.9rem;
|
||
color: #ccc;
|
||
padding-left: 1rem;
|
||
position: relative;
|
||
line-height: 1.4;
|
||
}
|
||
.col ul li::before {
|
||
content: '—';
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--muted);
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
/* VERDICT SLIDE */
|
||
.slide-verdict {
|
||
text-align: center;
|
||
max-width: 700px;
|
||
}
|
||
.slide-verdict .eyebrow {
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.3em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-bottom: 1rem;
|
||
}
|
||
.slide-verdict h2 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(1.8rem, 4vw, 3rem);
|
||
margin-bottom: 1.5rem;
|
||
line-height: 1.2;
|
||
}
|
||
.verdict-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1rem;
|
||
margin-top: 2rem;
|
||
text-align: left;
|
||
}
|
||
.verdict-card {
|
||
background: var(--mid);
|
||
border-radius: 10px;
|
||
padding: 1.2rem;
|
||
}
|
||
.verdict-card h4 {
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.verdict-card.apt h4 { color: var(--apt); }
|
||
.verdict-card.house h4 { color: var(--house); }
|
||
.verdict-card p {
|
||
font-size: 0.85rem;
|
||
color: #bbb;
|
||
line-height: 1.5;
|
||
font-weight: 300;
|
||
}
|
||
|
||
/* NAV */
|
||
.nav {
|
||
position: fixed;
|
||
bottom: 2rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.5rem;
|
||
z-index: 100;
|
||
}
|
||
.nav button {
|
||
background: var(--mid);
|
||
border: 1px solid #333;
|
||
color: var(--light);
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
transition: all 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.nav button:hover { background: #2a2a2a; border-color: #555; }
|
||
.nav button:disabled { opacity: 0.2; cursor: default; }
|
||
|
||
.dots {
|
||
display: flex;
|
||
gap: 0.4rem;
|
||
}
|
||
.dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #444;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
.dot.active {
|
||
background: var(--light);
|
||
width: 20px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.slide-num {
|
||
position: fixed;
|
||
top: 1.5rem;
|
||
right: 2rem;
|
||
font-size: 0.75rem;
|
||
color: var(--muted);
|
||
letter-spacing: 0.1em;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slides-container">
|
||
|
||
<!-- SLIDE 1: Title -->
|
||
<div class="slide slide-title active" data-slide="0">
|
||
<p class="eyebrow">A practical guide for the undecided</p>
|
||
<h1>
|
||
<span class="apt">Apartment</span><br>
|
||
vs<br>
|
||
<span class="house">House & Townhouse</span>
|
||
</h1>
|
||
<div class="divider"></div>
|
||
<p class="sub">pros, cons, and what actually matters</p>
|
||
</div>
|
||
|
||
<!-- SLIDE 2: Apartment Pros -->
|
||
<div class="slide slide-compare" data-slide="1">
|
||
<div class="slide-heading">
|
||
<span class="tag apt">Apartment</span>
|
||
The Case For It
|
||
</div>
|
||
<div class="two-col">
|
||
<div class="col apt">
|
||
<h3>✦ Pros</h3>
|
||
<ul>
|
||
<li>Lower upfront costs — no down payment on a house</li>
|
||
<li>Maintenance handled by landlord or building mgmt</li>
|
||
<li>Usually closer to city centers and amenities</li>
|
||
<li>Utilities often lower due to smaller footprint</li>
|
||
<li>Easier to move — less commitment</li>
|
||
<li>Building amenities (gym, pool, laundry)</li>
|
||
<li>More security — locked building, neighbors close</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col apt" style="border-color:#5a4a30;">
|
||
<h3 style="color:#888;">✦ Cons</h3>
|
||
<ul>
|
||
<li>No yard or private outdoor space</li>
|
||
<li>Noise from neighbors above, below, beside you</li>
|
||
<li>Less storage space</li>
|
||
<li>No equity building — rent is gone</li>
|
||
<li>Restrictions on pets, décor, modifications</li>
|
||
<li>Parking can be tight or costly</li>
|
||
<li>Less privacy overall</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 3: House/Townhouse Pros -->
|
||
<div class="slide slide-compare" data-slide="2">
|
||
<div class="slide-heading">
|
||
<span class="tag house">House / Townhouse</span>
|
||
The Case For It
|
||
</div>
|
||
<div class="two-col">
|
||
<div class="col house">
|
||
<h3>✦ Pros</h3>
|
||
<ul>
|
||
<li>More space — rooms, yard, storage</li>
|
||
<li>Privacy — no shared walls (house) or fewer (townhouse)</li>
|
||
<li>Pets, gardens, modifications usually allowed</li>
|
||
<li>Building equity over time (if buying)</li>
|
||
<li>Better for families and long-term roots</li>
|
||
<li>Attached garage often included</li>
|
||
<li>Quieter neighborhoods typically</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col house" style="border-color:#2a4a5a;">
|
||
<h3 style="color:#888;">✦ Cons</h3>
|
||
<ul>
|
||
<li>Higher cost — rent or mortgage + more expenses</li>
|
||
<li>You handle all maintenance and repairs</li>
|
||
<li>Further from city centers on average</li>
|
||
<li>Higher utility bills</li>
|
||
<li>Less flexibility to move quickly</li>
|
||
<li>HOA fees possible (townhouse)</li>
|
||
<li>Townhouses still share walls — noise can travel</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 4: The Real Questions -->
|
||
<div class="slide slide-compare" data-slide="3">
|
||
<div class="slide-heading">
|
||
Ask Yourself This
|
||
</div>
|
||
<div class="two-col">
|
||
<div class="col apt">
|
||
<h3>✦ Apartment makes sense if...</h3>
|
||
<ul>
|
||
<li>You value flexibility and may move in 1–2 years</li>
|
||
<li>You want low maintenance and fewer responsibilities</li>
|
||
<li>Location and walkability matter most to you</li>
|
||
<li>You're single or a couple without kids yet</li>
|
||
<li>Budget is tighter right now</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col house">
|
||
<h3>✦ House/Townhouse if...</h3>
|
||
<ul>
|
||
<li>You want to stay put for 3+ years</li>
|
||
<li>You need space — for kids, pets, hobbies</li>
|
||
<li>You want to build equity or own your space</li>
|
||
<li>Outdoor space and privacy are priorities</li>
|
||
<li>You can handle maintenance financially and mentally</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SLIDE 5: Verdict -->
|
||
<div class="slide slide-verdict" data-slide="4">
|
||
<p class="eyebrow">Bottom line</p>
|
||
<h2>There's no wrong answer — just the wrong choice <em>for you</em></h2>
|
||
<div class="verdict-grid">
|
||
<div class="verdict-card apt">
|
||
<h4>Choose Apartment</h4>
|
||
<p>Flexibility, convenience, lower stress. Best when you're in a transitional season or love city life.</p>
|
||
</div>
|
||
<div class="verdict-card house">
|
||
<h4>Choose House / Townhouse</h4>
|
||
<p>Space, stability, roots. Best when you're ready to commit to a place and a chapter of life.</p>
|
||
</div>
|
||
<div class="verdict-card" style="grid-column: span 2; border-top: 3px solid #444;">
|
||
<h4 style="color: var(--muted);">The Wildcard: Townhouse</h4>
|
||
<p>Often the best middle ground — more space than an apartment, less maintenance than a house, and usually more affordable than a standalone home. Worth considering seriously.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="slide-num"><span id="cur">1</span> / 5</div>
|
||
|
||
<nav class="nav">
|
||
<button id="prev" disabled>←</button>
|
||
<div class="dots" id="dots"></div>
|
||
<button id="next">→</button>
|
||
</nav>
|
||
|
||
<script>
|
||
const slides = document.querySelectorAll('.slide');
|
||
const dotsContainer = document.getElementById('dots');
|
||
const prevBtn = document.getElementById('prev');
|
||
const nextBtn = document.getElementById('next');
|
||
const cur = document.getElementById('cur');
|
||
let current = 0;
|
||
|
||
// Build dots
|
||
slides.forEach((_, i) => {
|
||
const dot = document.createElement('div');
|
||
dot.className = 'dot' + (i === 0 ? ' active' : '');
|
||
dot.addEventListener('click', () => goTo(i));
|
||
dotsContainer.appendChild(dot);
|
||
});
|
||
|
||
function goTo(n) {
|
||
slides[current].classList.remove('active');
|
||
dotsContainer.children[current].classList.remove('active');
|
||
current = n;
|
||
slides[current].classList.add('active');
|
||
dotsContainer.children[current].classList.add('active');
|
||
cur.textContent = current + 1;
|
||
prevBtn.disabled = current === 0;
|
||
nextBtn.disabled = current === slides.length - 1;
|
||
}
|
||
|
||
prevBtn.addEventListener('click', () => current > 0 && goTo(current - 1));
|
||
nextBtn.addEventListener('click', () => current < slides.length - 1 && goTo(current + 1));
|
||
|
||
document.addEventListener('keydown', e => {
|
||
if (e.key === 'ArrowRight' && current < slides.length - 1) goTo(current + 1);
|
||
if (e.key === 'ArrowLeft' && current > 0) goTo(current - 1);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|