Сторінки Середня
Hotel Landing Page
A full marketing landing page for Aurelia Hotels featuring a sticky nav, full-bleed hero with booking mini-search, featured rooms row, amenities band, a guest quote, and a footer with newsletter signup — all interactive with scroll effects, nights calculation, and form validation.
Відкрити в Lab
MCP
html css vanilla-js
Цілі: JS HTML
Код
/* ── Design tokens ── */
:root {
--navy: #1a2b4a;
--navy-d: #0f1d36;
--navy-2: #2d4570;
--cream: #f7f3eb;
--cream-2: #ece5d4;
--bone: #fbf8f2;
--gold: #c9a649;
--gold-light: #e0c378;
--gold-d: #a88a2e;
--ink: #161e2c;
--ink-2: #2e3a52;
--warm-gray: #6c7280;
--line: rgba(22, 30, 44, 0.1);
--line-strong: rgba(22, 30, 44, 0.18);
--success: #4a7752;
--danger: #b34232;
--warning: #d99020;
--info: #4a6da0;
--font-display: "Cormorant Garamond", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow-1: 0 1px 2px rgba(22, 30, 44, 0.06), 0 2px 8px rgba(22, 30, 44, 0.06);
--shadow-2: 0 12px 36px rgba(15, 29, 54, 0.16);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-body);
background: var(--cream);
color: var(--ink);
-webkit-font-smoothing: antialiased;
}
/* ── Layout util ── */
.container {
max-width: 1100px;
margin-inline: auto;
padding-inline: 32px;
}
/* ── Sticky nav ── */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
padding: 18px 0;
transition: background 0.25s, padding 0.25s, box-shadow 0.25s;
}
.nav.is-scrolled {
background: rgba(15, 29, 54, 0.97);
padding: 12px 0;
box-shadow: 0 2px 20px rgba(15, 29, 54, 0.3);
backdrop-filter: blur(8px);
}
.nav-inner {
display: flex;
align-items: center;
gap: 32px;
}
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex-shrink: 0;
}
.brand-mark {
width: 34px;
height: 34px;
background: var(--gold);
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
color: var(--navy-d);
}
.brand-mark--lg {
width: 44px;
height: 44px;
font-size: 1.4rem;
}
.brand-name {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
color: var(--bone);
letter-spacing: 0.01em;
}
.nav-links {
display: flex;
gap: 28px;
list-style: none;
margin-left: auto;
}
.nav-links a {
text-decoration: none;
color: rgba(251, 248, 242, 0.75);
font-size: 0.9rem;
font-weight: 500;
transition: color 0.15s;
}
.nav-links a:hover {
color: var(--gold-light);
}
.nav-cta {
text-decoration: none;
font-size: 0.86rem;
font-weight: 700;
padding: 9px 20px;
background: var(--gold);
color: var(--navy-d);
border-radius: 999px;
transition: background 0.15s;
white-space: nowrap;
}
.nav-cta:hover {
background: var(--gold-light);
}
/* ── Hero ── */
.hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 60%, rgba(201, 166, 73, 0.18), transparent 55%),
radial-gradient(ellipse at 80% 20%, rgba(45, 69, 112, 0.4), transparent 50%),
linear-gradient(160deg, #152440 0%, #0a1628 100%);
}
.hero-bg::after {
content: "";
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a649' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content {
position: relative;
z-index: 2;
padding-top: 100px;
padding-bottom: 40px;
}
.hero-kicker {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--gold-light);
font-weight: 700;
margin-bottom: 20px;
}
.hero-heading {
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 5.5rem);
font-weight: 700;
color: var(--bone);
line-height: 1.05;
letter-spacing: -0.01em;
margin-bottom: 24px;
}
.hero-sub {
font-size: clamp(1rem, 1.5vw, 1.15rem);
color: rgba(251, 248, 242, 0.72);
max-width: 480px;
line-height: 1.65;
margin-bottom: 32px;
}
.hero-btn {
display: inline-block;
text-decoration: none;
background: transparent;
border: 1.5px solid var(--gold);
color: var(--gold-light);
font-weight: 600;
font-size: 0.9rem;
padding: 13px 28px;
border-radius: 999px;
letter-spacing: 0.04em;
transition: background 0.18s, color 0.18s;
}
.hero-btn:hover {
background: var(--gold);
color: var(--navy-d);
}
/* ── Search bar ── */
.search-bar {
position: relative;
z-index: 3;
padding: 0 0 56px;
}
.search-inner {
background: rgba(251, 248, 242, 0.96);
backdrop-filter: blur(10px);
border-radius: var(--r-lg);
padding: 20px 24px;
display: flex;
gap: 16px;
align-items: flex-end;
flex-wrap: wrap;
box-shadow: var(--shadow-2);
}
.sf {
display: flex;
flex-direction: column;
gap: 5px;
flex: 1;
min-width: 120px;
}
.sf-label {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--warm-gray);
font-weight: 700;
}
.sf-input {
font-family: inherit;
font-size: 0.9rem;
font-weight: 500;
color: var(--ink);
background: var(--cream);
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
padding: 9px 12px;
outline: none;
width: 100%;
}
.sf-input:focus {
border-color: var(--gold);
}
.sf-guests select {
cursor: pointer;
}
.sf-nights {
flex: 0 0 auto;
min-width: 64px;
}
.sf-nights-val {
font-family: var(--font-mono);
font-size: 1.1rem;
font-weight: 700;
color: var(--navy-d);
font-variant-numeric: tabular-nums;
padding: 9px 0;
display: block;
}
.search-btn {
font-family: inherit;
font-weight: 700;
font-size: 0.9rem;
padding: 11px 24px;
background: var(--navy);
color: var(--bone);
border: none;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
align-self: flex-end;
transition: background 0.15s;
}
.search-btn:hover {
background: var(--navy-d);
}
/* ── Section shared ── */
.section-kicker {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--gold-d);
font-weight: 700;
margin-bottom: 12px;
}
.section-kicker.centered {
text-align: center;
}
.section-heading {
font-family: var(--font-display);
font-size: clamp(2rem, 3.5vw, 2.9rem);
font-weight: 700;
color: var(--navy-d);
line-height: 1.15;
letter-spacing: -0.005em;
}
.section-heading.centered {
text-align: center;
}
/* ── About strip ── */
.about-strip {
background: var(--bone);
padding: 80px 0;
border-top: 1px solid var(--line);
}
.about-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
}
.about-body {
font-size: 1rem;
color: var(--ink-2);
line-height: 1.7;
margin-top: 20px;
max-width: 520px;
}
.about-stats {
display: flex;
flex-direction: column;
gap: 28px;
border-left: 2px solid var(--gold);
padding-left: 36px;
}
.stat {
}
.stat-n {
display: block;
font-family: var(--font-display);
font-size: 3rem;
font-weight: 700;
color: var(--gold-d);
line-height: 1;
}
.stat-l {
font-size: 0.8rem;
color: var(--warm-gray);
font-weight: 600;
line-height: 1.45;
display: block;
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ── Rooms section ── */
.rooms-section {
padding: 80px 0;
background: var(--cream);
}
.rooms-section .section-heading {
margin-bottom: 44px;
}
.rooms-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.room-card {
background: var(--bone);
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--line);
position: relative;
transition: transform 0.22s, box-shadow 0.22s;
}
.room-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-2);
}
.room-card--featured {
border-color: var(--gold);
box-shadow: 0 0 0 1.5px var(--gold);
}
.ribbon {
position: absolute;
top: 14px;
right: -24px;
background: var(--gold);
color: var(--navy-d);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 36px 4px 14px;
transform: rotate(0deg);
z-index: 2;
border-radius: 4px 0 0 4px;
}
.room-img {
height: 190px;
position: relative;
display: flex;
align-items: flex-end;
padding: 14px;
}
.room-img--classic {
background: linear-gradient(160deg, #3a5a4a 0%, #1e3328 55%, #0f1d36 100%);
}
.room-img--deluxe {
background: linear-gradient(160deg, #4a3a5a 0%, #2e1f3e 55%, #0f1d36 100%);
}
.room-img--junior {
background: linear-gradient(160deg, #5a4a2e 0%, #3a2e1a 55%, #0f1d36 100%);
}
.room-img-label {
font-family: var(--font-display);
font-size: 0.82rem;
font-weight: 700;
color: rgba(251, 248, 242, 0.55);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.room-body {
padding: 18px 20px 20px;
}
.room-name {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 700;
color: var(--navy-d);
margin-bottom: 8px;
}
.room-desc {
font-size: 0.86rem;
color: var(--ink-2);
line-height: 1.6;
margin-bottom: 16px;
}
.room-foot {
display: flex;
justify-content: space-between;
align-items: center;
}
.room-from {
font-size: 0.84rem;
color: var(--warm-gray);
}
.room-from strong {
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 700;
color: var(--gold-d);
font-variant-numeric: tabular-nums;
}
.room-btn {
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
padding: 8px 18px;
border-radius: 999px;
background: var(--navy);
color: var(--bone);
border: none;
cursor: pointer;
transition: background 0.15s;
}
.room-btn:hover {
background: var(--navy-2);
}
/* ── Amenities band ── */
.amenities-band {
padding: 80px 0;
background: linear-gradient(135deg, var(--navy-2) 0%, var(--navy-d) 100%);
}
.amenities-band .section-kicker {
color: var(--gold-light);
}
.amenities-band .section-heading {
color: var(--bone);
margin-bottom: 48px;
}
.light-kicker {
color: var(--gold-light) !important;
}
.light-heading {
color: var(--bone) !important;
}
.amenities-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.amenity {
text-align: center;
padding: 28px 20px;
background: rgba(251, 248, 242, 0.05);
border: 1px solid rgba(201, 166, 73, 0.2);
border-radius: var(--r-lg);
transition: background 0.18s;
}
.amenity:hover {
background: rgba(201, 166, 73, 0.09);
}
.amenity-icon {
display: block;
font-size: 1.8rem;
color: var(--gold);
margin-bottom: 14px;
}
.amenity-title {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
color: var(--bone);
margin-bottom: 8px;
}
.amenity-desc {
font-size: 0.82rem;
color: rgba(251, 248, 242, 0.65);
line-height: 1.6;
}
/* ── Guest review ── */
.review-section {
background: var(--cream-2);
padding: 80px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.review-inner {
display: flex;
justify-content: center;
}
.review-block {
max-width: 680px;
text-align: center;
}
.review-quote {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
font-weight: 600;
color: var(--navy-d);
line-height: 1.45;
letter-spacing: 0.005em;
margin-bottom: 28px;
font-style: italic;
}
.review-author {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.review-name {
font-size: 0.9rem;
font-weight: 700;
color: var(--navy-d);
}
.review-stay {
font-size: 0.78rem;
color: var(--warm-gray);
}
.review-stars {
font-size: 1rem;
color: var(--gold);
margin-top: 4px;
letter-spacing: 2px;
}
/* ── Footer ── */
.footer {
background: var(--navy-d);
padding: 64px 0 0;
}
.footer-inner {
display: grid;
grid-template-columns: 1.2fr 1.4fr 1fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(251, 248, 242, 0.1);
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-brand-name {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 700;
color: var(--bone);
}
.footer-tagline {
font-size: 0.84rem;
color: rgba(251, 248, 242, 0.55);
line-height: 1.6;
margin-top: 4px;
}
.newsletter-heading {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--bone);
margin-bottom: 8px;
}
.newsletter-sub {
font-size: 0.82rem;
color: rgba(251, 248, 242, 0.6);
line-height: 1.55;
margin-bottom: 16px;
}
.newsletter-form {
display: flex;
gap: 8px;
}
.nl-input {
flex: 1;
font-family: inherit;
font-size: 0.9rem;
background: rgba(251, 248, 242, 0.08);
border: 1px solid rgba(251, 248, 242, 0.15);
color: var(--bone);
border-radius: var(--r-md);
padding: 10px 14px;
outline: none;
}
.nl-input::placeholder {
color: rgba(251, 248, 242, 0.35);
}
.nl-input:focus {
border-color: var(--gold);
}
.nl-input.is-error {
border-color: var(--danger);
}
.nl-btn {
font-family: inherit;
font-weight: 700;
font-size: 0.86rem;
padding: 10px 20px;
background: var(--gold);
color: var(--navy-d);
border: none;
border-radius: var(--r-md);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
.nl-btn:hover {
background: var(--gold-light);
}
.nl-error {
font-size: 0.78rem;
color: #e07060;
margin-top: 6px;
}
.footer-links ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
text-decoration: none;
font-size: 0.86rem;
color: rgba(251, 248, 242, 0.6);
transition: color 0.14s;
}
.footer-links a:hover {
color: var(--gold-light);
}
.footer-bar {
padding: 18px 32px;
color: rgba(251, 248, 242, 0.35);
font-size: 0.78rem;
}
/* ── Toast ── */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: var(--navy-d);
color: var(--bone);
padding: 11px 22px;
border-radius: 999px;
font-size: 0.86rem;
font-weight: 600;
box-shadow: 0 10px 30px rgba(22, 30, 44, 0.18);
z-index: 100;
white-space: nowrap;
}
/* ── Responsive ── */
@media (max-width: 960px) {
.rooms-grid {
grid-template-columns: 1fr 1fr;
}
.rooms-grid .room-card:last-child {
grid-column: span 2;
max-width: 380px;
justify-self: center;
}
.amenities-grid {
grid-template-columns: 1fr 1fr;
}
.about-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.about-stats {
flex-direction: row;
border-left: none;
border-top: 2px solid var(--gold);
padding-left: 0;
padding-top: 28px;
gap: 36px;
}
.footer-inner {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: span 2;
flex-direction: row;
align-items: center;
gap: 16px;
}
}
@media (max-width: 560px) {
.container {
padding-inline: 18px;
}
.nav-links {
display: none;
}
.rooms-grid {
grid-template-columns: 1fr;
}
.rooms-grid .room-card:last-child {
grid-column: span 1;
max-width: none;
}
.amenities-grid {
grid-template-columns: 1fr;
}
.search-inner {
flex-direction: column;
gap: 12px;
}
.sf {
min-width: 100%;
}
.search-btn {
width: 100%;
}
.footer-inner {
grid-template-columns: 1fr;
}
.footer-brand {
grid-column: span 1;
}
.newsletter-form {
flex-direction: column;
}
.about-stats {
flex-direction: column;
}
}// ── Helpers ───────────────────────────────────────────────────────────────────
const $ = (id) => document.getElementById(id);
const toast = $("toast");
function showToast(msg) {
toast.textContent = msg;
toast.hidden = false;
clearTimeout(showToast._t);
showToast._t = setTimeout(() => (toast.hidden = true), 2200);
}
// ── Sticky nav on scroll ──────────────────────────────────────────────────────
const nav = $("mainNav");
function handleScroll() {
nav.classList.toggle("is-scrolled", window.scrollY > 40);
}
window.addEventListener("scroll", handleScroll, { passive: true });
handleScroll(); // run once on load
// ── Mini search — date defaults & nights calc ─────────────────────────────────
const checkInEl = $("sCheckIn");
const checkOutEl = $("sCheckOut");
const nightsEl = $("nightsCalc");
function isoDate(d) {
return d.toISOString().slice(0, 10);
}
// Default: 11 Jun 2026 → 13 Jun 2026 (2 nights)
const defIn = new Date("2026-06-11");
const defOut = new Date("2026-06-13");
checkInEl.value = isoDate(defIn);
checkOutEl.value = isoDate(defOut);
function calcNights() {
const a = new Date(checkInEl.value);
const b = new Date(checkOutEl.value);
if (isNaN(a) || isNaN(b) || b <= a) {
nightsEl.textContent = "—";
return;
}
const n = Math.round((b - a) / 86_400_000);
nightsEl.textContent = n;
}
checkInEl.addEventListener("change", () => {
// push check-out to at least one day after check-in
const a = new Date(checkInEl.value);
const b = new Date(checkOutEl.value);
if (!isNaN(a) && (!checkOutEl.value || b <= a)) {
const next = new Date(a);
next.setDate(next.getDate() + 1);
checkOutEl.value = isoDate(next);
}
calcNights();
});
checkOutEl.addEventListener("change", calcNights);
calcNights(); // initial render
// ── Search button ─────────────────────────────────────────────────────────────
$("searchBtn").addEventListener("click", () => {
const nights = nightsEl.textContent;
const guests = $("sGuests").value;
if (!checkInEl.value || !checkOutEl.value) {
showToast("Please select check-in and check-out dates.");
return;
}
if (nights === "—") {
showToast("Check-out must be after check-in.");
return;
}
const checkIn = new Date(checkInEl.value).toLocaleDateString("en-GB", {
day: "2-digit",
month: "short",
year: "numeric",
});
const checkOut = new Date(checkOutEl.value).toLocaleDateString("en-GB", {
day: "2-digit",
month: "short",
year: "numeric",
});
showToast(
`Checking availability · ${checkIn} → ${checkOut} · ${nights} nights · ${guests} guest${guests > 1 ? "s" : ""}`
);
// scroll to rooms section
document.getElementById("rooms").scrollIntoView({ behavior: "smooth" });
});
// ── Room card select buttons ──────────────────────────────────────────────────
document.querySelectorAll(".room-btn").forEach((btn) => {
btn.addEventListener("click", () => {
const room = btn.dataset.room;
const price = Number(btn.dataset.price);
const nights = Number(nightsEl.textContent) || 1;
const total = price * nights;
const fmtAmt = `€${total.toLocaleString("en-GB", { minimumFractionDigits: 2 })}`;
showToast(`${room} selected · ${nights} night${nights !== 1 ? "s" : ""} · ${fmtAmt} total`);
});
});
// ── Newsletter form validation & submit ───────────────────────────────────────
$("newsletterForm").addEventListener("submit", (e) => {
e.preventDefault();
const input = $("nlEmail");
const errorEl = $("nlError");
const val = input.value.trim();
const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
if (!valid) {
input.classList.add("is-error");
errorEl.hidden = false;
input.focus();
return;
}
input.classList.remove("is-error");
errorEl.hidden = true;
input.value = "";
showToast(`Subscribed · ${val}`);
});
$("nlEmail").addEventListener("input", () => {
$("nlEmail").classList.remove("is-error");
$("nlError").hidden = true;
});<!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:wght@600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap"
/>
<link rel="stylesheet" href="style.css" />
<title>Aurelia Hotels · Where Luxury Meets Soul</title>
</head>
<body>
<!-- ── Sticky nav ── -->
<nav class="nav" id="mainNav" aria-label="Main navigation">
<div class="nav-inner container">
<a href="#" class="nav-brand" aria-label="Aurelia Hotels home">
<span class="brand-mark" aria-hidden="true">A</span>
<span class="brand-name">Aurelia Hotels</span>
</a>
<ul class="nav-links" role="list">
<li><a href="#rooms">Rooms</a></li>
<li><a href="#amenities">Amenities</a></li>
<li><a href="#about">About</a></li>
</ul>
<a href="#search" class="nav-cta">Book now</a>
</div>
</nav>
<!-- ── Hero ── -->
<section class="hero" id="hero" aria-labelledby="heroHeading">
<div class="hero-bg" aria-hidden="true"></div>
<div class="hero-content container">
<p class="hero-kicker">Barcelona · Côte d'Azur · Lisbon</p>
<h1 class="hero-heading" id="heroHeading">Where luxury<br>meets soul.</h1>
<p class="hero-sub">Award-winning stays designed for the discerning traveller. Intimate spaces, impeccable service.</p>
<a href="#search" class="hero-btn">Explore rooms</a>
</div>
<!-- Mini search bar -->
<div class="search-bar" id="search" aria-label="Quick booking">
<div class="container search-inner">
<div class="sf">
<label class="sf-label" for="sCheckIn">Check-in</label>
<input class="sf-input" id="sCheckIn" type="date" />
</div>
<div class="sf">
<label class="sf-label" for="sCheckOut">Check-out</label>
<input class="sf-input" id="sCheckOut" type="date" />
</div>
<div class="sf sf-guests">
<label class="sf-label" for="sGuests">Guests</label>
<select class="sf-input" id="sGuests">
<option value="1">1 guest</option>
<option value="2" selected>2 guests</option>
<option value="3">3 guests</option>
<option value="4">4 guests</option>
</select>
</div>
<div class="sf sf-nights">
<span class="sf-label">Nights</span>
<span class="sf-nights-val" id="nightsCalc">—</span>
</div>
<button class="search-btn" id="searchBtn" type="button">Check availability</button>
</div>
</div>
</section>
<!-- ── About / intro strip ── -->
<section class="about-strip" id="about" aria-labelledby="aboutHeading">
<div class="container about-inner">
<div class="about-text">
<p class="section-kicker">Our story</p>
<h2 class="section-heading" id="aboutHeading">A legacy of<br>quiet excellence.</h2>
<p class="about-body">Founded in 1968 by the Villanueva family, Aurelia Hotels has spent more than five decades perfecting the art of discreet hospitality. Each property is a carefully curated world of its own — rooted in its city, alive with local culture, and devoted entirely to you.</p>
</div>
<div class="about-stats" aria-label="Key figures">
<div class="stat">
<strong class="stat-n">5</strong>
<span class="stat-l">Iconic<br>properties</span>
</div>
<div class="stat">
<strong class="stat-n">58</strong>
<span class="stat-l">Years of<br>hospitality</span>
</div>
<div class="stat">
<strong class="stat-n">4.9</strong>
<span class="stat-l">Average<br>guest rating</span>
</div>
</div>
</div>
</section>
<!-- ── Featured rooms ── -->
<section class="rooms-section" id="rooms" aria-labelledby="roomsHeading">
<div class="container">
<p class="section-kicker centered">Featured rooms</p>
<h2 class="section-heading centered" id="roomsHeading">Choose your sanctuary.</h2>
<div class="rooms-grid" role="list">
<article class="room-card" role="listitem" aria-label="Classic Double room">
<div class="room-img room-img--classic" aria-hidden="true">
<span class="room-img-label">Classic Double</span>
</div>
<div class="room-body">
<h3 class="room-name">Classic Double</h3>
<p class="room-desc">Warm oak finishes, king bed, and floor-to-ceiling windows opening onto the city skyline.</p>
<div class="room-foot">
<span class="room-from">From <strong>€184</strong>/night</span>
<button class="room-btn" type="button" data-room="Classic Double" data-price="184">Select</button>
</div>
</div>
</article>
<article class="room-card room-card--featured" role="listitem" aria-label="Deluxe Double room">
<div class="ribbon" aria-label="Most popular">Most popular</div>
<div class="room-img room-img--deluxe" aria-hidden="true">
<span class="room-img-label">Deluxe Double</span>
</div>
<div class="room-body">
<h3 class="room-name">Deluxe Double</h3>
<p class="room-desc">Oversized marble bath, curated minibar, and a private terrace with sea or garden views.</p>
<div class="room-foot">
<span class="room-from">From <strong>€232</strong>/night</span>
<button class="room-btn" type="button" data-room="Deluxe Double" data-price="232">Select</button>
</div>
</div>
</article>
<article class="room-card" role="listitem" aria-label="Junior Suite room">
<div class="room-img room-img--junior" aria-hidden="true">
<span class="room-img-label">Junior Suite</span>
</div>
<div class="room-body">
<h3 class="room-name">Junior Suite</h3>
<p class="room-desc">A generous sitting area, espresso nook, and a signature Aurelia bath ritual on arrival.</p>
<div class="room-foot">
<span class="room-from">From <strong>€295</strong>/night</span>
<button class="room-btn" type="button" data-room="Junior Suite" data-price="295">Select</button>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ── Amenities band ── -->
<section class="amenities-band" id="amenities" aria-labelledby="amenitiesHeading">
<div class="container">
<p class="section-kicker centered light-kicker">Highlights</p>
<h2 class="section-heading centered light-heading" id="amenitiesHeading">Everything you need,<br>nothing you don't.</h2>
<div class="amenities-grid" role="list">
<div class="amenity" role="listitem">
<span class="amenity-icon" aria-hidden="true">◈</span>
<h4 class="amenity-title">Aurelia Spa</h4>
<p class="amenity-desc">Six treatment rooms, hammam, and a glass-roofed indoor pool.</p>
</div>
<div class="amenity" role="listitem">
<span class="amenity-icon" aria-hidden="true">◆</span>
<h4 class="amenity-title">Dining</h4>
<p class="amenity-desc">À la carte restaurant, rooftop bar, and an all-day terrace café.</p>
</div>
<div class="amenity" role="listitem">
<span class="amenity-icon" aria-hidden="true">❋</span>
<h4 class="amenity-title">Fitness Centre</h4>
<p class="amenity-desc">State-of-the-art equipment, personal trainers, and group classes.</p>
</div>
<div class="amenity" role="listitem">
<span class="amenity-icon" aria-hidden="true">◉</span>
<h4 class="amenity-title">Concierge</h4>
<p class="amenity-desc">24-hour personal concierge for private transfers, tours, and reservations.</p>
</div>
</div>
</div>
</section>
<!-- ── Guest review quote ── -->
<section class="review-section" aria-label="Guest review">
<div class="container review-inner">
<figure class="review-block">
<blockquote class="review-quote">
"Aurelia Barcelona surpassed every expectation. The detail, the calm, the extraordinary staff — it is simply unlike anywhere else I have stayed."
</blockquote>
<figcaption class="review-author">
<span class="review-name">Isabella V.</span>
<span class="review-stay">Deluxe Double · June 2026</span>
<span class="review-stars" aria-label="5 stars">★★★★★</span>
</figcaption>
</figure>
</div>
</section>
<!-- ── Footer ── -->
<footer class="footer" id="footer">
<div class="container footer-inner">
<div class="footer-brand">
<span class="brand-mark brand-mark--lg" aria-hidden="true">A</span>
<span class="footer-brand-name">Aurelia Hotels</span>
<p class="footer-tagline">Five extraordinary hotels.<br>One standard of care.</p>
</div>
<div class="footer-newsletter">
<h3 class="newsletter-heading">Stay in the know.</h3>
<p class="newsletter-sub">Members receive early access to rates and exclusive offers.</p>
<form class="newsletter-form" id="newsletterForm" novalidate>
<input class="nl-input" id="nlEmail" type="email" placeholder="[email protected]" aria-label="Email address" />
<button class="nl-btn" type="submit">Subscribe</button>
</form>
<p class="nl-error" id="nlError" hidden>Please enter a valid email address.</p>
</div>
<div class="footer-links">
<ul role="list">
<li><a href="#">Rooms & Suites</a></li>
<li><a href="#">Spa & Wellness</a></li>
<li><a href="#">Dining</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="footer-bar container">
<p>© 2026 Aurelia Hotels. All rights reserved.</p>
</div>
</footer>
<div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Hotel Landing Page
A full-screen marketing layout for Aurelia Hotels built around the brand’s navy-and-gold palette. The sticky navigation compresses and gains a background on scroll. The hero spans the full viewport with a CSS-gradient backdrop, headline, and a compact date/guests search bar that calculates the number of nights live. Below, a “Why Aurelia” strip, a three-card featured rooms row (CSS-gradient imagery, from-price labels, hover lift), an amenities highlights band, a pull-quote from a guest review, and a newsletter-signup footer with email validation and a toast confirmation.