diff --git a/content/index.html b/content/index.html
index 4ba3a808d31c8611f37e62d1ed292ed5f66e5431..794ba5bee9fa9e31343b5547f118f54927f5f0f7 100644
--- a/content/index.html
+++ b/content/index.html
@@ -20,6 +20,11 @@
<meta name="twitter:description" content="Vol si jak chceš, kde chceš. My ti to zjednodušíme.">
<meta name="twitter:image" content="https://prukazy.pirati.cz/static/images/banner.webp">
+ <link
+ rel="stylesheet"
+ href="static/fonts/open-sans/style.css"
+ >
+
<link
rel="stylesheet"
href="static/css/base.css"
@@ -33,11 +38,84 @@
</head>
<body>
<header>
-
+ <div id="logo">
+ <img
+ src="static/images/favicon.webp"
+ alt="Logo Pirátské Strany"
+ width="55"
+ height="55"
+ >
+ <h1>Voličské průkazy</h1>
+ </div>
</header>
<main>
-
+ <div id="content">
+ <p id="intro-text">
+ <strong>Boilerplate text</strong> o tom, jak člověk nemusí sáhodlouze vyplňovat vytisknuté formuláře, uděláme to všechno za něj, i když to digitalizovaně zatím nejde kvůi bubu Babišovi. Nebo tak. Lorem ipsum et dolorem aut nihil repellat et numquam consequuntur? Sit quaerat maxime et voluptatem autem qui magnam eaque!
+ </p>
+
+ <div id="form-wrapper">
+ <div id="form-controls">
+ <div class="input-group input-group-2">
+ <input
+ type="text"
+ id="name"
+ placeholder="Jméno *"
+ >
+ <input
+ type="text"
+ id="surname"
+ placeholder="Příjmení *"
+ >
+ </div>
+
+ <div class="input-single-with-label">
+ <label
+ for="birthday"
+ >Datum narození *</label>
+ <input
+ type="date"
+ id="birthday"
+ name="birthday"
+ >
+ </div>
+
+ <input
+ type="text"
+ id="street"
+ placeholder="Ulice, č.p. *"
+ >
+
+ <input
+ type="text"
+ id="city"
+ placeholder="Obec *"
+ >
+
+ <select
+ id="receiving-type"
+ >
+ <option>Vyzvednout osobně</option>
+ <option>Předat osobě, která se prokáže plnou mocí</option>
+ <option>Zaslat na adresu trvalého pobytu</option>
+ <option>Zaslat jinam</option>
+ </select>
+
+ <button>
+ Vydat žádost úřadu!
+ </button>
+
+ <small>
+ <i>* Povinné</i>
+ </small>
+ </div>
+
+ <div id="form-preview">
+
+ </div>
+ </div>
+ </div>
</main>
<footer>
diff --git a/content/static/css/base.css b/content/static/css/base.css
index fa6db9cffd93844e4e5b137f22eda091b55ffc71..12d25d75e747df232d79ec4b09f54ba226ed5b88 100644
--- a/content/static/css/base.css
+++ b/content/static/css/base.css
@@ -1,3 +1,123 @@
html, body {
- padding:0
+ padding:0;
+ margin:0
+}
+
+body {
+ background:#000;
+ font-family:"Open Sans",sans-serif;
+}
+
+header {
+ height:70px;
+ padding:10px;
+ background:#000;
+ display:flex;
+ justify-content:center;
+ color:#fff
+}
+
+main {
+ border-top-left-radius:40px;
+ border-top-right-radius:40px;
+ background:#fff;
+ min-height:calc(100vh - 90px);
+}
+
+
+input,[aria-role="input"],textarea,select {
+ border:2px solid #000;
+ border-radius:9px;
+ font-size:unset;
+ padding:10px;
+ font-family:"Open Sans",sans-serif
+}
+
+button,input[type="submit"],[aria-role="button"] {
+ background:#000;
+ border:none;
+ border-radius:9px;
+ color:#fff;
+ cursor:pointer;
+ display:inline-block;
+ font-size:unset;
+ padding:12px;
+ text-decoration:none;
+ transition:.15s
+}
+
+button:hover,input[type="submit"]:hover,[aria-role="button"]:hover {
+ background:#333
+}
+
+textarea {
+ resize:none
+}
+
+
+#logo {
+ display:flex;
+ flex-direction:row;
+ gap:12px;
+ align-items:center
+}
+
+#content {
+ max-width:1000px;
+ margin-left:auto;
+ margin-right:auto;
+ padding-top:40px
+}
+
+#intro-text {
+ padding-bottom:14px;
+ margin-bottom:14px;
+ border-bottom:1px solid #000
+}
+
+#form-wrapper {
+ display:grid;
+ grid-template-rows:1fr;
+ grid-template-columns:1fr 1fr;
+ grid-template-areas:
+ "controls preview";
+ gap:14px
+}
+
+#form-controls {
+ grid-area:controls;
+ display:flex;
+ flex-direction:column;
+ gap:14px
+}
+
+#form-preview {
+ grid-area:preview
+}
+
+
+.input-group {
+ display:flex;
+ flex-direction:row;
+ flex-wrap:wrap;
+ gap:14px
+}
+
+.input-group input {
+ flex:1 1 0px;
+ min-width:0
+}
+
+.input-group-2:nth-child(2n) {
+ flex-basis:100%
+}
+
+.input-single-with-label {
+ display:flex;
+ gap:14px;
+ align-items:center
+}
+
+.input-single-with-label input {
+ flex:1 1 0px
}
diff --git a/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600.woff b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600.woff
new file mode 100644
index 0000000000000000000000000000000000000000..8cfc705e6e79574f8b8ea710946bf5c1b2d18189
Binary files /dev/null and b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600.woff differ
diff --git a/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600.woff2 b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..c1ae99e8e2d932f4561bd97738e79b4eda04be2b
Binary files /dev/null and b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600.woff2 differ
diff --git a/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600italic.woff b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..1b08b04e3ec0311675b09c3267dfd25ae566356c
Binary files /dev/null and b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600italic.woff differ
diff --git a/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600italic.woff2 b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..1e8632beddc3d586eda85e1fd61fadcea8b11879
Binary files /dev/null and b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600italic.woff2 differ
diff --git a/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-italic.woff b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-italic.woff
new file mode 100644
index 0000000000000000000000000000000000000000..566004ab15cef21032d3cc98d3d958d08dc3bafd
Binary files /dev/null and b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-italic.woff differ
diff --git a/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-italic.woff2 b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-italic.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..aa7302d8ba49ae942d26395063e9f632b2d6063f
Binary files /dev/null and b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-italic.woff2 differ
diff --git a/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-regular.woff b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000000000000000000000000000000000..15e46275e20f80ef6fc935afbc0ba68085c5cd4f
Binary files /dev/null and b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-regular.woff differ
diff --git a/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-regular.woff2 b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..b3da40eeac3099ce354b1c45c433886371c2e3e5
Binary files /dev/null and b/content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-regular.woff2 differ
diff --git a/content/static/fonts/open-sans/style.css b/content/static/fonts/open-sans/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..6bac5d7977c56fe6b783d3635dfc92d9053573e0
--- /dev/null
+++ b/content/static/fonts/open-sans/style.css
@@ -0,0 +1,43 @@
+/*
+* Thanks to majodev for their Google webfont helper!
+*/
+
+/* open-sans-regular - latin */
+@font-face {
+font-family: 'Open Sans';
+font-style: normal;
+font-weight: 400;
+src: local(''),
+ url('./open-sans-v29-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('./open-sans-v29-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-600 - latin */
+@font-face {
+font-family: 'Open Sans';
+font-style: normal;
+font-weight: 600;
+src: local(''),
+ url('./open-sans-v29-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('./open-sans-v29-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-italic - latin */
+@font-face {
+font-family: 'Open Sans';
+font-style: italic;
+font-weight: 400;
+src: local(''),
+ url('./open-sans-v29-latin-ext_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('./open-sans-v29-latin-ext_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-600italic - latin */
+@font-face {
+font-family: 'Open Sans';
+font-style: italic;
+font-weight: 600;
+src: local(''),
+ url('./open-sans-v29-latin-ext_latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('./open-sans-v29-latin-ext_latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}