join form

1 files changed, 73 insertions, 0 deletions

diff --git a/src/pages/join/index.html b/src/pages/join/index.html
new file mode 100644
index 0000000..6677f89
--- /dev/null
+++ b/src/pages/join/index.html
@@ -0,0 +1,73 @@
+<!--: extends page.html -->
+<!--: replace title -->
+join
+<!--: endreplace -->
+
+<!--: replace extraHead -->
+<style>
+	form {
+		max-width: 50%;
+	}
+
+	form > label, fieldset, input[type="submit"] {
+		display: block;
+		margin-bottom: 5px;
+	}
+
+	label:has(> input:invalid)::before {
+		color: var(--red);
+		content: "!";
+	}
+
+	label:has(> input:required, textarea:required)::after {
+		color: var(--red);
+		content: "*";
+	}
+
+	input, textarea {
+		appearance: none;
+		background-color: black;
+		border: 2px solid white;
+		color: white;
+		font-family: inherit;
+	}
+
+	textarea {
+		font-size: inherit;
+		vertical-align: 0;
+	}
+
+	input[type="submit"]:hover {
+		background-color: white;
+		color: white;
+	}
+</style>
+<!--: endreplace -->
+
+<!--: replace body -->
+<main>
+	<form action="#" method="post">
+		<header>
+			<h2>Join the club.</h2>
+			<p class="subtle">Required fields are marked with an asterisk.</p>
+		</header>
+
+		<label>
+			Name: <input name="name" type="text" required />
+		</label>
+		<label>
+			URL of your personal website:
+			<input name="website" type="url" />
+		</label>
+		<label>
+			Tell us a bit about yourself:
+			<textarea name="about" required></textarea>
+		</label>
+		<label>
+			Enter an e-mail address:
+			<input name="email" type="email" required />
+		</label>
+		<input type="submit" value="Done" />
+	</form>
+</main>
+<!--: endreplace -->