页面 中等
Boutique Hotel Landing
An editorial single-page landing for a boutique city hotel — charcoal, brass, and ivory palette with Cormorant Garamond headlines. Features a hero with reservation widget, curated rooms section, story block, and hours/location. Interactive nights calculator, sticky nav, and form validation toast.
在 Lab 中打开
MCP
html css vanilla-js
目标: JS HTML
代码
/* ── Boutique palette — charcoal · brass · ivory ─────────────────────────── */
:root {
--charcoal: #1c1c1e;
--charcoal-2: #2e2e30;
--charcoal-3: #424244;
--brass: #b08d57;
--brass-light: #cba878;
--brass-d: #8a6d3b;
--ivory: #f8f5ef;
--ivory-2: #ede9e0;
--ivory-3: #e2ddd3;
--stone: #9a958e;
--ink: #1c1c1e;
--line: rgba(28, 28, 30, 0.1);
--line-strong: rgba(28, 28, 30, 0.2);
--font-display: "Cormorant Garamond", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
--r-sm: 4px;
--r-md: 8px;
--shadow-soft: 0 4px 24px rgba(28, 28, 30, 0.08);
--shadow-deep: 0 16px 48px rgba(28, 28, 30, 0.18);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--ivory);
color: var(--ink);
-webkit-font-smoothing: antialiased;
font-weight: 400;
line-height: 1.65;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
/* ── Typography helpers ── */
.eyebrow {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--brass);
font-weight: 600;
margin-bottom: 10px;
}
h1,
h2,
h3 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.18;
letter-spacing: -0.01em;
}
em {
font-style: italic;
}
p + p {
margin-top: 1em;
}
/* ── Section base ── */
.section {
padding: 96px 7vw;
}
.section-header {
max-width: 560px;
margin-bottom: 56px;
}
.section-header h2 {
font-size: clamp(2.2rem, 4vw, 3.2rem);
margin-top: 8px;
}
.section-header.centered {
max-width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* ── Nav ── */
.site-nav {
position: fixed;
top: 0;
inset-inline: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 7vw;
transition: background 0.3s, padding 0.3s, box-shadow 0.3s;
}
.site-nav.scrolled {
background: var(--charcoal);
padding: 14px 7vw;
box-shadow: var(--shadow-deep);
}
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--ivory);
}
.nav-mark {
width: 36px;
height: 36px;
border-radius: var(--r-sm);
background: var(--brass);
color: var(--charcoal);
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.04em;
}
.nav-name {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.nav-links {
list-style: none;
display: flex;
gap: 32px;
}
.nav-links a {
color: rgba(248, 245, 239, 0.82);
font-size: 0.84rem;
font-weight: 500;
letter-spacing: 0.04em;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--ivory);
}
.nav-cta {
background: var(--brass);
color: var(--charcoal);
font-size: 0.82rem;
font-weight: 600;
padding: 10px 20px;
border-radius: var(--r-sm);
letter-spacing: 0.04em;
transition: background 0.2s;
}
.nav-cta:hover {
background: var(--brass-light);
}
/* ── Hero ── */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: 0 7vw;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
var(--charcoal) 0%,
var(--charcoal-2) 40%,
#3b3328 70%,
#2a2118 100%
);
z-index: 0;
}
.hero-bg::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 80% 60% at 70% 40%,
rgba(176, 141, 87, 0.18) 0%,
transparent 70%
);
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 640px;
padding-top: 80px;
}
.hero .eyebrow {
color: var(--brass-light);
}
.hero-title {
font-size: clamp(3rem, 7vw, 5.5rem);
color: var(--ivory);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.08;
margin: 12px 0 22px;
}
.hero-title em {
color: var(--brass-light);
}
.hero-sub {
color: rgba(248, 245, 239, 0.7);
font-size: 1.05rem;
font-weight: 300;
max-width: 400px;
margin-bottom: 40px;
line-height: 1.7;
}
/* ── Reservation widget ── */
.widget {
display: flex;
align-items: stretch;
background: var(--ivory);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-deep);
max-width: 680px;
}
.widget-field {
flex: 1;
display: flex;
flex-direction: column;
padding: 16px 18px;
min-width: 0;
}
.widget-field label {
font-size: 0.64rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--stone);
font-weight: 600;
margin-bottom: 5px;
}
.widget-field input,
.widget-field select {
border: none;
outline: none;
background: transparent;
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--ink);
width: 100%;
cursor: pointer;
}
.widget-divider {
width: 1px;
background: var(--line);
align-self: stretch;
margin: 10px 0;
}
.widget-btn {
background: var(--charcoal);
color: var(--ivory);
border: none;
font-family: var(--font-body);
font-size: 0.84rem;
font-weight: 600;
padding: 0 24px;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
letter-spacing: 0.02em;
}
.widget-btn:hover {
background: var(--brass-d);
}
/* ── Rooms ── */
.rooms {
background: var(--ivory);
}
.room-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.room-card {
background: var(--ivory-2);
border-radius: var(--r-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.25s, transform 0.25s;
}
.room-card:hover {
box-shadow: var(--shadow-deep);
transform: translateY(-4px);
}
.room-card.featured {
border: 2px solid var(--brass);
}
.room-img {
height: 220px;
flex-shrink: 0;
}
.room-img-1 {
background: linear-gradient(145deg, #2e2b27 0%, #3f3829 50%, #524a38 100%);
}
.room-img-2 {
background: linear-gradient(145deg, #1c1a16 0%, #342f24 40%, #4a4232 80%, #5c5340 100%);
}
.room-img-3 {
background: linear-gradient(145deg, #2a2820 0%, #393629 50%, #504a38 85%, #c8b98a 100%);
}
.room-body {
padding: 22px 20px 24px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.room-cat {
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--brass);
font-weight: 600;
}
.room-card h3 {
font-size: 1.45rem;
font-weight: 600;
margin-top: 2px;
}
.room-desc {
font-size: 0.86rem;
color: var(--stone);
line-height: 1.6;
flex: 1;
}
.room-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 8px;
font-size: 0.8rem;
color: var(--stone);
}
.room-rate {
font-weight: 600;
color: var(--charcoal-3);
font-family: var(--font-display);
font-size: 0.96rem;
}
.room-btn {
background: var(--charcoal);
color: var(--ivory);
border: none;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 600;
padding: 11px 16px;
border-radius: var(--r-sm);
cursor: pointer;
margin-top: 12px;
transition: background 0.2s;
letter-spacing: 0.02em;
}
.room-btn:hover {
background: var(--brass-d);
}
/* ── Story ── */
.story {
background: var(--charcoal);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.story-img {
height: 560px;
border-radius: var(--r-md);
background: linear-gradient(160deg, #3a3420 0%, #2b2618 40%, #1c1a14 70%, #4a4230 100%);
position: relative;
overflow: hidden;
}
.story-img::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 60% 80% at 30% 60%,
rgba(176, 141, 87, 0.25) 0%,
transparent 70%
);
}
.story-text {
color: var(--ivory);
}
.story-text .eyebrow {
color: var(--brass-light);
}
.story-text h2 {
font-size: clamp(2rem, 3.5vw, 2.8rem);
margin-bottom: 24px;
line-height: 1.2;
}
.story-text h2 em {
color: var(--brass-light);
}
.story-text p {
font-size: 0.95rem;
color: rgba(248, 245, 239, 0.72);
line-height: 1.75;
}
.link-underline {
display: inline-block;
margin-top: 24px;
color: var(--brass-light);
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--brass);
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s;
}
.link-underline:hover {
color: var(--ivory);
border-color: var(--ivory);
}
/* ── Visit ── */
.visit {
background: var(--ivory-2);
}
.visit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
.visit-info {
display: flex;
flex-direction: column;
gap: 40px;
}
.info-block h3 {
font-size: 1.15rem;
font-weight: 600;
font-family: var(--font-display);
margin-bottom: 14px;
color: var(--charcoal);
}
.info-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.info-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.88rem;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
gap: 16px;
}
.info-list li span {
color: var(--stone);
flex-shrink: 0;
}
.info-list li strong {
color: var(--charcoal);
font-weight: 600;
text-align: right;
}
.visit-map {
height: 380px;
}
.map-placeholder {
height: 100%;
background: linear-gradient(145deg, #d9d4c8 0%, #e5e0d5 40%, #ccc8be 100%);
border-radius: var(--r-md);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
overflow: hidden;
}
.map-placeholder::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.04) 0px,
transparent 1px,
transparent 40px,
rgba(0, 0, 0, 0.04) 40px
),
repeating-linear-gradient(
90deg,
rgba(0, 0, 0, 0.04) 0px,
transparent 1px,
transparent 40px,
rgba(0, 0, 0, 0.04) 40px
);
}
.map-pin {
width: 20px;
height: 20px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
background: var(--brass);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.map-placeholder p {
font-size: 0.82rem;
color: var(--charcoal);
font-weight: 500;
text-align: center;
line-height: 1.5;
z-index: 1;
}
/* ── Reserve ── */
.reserve {
background: var(--ivory);
}
.reserve-inner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start;
}
.reserve-text {
position: sticky;
top: 100px;
}
.reserve-text h2 {
font-size: clamp(2rem, 3.5vw, 2.8rem);
margin: 8px 0 16px;
}
.reserve-text p {
font-size: 0.9rem;
color: var(--stone);
line-height: 1.7;
}
.reserve-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field.narrow {
max-width: 120px;
}
.form-field.full {
grid-column: 1 / -1;
}
.form-field label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--stone);
font-weight: 600;
}
.form-field input,
.form-field select,
.form-field textarea {
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
padding: 11px 14px;
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--ink);
background: var(--ivory);
outline: none;
transition: border-color 0.2s;
resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: var(--brass);
}
.form-field input.error,
.form-field select.error {
border-color: #b34232;
}
.form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.nights-calc {
font-size: 0.82rem;
color: var(--stone);
font-weight: 500;
}
.nights-calc strong {
color: var(--charcoal);
}
.submit-btn {
background: var(--charcoal);
color: var(--ivory);
border: none;
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 600;
padding: 13px 28px;
border-radius: var(--r-sm);
cursor: pointer;
letter-spacing: 0.03em;
transition: background 0.2s;
}
.submit-btn:hover {
background: var(--brass-d);
}
/* ── Footer ── */
.site-footer {
background: var(--charcoal);
color: rgba(248, 245, 239, 0.55);
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px 7vw;
font-size: 0.78rem;
letter-spacing: 0.04em;
}
.footer-brand {
font-family: var(--font-display);
font-size: 0.95rem;
color: var(--ivory);
font-weight: 600;
}
/* ── Toast ── */
.toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
background: var(--charcoal);
color: var(--ivory);
padding: 12px 24px;
border-radius: 999px;
font-size: 0.86rem;
font-weight: 600;
box-shadow: var(--shadow-deep);
white-space: nowrap;
z-index: 999;
border-top: 2px solid var(--brass);
}
/* ── Responsive ── */
@media (max-width: 1100px) {
.reserve-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.reserve-text {
position: static;
}
.story {
grid-template-columns: 1fr;
gap: 48px;
padding: 64px 7vw;
}
.story-img {
height: 320px;
}
}
@media (max-width: 960px) {
.room-grid {
grid-template-columns: 1fr 1fr;
}
.visit-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.visit-map {
height: 280px;
}
.nav-links {
display: none;
}
}
@media (max-width: 640px) {
.section {
padding: 64px 5vw;
}
.room-grid {
grid-template-columns: 1fr;
}
.widget {
flex-direction: column;
}
.widget-divider {
width: auto;
height: 1px;
margin: 0 12px;
}
.form-row {
grid-template-columns: 1fr;
}
.form-field.narrow {
max-width: 100%;
}
.site-footer {
flex-direction: column;
gap: 8px;
text-align: center;
}
}// ── Toast ────────────────────────────────────────────────────────────────────
const toast = document.getElementById("toast");
function showToast(msg) {
toast.textContent = msg;
toast.hidden = false;
clearTimeout(showToast._t);
showToast._t = setTimeout(() => (toast.hidden = true), 2200);
}
// ── Sticky nav ───────────────────────────────────────────────────────────────
const nav = document.getElementById("siteNav");
window.addEventListener(
"scroll",
() => {
nav.classList.toggle("scrolled", window.scrollY > 60);
},
{ passive: true }
);
// ── Nights calculator helper ─────────────────────────────────────────────────
function calcNights(inVal, outVal) {
if (!inVal || !outVal) return 0;
const msPerDay = 864e5;
const nights = Math.round((new Date(outVal) - new Date(inVal)) / msPerDay);
return nights > 0 ? nights : 0;
}
function fmtNights(n) {
if (n === 0) return "";
return n === 1 ? "1 night" : `${n} nights`;
}
// ── Hero widget ──────────────────────────────────────────────────────────────
const wCheckIn = document.getElementById("wCheckIn");
const wCheckOut = document.getElementById("wCheckOut");
const widgetNights = document.getElementById("widgetNights");
// Seed with sensible defaults (9–12 Jun 2026)
wCheckIn.value = "2026-06-09";
wCheckOut.value = "2026-06-12";
function updateWidgetLabel() {
const n = calcNights(wCheckIn.value, wCheckOut.value);
widgetNights.textContent = n > 0 ? `${fmtNights(n)} · ` : "";
}
updateWidgetLabel();
wCheckIn.addEventListener("change", () => {
// Auto-advance checkout if needed
if (wCheckOut.value && wCheckOut.value <= wCheckIn.value) {
const d = new Date(wCheckIn.value);
d.setDate(d.getDate() + 1);
wCheckOut.value = d.toISOString().slice(0, 10);
}
updateWidgetLabel();
});
wCheckOut.addEventListener("change", updateWidgetLabel);
document.getElementById("widgetSearch").addEventListener("click", () => {
const n = calcNights(wCheckIn.value, wCheckOut.value);
if (n <= 0) {
showToast("Please select valid check-in and check-out dates.");
return;
}
showToast(`Checking availability for ${fmtNights(n)} · 9–12 Jun 2026`);
});
// ── Room cards ───────────────────────────────────────────────────────────────
document.querySelectorAll(".room-btn").forEach((btn) => {
btn.addEventListener("click", () => {
const room = btn.dataset.room;
showToast(`Opening reservations for "${room}"…`);
});
});
// ── Reserve form ─────────────────────────────────────────────────────────────
const rIn = document.getElementById("rIn");
const rOut = document.getElementById("rOut");
const rName = document.getElementById("rName");
const rEmail = document.getElementById("rEmail");
const nightsCalc = document.getElementById("nightsCalc");
// Seed defaults
rIn.value = "2026-06-09";
rOut.value = "2026-06-12";
function updateNightsCalc() {
const n = calcNights(rIn.value, rOut.value);
if (n > 0) {
const rate = 220; // minimum rate
nightsCalc.innerHTML = `<strong>${fmtNights(n)}</strong> · from €${(n * rate).toLocaleString()}`;
} else {
nightsCalc.textContent = "";
}
}
updateNightsCalc();
rIn.addEventListener("change", () => {
if (rOut.value && rOut.value <= rIn.value) {
const d = new Date(rIn.value);
d.setDate(d.getDate() + 1);
rOut.value = d.toISOString().slice(0, 10);
}
updateNightsCalc();
});
rOut.addEventListener("change", updateNightsCalc);
document.getElementById("reserveForm").addEventListener("submit", (e) => {
e.preventDefault();
let valid = true;
// Clear error states
[rName, rEmail, rIn, rOut].forEach((el) => el.classList.remove("error"));
if (!rName.value.trim()) {
rName.classList.add("error");
valid = false;
}
const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRe.test(rEmail.value.trim())) {
rEmail.classList.add("error");
valid = false;
}
const n = calcNights(rIn.value, rOut.value);
if (n <= 0) {
rIn.classList.add("error");
rOut.classList.add("error");
valid = false;
}
if (!valid) {
showToast("Please fill in all required fields.");
return;
}
const name = rName.value.trim().split(" ")[0];
showToast(`Reservation request sent — thank you, ${name}. We'll confirm within 2 hours.`);
document.getElementById("reserveForm").reset();
nightsCalc.textContent = "";
});
// ── Smooth scroll for anchor links ──────────────────────────────────────────
document.querySelectorAll('a[href^="#"]').forEach((a) => {
a.addEventListener("click", (e) => {
const target = document.querySelector(a.getAttribute("href"));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: "smooth", block: "start" });
}
});
});<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap"
/>
<link rel="stylesheet" href="style.css" />
<title>Maison Verel · Boutique Hotel Paris</title>
</head>
<body>
<!-- ── Sticky Nav ── -->
<nav class="site-nav" id="siteNav">
<a class="nav-brand" href="#">
<span class="nav-mark">MV</span>
<span class="nav-name">Maison Verel</span>
</a>
<ul class="nav-links">
<li><a href="#rooms">Rooms</a></li>
<li><a href="#story">Story</a></li>
<li><a href="#visit">Visit</a></li>
</ul>
<a class="nav-cta" href="#reserve">Reserve</a>
</nav>
<!-- ── Hero ── -->
<section class="hero" id="home">
<div class="hero-bg"></div>
<div class="hero-inner">
<p class="eyebrow">Paris · Saint-Germain-des-Prés</p>
<h1 class="hero-title">An intimate<br /><em>address</em><br />in the city.</h1>
<p class="hero-sub">Twelve singular rooms. Unhurried mornings. Art, craft, and the poetry of place.</p>
<!-- Reservation widget -->
<div class="widget" id="heroWidget">
<div class="widget-field">
<label for="wCheckIn">Check-in</label>
<input type="date" id="wCheckIn" />
</div>
<div class="widget-divider"></div>
<div class="widget-field">
<label for="wCheckOut">Check-out</label>
<input type="date" id="wCheckOut" />
</div>
<div class="widget-divider"></div>
<div class="widget-field">
<label for="wGuests">Guests</label>
<select id="wGuests">
<option value="1">1 guest</option>
<option value="2" selected>2 guests</option>
<option value="3">3 guests</option>
</select>
</div>
<button class="widget-btn" id="widgetSearch">
<span id="widgetNights"></span> Check availability
</button>
</div>
</div>
</section>
<!-- ── Rooms ── -->
<section class="rooms section" id="rooms">
<header class="section-header">
<p class="eyebrow">Accommodations</p>
<h2>Twelve rooms,<br />each its own world.</h2>
</header>
<div class="room-grid">
<article class="room-card">
<div class="room-img room-img-1"></div>
<div class="room-body">
<p class="room-cat">Supérieure</p>
<h3>The Quai Room</h3>
<p class="room-desc">A tranquil 22 m² room with parquet floors, an antique writing desk, and filtered light from a courtyard-facing window.</p>
<div class="room-meta">
<span>22 m² · King bed</span>
<span class="room-rate">From €220 / night</span>
</div>
<button class="room-btn" data-room="The Quai Room">Book this room</button>
</div>
</article>
<article class="room-card featured">
<div class="room-img room-img-2"></div>
<div class="room-body">
<p class="room-cat">Signature</p>
<h3>The Mezzanine Suite</h3>
<p class="room-desc">A double-height 38 m² suite with a mezzanine sleeping gallery, exposed beams, and a deep freestanding bath.</p>
<div class="room-meta">
<span>38 m² · King + loft</span>
<span class="room-rate">From €390 / night</span>
</div>
<button class="room-btn" data-room="The Mezzanine Suite">Book this room</button>
</div>
</article>
<article class="room-card">
<div class="room-img room-img-3"></div>
<div class="room-body">
<p class="room-cat">Prestige</p>
<h3>The Rooftop Studio</h3>
<p class="room-desc">An airy 30 m² top-floor studio with zinc rooftop views, a private terrace, and original Haussmann skylights.</p>
<div class="room-meta">
<span>30 m² · Queen · Terrace</span>
<span class="room-rate">From €310 / night</span>
</div>
<button class="room-btn" data-room="The Rooftop Studio">Book this room</button>
</div>
</article>
</div>
</section>
<!-- ── Story ── -->
<section class="story section" id="story">
<div class="story-img"></div>
<div class="story-text">
<p class="eyebrow">Our story</p>
<h2>Built for those who prefer<br /><em>to feel,</em> not just stay.</h2>
<p>Maison Verel occupies a 19th-century <em>hôtel particulier</em> on a quiet lane in the 6th arrondissement. Restored in 2019 by architect Céline Aubert, it preserves original mouldings, zinc parapets, and four centuries of layered light — while offering every modern comfort without announcement.</p>
<p>Twelve rooms. No two alike. A small, attentive team. The kind of place where the concierge knows the best table that isn't on any list.</p>
<a class="link-underline" href="#visit">Meet the team →</a>
</div>
</section>
<!-- ── Visit ── -->
<section class="visit section" id="visit">
<header class="section-header centered">
<p class="eyebrow">Find us</p>
<h2>Hours & Location</h2>
</header>
<div class="visit-grid">
<div class="visit-info">
<div class="info-block">
<h3>Check-in & Check-out</h3>
<ul class="info-list">
<li><span>Check-in</span><strong>From 15:00</strong></li>
<li><span>Check-out</span><strong>Until 12:00</strong></li>
<li><span>Early / late</span><strong>On request</strong></li>
</ul>
</div>
<div class="info-block">
<h3>Contact</h3>
<ul class="info-list">
<li><span>Address</span><strong>14 Rue de Fleurus, Paris 75006</strong></li>
<li><span>Phone</span><strong>+33 1 45 67 89 00</strong></li>
<li><span>Email</span><strong>[email protected]</strong></li>
</ul>
</div>
</div>
<div class="visit-map">
<div class="map-placeholder">
<div class="map-pin"></div>
<p>14 Rue de Fleurus<br />Paris 75006</p>
</div>
</div>
</div>
</section>
<!-- ── Reserve footer ── -->
<section class="reserve section" id="reserve">
<div class="reserve-inner">
<div class="reserve-text">
<p class="eyebrow">Reservations</p>
<h2>Plan your stay</h2>
<p>Complete the form and our reservations team will confirm within two hours — or call us directly at +33 1 45 67 89 00.</p>
</div>
<form class="reserve-form" id="reserveForm" novalidate>
<div class="form-row">
<div class="form-field">
<label for="rName">Full name</label>
<input type="text" id="rName" placeholder="Sophie Laurent" autocomplete="name" />
</div>
<div class="form-field">
<label for="rEmail">Email</label>
<input type="email" id="rEmail" placeholder="[email protected]" autocomplete="email" />
</div>
</div>
<div class="form-row">
<div class="form-field">
<label for="rIn">Arrival</label>
<input type="date" id="rIn" />
</div>
<div class="form-field">
<label for="rOut">Departure</label>
<input type="date" id="rOut" />
</div>
<div class="form-field narrow">
<label for="rGuests">Guests</label>
<select id="rGuests">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="form-field full">
<label for="rNotes">Special requests</label>
<textarea id="rNotes" rows="3" placeholder="Allergies, anniversary, early arrival…"></textarea>
</div>
<div class="form-footer">
<p class="nights-calc" id="nightsCalc"></p>
<button type="submit" class="submit-btn">Request reservation</button>
</div>
</form>
</div>
</section>
<!-- ── Footer ── -->
<footer class="site-footer">
<span class="footer-brand">Maison Verel · Paris</span>
<span>© 2026 · All rights reserved</span>
</footer>
<div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Boutique Hotel Landing
A refined, editorial single-page landing site for Maison Verel, an intimate boutique city hotel. The charcoal-and-brass palette and generous whitespace give the page a curated, magazine-editorial feel. Scroll through a full-height hero with an inline reservation widget that calculates nights in real time, three curated room cards with CSS-gradient imagery, an about/story section, and an hours + location block with a CSS map placeholder. The navigation becomes sticky and compact on scroll, and the reservation form footer fires validation-aware toast feedback.