DeathM Website Template

Free, MIT. Three static pages, no build step and no backend.

Download it free What it is Ask a question

Putting it online

There is no build step, no Node, no database and no PHP. It is HTML, one stylesheet, one small script and some images. If you can upload files, you can host this.

Unzip the download and upload everything inside template/ into your web root — not the template folder itself, its contents.

Host	What to do
Netlify	Drag the `template` folder onto app.netlify.com/drop. That is the whole process.
Cloudflare Pages	Connect a repo, leave the build command empty, output directory `/`.
GitHub Pages	Works, but ignores `.htaccess`, so `/guides` will not work as a shortcut for `/guides.html`.
cPanel	Upload into `public_html`. Turn on “show hidden files” in your FTP client or `.htaccess` never gets sent.

Do not host it on your FiveM box if you can avoid it. A website taking traffic and a game server holding a hundred connections want different things from a CPU, and the game is the one that loses.

The five things that matter

Do these and it is your website. Everything after this is polish. The habit worth having is search, do not scroll — Ctrl+F for the words you can see on the page.

What	Search for	Where
Server name	`DEATH`	Header, hero and footer — three places per page
Discord invite	`discord.gg/your-invite`	Hero, final CTA, footer, dialog
Your domain	`deathm.example`	`<head>`, `robots.txt`, `sitemap.xml`
Logo	—	Replace `assets/img/logo.webp`
Share image	`og-image.jpg`	Make one at 1200×630 and drop it in `assets/img/`

The name is split so the last part goes red:

index.html

<span class="text-xl font-bold ...">DEATH<span class="text-gta-red">M</span></span>

Split your own wherever you like — LOS <span>SANTOS — or drop the inner span for one flat colour.

The share image is the one people forget. It is what renders when your link is pasted into Discord, and without it they see a bare URL with no picture at all.

Changing the colours

The red is #c62828 and it lives in the compiled stylesheet, not in the HTML. The quick way is an override block in the <head> of each page, after the stylesheet link:

index.html

<style>
  .text-gta-red   { color: #7c3aed !important; }
  .bg-gta-red     { background-color: #7c3aed !important; }
  .border-gta-red { border-color: #7c3aed !important; }
</style>

Ugly, effective, and it needs no tooling. Good enough if you are changing one colour once.

The proper way is one line in build/tailwind.config.js and a recompile — see the stylesheet.

Name	Value	Used for
gta-dark	`#0f0f0f`	Page background
gta-card	`#1a1a1a`	Cards, stats bar, footer
gta-red	`#c62828`	The accent — everything that stands out
gta-red-light	`#d32f2f`	Hover on red buttons
gta-border	`#2a2a2a`	Every border
gta-text	`#e0e0e0`	Body text
gta-muted	`#6b6b6b`	Small print

gta-dark and gta-card are eight points of lightness apart, and every border on the site depends on that gap. Lighten the background without lightening the borders and the whole page turns to mush.

Adding and removing sections

Every section is marked in the markup:

index.html

<!-- ══ ROLES ═══════════════════════════════ -->
<section id="roles" ...>
  ...
</section>

Delete from the comment to the closing </section>, then remove any nav or footer link pointing at its id or you leave a link that scrolls nowhere.

To add a feature card, copy any of the six and change the three bits of text. The grid is md:grid-cols-2 lg:grid-cols-3, so cards reflow on their own — seven leaves one alone on the last row, eight or nine looks tidier.

Several footer links carry data-soon, which opens the “under construction” dialog instead of going anywhere. When you build the real page, give it a real href and delete the attribute. Once none use it, delete the <div id="constructionModal"> block — the script checks whether it exists and skips that half of itself if it does not.

Removing the credit bar

This is the page the bar itself links to. If you arrived from the live demo, note that the demo’s bar is set to point at the download instead — the one in your copy looks like the block below.

There is a thin black bar across the top of every page: our mark, a link back to this site, and on wide screens a note pointing at this page. It is the only thing we ask for in exchange for the template.

You are allowed to remove it. No conditions. Nothing breaks, nothing stops working, and nothing phones home to check. If you would rather not carry an advert on your server’s front page, that is completely reasonable.

It is in three files — index.html, guides.html and 404.html — marked the same way in each. Search for VAULT SCRIPTS CREDIT BAR:

index.html

<!-- ╔═══════════════════════════════════════╗
     ║  VAULT SCRIPTS CREDIT BAR             ║
     ║  ...                                  ║
     ╚═══════════════════════════════════════╝ -->
<div class="relative bg-black border-b border-gta-red/40">
  ...
</div>
<!-- ╚══ END VAULT SCRIPTS CREDIT BAR ══════╝ -->

Delete everything from the opening comment to the END comment, inclusive. Save. That file no longer has a bar.

The optional tidy-up. The hero has sixteen pixels of top padding that were making room for the bar. In index.html and 404.html, change pt-28 to pt-24 on <main>; in guides.html change pt-40 to pt-32. Nobody will notice if you skip it.

Or point it somewhere of your own

It is a normal link in a normal bar. Change the href and the text, swap our mark for yours, and it is an announcement strip, an event banner or a donation target — a good spot for whatever you want people to see first. You will also want to delete the <span> after the link, the one pointing at this page; that is there for you, not for your players.

Why it is built the way it is. The bar and the navigation sit inside one fixed wrapper rather than two stacked fixed elements, specifically so that deleting the bar cannot leave the navigation floating over the hero. The nav does not know the bar exists; it just sits under whatever is above it.

If you take it out, nothing is owed. If it saved you an afternoon, a star on the repository is how other server owners find it — and telling us what you would want in the next one is more useful still.

The stylesheet

You can ignore this whole section unless you want to add Tailwind classes the template does not already use. Editing text, swapping images, changing links and deleting sections all work with no tooling at all.

The template ships a compiled 22 KB stylesheet rather than loading Tailwind from a CDN. That means it contains only the classes the template already uses. Add rotate-45 or text-emerald-400 to the markup and nothing will happen, because the class is not in the file.

Three ways round it, in order of effort:

Option	When
Plain CSS	One or two tweaks. Add a `<style>` block after the stylesheet link and write normal CSS.
The CDN, while you work	Swap the stylesheet line for `cdn.tailwindcss.com` and its config while designing, then put the compiled file back before you go live.
Recompile	The proper answer. Needs Node once.

terminal

cd build
npm install       -- once
npm run build     -- after each change
npm run watch     -- rebuilds on save while you work

That reads every HTML and JS file under template/, finds the classes you actually used, and rewrites template/assets/css/template.css.

Do not edit template.css by hand. It is generated, and the next build overwrites it. Custom CSS goes in build/input.css if you are recompiling, or in a <style> block if you are not.

Fonts and privacy

The pages fetch Oswald and Inter from Google. That is one extra connection on first load, and in some places people would rather not send visitor addresses to Google at all.

To host them yourself: download both families from Google Fonts or gwfh.mranftl.com, put the woff2 files in assets/fonts/, delete the three fonts.googleapis.com and fonts.gstatic.com lines from each <head>, and add your own @font-face rules.

Use font-display: swap, or the page renders with invisible text until the fonts arrive.

If something is wrong

The backgrounds do not appear. Some hosts serve .webp as a download rather than an image. Add AddType image/webp .webp to .htaccess.

The page has no styling at all. assets/ did not upload, or it went into the wrong folder. The stylesheet is at assets/css/template.css relative to index.html.

/guides gives a 404 but /guides.html works. That shortcut comes from .htaccess, which most FTP clients hide because it starts with a dot, and which GitHub Pages ignores entirely.

A Tailwind class I added does nothing. Expected — see the stylesheet.

The mobile menu does not open. assets/js/template.js is missing, or the browser console will say. It is the only script on the page and everything else works without it.

Still stuck? Ask in the Discord — or open an issue on the repository with the page, the browser and a screenshot.