Skip to content

Instantly share code, notes, and snippets.

/IBFal.markdown

Created August 4, 2014 23:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/92bf569352dc3cdc7b08 to your computer and use it in GitHub Desktop.
Save anonymous/92bf569352dc3cdc7b08 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Secret Sam.
Raw
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//CS"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="cs">
<head>
<style>
@font-face {
font-family: artdeco;
src: url(font/blakelylight.woff);
}
div {
font-family: artdeco;
}
</style>
<link href="/img/favicon.ico" rel="icon" type="image/x-icon" />
<title>Multifolkova&#769; kapela z Hradce Kra&#769;love&#769;</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Multifolkova&#769; kapela z Hradce Kra&#769;love&#769;">
<meta name="author" content="Petr Vacek">
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/kontakty.css" />
</head>
<body class="styles">
<video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="video/indexseiftiu.mp4" type="video/mp4">
<source src="video/indexseiftiu.webm" type="video/webm">
Sorry, your browser does not support HTML5 video.
</video>
<div>
<div onclick="location.href='index_petr.html';" style="cursor: pointer; position: absolute; background: url(img/seiftiu.png); top: 60px; left: 60px; width: 327px; height: 190px;">
</div>
</div>
<div id="menu">
<ul>
<li><a href="okapele.html">o kapele</a></li>
<li><a href="poslouchej.html">poslouchej</a></li>
<li><a href="galerie.html">galerie</a></li>
<li><a href=".overlay">koncerty</a></li>
<li><a href="#kontakty">Kontakty</a></li>
</ul>
</div>
<div id="kontakty">
<a href="#" class="close">&times;</a>
<div style="height:20%"></div>
<h2 style="font-size:35px">KONTAKTY</h2>
<br />
<br />
<br />
<p style="font-size:22px;">Zde budou kontakty, mailto, odkazy na FB, G plus, bandzone, whatever....</p>
</div>
<div id="mask" onclick="document.location='#';"></div>
</body>
</html>
Raw
style.css
*{margin:0;padding:0;}
#kontakty{ /* we set all of the properties for are overlay */
height: 300px;
width: 480px;
background: white;
color: black;
padding: 10px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -240px;
z-index: 1000;
display: none;
/* CSS 3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#mask{ /* create are mask */
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:500;
width:100%;
height:100%;
display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#kontakty:target, #kontakty:target + #mask{
display:block;
opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
display:block;
position:absolute;
top:-20px;
right:-20px;
background:red;
color:white;
height:40px;
width:40px;
line-height:40px;
font-size:35px;
text-decoration:none;
text-align:center;
font-weight:bold;
-webkit-border-radius:40px;
-moz-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment