A baby shower website can be a single page: the date, the place with a map button, a registry link and a few lines of instructions.
People look for a "good / inexpensive baby shower invitation site", but the page does not have to come from one. Have an AI write it and send it as one link.
Here is a page you can copy. It uses no images beyond a small drawing, and no code beyond HTML and CSS. Tap the buttons and open the folded questions.
Live exampletry it here, then copy the code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Baby shower for Baby Hartwell</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0; padding: 16px; background: #eef3ee;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
color: #26332b; line-height: 1.5;
}
.page { max-width: 520px; margin: 0 auto; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 28px rgba(38, 51, 43, .12); }
.hero { background: #dcebdd; padding: 26px 22px 20px; text-align: center; }
.hero svg { display: block; margin: 0 auto 8px; }
.hero .kicker { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #4c6a55; }
.hero h1 { margin: 6px 0 4px; font-size: 28px; line-height: 1.2; }
.hero p { margin: 0; color: #3c5444; }
section { padding: 18px 22px; border-top: 1px solid #e6ece7; }
h2 { margin: 0 0 8px; font-size: 16px; color: #3f6149; }
p { margin: 0 0 8px; }
.when { font-size: 20px; font-weight: 700; margin: 0; }
a { color: #1f5f3a; }
.btn {
display: block; text-align: center; text-decoration: none;
background: #2f6f47; color: #fff; padding: 13px 16px;
border-radius: 10px; font-weight: 700; margin-top: 10px;
}
.btn.alt { background: #fff; color: #2f6f47; border: 2px solid #2f6f47; }
details { border: 1px solid #dfe7e0; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: #f8fbf8; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 8px 0 0; }
.foot { text-align: center; font-size: 13px; color: #5d7064; padding: 14px 22px 20px; }
</style>
</head>
<body>
<main class="page">
<header class="hero">
<!-- inline SVG: moon and stars, no image file needed -->
<svg width="74" height="54" viewBox="0 0 74 54" aria-hidden="true">
<path d="M44 6a22 22 0 1 0 12 38A18 18 0 0 1 44 6z" fill="#f2c96b"/>
<circle cx="12" cy="14" r="2.5" fill="#f2c96b"/>
<circle cx="64" cy="12" r="2" fill="#f2c96b"/>
<circle cx="58" cy="30" r="1.8" fill="#f2c96b"/>
</svg>
<p class="kicker">You are invited to a baby shower</p>
<h1>Dana & Priya are expecting</h1>
<p>Hosted by Aunt Lena</p>
</header>
<section>
<h2>When</h2>
<p class="when"><time datetime="2026-11-14T14:00">Saturday, 14 November 2026</time></p>
<p>2:00 pm to 4:30 pm</p>
</section>
<section>
<h2>Where</h2>
<p>Alder Lane Community Room<br>214 Alder Lane, Fairview</p>
<a class="btn alt" href="https://www.google.com/maps/search/?api=1&query=214%20Alder%20Lane%20Fairview" target="_blank" rel="noopener">Open in Maps</a>
</section>
<section>
<h2>Gifts</h2>
<p>Your company is the gift. If you would like to bring something, we have a list.</p>
<a class="btn" href="https://example.com/hartwell-registry" target="_blank" rel="noopener">See the registry</a>
</section>
<section>
<h2>Please reply by 31 October</h2>
<p>Tell Lena if you are coming and how many of you there will be.</p>
<a class="btn" href="mailto:lena@example.com?subject=Baby%20shower%20RSVP">Reply by email</a>
<a class="btn alt" href="tel:+15555550123">Call or text Lena</a>
</section>
<section>
<h2>Good to know</h2>
<details>
<summary>Where do I park?</summary>
<p>There is free parking behind the building. Use the side door by the garden.</p>
</details>
<details>
<summary>Can I bring my kids?</summary>
<p>Yes. There is a play corner and a quiet room.</p>
</details>
<details>
<summary>Is there food?</summary>
<p>Lunch and drinks are served. Tell Lena about allergies when you reply.</p>
</details>
</section>
<p class="foot">Made for Dana & Priya by Aunt Lena</p>
</main>
</body>
</html>
Everything a guest needs sits in one scroll, in the order they ask for it: when, where, gifts, reply, and the small stuff.
Make it with AI
Keep each part to one or two lines. A guest opens the link once, on a phone, usually while doing something else.
- Date and time. Write the weekday too. The page marks it with the HTML
<time>element, which holds the date in a form a machine can read. - Place and a map button. Typing the address is not enough. A Google Maps search link needs no API key, and one tap opens the map. More in HTML link to a map location.
- Registry link. Paste the address your registry gave you, then test it.
- Reply and reply-by date. An email link and a phone link both work. See HTML link phone number.
- The few instructions. Parking, children, food and allergies. A
<details>element folds each answer away without any JavaScript.
Ask the AI for one file, name these five parts, and give the facts in brackets. Replace every bracket before you send.
Make a one-page baby shower invitation as a single HTML file.
It must work on a phone and use no external images or fonts.
Sections, in this order:
1. Header: "[Parents' names] are expecting", hosted by [host name]
2. When: [weekday, date, start and end time]
3. Where: [venue name, street address], with an "Open in Maps"
button that links to a Google Maps search for the address
4. Gifts: a button "See the registry" linking to [registry link]
5. Reply by [date]: a button that opens an email to [email]
and a button that calls [phone]
6. "Good to know": folding questions about [parking], [children],
[food and allergies]
Use soft [color] colors. Keep the text short and friendly.
Give me only the HTML, from the doctype to the closing html tag.
Then check the result before you paste it anywhere:
- The date, weekday and time match your plan.
- The map button opens the right place.
- The registry button opens the real registry.
- Nothing is left in brackets, and no sample text such as "Lorem ipsum" remains.
- It reads well on a narrow screen. If the text is tiny, ask the AI to add the viewport meta tag.
If anything is wrong, say so in the chat and ask for the full page again.
Send it as a link
Paste the HTML into a NOS document and choose Create share link. HTML to link walks through it.
The result is a normal web page. Anyone with the link can open it in a browser, a phone included, with no account. Guests cannot edit it.
Editing the code later keeps the same link. Change the start time, save, and everyone who opens the link sees the new time.
Anyone with the link can open the page, and NOS has no password setting. Send it only to the people you invite, and think about whether the full home address belongs on the page.
Ways to send a shower invitation
| Way | What the guest does | Fits | Watch for |
|---|---|---|---|
| Details typed in a text | Reads the message | A very small party | Map and registry get buried in the chat |
| Picture or PDF of a card | Opens the attachment | A card to keep | A change means sending a new file |
| HTML file as an attachment | Downloads, then opens it | Rarely the best choice | May open as code or not at all on a phone |
| One link to a page | Taps and reads in the browser | Date, map, registry and instructions together | Anyone with the link can open it |
| QR code on a paper card | Scans the code | Printed invitations | Make sure the link is final before you print |
On the file question, why links beat attachments and opening an HTML file on a phone explain what goes wrong.
For paper cards, QR code link shows how a printed code can point to a page you can still edit.
Invitation to link covers other kinds of invitation, and share wedding details with guests is the same idea for a bigger event.
A page for guests far away
Some guests will join by video. The trouble is that "2 pm" means different things in different cities. This page keeps one start moment and shows it in a few time zones, plus the visitor's own.
Live exampletry it here, then copy the code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Video baby shower</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0; padding: 16px; background: #f1eef7;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
color: #2b2640; line-height: 1.5;
}
.page { max-width: 520px; margin: 0 auto; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 28px rgba(43, 38, 64, .12); }
header { background: #e2dcf2; padding: 24px 22px 18px; text-align: center; }
header p { margin: 0; }
.kicker { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #5a4f86; }
h1 { margin: 6px 0 4px; font-size: 26px; line-height: 1.2; }
section { padding: 18px 22px; border-top: 1px solid #ece8f4; }
h2 { margin: 0 0 8px; font-size: 16px; color: #5a4f86; }
p { margin: 0 0 8px; }
ul.times { list-style: none; margin: 0; padding: 0; }
ul.times li {
display: flex; justify-content: space-between; gap: 12px;
padding: 9px 0; border-bottom: 1px solid #efecf6;
}
ul.times li:last-child { border-bottom: 0; }
ul.times .city { font-weight: 600; }
ul.times .mine { background: #f6f3fc; margin: 0 -10px; padding: 9px 10px; border-radius: 8px; }
.btn {
display: block; text-align: center; text-decoration: none;
background: #5a4f86; color: #fff; padding: 13px 16px;
border-radius: 10px; font-weight: 700; margin-top: 10px;
}
.btn.alt { background: #fff; color: #5a4f86; border: 2px solid #5a4f86; }
ol { margin: 0; padding-left: 20px; }
ol li { margin-bottom: 4px; }
.note { font-size: 13px; color: #6a6485; }
</style>
</head>
<body>
<main class="page">
<header>
<p class="kicker">Baby shower by video call</p>
<h1>Baby Hartwell is almost here</h1>
<p>Join from wherever you are</p>
</header>
<section>
<h2>What time is it for you?</h2>
<ul class="times" id="times"></ul>
<p class="note">The call starts at one moment everywhere. Only the clock on the wall differs.</p>
</section>
<section>
<h2>Join the call</h2>
<p>Open the link a few minutes early. No sign-up is needed on our side.</p>
<a class="btn" href="https://example.com/hartwell-call" target="_blank" rel="noopener">Join the video call</a>
<a class="btn alt" href="https://example.com/hartwell-registry" target="_blank" rel="noopener">See the registry</a>
</section>
<section>
<h2>Before the call</h2>
<ol>
<li>Find one piece of advice for the parents.</li>
<li>Have a drink and a snack nearby.</li>
<li>Send us a photo of your cutest baby picture.</li>
</ol>
</section>
</main>
<script>
// The call starts at one exact moment, written in UTC (the Z at the end).
const start = new Date('2026-11-14T19:00:00Z');
const places = [
['New York', 'America/New_York'],
['London', 'Europe/London'],
['Lagos', 'Africa/Lagos'],
];
function show(zone) {
// Intl turns the same moment into local clock time for any time zone
return new Intl.DateTimeFormat('en-US', {
weekday: 'short', month: 'short', day: 'numeric',
hour: 'numeric', minute: '2-digit', timeZone: zone,
}).format(start);
}
const list = document.getElementById('times');
const rows = places.map(([city, zone]) => [city, show(zone)]);
// the visitor's own device time zone, no zone name needed
rows.unshift(['Your device', show(undefined)]);
rows.forEach(([city, text], i) => {
const li = document.createElement('li');
if (i === 0) li.className = 'mine';
li.innerHTML = '<span class="city"></span><span class="t"></span>';
li.querySelector('.city').textContent = city;
li.querySelector('.t').textContent = text;
list.appendChild(li);
});
</script>
</body>
</html>
The line that matters is the start time. It is written once, in UTC, and the browser converts it for each place. For a calendar entry guests can save, see calendar invite link.
When it does not work
| What you see | Cause | Fix |
|---|---|---|
| The page shows as plain text after pasting | The AI added explanation around the code | Paste only from the doctype line to the closing html tag |
| The map button opens the wrong place | The address in the link differs from the page | Fix the address after "query=" and tap the button yourself |
| The registry button asks for a login | The address you copied may be a private page | Open it in a private window and use the registry's own share option |
| Text is tiny on a phone | No viewport meta tag | Ask the AI to add one |
| Guests have the wrong time | The time was also typed in the message | Keep the time only on the page, or send a short correction |
| The email button does nothing | The device may have no email app set up | Also write the address as text on the page |
Before you send it
Open the link on your own phone, not only on the computer. Tap every button once. Then send the link to one friend and ask what they could not find. That one question shows you what is missing.