Website kits
Hotel stay and area guide page
Hotel stay page with breakfast and dining times, six area guide cards, three packages with inclusions and a dark house rules section.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page that sells the stay rather than the room, and the one guests reread the week before they travel. It opens with the lounge and a short welcome, then breakfast: what is cooked, the serving times, an early option for trains and ferries, and an honest note that you do not serve dinner. The area guide lists six things to do within half an hour, each with a distance or a practical detail such as tide times or closing days, because specific local advice is something a booking site cannot give. Packages follow for guests deciding whether to stay longer, each with a price line, three inclusions and a button, and the house rules close the page so nobody meets them for the first time at check-in. Rewrite the area guide from your own recommendations first. Check opening days and ferry times every season; out-of-date local tips undermine the advice around them.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 16
- Container (grid) × 3
- Container (grid, 3 columns) × 2
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 18
- Heading × 8
- Image × 3
- Icon List × 5
- Icon Box × 6
- Button × 3
Things worth knowing
- The six area guide cards convert to Icon Box widgets with arrow, circle, open circle, star, redo and bullseye icons; swap them in the panel for more literal icons if you like.
- The package cards are plain Containers with a Heading, Text Editors, an Icon List and a bordered Button each, not the Elementor Pro Price Table widget, so they work on the free version of Elementor.
- The breakfast times, the three package lists and the house rules become five Icon List widgets; the rules use circle and times icons for “do” and “do not”.
- The lounge, breakfast and coast path photos become Image widgets with empty slots. Below 780px the grids stack to one column and the house rules move under their heading.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your stay — Calder House</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2b2430;background:#f7f2ea}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Cormorant Garamond',Garamond,Georgia,serif;color:#2b2430;font-weight:600}
h1{font-size:58px;line-height:1.06;letter-spacing:-.01em;margin:0 0 18px}
h2{font-size:42px;line-height:1.12;margin:0 0 14px}
h3{font-size:25px;line-height:1.22;margin:0 0 8px}
p{font-size:17px;line-height:1.75;color:#6b5f62;margin:0 0 16px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8f4a4a;margin:0 0 14px}
.button{display:inline-block;padding:14px 28px;border-radius:3px;background:#8f4a4a;color:#f7f2ea;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.ghost{display:inline-block;padding:13px 24px;border-radius:3px;border:1px solid #2b2430;color:#2b2430;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.photo{width:100%;height:500px;object-fit:cover;display:block;background:#ebe1d3}
.intro{padding:56px 0 80px}
.lead{font-size:18px}
.oat{background:#ebe1d3}
.oat .photo{background:#f7f2ea}
.times{display:flex;flex-direction:column;gap:10px;margin:8px 0 0}
.times > div{display:flex;gap:14px;align-items:center;font-size:16px;color:#2b2430}
.dot{color:#7d8a6e;font-size:10px}
.tick{color:#7d8a6e;font-size:14px}
.head{max-width:680px;margin:0 0 40px}
.guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.place{padding:28px 26px;border:1px solid #ebe1d3;background:#f7f2ea}
.place-icon{display:inline-block;color:#8f4a4a;font-size:20px;line-height:1;margin:0 0 14px}
.place h3{font-size:23px}
.place p{font-size:15px;margin:0}
.band{width:100%;height:420px;object-fit:cover;display:block;margin:0 0 48px;background:#ebe1d3}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.offer{display:flex;flex-direction:column;padding:32px 28px;background:#f7f2ea;border-top:2px solid #8f4a4a}
.offer .price{font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-size:24px;font-weight:600;color:#8f4a4a;margin:0 0 14px}
.offer .desc{font-size:15px}
.includes{display:flex;flex-direction:column;gap:9px;margin:0 0 26px}
.includes > div{display:flex;gap:12px;align-items:center;font-size:15px;color:#2b2430}
.offer .ghost{align-self:flex-start;margin-top:auto}
.dark{background:#2b2430}
.dark h2{color:#f7f2ea}
.dark p{color:#ebe1d3}
.dark .eyebrow{color:#ebe1d3}
.house{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.rules{display:flex;flex-direction:column;gap:14px}
.rules > div{display:flex;gap:14px;align-items:center;font-size:16px;line-height:1.55;color:#f7f2ea;padding:0 0 14px;border-bottom:1px solid #6b5f62}
.mark{color:#7d8a6e;font-size:15px}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.intro{padding:32px 0 56px}
h1{font-size:40px}
h2{font-size:32px}
.split,.house{grid-template-columns:minmax(0,1fr);gap:28px}
.guide,.offers{grid-template-columns:minmax(0,1fr);gap:16px}
.photo{height:300px}
.band{height:240px;margin:0 0 32px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap split">
<div>
<p class="eyebrow">Your stay at Calder House</p>
<h1>Slow mornings, long walks and a fire in the evening</h1>
<p class="lead">We are a small house run by a small team, so most of what makes a stay here is simple: a good breakfast, a lounge to come back to, and honest advice about where to go next.</p>
<p>Below you will find our breakfast hours, the places we send guests, the packages we run through the year and the few house rules we ask everyone to keep.</p>
</div>
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/lounge.jpg" width="1000" height="1250" alt="Guest lounge with a lit fireplace, two worn leather armchairs, a wool rug and floor-to-ceiling bookshelves">
</div>
</section>
<section class="oat" id="breakfast">
<div class="wrap split">
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/breakfast.jpg" width="1600" height="1000" alt="Breakfast table by a sunny window with fresh bread, local butter, a pot of coffee, eggs and a bowl of berries">
<div>
<p class="eyebrow">Breakfast and dining</p>
<h2>Breakfast in, dinner in town</h2>
<p>Breakfast is cooked to order in our own kitchen: farm eggs any way you like, Wrenmouth smoked haddock, buttermilk pancakes, granola we make on Sundays and bread from Ropewalk Lane. Tell us about allergies when you book and we will plan for them.</p>
<p>We do not serve dinner. The old town has a dozen places within ten minutes’ walk, and we will book a table for you on request.</p>
<div class="times">
<div><span class="dot">●</span><span>Breakfast daily 7:30–10:00 am, until 10:30 am on Sundays</span></div>
<div><span class="dot">●</span><span>Early tray breakfast from 6:30 am for ferries and trains</span></div>
<div><span class="dot">●</span><span>Honesty bar in the lounge from noon until late</span></div>
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">Around Wrenmouth</p>
<h2>Six things we tell guests to do</h2>
<p>All of these are within half an hour of the front door, most of them on foot. Ask at the desk for a printed map and today’s tide times.</p>
</div>
<img class="band" src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/coast-path.jpg" width="1600" height="900" alt="Grassy coastal footpath winding along low cliffs above a calm sea under a soft morning sky">
<div class="guide">
<div class="place"><span class="place-icon">→</span><h3>Walk to Sallow Point</h3><p>A four-mile loop on the coast path from the end of our street, with a café at the lighthouse. Allow two and a half hours.</p></div>
<div class="place"><span class="place-icon">●</span><h3>The early fish market</h3><p>Boats unload at the harbor from 6 am on weekdays. Go before breakfast and you will see the morning’s catch sold off the quay.</p></div>
<div class="place"><span class="place-icon">○</span><h3>Kestle Cove beach</h3><p>A sheltered sandy cove, twenty minutes’ walk east. Safe for swimming at mid to high tide; there are no lifeguards.</p></div>
<div class="place"><span class="place-icon">★</span><h3>The Ropewalk galleries</h3><p>Five small galleries and a pottery in the old rope sheds on Ropewalk Lane, open Thursday to Sunday.</p></div>
<div class="place"><span class="place-icon">↻</span><h3>Ferry to Holm Island</h3><p>Twenty-five minutes across the bay, four sailings a day in summer. Seabirds, one pub and no cars.</p></div>
<div class="place"><span class="place-icon">◎</span><h3>Wrenmouth Maritime Museum</h3><p>Ship models, a restored pilot boat and the story of the captains who built houses like ours. Closed Mondays.</p></div>
</div>
</div>
</section>
<section class="oat" id="packages">
<div class="wrap">
<div class="head">
<p class="eyebrow">Packages and offers</p>
<h2>Three ways to stay a little longer</h2>
<p>Available on direct bookings only. Mention the package name in your booking request and we will confirm the price for your dates.</p>
</div>
<div class="offers">
<div class="offer">
<h3>Midweek three nights</h3>
<p class="price">Third night half price</p>
<p class="desc">Arrive Sunday to Tuesday, stay three nights, pay half for the last one. October to April.</p>
<div class="includes">
<div><span class="tick">✓</span><span>Any room type</span></div>
<div><span class="tick">✓</span><span>Breakfast every morning</span></div>
<div><span class="tick">✓</span><span>Noon check-out on the last day</span></div>
</div>
<a class="ghost" href="/contact/#book">Ask about midweek</a>
</div>
<div class="offer">
<h3>Coast path walker</h3>
<p class="price">From $395 for two nights</p>
<p class="desc">For walkers doing the coast path in stages. We move your bags to your next stop.</p>
<div class="includes">
<div><span class="tick">✓</span><span>Two nights in a Garden Double</span></div>
<div><span class="tick">✓</span><span>Packed lunch for both days</span></div>
<div><span class="tick">✓</span><span>Luggage transfer up to 15 miles</span></div>
</div>
<a class="ghost" href="/contact/#book">Ask about the walker</a>
</div>
<div class="offer">
<h3>Winter by the fire</h3>
<p class="price">From $460 for two nights</p>
<p class="desc">November to March, Friday or Saturday arrival, with dinner for two at a restaurant we know well.</p>
<div class="includes">
<div><span class="tick">✓</span><span>Two nights in a Harbor View King</span></div>
<div><span class="tick">✓</span><span>Three-course dinner for two in town</span></div>
<div><span class="tick">✓</span><span>A bottle of wine waiting in the room</span></div>
</div>
<a class="ghost" href="/contact/#book">Ask about winter</a>
</div>
</div>
</div>
</section>
<section class="dark" id="house-rules">
<div class="wrap house">
<div>
<p class="eyebrow">House rules</p>
<h2>A few things we ask of everyone</h2>
<p>Calder House is a shared home for the night, with thin old walls in places. These rules keep it calm for every guest.</p>
</div>
<div class="rules">
<div><span class="mark">●</span><span>Quiet hours are 10:00 pm to 7:30 am, in the rooms and on the stairs</span></div>
<div><span class="mark">✕</span><span>No smoking or vaping anywhere in the house or the garden</span></div>
<div><span class="mark">●</span><span>The front door locks at 11:00 pm; your room key opens it</span></div>
<div><span class="mark">✕</span><span>No parties or visitors in the rooms after 9:00 pm</span></div>
<div><span class="mark">●</span><span>Children over two stay in the Loft Suites only</span></div>
<div><span class="mark">●</span><span>Well-behaved dogs in two Garden Doubles, $25 per stay</span></div>
</div>
</div>
</section>
</body>
</html>
