iiic/prihlaseni.html

## prihlaseni.html
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>formulář pro přihlášení</title>
<style>
label
{
	display:inline-block;
	width:68px;
}
a[href="#prihlaseni"]
{
	border:1px solid red;
	margin-left: -50px;
	top: -25px;
	width: 100px;
	height: 50px;
	display:-ms-flexbox;/* zatím stále potřeba */
	-ms-flex-pack:center;
	-ms-flex-align:center;
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	display:box;
	box-pack:center;
	box-align:center;
}
#prihlaseni
{
	width:240px;
	height:120px;
	text-align:left;
	border:1px solid #000;
	position:absolute;
	top:-9999px;
	opacity:0;
	background:white;
	padding:20px;
	zoom:0.1;
	box-shadow: 0px 0px 0px 999px rgba(0, 0, 0, 0.01);
	transition: zoom 0.4s, top 1s, opacity 1.2s, box-shadow 2s;
	-webkit-transition: zoom 0.4s, top 1s, opacity 1.2s, box-shadow 2s;
	transition-timing-function: linear;
	-webkit-transition-timing-function: linear;
}
#prihlaseni:target
{
	top:-80px;
	margin-left:-120px;
	opacity:1;
	zoom:1;
	box-shadow: 0px 0px 0px 999px rgba(0, 0, 0, 0.4);
}
#prihlaseni a[href="#uvod"]
{
	border:1px solid green;
	position:absolute;
	right:6px;
	top:8px;
}
label[for="odeslat"]
{
	visibility:hidden;
}
.horizontal
{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 0;
	overflow: visible;
	visibility: visible;
}
.vertical
{
	position: absolute;
	left: 50%;
	visibility: visible;
}
</style>

<p>Lorem ipsum dolor sit amet consectetuer justo quam Vestibulum In pellentesque. Mauris parturient sem Phasellus massa et lobortis ut eget faucibus congue. Vestibulum neque nascetur elit auctor a laoreet lorem nec vel felis. Mi urna metus eleifend Vestibulum nibh sagittis arcu laoreet sit leo. Leo tortor gravida Phasellus platea Curabitur felis Aenean elit In orci. Morbi Nulla Vestibulum arcu vel habitasse tempor Nullam consectetuer vel metus. Nam ac vel.</p>
<p>Eu sapien elit sem pede egestas diam nulla augue Cum tempus. Aliquam Maecenas id magna nisl condimentum et augue felis velit dignissim. Nibh ut Pellentesque urna pellentesque Aenean a neque In Phasellus vitae. Lacinia dolor In nunc Proin ac quis pretium ut volutpat orci. Et Quisque elit justo In interdum a Donec orci egestas amet. Vitae.</p>
<p>At sit pellentesque Sed justo dolor Phasellus et urna dui mus. Dolor pellentesque dolor In Curabitur Donec congue Nulla id quis ac. Congue at quam ligula tempus interdum vitae Cras magna vel libero. Tempus eros ac Vestibulum et vel vel vitae vel orci orci. Integer malesuada Sed Maecenas nibh Curabitur convallis semper sapien congue nibh. Pretium elit augue eget Nulla urna.</p>
<p>Ligula Nullam at id nisl tempor tincidunt quis nisl et mus. Vel Curabitur semper ante mollis nibh metus montes vel Curabitur ut. Ipsum aliquam interdum ut montes quis iaculis ante non Sed pede. Ut mi arcu leo orci et Suspendisse Curabitur nibh parturient condimentum. Sed dolor a Aenean turpis Nunc dui ante.</p>

<div class="horizontal">
	<a href="#prihlaseni" class="vertical">přihlásit se!</a>
</div>

<div class="horizontal">
	<div id="prihlaseni" class="vertical">
		<b>Přihlášení</b><br>
		<a href="#uvod">zavřít</a><br>
		<label for="jmeno">jméno:</label><input type="text" id="jmeno"><br>
		<label for="heslo">heslo:</label><input type="password" id="heslo"><br>
		<label for="odeslat">dokončení</label><input type="submit" value="přihlásit" id="odeslat">
	</div>
</div>
	<!DOCTYPE HTML>
	<meta charset="utf-8">
	<title>formulář pro přihlášení</title>
	<style>
	label
	{
	display:inline-block;
	width:68px;
	}
	a[href="#prihlaseni"]
	{
	border:1px solid red;
	margin-left: -50px;
	top: -25px;
	width: 100px;
	height: 50px;
	display:-ms-flexbox;/* zatím stále potřeba */
	-ms-flex-pack:center;
	-ms-flex-align:center;
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	display:box;
	box-pack:center;
	box-align:center;
	}
	#prihlaseni
	{
	width:240px;
	height:120px;
	text-align:left;
	border:1px solid #000;
	position:absolute;
	top:-9999px;
	opacity:0;
	background:white;
	padding:20px;
	zoom:0.1;
	box-shadow: 0px 0px 0px 999px rgba(0, 0, 0, 0.01);
	transition: zoom 0.4s, top 1s, opacity 1.2s, box-shadow 2s;
	-webkit-transition: zoom 0.4s, top 1s, opacity 1.2s, box-shadow 2s;
	transition-timing-function: linear;
	-webkit-transition-timing-function: linear;
	}
	#prihlaseni:target
	{
	top:-80px;
	margin-left:-120px;
	opacity:1;
	zoom:1;
	box-shadow: 0px 0px 0px 999px rgba(0, 0, 0, 0.4);
	}
	#prihlaseni a[href="#uvod"]
	{
	border:1px solid green;
	position:absolute;
	right:6px;
	top:8px;
	}
	label[for="odeslat"]
	{
	visibility:hidden;
	}
	.horizontal
	{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 0;
	overflow: visible;
	visibility: visible;
	}
	.vertical
	{
	position: absolute;
	left: 50%;
	visibility: visible;
	}
	</style>

	<p>Lorem ipsum dolor sit amet consectetuer justo quam Vestibulum In pellentesque. Mauris parturient sem Phasellus massa et lobortis ut eget faucibus congue. Vestibulum neque nascetur elit auctor a laoreet lorem nec vel felis. Mi urna metus eleifend Vestibulum nibh sagittis arcu laoreet sit leo. Leo tortor gravida Phasellus platea Curabitur felis Aenean elit In orci. Morbi Nulla Vestibulum arcu vel habitasse tempor Nullam consectetuer vel metus. Nam ac vel.</p>
	<p>Eu sapien elit sem pede egestas diam nulla augue Cum tempus. Aliquam Maecenas id magna nisl condimentum et augue felis velit dignissim. Nibh ut Pellentesque urna pellentesque Aenean a neque In Phasellus vitae. Lacinia dolor In nunc Proin ac quis pretium ut volutpat orci. Et Quisque elit justo In interdum a Donec orci egestas amet. Vitae.</p>
	<p>At sit pellentesque Sed justo dolor Phasellus et urna dui mus. Dolor pellentesque dolor In Curabitur Donec congue Nulla id quis ac. Congue at quam ligula tempus interdum vitae Cras magna vel libero. Tempus eros ac Vestibulum et vel vel vitae vel orci orci. Integer malesuada Sed Maecenas nibh Curabitur convallis semper sapien congue nibh. Pretium elit augue eget Nulla urna.</p>
	<p>Ligula Nullam at id nisl tempor tincidunt quis nisl et mus. Vel Curabitur semper ante mollis nibh metus montes vel Curabitur ut. Ipsum aliquam interdum ut montes quis iaculis ante non Sed pede. Ut mi arcu leo orci et Suspendisse Curabitur nibh parturient condimentum. Sed dolor a Aenean turpis Nunc dui ante.</p>

	<div class="horizontal">
	<a href="#prihlaseni" class="vertical">přihlásit se!</a>
	</div>

	<div class="horizontal">
	<div id="prihlaseni" class="vertical">
	<b>Přihlášení</b><br>
	<a href="#uvod">zavřít</a><br>
	<label for="jmeno">jméno:</label><input type="text" id="jmeno"><br>
	<label for="heslo">heslo:</label><input type="password" id="heslo"><br>
	<label for="odeslat">dokončení</label><input type="submit" value="přihlásit" id="odeslat">
	</div>
	</div>