templates for self-hosting game jams (or any other kind of jam tbh)
veryroundbird.house
1<!doctype html>
2<html>
3 <head>
4 <title>!!YOUR GAME JAM TITLE!! | !! GAME NAME !!</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <link rel="stylesheet" type="text/css" href="./css/style.css" />
7 <link rel="stylesheet" type="text/css" href="./css/custom.css" />
8 <link rel="apple-touch-icon" sizes="180x180" href="./images/apple-touch-icon.png">
9 <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
10 <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
11 <link rel="manifest" href="./site.webmanifest">
12 </head>
13 <body class="wide game">
14 <div id="banner">
15 <!-- uncomment the below line if banner is desired -->
16 <!-- <img src="!!YOURBANNER!!" alt="!!BANNERALT!!" /> -->
17 </div>
18 <div id="page">
19 <header>
20 <h1>!!YOUR GAME JAM TITLE!!</h1>
21 <p class="hosted">Hosted by <a href="!!YOURLINK!!" target="_blank">!!YOURNAME!!</a> • <a href="!!LINK TO HASHTAG FILTER!!" target="_blank">#!!HASHTAG!!</a></p>
22 <div class="entries">
23 <span class="count" id="entriesCount">!!#!!</span>
24 <span class="caption">Entries</span>
25 </div>
26 <nav>
27 <ul>
28 <li><a href="index.html">Overview</a></li>
29 <!-- uncomment the below if you have a discord or a forum or something -->
30 <!-- <li><a href="!!COMMUNITY LINK!!">Community</a></li> -->
31 <li><a href="submissions.html" class="current">Submissions</a></li>
32 </ul>
33 </nav>
34 </header>
35 <main>
36 <div class="game-header">
37 <p class="jamsub">A jam submission</p>
38 <h2>!! GAME TITLE !! <a href="#">View game website →</a></h2>
39 <div class="blurb">
40 !! BLURB GOES HERE !!
41 </div>
42 <div class="authors">
43 Submitted by <a href="#">Author 1</a>, <a href="#">Author 2</a> at <span class="submissiontime">!! SUBMISSION TIME !!</span>
44 </div>
45 </div>
46 <div class="screenshots">
47 <div class="gallery">
48 <button popovertarget="img1"><img src="https://images.unsplash.com/photo-1756151224665-eba765e8c3b5?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></button>
49 <button popovertarget="img2"><img src="https://images.unsplash.com/photo-1754922493956-364a7623a016?q=80&w=2150&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></button>
50 <button popovertarget="img3"><img src="https://images.unsplash.com/photo-1755429518361-1d6060edcf3c?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></button>
51 <button popovertarget="img4"><img src="https://images.unsplash.com/photo-1755603461859-9da81ff3afea?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></button>
52 <button popovertarget="img5"><img src="https://images.unsplash.com/photo-1755467020939-4c3e196545bd?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></button>
53 </div>
54 <img src="https://images.unsplash.com/photo-1756151224665-eba765e8c3b5?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" popover id="img1" />
55 <img src="https://images.unsplash.com/photo-1754922493956-364a7623a016?q=80&w=2150&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" popover id="img2" />
56 <img src="https://images.unsplash.com/photo-1755429518361-1d6060edcf3c?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" popover id="img3" />
57 <img src="https://images.unsplash.com/photo-1755603461859-9da81ff3afea?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" popover id="img4" />
58 <img src="https://images.unsplash.com/photo-1755467020939-4c3e196545bd?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" popover id="img5" />
59 </div>
60 <div class="interaction">
61 <div class="downloads">
62 <h3>Downloads</h3>
63 <ul>
64 <li><a href="!! DL LINK !!" class="btn" download>Download</a> <b>!! FILE NAME !!</b> <span class="size">!! # MB !!</span> <span class="platforms"><span class="platforms-label">Platforms: </span><span class="icon windows" title="Windows">Windows</span><span class="icon linux" title="Linux">Linux</span></li>
65 <li><a href="!! DL LINK !!" class="btn" download>Download</a> <b>!! FILE NAME !!</b> <span class="size">!! # MB !!</span> <span class="platforms"><span class="platforms-label">Platforms: </span><span class="icon macos" title="MacOS">MacOS</span></li>
66 </ul>
67 </div>
68 <!-- uncomment if you want to drop in some kind of commenting system and put in whatever script you're using -->
69 <!--<div class="comments">
70 put comment code here
71 </div>-->
72 </div>
73 </main>
74 <footer>
75 <a href="https://veryroundbird.house">♥︎</a>
76 </footer>
77 </div>
78 <script type="module" src="./js/script.mjs"></script>
79 </body>
80</html>