0
X
Add Snippet To Project
New Project
Add To Existing Project
<!-- RESIDENTIAL.HTML - RESIDENTIAL MODELS PAGE -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Residential Models - Oxil</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; line-height: 1.8; color: #333; }
header { background: #002e5c; color: white; padding: 20px; text-align: center; }
nav { background: #002e5c; padding: 15px; text-align: center; }
nav a { color: white; text-decoration: none; margin: 0 20px; }
.hero { background: #004a8f; color: white; padding: 60px 20px; text-align: center; }
.models-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 60px 20px; max-width: 1200px; margin: 0 auto; }
.model-card { background: white; border: 2px solid #002e5c; padding: 30px; border-radius: 8px; }
.model-card h3 { color: #002e5c; font-size: 24px; margin-bottom: 10px; }
.specs { background: #f9f9f9; padding: 15px; margin: 15px 0; border-radius: 5px; }
.features { margin: 15px 0; }
.features li { margin-left: 20px; margin-bottom: 8px; }
.btn { padding: 10px 20px; background: #ffd700; color: #002e5c; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }
footer { background: #002e5c; color: white; text-align: center; padding: 30px; }
</style>
</head>
<body>
<header><h1>OXIL</h1><p>Residential Models</p></header>
<nav>
<a href="index.html">Home</a><a href="about.html">About</a><a href="residential.html">Residential</a>
<a href="commercial.html">Commercial</a><a href="partnership.html">Partnership</a><a href="contact.html">Contact</a>
</nav>
<section class="hero">
<h2>Our Residential Models</h2>
<p>Choose the perfect prefab home for your lifestyle</p>
</section>
<section class="models-grid">
<div class="model-card">
<h3>Aura Studio</h3>
<div class="specs"><p><strong>Size:</strong> 160-200 sq.ft</p><p><strong>For:</strong> Solo living, guest suites, backyard offices</p></div>
<div class="features"><strong>Features:</strong><ul><li>Open-plan lounge/bed</li><li>Compact kitchenette</li><li>Full bathroom</li><li>Large glazing</li><li>Optional deck/pergola</li></ul></div>
<button class="btn">Explore</button>
</div>
<div class="model-card">
<h3>Zenith One</h3>
<div class="specs"><p><strong>Size:</strong> 240-320 sq.ft</p><p><strong>For:</strong> First homes, vacation units, ADUs</p></div>
<div class="features"><strong>Features:</strong><ul><li>Private bedroom</li><li>Full kitchen</li><li>Living/dining space</li><li>Elegant bathroom</li><li>Wrap deck option</li></ul></div>
<button class="btn">Explore</button>
</div>
<div class="model-card">
<h3>Orion Duo</h3>
<div class="specs"><p><strong>Size:</strong> 2-bedroom</p><p><strong>For:</strong> Small families, premium rentals</p></div>
<div class="features"><strong>Features:</strong><ul><li>Flexible 2BR/1-2 Bath</li><li>Full kitchen</li><li>Generous lounge</li><li>Balcony/deck options</li><li>Work-from-home nook</li></ul></div>
<button class="btn">Explore</button>
</div>
<div class="model-card">
<h3>Cosmos Family</h3>
<div class="specs"><p><strong>Size:</strong> Multi-module, 2-4 bed</p><p><strong>For:</strong> Larger families, long-stay rentals</p></div>
<div class="features"><strong>Features:</strong><ul><li>Multi-module living</li><li>Formal dining</li><li>Chef's kitchen</li><li>Ensuite master</li><li>Family deck/pergola</li></ul></div>
<button class="btn">Explore</button>
</div>
</section>
<footer><p>© 2025 Oxil. All rights reserved. | Contact: info@oxil.com</p></footer>
</body>
</html>
Residential models page showcasing all 4 residential homes: Aura Studio, Zenith One, Orion Duo, and Cosmos Family