260 lines
12 KiB
HTML
260 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>Siena — Residences in Portland, Oregon</title>
|
|
<meta name="description" content="Siena is a 128-residence community in Portland, Oregon, drawn from the brickwork, arches, and courtyards of the Tuscan city it takes its name from.">
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23221C16'/%3E%3Cpath d='M9 24V15a7 7 0 0 1 14 0v9' fill='none' stroke='%23A9803F' stroke-width='2.2'/%3E%3C/svg%3E">
|
|
<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=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="site-header">
|
|
<div class="container">
|
|
<a href="index.html" class="wordmark">SIENA<span>.</span></a>
|
|
<nav class="main-nav" aria-label="Primary">
|
|
<ul>
|
|
<li><a href="index.html" aria-current="page">Home</a></li>
|
|
<li><a href="residences.html">Residences</a></li>
|
|
<li><a href="residences.html#amenities">Amenities</a></li>
|
|
<li><a href="support.html">Resident Support</a></li>
|
|
<li><a href="contact.html">Visit</a></li>
|
|
</ul>
|
|
<a href="lease.html" class="btn btn-primary nav-cta">Inquire About Leasing</a>
|
|
</nav>
|
|
<button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<section class="hero" data-reveal>
|
|
<div class="container">
|
|
<div class="hero-copy">
|
|
<p class="hero-eyebrow">Now leasing — Portland, Oregon</p>
|
|
<h1>An address built the way old cities are built — slowly, and with care.</h1>
|
|
<p class="hero-lede">Siena is a 128-residence community drawn from the brickwork, arcades, and courtyards of the Tuscan city it's named for, reworked for how people actually live today.</p>
|
|
<div class="hero-actions">
|
|
<a href="lease.html" class="btn btn-primary">Schedule a Tour</a>
|
|
<a href="residences.html" class="btn btn-ghost-light">View Residences</a>
|
|
</div>
|
|
<div class="hero-stats">
|
|
<div><strong>128</strong><span>Residences</span></div>
|
|
<div><strong>9</strong><span>Stories</span></div>
|
|
<div><strong>24/7</strong><span>On-site concierge</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-art" aria-hidden="true">
|
|
<svg viewBox="0 0 560 640" xmlns="http://www.w3.org/2000/svg" role="img">
|
|
<defs>
|
|
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#4A392C"/>
|
|
<stop offset="55%" stop-color="#8A4B30"/>
|
|
<stop offset="100%" stop-color="#C98B4E"/>
|
|
</linearGradient>
|
|
<linearGradient id="archFace" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#E9DCC3"/>
|
|
<stop offset="100%" stop-color="#CBB78F"/>
|
|
</linearGradient>
|
|
<linearGradient id="archFaceFar" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#C79A62"/>
|
|
<stop offset="100%" stop-color="#9E6E3E"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<rect x="0" y="0" width="560" height="640" fill="url(#sky)"/>
|
|
<circle cx="430" cy="120" r="72" fill="#F3D8A8" opacity="0.55"/>
|
|
|
|
<!-- receding arcade, far to near -->
|
|
<g opacity="0.9">
|
|
<path d="M40 380 a60 60 0 0 1 120 0 v130 h-120 z" fill="url(#archFaceFar)"/>
|
|
<path d="M170 380 a60 60 0 0 1 120 0 v130 h-120 z" fill="url(#archFaceFar)"/>
|
|
</g>
|
|
<g>
|
|
<path d="M-10 400 a80 80 0 0 1 160 0 v170 h-160 z" fill="url(#archFace)"/>
|
|
<path d="M150 400 a80 80 0 0 1 160 0 v170 h-160 z" fill="url(#archFace)"/>
|
|
<path d="M310 400 a80 80 0 0 1 160 0 v170 h-160 z" fill="url(#archFace)"/>
|
|
</g>
|
|
|
|
<!-- brick coursing -->
|
|
<g stroke="#8A6B3F" stroke-width="1" opacity="0.35">
|
|
<line x1="-10" y1="440" x2="470" y2="440"/>
|
|
<line x1="-10" y1="480" x2="470" y2="480"/>
|
|
<line x1="-10" y1="520" x2="470" y2="520"/>
|
|
<line x1="-10" y1="560" x2="470" y2="560"/>
|
|
</g>
|
|
|
|
<rect x="-10" y="568" width="580" height="72" fill="#2C1E14"/>
|
|
<g fill="#B08D57" opacity="0.9">
|
|
<circle cx="70" cy="410" r="4"/>
|
|
<circle cx="230" cy="410" r="4"/>
|
|
<circle cx="390" cy="410" r="4"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-dark">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<h2>Every good city has a Campo.</h2>
|
|
<p>In Siena, Italy, the Piazza del Campo is where the city actually happens — the square everyone crosses, meets in, and lingers. Our courtyard borrows the idea, not the postcard.</p>
|
|
</div>
|
|
<div class="grid-2">
|
|
<div class="arch-frame">
|
|
<svg viewBox="0 0 500 360" role="img" aria-label="Illustration of the courtyard, shown as a warm arched colonnade around a shared lawn">
|
|
<rect width="500" height="360" fill="#EFE7D8"/>
|
|
<rect x="0" y="230" width="500" height="130" fill="#4B5842"/>
|
|
<g fill="none" stroke="#7A3A22" stroke-width="3">
|
|
<path d="M20 230 v-60 a40 40 0 0 1 80 0 v60"/>
|
|
<path d="M110 230 v-60 a40 40 0 0 1 80 0 v60"/>
|
|
<path d="M200 230 v-60 a40 40 0 0 1 80 0 v60"/>
|
|
<path d="M290 230 v-60 a40 40 0 0 1 80 0 v60"/>
|
|
<path d="M380 230 v-60 a40 40 0 0 1 80 0 v60"/>
|
|
</g>
|
|
<rect x="0" y="60" width="500" height="20" fill="#9A4A2C"/>
|
|
</svg>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; justify-content:center; gap:28px;">
|
|
<blockquote class="quote">
|
|
"We moved in for the apartment and stayed for the courtyard. There's always someone reading, or the dog, or a birthday — it's the closest thing our block has to a piazza."
|
|
<div class="quote-attr">— Nora F., resident since 2022</div>
|
|
</blockquote>
|
|
<a href="residences.html#amenities" class="btn btn-ghost-light" style="width:fit-content;">Explore the Amenities</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="amenities">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<h2>Designed for the hours outside your door.</h2>
|
|
<p>A short list of what's just downstairs — the fuller one lives on the residences page.</p>
|
|
</div>
|
|
<div class="grid-3">
|
|
<div class="feature-card">
|
|
<div class="icon" aria-hidden="true">
|
|
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><path d="M6 30V17a11 11 0 0 1 22 0v13"/></svg>
|
|
</div>
|
|
<h3>Courtyard & loggia</h3>
|
|
<p>A shared arcade and lawn at the center of the building, open from sunrise to midnight.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="icon" aria-hidden="true">
|
|
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><rect x="5" y="10" width="24" height="17" rx="2"/><path d="M11 10V6h12v4"/></svg>
|
|
</div>
|
|
<h3>Rooftop terrace</h3>
|
|
<p>West-facing views, communal grills, and a fireplace for the nine months it isn't sunny.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="icon" aria-hidden="true">
|
|
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><circle cx="10" cy="25" r="5"/><circle cx="26" cy="25" r="5"/><path d="M10 25 15 12h6l5 13M15 12l4-6"/></svg>
|
|
</div>
|
|
<h3>Bike & gear room</h3>
|
|
<p>Secure storage, a repair stand, and direct courtyard access for muddy boots.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section-paper">
|
|
<div class="container">
|
|
<div class="section-head">
|
|
<h2>Six floor plans, one address.</h2>
|
|
<p>From a well-proportioned studio to a top-floor two-bedroom with its own loggia.</p>
|
|
</div>
|
|
<div class="plan-head">
|
|
<span>Plan</span><span>Beds</span><span>Baths</span><span>Sq. Ft.</span><span></span>
|
|
</div>
|
|
<div class="plan-row">
|
|
<div><span class="plan-label">Plan</span><span class="plan-name">The Cortile</span><div class="plan-meta">Studio</div></div>
|
|
<div><span class="plan-label">Beds</span>Studio</div>
|
|
<div><span class="plan-label">Baths</span>1</div>
|
|
<div><span class="plan-label">Sq. Ft.</span>512</div>
|
|
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
|
</div>
|
|
<div class="plan-row">
|
|
<div><span class="plan-label">Plan</span><span class="plan-name">The Duomo</span><div class="plan-meta">One bedroom</div></div>
|
|
<div><span class="plan-label">Beds</span>1</div>
|
|
<div><span class="plan-label">Baths</span>1</div>
|
|
<div><span class="plan-label">Sq. Ft.</span>701</div>
|
|
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
|
</div>
|
|
<div class="plan-row">
|
|
<div><span class="plan-label">Plan</span><span class="plan-name">The Torre</span><div class="plan-meta">Two bedroom, corner</div></div>
|
|
<div><span class="plan-label">Beds</span>2</div>
|
|
<div><span class="plan-label">Baths</span>2</div>
|
|
<div><span class="plan-label">Sq. Ft.</span>1,140</div>
|
|
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
|
</div>
|
|
<div class="text-center" style="margin-top:44px;">
|
|
<a href="residences.html#plans" class="btn btn-primary">View All Floor Plans</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-tight">
|
|
<div class="container">
|
|
<div class="cta-band">
|
|
<h2>See it in person before you decide on paper.</h2>
|
|
<div style="display:flex; gap:16px; flex-wrap:wrap;">
|
|
<a href="contact.html" class="btn btn-ghost-light">Schedule a Tour</a>
|
|
<a href="lease.html" class="btn" style="background:var(--paper); color:var(--sienna);">Start a Lease Inquiry</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div>
|
|
<span class="wordmark">SIENA<span style="color:var(--brass);">.</span></span>
|
|
<p>128 residences around a shared courtyard, in the heart of Portland.</p>
|
|
</div>
|
|
<div>
|
|
<h4>Explore</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="residences.html">Residences</a></li>
|
|
<li><a href="residences.html#amenities">Amenities</a></li>
|
|
<li><a href="residences.html#neighborhood">Neighborhood</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Get in touch</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="lease.html">Lease inquiry</a></li>
|
|
<li><a href="support.html">Resident support</a></li>
|
|
<li><a href="contact.html">Visit & contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Leasing office</h4>
|
|
<ul class="footer-links">
|
|
<li>820 SW Ankeny Street<br>Portland, OR 97205</li>
|
|
<li>(503) 555-0142</li>
|
|
<li>[email protected]</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<span>© 2026 Siena Residences. All rights reserved.</span>
|
|
<span>Equal Housing Opportunity</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="assets/js/main.js"></script>
|
|
</body>
|
|
</html>
|