页面 中等
Beach Resort Landing
A sun-soaked single-page landing for a beach resort — teal, sand, and coral palette with Poppins typography. Features a panoramic hero with reservation widget, rooms/experiences section, story block, and hours/location with a CSS map. Interactive nights calculator, sticky nav on scroll, and form validation toast.
在 Lab 中打开
MCP
html css vanilla-js
目标: JS HTML
代码
/* ── Beach Resort palette — teal · sand · coral ─────────────────────────── */
:root {
--teal: #0e7c7b;
--teal-light: #2aa9a8;
--teal-d: #085e5d;
--teal-pale: #e0f3f3;
--sand: #f7f4ef;
--sand-2: #ece7dc;
--sand-3: #ddd7cc;
--coral: #e8624a;
--coral-light: #f07f6a;
--coral-d: #c44d37;
--ocean: #1a6b8a;
--ocean-deep: #0d4a63;
--ink: #1a2326;
--ink-2: #2e3d44;
--stone: #6e7e84;
--line: rgba(26, 35, 38, 0.1);
--line-strong: rgba(26, 35, 38, 0.18);
--font-body: "Poppins", system-ui, sans-serif;
--r-sm: 8px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
--shadow-soft: 0 4px 24px rgba(14, 124, 123, 0.1);
--shadow-deep: 0 16px 48px rgba(26, 35, 38, 0.16);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--sand);
color: var(--ink);
-webkit-font-smoothing: antialiased;
font-weight: 400;
line-height: 1.6;
}
a {
color: inherit;
text-decoration: none;
}
p + p {
margin-top: 0.9em;
}
/* ── Typography helpers ── */
.eyebrow {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--teal);
font-weight: 600;
margin-bottom: 10px;
}
h1,
h2,
h3 {
font-weight: 700;
line-height: 1.2;
}
em {
font-style: italic;
color: var(--coral);
}
/* ── Section base ── */
.section {
padding: 96px 7vw;
}
.section-header {
max-width: 540px;
margin-bottom: 52px;
}
.section-header h2 {
font-size: clamp(2rem, 4vw, 3rem);
margin-top: 8px;
}
.section-header.centered {
max-width: 100%;
text-align: center;
}
/* ── Site Nav ── */
.site-nav {
position: fixed;
top: 0;
inset-inline: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 7vw;
transition: background 0.3s, padding 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
}
.site-nav.scrolled {
background: rgba(10, 70, 80, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 14px 7vw;
box-shadow: var(--shadow-deep);
}
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
color: white;
}
.nav-mark {
width: 38px;
height: 38px;
border-radius: var(--r-sm);
background: var(--coral);
color: white;
display: grid;
place-items: center;
font-weight: 700;
font-size: 0.86rem;
letter-spacing: 0.04em;
}
.nav-name {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.nav-links {
list-style: none;
display: flex;
gap: 28px;
}
.nav-links a {
color: rgba(255, 255, 255, 0.85);
font-size: 0.86rem;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover {
color: white;
}
.nav-cta {
background: var(--coral);
color: white;
font-size: 0.84rem;
font-weight: 600;
padding: 10px 22px;
border-radius: var(--r-xl);
transition: background 0.2s;
}
.nav-cta:hover {
background: var(--coral-light);
}
/* ── Sticky CTA band ── */
.sticky-cta {
position: fixed;
bottom: 0;
inset-inline: 0;
z-index: 100;
background: var(--teal-d);
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 7vw;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 -4px 24px rgba(14, 124, 123, 0.22);
}
.sticky-cta.visible {
transform: translateY(0);
}
.sticky-cta p {
font-size: 0.9rem;
font-weight: 500;
}
.sticky-btn {
background: var(--coral);
color: white;
font-size: 0.86rem;
font-weight: 600;
padding: 10px 24px;
border-radius: var(--r-xl);
transition: background 0.2s;
flex-shrink: 0;
}
.sticky-btn:hover {
background: var(--coral-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(
180deg,
var(--ocean-deep) 0%,
var(--ocean) 35%,
var(--teal) 65%,
#1a8c8b 100%
);
z-index: 0;
}
.hero-bg::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 100% 60% at 50% 100%,
rgba(232, 98, 74, 0.18) 0%,
transparent 60%
), radial-gradient(ellipse 80% 40% at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}
/* Simulated waves/ripples on the hero */
.hero-bg::before {
content: "";
position: absolute;
bottom: 60px;
inset-inline: 0;
height: 200px;
background: repeating-linear-gradient(
180deg,
transparent,
transparent 18px,
rgba(255, 255, 255, 0.04) 18px,
rgba(255, 255, 255, 0.04) 20px
);
border-radius: 50% 50% 0 0 / 20px;
opacity: 0.6;
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 720px;
padding-top: 70px;
}
.hero .eyebrow {
color: var(--teal-pale);
}
.hero-title {
font-size: clamp(2.6rem, 6vw, 5rem);
color: white;
font-weight: 700;
line-height: 1.1;
margin: 10px 0 20px;
letter-spacing: -0.02em;
}
.hero-title em {
color: var(--coral-light);
font-style: italic;
}
.hero-sub {
color: rgba(255, 255, 255, 0.72);
font-size: 1rem;
font-weight: 300;
margin-bottom: 40px;
max-width: 460px;
line-height: 1.7;
}
.hero-wave {
position: absolute;
bottom: -1px;
inset-inline: 0;
z-index: 2;
line-height: 0;
}
.hero-wave svg {
width: 100%;
height: 60px;
display: block;
}
/* ── Widget ── */
.widget {
display: flex;
align-items: stretch;
background: white;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-deep);
max-width: 720px;
}
.widget-field {
flex: 1;
display: flex;
flex-direction: column;
padding: 14px 18px;
min-width: 0;
}
.widget-field label {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--stone);
font-weight: 600;
margin-bottom: 4px;
}
.widget-field input,
.widget-field select {
border: none;
outline: none;
background: transparent;
font-family: var(--font-body);
font-size: 0.88rem;
color: var(--ink);
width: 100%;
cursor: pointer;
}
.widget-sep {
width: 1px;
background: var(--line);
align-self: stretch;
margin: 8px 0;
}
.widget-btn {
background: var(--coral);
color: white;
border: none;
font-family: var(--font-body);
font-size: 0.86rem;
font-weight: 600;
padding: 0 26px;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.widget-btn:hover {
background: var(--coral-d);
}
/* ── Rooms ── */
.rooms {
background: var(--sand);
}
.room-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.room-card {
background: white;
border-radius: var(--r-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.25s, transform 0.25s;
box-shadow: var(--shadow-soft);
}
.room-card:hover {
box-shadow: var(--shadow-deep);
transform: translateY(-6px);
}
.room-card.featured {
box-shadow: 0 0 0 2px var(--coral), var(--shadow-soft);
}
.room-img {
height: 210px;
flex-shrink: 0;
position: relative;
}
.room-img-1 {
background: linear-gradient(145deg, #2a8a5a 0%, #1e7a6a 40%, #0e6060 80%, #1a8c8b 100%);
}
.room-img-2 {
background: linear-gradient(
145deg,
var(--ocean-deep) 0%,
var(--ocean) 40%,
var(--teal) 70%,
#2aa9a8 100%
);
}
.room-img-3 {
background: linear-gradient(
145deg,
#1a3a4a 0%,
var(--ocean-deep) 35%,
var(--ocean) 65%,
var(--teal-light) 100%
);
}
.room-badge {
position: absolute;
top: 12px;
left: 12px;
background: white;
color: var(--teal-d);
font-size: 0.68rem;
font-weight: 700;
padding: 4px 10px;
border-radius: var(--r-xl);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.room-badge.best {
background: var(--coral);
color: white;
}
.room-body {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.room-cat {
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--teal);
font-weight: 600;
}
.room-card h3 {
font-size: 1.3rem;
font-weight: 700;
margin-top: 2px;
color: var(--ink);
}
.room-desc {
font-size: 0.84rem;
color: var(--stone);
line-height: 1.6;
flex: 1;
}
.room-perks {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.room-perks span {
font-size: 0.72rem;
font-weight: 500;
color: var(--ink-2);
background: var(--teal-pale);
padding: 4px 10px;
border-radius: var(--r-xl);
}
.room-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 14px;
}
.room-rate {
font-size: 0.9rem;
font-weight: 700;
color: var(--teal-d);
}
.room-btn {
background: var(--teal);
color: white;
border: none;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 600;
padding: 9px 18px;
border-radius: var(--r-xl);
cursor: pointer;
transition: background 0.2s;
}
.room-btn:hover {
background: var(--teal-d);
}
/* ── Story ── */
.story {
background: var(--sand-2);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.story-img {
height: 520px;
border-radius: var(--r-lg);
background: linear-gradient(
155deg,
var(--ocean-deep) 0%,
var(--ocean) 30%,
var(--teal) 60%,
#2aa9a8 85%,
#e0f3f3 100%
);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-deep);
}
.story-img::before {
content: "~~ ~~~~ ~~ ~~~";
position: absolute;
bottom: 40px;
left: 20px;
right: 20px;
color: rgba(255, 255, 255, 0.4);
font-size: 2rem;
letter-spacing: 8px;
line-height: 1.8;
}
.story-content {
display: flex;
flex-direction: column;
gap: 32px;
}
.story-text h2 {
font-size: clamp(1.9rem, 3vw, 2.7rem);
margin-bottom: 16px;
}
.story-text h2 em {
color: var(--teal);
}
.story-text p {
font-size: 0.92rem;
color: var(--ink-2);
line-height: 1.75;
}
.pull-quote {
background: white;
border-left: 4px solid var(--coral);
border-radius: 0 var(--r-md) var(--r-md) 0;
padding: 20px 22px;
box-shadow: var(--shadow-soft);
}
.pull-quote p {
font-size: 0.92rem;
color: var(--ink);
font-style: italic;
line-height: 1.65;
margin: 0;
}
.pull-quote cite {
display: block;
margin-top: 10px;
font-size: 0.76rem;
color: var(--stone);
font-style: normal;
font-weight: 600;
}
/* ── Visit ── */
.visit {
background: white;
}
.visit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
margin-top: 4px;
}
.hours-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.hours-card {
background: var(--sand);
border-radius: var(--r-md);
padding: 22px 18px;
border: 1px solid var(--line);
}
.hours-icon {
font-size: 1.6rem;
margin-bottom: 10px;
}
.hours-card h3 {
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 6px;
color: var(--ink);
}
.hours-card p {
font-size: 0.8rem;
color: var(--stone);
line-height: 1.55;
margin: 0;
}
.visit-map {
height: 100%;
min-height: 340px;
}
.map-placeholder {
height: 100%;
min-height: 340px;
border-radius: var(--r-md);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.map-water {
position: absolute;
inset: 0;
background: linear-gradient(165deg, var(--teal-pale) 0%, #c8eaea 30%, #a8d8d8 60%, #7cc0c0 100%);
}
.map-shore {
position: absolute;
bottom: 0;
inset-inline: 0;
height: 40%;
background: linear-gradient(180deg, #e8e0d4 0%, var(--sand-3) 100%);
border-radius: 60% 60% 0 0;
}
.map-pin {
width: 24px;
height: 24px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
background: var(--coral);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.map-placeholder > p {
font-size: 0.82rem;
color: var(--ink);
font-weight: 600;
text-align: center;
line-height: 1.5;
z-index: 2;
}
/* ── Reserve ── */
.reserve {
background: linear-gradient(160deg, var(--teal-d) 0%, var(--ocean-deep) 60%, var(--ink) 100%);
padding: 96px 7vw;
}
.reserve-wrap {
max-width: 860px;
margin: 0 auto;
}
.reserve-header {
text-align: center;
margin-bottom: 48px;
}
.reserve-header .eyebrow {
color: var(--teal-pale);
}
.reserve-header h2 {
font-size: clamp(2rem, 3.5vw, 2.8rem);
color: white;
margin: 8px 0 12px;
}
.reserve-sub {
color: rgba(255, 255, 255, 0.65);
font-size: 0.9rem;
max-width: 460px;
margin: 0 auto;
line-height: 1.65;
}
.reserve-form {
background: white;
border-radius: var(--r-lg);
padding: 36px 36px 28px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: var(--shadow-deep);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-row.triple {
grid-template-columns: 1fr 1fr 1fr;
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field.full {
grid-column: 1 / -1;
}
.form-field label {
font-size: 0.7rem;
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.88rem;
color: var(--ink);
background: var(--sand);
outline: none;
transition: border-color 0.2s, background 0.2s;
resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: var(--teal);
background: white;
}
.form-field input.error,
.form-field select.error {
border-color: var(--coral-d);
}
.form-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 4px;
}
.nights-calc {
font-size: 0.84rem;
color: var(--stone);
font-weight: 500;
}
.nights-calc strong {
color: var(--teal-d);
}
.submit-btn {
background: var(--coral);
color: white;
border: none;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 700;
padding: 13px 30px;
border-radius: var(--r-xl);
cursor: pointer;
letter-spacing: 0.02em;
transition: background 0.2s, transform 0.15s;
}
.submit-btn:hover {
background: var(--coral-d);
transform: translateY(-1px);
}
/* ── Footer ── */
.site-footer {
background: var(--ink);
color: rgba(247, 244, 239, 0.55);
text-align: center;
padding: 28px 7vw;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.8rem;
letter-spacing: 0.02em;
}
.footer-brand {
font-size: 1.05rem;
font-weight: 700;
color: white;
letter-spacing: 0.01em;
}
/* ── Toast ── */
.toast {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background: var(--teal-d);
color: white;
padding: 12px 26px;
border-radius: var(--r-xl);
font-size: 0.88rem;
font-weight: 600;
box-shadow: var(--shadow-deep);
white-space: nowrap;
z-index: 999;
border-top: 3px solid var(--coral);
}
/* ── Responsive ── */
@media (max-width: 1100px) {
.story {
grid-template-columns: 1fr;
gap: 48px;
}
.story-img {
height: 320px;
}
}
@media (max-width: 960px) {
.room-grid {
grid-template-columns: 1fr 1fr;
}
.visit-grid {
grid-template-columns: 1fr;
}
.nav-links {
display: none;
}
.form-row.triple {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.section {
padding: 64px 5vw;
}
.room-grid {
grid-template-columns: 1fr;
}
.hours-grid {
grid-template-columns: 1fr 1fr;
}
.widget {
flex-direction: column;
border-radius: var(--r-md);
}
.widget-btn {
border-radius: 0 0 var(--r-md) var(--r-md);
padding: 16px;
}
.widget-sep {
width: auto;
height: 1px;
margin: 0 14px;
}
.form-row,
.form-row.triple {
grid-template-columns: 1fr;
}
.reserve-form {
padding: 24px 20px;
}
.sticky-cta {
flex-direction: column;
gap: 10px;
padding: 12px 5vw;
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 + CTA band ────────────────────────────────────────────────────
const siteNav = document.getElementById("siteNav");
const stickyCta = document.getElementById("stickyCta");
const heroEl = document.getElementById("home");
function onScroll() {
const heroBottom = heroEl.getBoundingClientRect().bottom;
siteNav.classList.toggle("scrolled", window.scrollY > 60);
// Show the sticky CTA band once the hero is fully scrolled past
const show = heroBottom < 0;
stickyCta.classList.toggle("visible", show);
stickyCta.setAttribute("aria-hidden", String(!show));
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll(); // run once on load
// ── Nights calculator helper ─────────────────────────────────────────────────
function calcNights(inVal, outVal) {
if (!inVal || !outVal) return 0;
const nights = Math.round((new Date(outVal) - new Date(inVal)) / 864e5);
return nights > 0 ? nights : 0;
}
function fmtNights(n) {
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 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", () => {
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 · ${fmtNights(n)} from ${wCheckIn.value}`);
});
// ── Room cards ───────────────────────────────────────────────────────────────
document.querySelectorAll(".room-btn").forEach((btn) => {
btn.addEventListener("click", () => {
const room = btn.dataset.room;
showToast(`Opening reservation 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";
// Rate map per room type
const RATES = { "": 180, garden: 180, ocean: 340, cliff: 680 };
function updateNightsCalc() {
const n = calcNights(rIn.value, rOut.value);
const roomType = document.getElementById("rRoom").value;
const rate = RATES[roomType] || 180;
if (n > 0) {
const total = n * rate;
nightsCalc.innerHTML = `<strong>${fmtNights(n)}</strong> · from €${total.toLocaleString()} (direct −10%)`;
} 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("rRoom").addEventListener("change", updateNightsCalc);
document.getElementById("reserveForm").addEventListener("submit", (e) => {
e.preventDefault();
let valid = true;
// Clear errors
[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;
}
if (calcNights(rIn.value, rOut.value) <= 0) {
rIn.classList.add("error");
rOut.classList.add("error");
valid = false;
}
if (!valid) {
showToast("Please complete all required fields.");
return;
}
const firstName = rName.value.trim().split(" ")[0];
const n = calcNights(rIn.value, rOut.value);
showToast(`Booking request sent! See you soon, ${firstName} · ${fmtNights(n)}`);
document.getElementById("reserveForm").reset();
nightsCalc.textContent = "";
});
// ── Smooth scroll ────────────────────────────────────────────────────────────
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=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
/>
<link rel="stylesheet" href="style.css" />
<title>Azul Shores Resort · Algarve</title>
</head>
<body>
<!-- ── Sticky Nav ── -->
<nav class="site-nav" id="siteNav">
<a class="nav-brand" href="#">
<span class="nav-mark">AZ</span>
<span class="nav-name">Azul Shores</span>
</a>
<ul class="nav-links">
<li><a href="#rooms">Rooms</a></li>
<li><a href="#story">About</a></li>
<li><a href="#visit">Find us</a></li>
</ul>
<a class="nav-cta" href="#reserve">Book now</a>
</nav>
<!-- ── Sticky CTA band (appears after hero) ── -->
<div class="sticky-cta" id="stickyCta" aria-hidden="true">
<p>Azul Shores Resort · Algarve, Portugal</p>
<a href="#reserve" class="sticky-btn">Book your stay</a>
</div>
<!-- ── Hero ── -->
<section class="hero" id="home">
<div class="hero-bg"></div>
<div class="hero-inner">
<p class="eyebrow">Algarve · Portugal</p>
<h1 class="hero-title">Where every morning<br />starts with the <em>sea.</em></h1>
<p class="hero-sub">Beachfront villas, three pools, and an ocean horizon that goes on forever.</p>
<!-- 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-sep"></div>
<div class="widget-field">
<label for="wCheckOut">Check-out</label>
<input type="date" id="wCheckOut" />
</div>
<div class="widget-sep"></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>
<option value="4">4 guests</option>
</select>
</div>
<button class="widget-btn" id="widgetSearch">
<span id="widgetNights"></span>Check availability
</button>
</div>
</div>
<!-- Wave divider -->
<div class="hero-wave">
<svg viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0,30 C360,60 1080,0 1440,30 L1440,60 L0,60 Z" fill="#f7f4ef"/>
</svg>
</div>
</section>
<!-- ── Rooms & experiences ── -->
<section class="rooms section" id="rooms">
<header class="section-header">
<p class="eyebrow">Accommodations</p>
<h2>Sun-drenched rooms<br />for every kind of stay.</h2>
</header>
<div class="room-grid">
<article class="room-card">
<div class="room-img room-img-1">
<span class="room-badge">Sea view</span>
</div>
<div class="room-body">
<p class="room-cat">Garden</p>
<h3>Garden Bungalow</h3>
<p class="room-desc">A bright 28 m² bungalow surrounded by bougainvillea, with a private terrace and outdoor shower steps from the main pool.</p>
<div class="room-perks">
<span>🌿 Terrace</span>
<span>🏊 Pool access</span>
<span>🌅 Garden view</span>
</div>
<div class="room-footer">
<span class="room-rate">From €180 / night</span>
<button class="room-btn" data-room="Garden Bungalow">Select</button>
</div>
</div>
</article>
<article class="room-card featured">
<div class="room-img room-img-2">
<span class="room-badge best">Best seller</span>
</div>
<div class="room-body">
<p class="room-cat">Beachfront</p>
<h3>Ocean Suite</h3>
<p class="room-desc">A 52 m² suite on the front dune with panoramic ocean views, a plunge pool, and a king bed angled toward the sunrise.</p>
<div class="room-perks">
<span>🌊 Ocean view</span>
<span>🛁 Plunge pool</span>
<span>🍳 Breakfast incl.</span>
</div>
<div class="room-footer">
<span class="room-rate">From €340 / night</span>
<button class="room-btn" data-room="Ocean Suite">Select</button>
</div>
</div>
</article>
<article class="room-card">
<div class="room-img room-img-3">
<span class="room-badge">Exclusive</span>
</div>
<div class="room-body">
<p class="room-cat">Cliff-top</p>
<h3>Cliff Villa</h3>
<p class="room-desc">A stand-alone 80 m² villa perched on the western cliff, with an infinity pool, outdoor dining terrace, and butler service.</p>
<div class="room-perks">
<span>♾️ Infinity pool</span>
<span>🍽️ Butler service</span>
<span>🌅 Sunset views</span>
</div>
<div class="room-footer">
<span class="room-rate">From €680 / night</span>
<button class="room-btn" data-room="Cliff Villa">Select</button>
</div>
</div>
</article>
</div>
</section>
<!-- ── Story / About ── -->
<section class="story section" id="story">
<div class="story-img"></div>
<div class="story-content">
<div class="story-text">
<p class="eyebrow">Our story</p>
<h2>Born from the<br /><em>light</em> of this coast.</h2>
<p>Azul Shores was built by the Costa family in 1998 on a private stretch of Praia da Luz. Two decades later, it remains family-run — and fiercely committed to the unhurried rhythm of this particular piece of coast.</p>
<p>Thirty-two rooms. A restaurant that opens at sunset. A spa carved into the cliff. And a staff-to-guest ratio that means your name will be known by breakfast.</p>
</div>
<blockquote class="pull-quote">
<p>"The kind of place you keep coming back to — not because you have to, but because nowhere else quite feels the same."</p>
<cite>— Ana Ribeiro, guest since 2019</cite>
</blockquote>
</div>
</section>
<!-- ── Visit ── -->
<section class="visit section" id="visit">
<header class="section-header centered">
<p class="eyebrow">Plan your visit</p>
<h2>Hours & Location</h2>
</header>
<div class="visit-grid">
<div class="hours-grid">
<div class="hours-card">
<p class="hours-icon">🏖️</p>
<h3>Beach & Pools</h3>
<p>07:00 – 21:00 daily</p>
</div>
<div class="hours-card">
<p class="hours-icon">🍽️</p>
<h3>Restaurant</h3>
<p>Breakfast 07:30 – 10:30<br />Dinner 19:00 – 22:30</p>
</div>
<div class="hours-card">
<p class="hours-icon">💆</p>
<h3>Spa & Wellness</h3>
<p>09:00 – 20:00 daily<br />Booking advised</p>
</div>
<div class="hours-card">
<p class="hours-icon">🛎️</p>
<h3>Reception</h3>
<p>24 hours · 7 days<br />+351 282 000 100</p>
</div>
</div>
<div class="visit-map">
<div class="map-placeholder">
<div class="map-water"></div>
<div class="map-shore"></div>
<div class="map-pin"></div>
<p>Azul Shores Resort<br />Praia da Luz, Algarve</p>
</div>
</div>
</div>
</section>
<!-- ── Reserve ── -->
<section class="reserve section" id="reserve">
<div class="reserve-wrap">
<div class="reserve-header">
<p class="eyebrow">Reserve your stay</p>
<h2>Book direct & save 10%</h2>
<p class="reserve-sub">Best rate guaranteed when you book directly with us. Free cancellation up to 48h before arrival.</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="Maria Costa" 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 triple">
<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">
<label for="rRoom">Room type</label>
<select id="rRoom">
<option value="">Any available</option>
<option value="garden">Garden Bungalow</option>
<option value="ocean">Ocean Suite</option>
<option value="cliff">Cliff Villa</option>
</select>
</div>
</div>
<div class="form-field full">
<label for="rNotes">Requests or questions</label>
<textarea id="rNotes" rows="3" placeholder="Special occasions, dietary needs, early check-in…"></textarea>
</div>
<div class="form-actions">
<p class="nights-calc" id="nightsCalc"></p>
<button type="submit" class="submit-btn">Reserve now →</button>
</div>
</form>
</div>
</section>
<!-- ── Footer ── -->
<footer class="site-footer">
<p class="footer-brand">Azul Shores Resort</p>
<p>Praia da Luz, Algarve, Portugal · +351 282 000 100</p>
<p>© 2026 Azul Shores · All rights reserved</p>
</footer>
<div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Beach Resort Landing
A breezy, sun-soaked single-page landing for Azul Shores Resort, a beachfront property in the Algarve. The teal-sand-coral palette and Poppins typeface create a panoramic, airy feel throughout. Scroll through a full-height hero with an inline reservation widget that counts nights in real time, three room/experience cards with CSS ocean-gradient imagery, a “Our Story” section with a floating testimonial pull-quote, and a visit block with CSS map placeholder and hours grid. The navigation condenses and gains a backdrop-blur on scroll, and the sticky “Book now” CTA band snaps into view after the hero. Form fields validate on submit and fire toast confirmations.