Skip to content
Snippets Groups Projects
Commit aa674e3a authored by Tomáš Hozman's avatar Tomáš Hozman
Browse files

form

parent 2695095d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 244 additions and 3 deletions
content/index.html
+ 80
− 2
View file @ aa674e3a
...@@ -20,6 +20,11 @@ ...@@ -20,6 +20,11 @@
<meta name="twitter:description" content="Vol si jak chceš, kde chceš. My ti to zjednodušíme."> <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"> <meta name="twitter:image" content="https://prukazy.pirati.cz/static/images/banner.webp">
<link
rel="stylesheet"
href="static/fonts/open-sans/style.css"
>
<link <link
rel="stylesheet" rel="stylesheet"
href="static/css/base.css" href="static/css/base.css"
...@@ -33,11 +38,84 @@ ...@@ -33,11 +38,84 @@
</head> </head>
<body> <body>
<header> <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> </header>
<main> <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> </main>
<footer> <footer>
......
content/static/css/base.css
+ 121
− 1
View file @ aa674e3a
html, body { 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
} }
content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600.woff 0 → 100644
+ 0
− 0
View file @ aa674e3a
File added
content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600.woff2 0 → 100644
+ 0
− 0
View file @ aa674e3a
File added
content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600italic.woff 0 → 100644
+ 0
− 0
View file @ aa674e3a
File added
content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-600italic.woff2 0 → 100644
+ 0
− 0
View file @ aa674e3a
File added
content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-italic.woff 0 → 100644
+ 0
− 0
View file @ aa674e3a
File added
content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-italic.woff2 0 → 100644
+ 0
− 0
View file @ aa674e3a
File added
content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-regular.woff 0 → 100644
+ 0
− 0
View file @ aa674e3a
File added
content/static/fonts/open-sans/open-sans-v29-latin-ext_latin-regular.woff2 0 → 100644
+ 0
− 0
View file @ aa674e3a
File added
content/static/fonts/open-sans/style.css 0 → 100644
+ 43
− 0
View file @ aa674e3a
/*
* 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+ */
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft