Páginas Fácil
Hotel Special Offers & Packages
A full marketing page showcasing Aurelia Hotels' special offers and packages — filterable by category (Stays, Spa, Dining, Seasonal), with discount badges, conditions, from-prices, a promo-code validator, and CTA toast feedback.
Abrir en Lab
MCP
html css vanilla-js
Targets: JS HTML
Código
/* ── 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;
}
/* ── Nav ── */
.nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 20px 40px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--bone);
}
.brand-mark {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: var(--r-md);
background: var(--gold);
color: var(--navy-d);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.4rem;
}
.brand-name {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.brand-name em {
font-style: normal;
color: var(--gold-light);
}
.nav-links {
display: flex;
gap: 26px;
margin-left: auto;
}
.nav-links a {
color: rgba(251, 248, 242, 0.8);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--gold-light);
}
.nav-actions {
display: flex;
align-items: center;
gap: 18px;
}
.nav-link {
color: rgba(251, 248, 242, 0.8);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
}
.nav-link:hover {
color: var(--bone);
}
.nav-cta {
background: rgba(251, 248, 242, 0.12);
border: 1px solid rgba(251, 248, 242, 0.3);
color: var(--bone);
font-family: inherit;
font-size: 0.86rem;
font-weight: 600;
padding: 9px 16px;
border-radius: 999px;
cursor: pointer;
}
.nav-cta:hover {
background: rgba(251, 248, 242, 0.2);
}
/* ── Hero ── */
.hero {
position: relative;
min-height: 480px;
padding: 140px 40px 80px;
display: flex;
align-items: flex-end;
color: var(--bone);
background: linear-gradient(135deg, var(--navy-d) 0%, var(--navy) 55%, var(--navy-2) 100%);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 90% at 80% 10%, rgba(201, 166, 73, 0.24), transparent 55%),
radial-gradient(70% 70% at 0% 100%, rgba(45, 69, 112, 0.5), transparent 60%);
pointer-events: none;
}
.hero-inner {
position: relative;
max-width: 1100px;
width: 100%;
margin: 0 auto;
}
.eyebrow {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--gold-light);
font-weight: 600;
}
.hero h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.6rem, 6vw, 4.2rem);
line-height: 1.04;
letter-spacing: -0.01em;
margin: 10px 0 16px;
}
.lede {
font-size: 1rem;
line-height: 1.65;
color: rgba(251, 248, 242, 0.82);
max-width: 540px;
}
/* ── Filters bar ── */
.filters-bar {
background: var(--bone);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 9;
box-shadow: var(--shadow-1);
}
.filters-inner {
max-width: 1100px;
margin: 0 auto;
padding: 14px 40px;
display: flex;
align-items: center;
gap: 12px;
}
.filters-label {
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 700;
color: var(--warm-gray);
white-space: nowrap;
}
.filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter {
background: transparent;
border: 1px solid var(--line-strong);
color: var(--ink-2);
font-family: inherit;
font-size: 0.84rem;
font-weight: 600;
padding: 7px 16px;
border-radius: 999px;
cursor: pointer;
transition: all 0.15s;
}
.filter:hover {
border-color: var(--navy-2);
color: var(--navy-d);
}
.filter.active {
background: var(--navy);
border-color: var(--navy);
color: var(--bone);
}
.results-count {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 700;
color: var(--warm-gray);
white-space: nowrap;
}
/* ── Offers section ── */
.offers-section {
max-width: 1100px;
margin: 0 auto;
padding: 60px 40px 80px;
}
/* ── Offers grid ── */
.offers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
/* ── Offer card ── */
.offer-card {
background: var(--bone);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-1);
display: flex;
flex-direction: column;
transition: transform 0.18s, box-shadow 0.18s;
}
.offer-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-2);
}
.offer-card[hidden] {
display: none;
}
/* Card image area */
.card-img {
position: relative;
height: 180px;
overflow: hidden;
}
.card-img[data-theme="navy"] {
background: linear-gradient(135deg, #3a5180, var(--navy-d));
}
.card-img[data-theme="rose"] {
background: linear-gradient(135deg, #7a3a5a, #4a1a32);
}
.card-img[data-theme="teal"] {
background: linear-gradient(135deg, #2a6060, #103838);
}
.card-img[data-theme="gold"] {
background: linear-gradient(135deg, var(--gold-d), #5a3a10);
}
.card-img[data-theme="green"] {
background: linear-gradient(135deg, #3a5a38, #1e3a1c);
}
.card-img-inner {
position: absolute;
inset: 0;
background: radial-gradient(60% 80% at 70% 20%, rgba(255, 255, 255, 0.1), transparent 60%);
}
/* Discount badge */
.card-badge {
position: absolute;
top: 14px;
left: 14px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 5px 11px;
border-radius: 999px;
z-index: 2;
font-family: var(--font-mono);
}
.badge-gold {
background: var(--gold);
color: var(--navy-d);
}
.badge-rose {
background: #c06080;
color: #fff;
}
.badge-teal {
background: #2a8080;
color: #fff;
}
.badge-green {
background: #4a7a48;
color: #fff;
}
/* Card body */
.card-body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
flex: 1;
}
.card-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.cat-tag {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--gold-d);
background: rgba(201, 166, 73, 0.12);
padding: 3px 9px;
border-radius: 999px;
}
.validity {
font-size: 0.72rem;
color: var(--warm-gray);
font-weight: 500;
}
.card-body h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
color: var(--navy-d);
line-height: 1.15;
margin-bottom: 10px;
}
.card-desc {
font-size: 0.86rem;
color: var(--ink-2);
line-height: 1.6;
margin-bottom: 14px;
}
/* Conditions list */
.conditions {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 18px;
padding-left: 0;
}
.conditions li {
font-size: 0.76rem;
color: var(--warm-gray);
padding-left: 14px;
position: relative;
}
.conditions li::before {
content: "·";
position: absolute;
left: 4px;
color: var(--gold-d);
}
/* Card footer */
.card-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--line);
gap: 12px;
}
.from-price {
display: flex;
align-items: baseline;
gap: 4px;
}
.from-label {
font-size: 0.72rem;
color: var(--warm-gray);
font-weight: 500;
}
.price {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 700;
color: var(--gold-d);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.per-night {
font-size: 0.72rem;
color: var(--warm-gray);
font-weight: 500;
}
.btn-book {
background: var(--navy);
color: var(--bone);
border: none;
font-family: inherit;
font-size: 0.82rem;
font-weight: 700;
padding: 10px 16px;
border-radius: var(--r-md);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
.btn-book:hover {
background: var(--navy-2);
}
/* ── Promo section ── */
.promo-section {
margin-top: 60px;
background: var(--navy-d);
border-radius: var(--r-lg);
padding: 44px 48px;
color: var(--bone);
}
.promo-inner {
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 22px;
}
.promo-copy h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 2rem;
margin-bottom: 6px;
}
.promo-copy p {
font-size: 0.9rem;
color: rgba(251, 248, 242, 0.72);
line-height: 1.6;
}
.promo-form {
display: flex;
gap: 10px;
width: 100%;
max-width: 480px;
}
.promo-input {
flex: 1;
font-family: var(--font-mono);
font-size: 0.96rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--bone);
padding: 12px 16px;
border-radius: var(--r-md);
outline: none;
transition: border-color 0.15s;
}
.promo-input::placeholder {
color: rgba(251, 248, 242, 0.35);
text-transform: none;
font-family: var(--font-body);
font-weight: 400;
font-size: 0.86rem;
letter-spacing: 0;
}
.promo-input:focus {
border-color: var(--gold);
}
.promo-input.is-success {
border-color: var(--success);
background: rgba(74, 119, 82, 0.12);
}
.promo-input.is-error {
border-color: var(--danger);
background: rgba(179, 66, 50, 0.1);
}
.promo-apply {
background: var(--gold);
color: var(--navy-d);
border: none;
font-family: inherit;
font-size: 0.9rem;
font-weight: 700;
padding: 12px 24px;
border-radius: var(--r-md);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
.promo-apply:hover {
background: var(--gold-light);
}
.promo-feedback {
font-size: 0.86rem;
font-weight: 600;
padding: 10px 16px;
border-radius: var(--r-sm);
width: 100%;
max-width: 480px;
text-align: center;
}
.promo-feedback.feedback-success {
background: rgba(74, 119, 82, 0.18);
color: #a8d4a8;
border: 1px solid rgba(74, 119, 82, 0.4);
}
.promo-feedback.feedback-error {
background: rgba(179, 66, 50, 0.15);
color: #e8a090;
border: 1px solid rgba(179, 66, 50, 0.35);
}
/* ── Footer ── */
.foot {
background: var(--navy-d);
color: rgba(251, 248, 242, 0.5);
text-align: center;
padding: 22px 40px;
font-size: 0.8rem;
}
.foot a {
color: rgba(251, 248, 242, 0.6);
text-decoration: none;
}
.foot a:hover {
color: var(--gold-light);
}
/* ── Toast ── */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: var(--navy-d);
color: var(--bone);
padding: 12px 24px;
border-radius: 999px;
font-size: 0.88rem;
font-weight: 600;
box-shadow: var(--shadow-2);
z-index: 50;
white-space: nowrap;
}
/* ── Responsive ── */
@media (max-width: 960px) {
.offers-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 720px) {
.nav-links {
display: none;
}
.nav {
padding: 16px 20px;
}
.hero {
padding: 120px 20px 60px;
}
.filters-inner {
padding: 12px 20px;
gap: 8px;
}
.filters-label {
display: none;
}
.offers-section {
padding: 40px 20px 60px;
}
.offers-grid {
grid-template-columns: 1fr;
}
.promo-section {
padding: 32px 24px;
}
.promo-form {
flex-direction: column;
}
.promo-apply {
width: 100%;
}
}
@media (max-width: 560px) {
.results-count {
display: none;
}
.card-foot {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.btn-book {
width: 100%;
text-align: center;
}
}// ── Toast helper ─────────────────────────────────────────────────────────────
const toast = document.getElementById("toast");
function showToast(msg) {
toast.textContent = msg;
toast.hidden = false;
clearTimeout(showToast._t);
showToast._t = setTimeout(() => (toast.hidden = true), 2200);
}
// ── Offer filter ──────────────────────────────────────────────────────────────
const filterBtns = document.querySelectorAll(".filter");
const cards = document.querySelectorAll(".offer-card");
const resultsCount = document.getElementById("resultsCount");
function applyFilter(cat) {
let visible = 0;
cards.forEach((card) => {
const match = cat === "all" || card.dataset.cat === cat;
card.hidden = !match;
if (match) visible++;
});
resultsCount.textContent = `${visible} ${visible === 1 ? "offer" : "offers"}`;
}
filterBtns.forEach((btn) => {
btn.addEventListener("click", () => {
filterBtns.forEach((b) => b.classList.remove("active"));
btn.classList.add("active");
applyFilter(btn.dataset.cat);
});
});
// ── Book CTA buttons ──────────────────────────────────────────────────────────
document.querySelectorAll(".btn-book").forEach((btn) => {
btn.addEventListener("click", () => {
const offerName = btn.dataset.offer;
showToast(`Redirecting to booking — ${offerName}…`);
});
});
// ── Promo code validator ──────────────────────────────────────────────────────
const VALID_CODES = {
AURELIA10: "10% discount applied — code AURELIA10 is valid ✓",
SUMMER26: "Summer 2026 discount applied — code SUMMER26 is valid ✓",
};
const promoInput = document.getElementById("promoInput");
const promoApply = document.getElementById("promoApply");
const promoFeedback = document.getElementById("promoFeedback");
// Reset feedback state on input change
promoInput.addEventListener("input", () => {
promoInput.classList.remove("is-success", "is-error");
promoFeedback.hidden = true;
promoFeedback.className = "promo-feedback";
});
promoApply.addEventListener("click", () => {
const code = promoInput.value.trim().toUpperCase();
if (!code) {
showToast("Please enter a promo code.");
promoInput.focus();
return;
}
if (VALID_CODES[code]) {
promoInput.classList.add("is-success");
promoFeedback.textContent = VALID_CODES[code];
promoFeedback.className = "promo-feedback feedback-success";
promoFeedback.hidden = false;
showToast("Promo code applied successfully!");
} else {
promoInput.classList.add("is-error");
promoFeedback.textContent = `"${code}" is not a valid promo code. Please check and try again.`;
promoFeedback.className = "promo-feedback feedback-error";
promoFeedback.hidden = false;
showToast("Invalid promo code — please try again.");
}
});
// Allow pressing Enter in promo field
promoInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") promoApply.click();
});
// ── Init ──────────────────────────────────────────────────────────────────────
applyFilter("all");<!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>Special Offers · Aurelia Hotels</title>
</head>
<body>
<!-- ── Nav ── -->
<header class="nav">
<a class="brand" href="#">
<span class="brand-mark">A</span>
<span class="brand-name">Aurelia <em>Hotels</em></span>
</a>
<nav class="nav-links">
<a href="#">Rooms</a>
<a href="#">Amenities</a>
<a href="#" class="active">Offers</a>
<a href="#">Contact</a>
</nav>
<div class="nav-actions">
<a class="nav-link" href="#">Sign in</a>
<button class="nav-cta">My booking</button>
</div>
</header>
<!-- ── Hero ── -->
<section class="hero">
<div class="hero-inner">
<p class="eyebrow">Exclusive rates · Direct booking only</p>
<h1>Special Offers<br />& Packages</h1>
<p class="lede">
Curated deals crafted for every occasion — from a spontaneous city escape to a
deeply romantic retreat. Book direct for our best available price.
</p>
</div>
</section>
<!-- ── Filters ── -->
<section class="filters-bar">
<div class="filters-inner">
<span class="filters-label">Filter by</span>
<div class="filters" id="filters" role="group" aria-label="Offer categories">
<button class="filter active" data-cat="all">All offers</button>
<button class="filter" data-cat="stays">Stays</button>
<button class="filter" data-cat="spa">Spa</button>
<button class="filter" data-cat="dining">Dining</button>
<button class="filter" data-cat="seasonal">Seasonal</button>
</div>
<span class="results-count" id="resultsCount">5 offers</span>
</div>
</section>
<!-- ── Offers grid ── -->
<main class="offers-section">
<div class="offers-grid" id="offersGrid">
<!-- 3rd Night Free -->
<article class="offer-card" data-cat="stays" data-slug="third-night-free">
<div class="card-img" data-theme="navy">
<span class="card-badge badge-gold">3rd Night Free</span>
<div class="card-img-inner"></div>
</div>
<div class="card-body">
<div class="card-meta">
<span class="cat-tag">Stays</span>
<span class="validity">Valid 9–30 Jun 2026</span>
</div>
<h3>Stay 2, Get the 3rd Night on Us</h3>
<p class="card-desc">Book a minimum of two consecutive nights in any Deluxe or Suite room and enjoy your third night completely complimentary.</p>
<ul class="conditions">
<li>Min. 2 nights required</li>
<li>Deluxe & Suite categories only</li>
<li>Cannot be combined with other offers</li>
</ul>
<div class="card-foot">
<div class="from-price">
<span class="from-label">From</span>
<span class="price">€184</span>
<span class="per-night">/ night</span>
</div>
<button class="btn-book" data-offer="Stay 2, Get the 3rd Night on Us">Book this offer</button>
</div>
</div>
</article>
<!-- Romance Package -->
<article class="offer-card" data-cat="stays" data-slug="romance-package">
<div class="card-img" data-theme="rose">
<span class="card-badge badge-rose">Romance</span>
<div class="card-img-inner"></div>
</div>
<div class="card-body">
<div class="card-meta">
<span class="cat-tag">Stays</span>
<span class="validity">Valid all Jun 2026</span>
</div>
<h3>Romance Package</h3>
<p class="card-desc">An intimate escape for two — Junior Suite with champagne on arrival, in-room rose petals, and a couple's candlelit dinner at Oria restaurant.</p>
<ul class="conditions">
<li>2-night minimum stay</li>
<li>Junior Suite & above</li>
<li>Dinner reservation required</li>
</ul>
<div class="card-foot">
<div class="from-price">
<span class="from-label">From</span>
<span class="price">€396</span>
<span class="per-night">/ package</span>
</div>
<button class="btn-book" data-offer="Romance Package">Book this offer</button>
</div>
</div>
</article>
<!-- Spa Escape -->
<article class="offer-card" data-cat="spa" data-slug="spa-escape">
<div class="card-img" data-theme="teal">
<span class="card-badge badge-teal">Spa & Wellness</span>
<div class="card-img-inner"></div>
</div>
<div class="card-body">
<div class="card-meta">
<span class="cat-tag">Spa</span>
<span class="validity">Valid 9–22 Jun 2026</span>
</div>
<h3>Spa Escape Weekend</h3>
<p class="card-desc">Two nights in a Deluxe room with full access to the Aurelia Thermal Spa, a 60-minute signature massage per guest, and daily breakfast included.</p>
<ul class="conditions">
<li>Fri–Sun arrivals only</li>
<li>Breakfast included</li>
<li>Massage booked on arrival</li>
</ul>
<div class="card-foot">
<div class="from-price">
<span class="from-label">From</span>
<span class="price">€468</span>
<span class="per-night">/ package</span>
</div>
<button class="btn-book" data-offer="Spa Escape Weekend">Book this offer</button>
</div>
</div>
</article>
<!-- Early Bird -->
<article class="offer-card" data-cat="seasonal" data-slug="early-bird">
<div class="card-img" data-theme="gold">
<span class="card-badge badge-gold">−20%</span>
<div class="card-img-inner"></div>
</div>
<div class="card-body">
<div class="card-meta">
<span class="cat-tag">Seasonal</span>
<span class="validity">Book by 10 Jun 2026</span>
</div>
<h3>Early Bird −20%</h3>
<p class="card-desc">Save 20% on your summer stay when you book at least 30 days in advance. All room categories included — the earlier you book, the more you save.</p>
<ul class="conditions">
<li>Non-refundable rate</li>
<li>30-day advance purchase</li>
<li>All room types eligible</li>
</ul>
<div class="card-foot">
<div class="from-price">
<span class="from-label">From</span>
<span class="price">€147</span>
<span class="per-night">/ night</span>
</div>
<button class="btn-book" data-offer="Early Bird −20%">Book this offer</button>
</div>
</div>
</article>
<!-- Family Stay -->
<article class="offer-card" data-cat="stays" data-slug="family-stay">
<div class="card-img" data-theme="green">
<span class="card-badge badge-green">Family</span>
<div class="card-img-inner"></div>
</div>
<div class="card-body">
<div class="card-meta">
<span class="cat-tag">Stays</span>
<span class="validity">Valid Jun–Aug 2026</span>
</div>
<h3>Family Stay Package</h3>
<p class="card-desc">Kids stay and eat free. Two connecting Deluxe rooms, daily buffet breakfast for the whole family, and complimentary kids' activity programme.</p>
<ul class="conditions">
<li>Children up to 12 years</li>
<li>Min. 2-night stay</li>
<li>Max. 2 children per booking</li>
</ul>
<div class="card-foot">
<div class="from-price">
<span class="from-label">From</span>
<span class="price">€312</span>
<span class="per-night">/ night</span>
</div>
<button class="btn-book" data-offer="Family Stay Package">Book this offer</button>
</div>
</div>
</article>
</div><!-- /offers-grid -->
<!-- ── Promo code ── -->
<div class="promo-section">
<div class="promo-inner">
<div class="promo-copy">
<h2>Have a promo code?</h2>
<p>Enter your exclusive code to unlock an additional discount on any offer above.</p>
</div>
<div class="promo-form" id="promoForm">
<input
type="text"
id="promoInput"
class="promo-input"
placeholder="e.g. AURELIA10"
maxlength="20"
autocomplete="off"
spellcheck="false"
/>
<button class="promo-apply" id="promoApply">Apply code</button>
</div>
<div class="promo-feedback" id="promoFeedback" hidden></div>
</div>
</div>
</main>
<!-- ── Footer strip ── -->
<footer class="foot">
<p>© 2026 Aurelia Hotels Group · <a href="#">Terms</a> · <a href="#">Privacy</a></p>
</footer>
<div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Special Offers & Packages
A full-screen marketing page for Aurelia Hotels’ promotional offers. A hero section with headline and tagline leads into a filter bar (Stays · Spa · Dining · Seasonal) that narrows a five-card grid — 3rd Night Free, Romance Package, Spa Escape, Early Bird −20%, and Family Stay. Each card carries a CSS-gradient visual, a coloured discount badge, short description, booking conditions, a from-price, and a “Book this offer” button. A promo-code input below the grid validates the code AURELIA10 (showing applied/invalid feedback with a success or error state), and every CTA action triggers a toast notification.