Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
189 lines (184 loc) · 20.7 KB
/
Copy pathindex.html
File metadata and controls
189 lines (184 loc) · 20.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Hotel and Resort Website Template (HTML) | Casa Palmera</title>
<meta name="description" content="Free hotel and resort website template in one editable file. Date and guest picker, rooms that show the total for your stay, amenities and a booking summary.">
<meta name="keywords" content="hotel website template, resort HTML template free, hotel booking website template, boutique hotel website, free HTML template, one page website template">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/">
<meta name="theme-color" content="#12355B">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Free HTML Templates">
<meta property="og:title" content="Free Hotel and Resort Website Template (HTML)">
<meta property="og:description" content="Free hotel and resort website template in one editable file. Date and guest picker, rooms that show the total for your stay, amenities and a booking summary.">
<meta property="og:url" content="https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/">
<meta property="og:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/screenshot.png"><meta property="og:image:alt" content="Free Hotel and Resort Website Template (HTML)">
<meta property="og:image:width" content="1440">
<meta property="og:image:height" content="900">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Hotel and Resort Website Template (HTML)">
<meta name="twitter:description" content="Free hotel and resort website template in one editable file. Date and guest picker, rooms that show the total for your stay, amenities and a booking summary.">
<meta name="twitter:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/screenshot.png">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' fill='%2312355B'/><path d='M32 52V24M32 24c-10-8-18-4-20 2 8-4 14-2 20-2zM32 24c10-8 18-4 20 2-8-4-14-2-20-2zM32 24c-4-10 0-14 6-14-4 4-6 8-6 14z' stroke='%23D9B26F' stroke-width='3' fill='%23D9B26F'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://images.unsplash.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
<!-- Structured data for this template page. When you use the template, replace it with LocalBusiness or Organization schema for your own business (see README). -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebPage",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/#webpage",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/",
"name": "Free Hotel and Resort Website Template (HTML)",
"description": "Free hotel and resort website template in one editable file. Date and guest picker, rooms that show the total for your stay, amenities and a booking summary.",
"inLanguage": "en",
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/screenshot.png"
},
"isPartOf": {
"@type": "WebSite",
"name": "Free HTML Templates",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
"breadcrumb": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/#breadcrumb"
},
"mainEntity": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/#template"
}
},
{
"@type": "CreativeWork",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/#template",
"name": "Free Hotel and Resort Website Template (HTML)",
"description": "Free hotel and resort website template in one editable file. Date and guest picker, rooms that show the total for your stay, amenities and a booking summary.",
"genre": "Website template",
"image": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/screenshot.png",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/",
"license": "https://opensource.org/licenses/MIT",
"isAccessibleForFree": true,
"encodingFormat": "text/html",
"inLanguage": "en",
"keywords": "hotel website template, resort HTML template free, hotel booking website template, boutique hotel website",
"author": {
"@type": "Person",
"name": "mmrahmanbappi",
"url": "https://github.com/mmrahmanbappi"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"downloadUrl": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/index.html"
},
{
"@type": "BreadcrumbList",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Free HTML Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Real Estate & Travel Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Hotel and Resort Template",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/real-estate-travel/hotel-resort/"
}
]
}
]
}
</script>
<style>
:root{--oc:#12355B;--oc2:#0C2640;--sg:#D9B26F;--ps:#F3EDE2;--ink:#1B2533;--gr:#5A6472;--ln:#E4DCCD;--h:"Cinzel",Georgia,serif;--b:"Montserrat",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;font-family:var(--b);font-size:16px;line-height:1.7;color:var(--ink);background:#fff}
img{max-width:100%;height:auto;display:block}a{color:inherit}h1,h2,h3{font-family:var(--h);font-weight:500;margin:0;line-height:1.15}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--sg);padding:8px;z-index:99}
:focus-visible{outline:2px solid var(--sg);outline-offset:3px}
.hero{position:relative;min-height:700px;color:#fff;display:flex;flex-direction:column;background:var(--oc2)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,38,64,.6),rgba(12,38,64,.3) 35%,rgba(12,38,64,.85))}
.nav{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;height:90px}.logo{font-family:var(--h);font-size:24px;font-weight:700;text-decoration:none;letter-spacing:.08em}
.menu{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500}.menu a{text-decoration:none}.menu a:hover{color:var(--sg)}
.burger{display:none;background:none;border:1px solid #fff;color:#fff;width:44px;height:40px;font-size:20px;cursor:pointer}
.hc{position:relative;z-index:3;margin-top:auto;text-align:center;padding-bottom:30px}.hero h1{font-size:clamp(40px,6vw,82px);letter-spacing:.02em}.hero p{font-size:18px;max-width:34em;margin:14px auto 30px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.bk{position:relative;z-index:4;background:#fff;color:var(--ink);display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:0;max-width:960px;margin:0 auto -50px;box-shadow:0 20px 50px rgba(12,38,64,.25);text-align:left}
.bk>div{padding:16px 20px;border-right:1px solid var(--ln);min-width:0}.bk label{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--gr);margin-bottom:4px}.bk input,.bk select{width:100%;font:500 16px var(--b);border:0;padding:4px 0;color:var(--ink);background:#fff}
.bk button{font:600 15px var(--b);background:var(--oc);color:#fff;border:0;padding:0 30px;cursor:pointer;letter-spacing:.06em}
.btn{display:inline-block;background:var(--oc);color:#fff;text-decoration:none;font:600 15px var(--b);padding:14px 26px;border:0;cursor:pointer;letter-spacing:.06em}.btn.g{background:var(--sg);color:var(--ink)}
section{padding:90px 0}.sh{text-align:center;max-width:640px;margin:0 auto 40px}.sh h2{font-size:clamp(32px,4vw,50px);color:var(--oc)}.sh p{color:var(--gr);margin:12px 0 0}
.intro{padding-top:130px}.intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.intro h2{font-size:clamp(30px,3.6vw,44px);color:var(--oc)}.intro p{color:var(--gr)}
.intro .im{display:grid;grid-template-columns:1fr 1fr;gap:14px}.intro .im img{width:100%;aspect-ratio:3/4;object-fit:cover}.intro .im img:last-child{margin-top:40px}
.rooms{background:var(--ps)}.stay{text-align:center;color:var(--gr);margin:-20px 0 30px;font-weight:500}
.rm{display:grid;grid-template-columns:1fr 1.2fr auto;gap:30px;align-items:center;background:#fff;margin-bottom:18px}
.rm img{width:100%;height:100%;min-height:220px;object-fit:cover}.rm .c{padding:24px 0}.rm h3{font-size:26px;color:var(--oc)}.rm p{color:var(--gr);margin:8px 0 12px}
.rm ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--gr)}.rm ul li:before{content:"· ";color:var(--sg);font-weight:700}
.rm .pr{padding:24px 28px;text-align:right;border-left:1px solid var(--ln);min-width:220px}.rm .pr b{display:block;font-family:var(--h);font-size:30px;color:var(--oc)}.rm .pr small{display:block;color:var(--gr);font-size:13px}.rm .pr .tot{font-weight:600;margin:10px 0 14px;font-size:15px}
.rm .pr button{font:600 14px var(--b);background:var(--oc);color:#fff;border:0;padding:11px 18px;cursor:pointer;letter-spacing:.05em}.rm .pr button[aria-pressed=true]{background:var(--sg);color:var(--ink)}
.rm.full .pr button{background:#C9CED6;cursor:not-allowed}
.sum{background:var(--oc);color:#fff;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}.sum b{font-family:var(--h);font-size:28px;color:var(--sg);font-weight:500}
.am{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}.am div{text-align:center}.am svg{margin:0 auto 12px}.am h3{font-size:19px;color:var(--oc)}.am p{color:var(--gr);font-size:15px;margin:6px 0 0}
.gal{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0}.gal img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}.gal img:first-child{aspect-ratio:2/1}
.msg{visibility:hidden;font-weight:600;margin:10px 0 0}.msg.on{visibility:visible}
footer{background:var(--oc2);color:#AFBCCC;padding:34px 0;font-size:14px}footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media (max-width:980px){.bk{grid-template-columns:1fr 1fr;margin:0 24px -50px}.bk button{grid-column:1/-1;padding:14px}.intro .wrap{grid-template-columns:1fr}.rm{grid-template-columns:1fr}.rm .c{padding:0 24px}.rm .pr{border-left:0;border-top:1px solid var(--ln);text-align:left}.am{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.burger{display:block}.menu{display:none;position:absolute;top:90px;left:0;right:0;background:var(--oc2);flex-direction:column;padding:18px 24px;z-index:30}.menu.open{display:flex}.bk{grid-template-columns:1fr}.bk>div{border-right:0;border-bottom:1px solid var(--ln)}.intro{padding-top:200px}.gal{grid-template-columns:1fr 1fr}.gal img:first-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<!-- Template notice bar: delete this block before you publish your own site -->
<div id="template-bar" style="background:#111;color:#fff;font:500 14px/1.4 system-ui,sans-serif;text-align:center;padding:9px 16px">Free HTML template. <a href="index.html" download="hotel-resort.html" style="color:#FFD166;font-weight:700">Download this template (free)</a> | <a href="https://mmrahmanbappi.github.io/100-free-html-templates/" style="color:#fff">See all free templates</a></div>
<main id="main">
<section class="hero" style="padding:0" aria-labelledby="h1"><img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?w=2000&q=75&auto=format&fit=crop" alt="" width="2000" height="1333" fetchpriority="high">
<header class="wrap nav" style="width:100%"><a href="#" class="logo">CASA PALMERA</a><nav aria-label="Main"><ul class="menu" id="menu"><li><a href="#rooms">Rooms</a></li><li><a href="#amenities">Amenities</a></li><li><a href="#gallery">Gallery</a></li></ul></nav><button class="burger" aria-label="Open menu" aria-expanded="false" aria-controls="menu">☰</button></header>
<div class="wrap hc"><h1 id="h1">Slow mornings by the sea</h1><p>A 36-room resort on the Pacific coast of Costa Rica, with two pools, a quiet beach and breakfast served until noon.</p>
<form class="bk" id="bkf" aria-label="Check availability"><div><label for="ci">Check in</label><input id="ci" type="date"></div><div><label for="co">Check out</label><input id="co" type="date"></div><div><label for="gu">Guests</label><select id="gu"><option value="1">1 adult</option><option value="2" selected>2 adults</option><option value="3">2 adults, 1 child</option><option value="4">2 adults, 2 children</option></select></div><button type="submit">Check rooms</button></form></div></section>
<section class="intro" aria-labelledby="i1"><div class="wrap"><div><h2 id="i1">Barefoot, but properly looked after</h2><p>Casa Palmera sits between the jungle and a long, calm beach near Nosara. Rooms open onto gardens or the ocean, the kitchen cooks with fish caught that morning, and there's always a hammock free.</p><p>We're 90 minutes from Liberia airport and happy to arrange your transfer, surf lessons or a day of doing nothing at all.</p></div>
<div class="im"><img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?w=600&q=75&auto=format&fit=crop" alt="Wooden lodge with loungers beside a pool" width="600" height="800" loading="lazy"><img src="https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=600&q=75&auto=format&fit=crop" alt="Bedroom with a large bed and tall windows" width="600" height="800" loading="lazy"></div></div></section>
<section class="rooms" id="rooms" aria-labelledby="r1"><div class="wrap"><div class="sh"><h2 id="r1">Rooms and suites</h2><p>Every room has air conditioning, a rain shower, fast Wi-Fi and breakfast included.</p></div><p class="stay" id="stay" aria-live="polite"></p><div id="rl"></div>
<div class="sum" aria-live="polite"><div><span id="ss">Choose a room to see your total.</span><br><b id="st"></b></div><button class="btn g" type="button" id="bb">Request booking</button></div><p class="msg" id="msg" role="status"></p></div></section>
<section id="amenities" aria-labelledby="a1"><div class="wrap"><div class="sh"><h2 id="a1">At the resort</h2></div>
<div class="am"><div><svg width="44" height="44" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 18c3 0 3-2 6-2s3 2 6 2 3-2 6-2M2 14c3 0 3-2 6-2s3 2 6 2 3-2 6-2" stroke="#12355B" stroke-width="1.6" fill="none"/></svg><h3>Two pools</h3><p>An adults-only infinity pool and a shallow family pool.</p></div><div><svg width="44" height="44" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4" fill="none" stroke="#12355B" stroke-width="1.6"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2" stroke="#12355B" stroke-width="1.6"/></svg><h3>Beach club</h3><p>Loungers, towels and cold coconuts, 50 steps from your room.</p></div><div><svg width="44" height="44" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3v8a3 3 0 0 0 6 0V3M9 3v18M16 3c-2 3-2 7 0 9v9" stroke="#12355B" stroke-width="1.6" fill="none"/></svg><h3>Restaurant</h3><p>Costa Rican and seafood dishes, with a sunset bar at 5pm.</p></div><div><svg width="44" height="44" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20c4-8 12-8 16 0M8 10a4 4 0 1 1 8 0" stroke="#12355B" stroke-width="1.6" fill="none"/></svg><h3>Yoga and surf</h3><p>Daily yoga at 7am and surf lessons for all levels.</p></div></div></div></section>
<div class="gal" id="gallery"><img src="https://images.unsplash.com/photo-1571896349842-33c89424de2d?w=1200&q=75&auto=format&fit=crop" alt="Resort pool lit up at dusk with villas behind" width="1200" height="600" loading="lazy"><img src="https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=600&q=75&auto=format&fit=crop" alt="Palm trees reflected in a pool at sunset" width="600" height="600" loading="lazy"><img src="https://images.unsplash.com/photo-1445019980597-93fa8acb246c?w=600&q=75&auto=format&fit=crop" alt="Wooden deck looking over hills at sunrise" width="600" height="600" loading="lazy"></div>
</main>
<footer><div class="wrap"><p>© <span id="yr"></span> Casa Palmera Resort, Playa Guiones, Nosara, Costa Rica. +506 5550 1832</p><p><a href="https://unsplash.com">Photos: Unsplash</a> | <a href="https://mmrahmanbappi.github.io/100-free-html-templates/">More free templates</a></p></div></footer>
<script>
(()=>{const $=id=>document.getElementById(id);const U=i=>`https://images.unsplash.com/photo-${i}?w=700&q=75&auto=format&fit=crop`;const f=n=>'$'+Math.round(n).toLocaleString('en-US');
const R=[["Garden room","Ground floor room with a private terrace facing the tropical garden.",2,189,["King or twin beds","32 m²","Garden terrace"],"1582719478250-c89cae4dc85b","Bright bedroom with a large bed"],["Ocean view room","Upstairs room with a balcony and hammock looking out to sea.",2,249,["King bed","36 m²","Balcony with hammock"],"1566073771259-6a8506099945","Lodge with loungers by a pool"],["Family casita","Two bedrooms and a small kitchen, a short walk from the family pool.",4,329,["King plus two singles","58 m²","Kitchenette"],"1571896349842-33c89424de2d","Villas around a lit pool at dusk"],["Pool suite","Our best room, with its own plunge pool and an outdoor shower.",2,419,["King bed","64 m²","Private plunge pool"],"1551882547-ff40c63fe5fa","Palm trees reflected in a pool"]];
let pick=-1;const d0=new Date(Date.now()+30*864e5),d1=new Date(Date.now()+35*864e5);$('ci').value=d0.toISOString().slice(0,10);$('co').value=d1.toISOString().slice(0,10);$('ci').min=new Date().toISOString().slice(0,10);
function nights(){const n=Math.round((new Date($('co').value)-new Date($('ci').value))/864e5);return n>0?n:0}
function draw(){const n=nights(),g=+$('gu').value;$('stay').textContent=n?`${n} night${n>1?'s':''}, ${$('gu').selectedOptions[0].text}. Prices include taxes.`:'Check-out must be after check-in.';
$('rl').innerHTML=R.map((r,i)=>{const full=r[2]<g;return`<article class="rm${full?' full':''}"><img src="${U(r[5])}" alt="${r[6]}" width="700" height="440" loading="lazy"><div class="c"><h3>${r[0]}</h3><p>${r[1]}</p><ul>${r[4].map(x=>`<li>${x}</li>`).join('')}<li>Sleeps ${r[2]}</li></ul></div><div class="pr"><b>${f(r[3])}</b><small>per night</small><div class="tot">${n?f(r[3]*n)+' for '+n+' night'+(n>1?'s':''):'Choose dates'}</div><button type="button" data-i="${i}" aria-pressed="${i===pick}" ${full?'disabled':''}>${full?'Too small for your group':i===pick?'Selected ✓':'Select room'}</button></div></article>`}).join('');
if(pick>-1&&R[pick][2]<g)pick=-1;const r=R[pick];$('ss').textContent=r&&n?`${r[0]}, ${n} night${n>1?'s':''}`:'Choose a room to see your total.';$('st').textContent=r&&n?f(r[3]*n):''}
$('rl').onclick=e=>{const b=e.target.closest('button');if(!b||b.disabled)return;pick=+b.dataset.i;draw()};
$('bkf').addEventListener('change',()=>{if(new Date($('co').value)<=new Date($('ci').value)){const d=new Date($('ci').value);d.setDate(d.getDate()+1);$('co').value=d.toISOString().slice(0,10)}draw()});
$('bkf').onsubmit=e=>{e.preventDefault();draw();$('rooms').scrollIntoView({behavior:matchMedia('(prefers-reduced-motion: reduce)').matches?'auto':'smooth'})};
$('bb').onclick=()=>{const m=$('msg');m.textContent=pick>-1?`Thank you. Your ${R[pick][0].toLowerCase()} from ${$('ci').value} to ${$('co').value} is on hold. We'll email you to confirm within a few hours.`:'Please select a room first.';m.classList.add('on')};draw();
})();
</script>
<script>
(()=>{const b=document.querySelector('.burger'),m=document.getElementById('menu'),y=document.getElementById('yr');
if(b&&m){b.addEventListener('click',()=>{const o=m.classList.toggle('open');b.setAttribute('aria-expanded',o)});
m.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{m.classList.remove('open');b.setAttribute('aria-expanded',false)}))}
if(y)y.textContent=new Date().getFullYear()})();
</script>
</body>
</html>