DEV Community: Segcam spa

The restaurant website that is one HTML file (with the details everyone gets wrong)

Segcam spa — Tue, 14 Jul 2026 02:55:32 +0000

Your client has a restaurant. They need a website. You have two options:

Spin up a Next.js project, install 40 packages, configure Tailwind, deploy to Vercel, and then explain to them why they can't change the phone number themselves.
Send them one HTML file.

I've been doing option 2 for a while now, and I want to show you exactly what it looks like — including the parts people get wrong.

The skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Saffron & Sage — Modern Indian Kitchen</title>
  <meta name="description" content="Modern Indian kitchen in downtown. Fresh spices, open fire, no shortcuts.">
  <style>/* all the CSS */</style>
</head>
<body>
  <!-- nav, hero, menu, gallery, reservation, footer -->
  <script>/* all the JS */</script>
</body>
</html>

Everything else is detail. But the details are where it breaks.

Detail 1: the mobile menu that actually works

This is where most single-file attempts fall apart. People hide the nav under 768px and forget to give it a way back.

.nav-links { display: flex; gap: 28px; }
.burger { display: none; background: none; border: 0; cursor: pointer; }

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid #e5e7eb;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 20px; }
  .burger { display: block; }
}

const burger = document.querySelector('.burger');
const links = document.querySelector('.nav-links');
burger.addEventListener('click', () => links.classList.toggle('open'));
links.addEventListener('click', e => {
  if (e.target.tagName === 'A') links.classList.remove('open');
});

That last listener is the one everyone forgets: without it, the menu stays open after the user taps a link, and the page scrolls behind an open menu. It looks broken, and the client will notice.

Detail 2: images without images

A restaurant page wants photos. But every external image is a request, a layout shift and a thing that can 404. For the sections that are decoration rather than content, use gradients:

.dish {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 55%, #7c2d12 100%);
  display: grid; place-items: center;
  color: #fff8ec; font-weight: 700; letter-spacing: .04em;
}

Real photos of the actual food still go in as real images — but the hero background, the section dividers, the card thumbnails in a "coming soon" state: those are gradients. Your page stays fast and nothing breaks while the client is still "getting the photos ready" (they will take three weeks).

Detail 3: an accordion in nine lines

Every business page needs an FAQ. You don't need a library:

<div class="faq">
  <button class="q" aria-expanded="false">Do you take reservations?</button>
  <div class="a" hidden>Yes — up to 8 people online, larger groups by phone.</div>
</div>

document.querySelectorAll('.q').forEach(q => {
  q.addEventListener('click', () => {
    const open = q.getAttribute('aria-expanded') === 'true';
    q.setAttribute('aria-expanded', String(!open));
    q.nextElementSibling.hidden = open;
  });
});

Note the aria-expanded and the hidden attribute: that's what makes it work for screen readers, and it costs you nothing.

Detail 4: the reservation form that doesn't need a backend

You don't want to run a server for a form. Two honest options:

<!-- 1. mailto: crude but works everywhere -->
<form action="mailto:hello@restaurant.com" method="post" enctype="text/plain">

<!-- 2. a form endpoint (Formspree, Basin, Web3Forms...) -->
<form action="https://formspree.io/f/xxxxxxx" method="POST">

For a client site, use option 2 and put the endpoint in the file. It's one line, no server, and the emails land in their inbox.

What you end up with

One file. Around 600 lines. It loads in under a second, works offline, scores well on Lighthouse without any tuning, and the client can open it in Notepad to fix a typo.

If you want to see the finished version of the exact restaurant page I described, it's here, running live (not a screenshot):

👉 Restaurant demo

And here's a free one you can download and take apart — a coming-soon page with a countdown, no signup required:

👉 Free template

There are 61 of these now, across most of the niches a client will throw at you: segcom.net.

What's the piece you always end up rewriting from scratch?

Build a landing page with zero dependencies: 5 rules from 56 single-file templates

Segcam spa — Tue, 14 Jul 2026 01:28:44 +0000

Most "free HTML template" downloads end the same way: you unzip it, and there's a package.json, a gulpfile, a node_modules you have to install, and a build step you have to run before you can even see the thing. For a page that is 90% text and images.

Here is the same landing page, built the other way: one file, zero dependencies.

The whole thing is this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Your product</title>
  <style>
    /* everything lives here */
  </style>
</head>
<body>
  <!-- your sections -->
  <script>
    // and here
  </script>
</body>
</html>

That's it. No CDN links, no font imports, no bundler. Open it in a browser and it runs — even with the wifi off.

The five rules that keep it clean

I've built 56 templates under this constraint. These are the rules that mattered:

1. Zero external requests. No Google Fonts, no Font Awesome, no jQuery from a CDN. Use font stacks:

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

You lose the custom typeface. You gain a page that renders instantly and never breaks because someone else's CDN is down.

2. Decorate with CSS, not images. Gradients, box-shadow and solid colors replace 90% of background images:

.hero {
  background: linear-gradient(135deg, #0d1117 0%, #161b22 60%, #1a2332 100%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}

No image requests, no layout shift, and the client can recolor the whole page by changing two hex values.

3. Icons as inline SVG primitives. Not <path> — primitives:

<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="9"></circle>
  <line x1="12" y1="8" x2="12" y2="13"></line>
  <circle cx="12" cy="16" r="1" fill="currentColor"></circle>
</svg>

circle, rect, line, polyline, polygon. They weigh almost nothing, they inherit currentColor, and unlike a copy-pasted <path> you can actually read what they do.

4. A mobile menu in six lines. No framework needed:

document.querySelector('.burger').addEventListener('click', function () {
  document.querySelector('.nav-links').classList.toggle('open');
});

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; }
  .burger { display: block; }
}

5. Keep it under ~650 lines. If a landing page doesn't fit in 650 lines, it's not a landing page anymore — it's an app, and you should reach for a real framework.

When this is the wrong tool

I'll be honest about the trade-off, because it's real:

App with routing, auth and state? Use a framework. Don't do this.
Site with 200 pages and a CMS? Use a static site generator.
Team of 6 editing the same page? You want components, not one big file.

But for a landing page, a portfolio, a restaurant menu, a clinic site, a coming-soon page — the toolchain is pure overhead. It costs you build errors, dependency upgrades, and a client who can't change a phone number without calling you.

Take one and try it

Here's a complete coming-soon page built this way — live countdown, email capture, responsive, one file. Free, no signup, no email wall:

👉 Download the free template

If you want to see the approach at scale, there are 56 of them (SaaS, agency, restaurant, clinic, gym, real estate, crypto, esports and more) at segcom.net — every demo is the actual file running in your browser, not a screenshot.

What would you add to the rules list?

I built 42 landing page templates as single HTML files (no npm, no build step)

Segcam spa — Mon, 13 Jul 2026 22:55:37 +0000

I got tired of downloading a "simple landing page template" and finding a 400 MB folder with npm, a build step, a config file and three CSS frameworks I never asked for.

So we built the opposite: templates that are one single HTML file. All the CSS in a <style> tag, all the JS inline. No frameworks, no CDNs, no build step, no dependencies. You open the file, you edit the text, you upload it anywhere. It works offline.

Free one: a coming-soon page

Take it, no signup, no email wall:

👉 Free coming-soon template (live demo + download)

It has a working countdown, an email capture form, feature highlights and social links. Commercial use allowed — just don't resell the template itself.

Why single-file?

Because most landing pages don't need a toolchain. They need to load fast and be easy to change.

Editable by anyone. Your client can change the phone number without calling you.
Deploy anywhere. Cloudflare Pages, Netlify, GitHub Pages, a $3 shared host, an S3 bucket.
Nothing to break. No node_modules, no lockfile, no "works on my machine".
Fast by default. One request for the HTML, zero render-blocking libraries.

The trade-off is real and I won't hide it: if you're building an app with state, routing and a dozen components, a single HTML file is the wrong tool. This is for landing pages, portfolios, restaurant menus, coming-soon pages, clinic sites — the stuff that is 90% content.

What we ended up with

We kept building them for different niches and now there are 42: SaaS, agency, e-commerce, restaurant, gym, real estate, law firm, medical clinic, crypto/Web3, podcast, esports, construction, car dealership, interior design, and more. Every one is a single file, fully responsive, with real copy instead of lorem ipsum.

You can browse the live demos here: segcom.net — the demos are the actual templates running in your browser, not screenshots.

The technical rules we follow

If you want to build your own single-file templates, these are the constraints that kept ours clean:

No external requests, at all. No Google Fonts, no icon CDNs. Font stacks only (-apple-system, Segoe UI, Roboto...).
Decoration with CSS, not images. Gradients, box-shadow and solid colors instead of background images.
Icons as inline SVG primitives or Unicode. Simple shapes (circle, rect, line) — they never break, and they weigh nothing.
Keep it under ~650 lines. If it doesn't fit, the page is doing too much.
Mobile nav must actually work. A hamburger that toggles a class, vanilla JS, 6 lines.

That's it. No magic.

If you grab the free one and it saves you an afternoon, that's a win. If you want the rest, they're at segcom.net — and if you think a niche is missing, tell me in the comments and I'll build it.