HETZE - concept v1

by PhilQ

HTML

<div id="logo">
	<div id="logo-sup">Be part of the</div>
	<div id="logo-logo"><a href="#">HETZE</a></div>
	<div id="logo-sub">Theater op locatie</div>
</div>

<div id="socials">
	<a href="#" class="fa fa-facebook-square">Facebook</a>
	<a href="#" class="fa fa-twitter-square">Twitter</a>
	<a href="#" class="fa fa-instagram">Instagram</a>
	<a href="#" class="fa fa-youtube-square">YouTube</a>
</div>

<div id="menu">
	<a href="#" class="fa fa-bars">Menu</a>
	<ul>
		<li><a href="#">Over Hetze</a></li>
		<li><a href="#">Het gezelschap</a></li>
		<li><a href="#">Locaties</a></li>
		<li><a href="#">Speellijst</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

<div id="back-home" class="bg"></div>

<div class="page" id="page-home">
	
</div>

CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import 'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&subset=latin-ext';
*, *:before, *:after { margin:0; padding:0; box-sizing:border-box; }
body {
	font-family: 'Lato', sans-serif;
	background: #161317;
}

.bg {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 0;
	background-color: #000;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.35;
}

#back-home {
	background-image: url(http://hetzetheater.nl/wp-content/uploads/2016/08/zwarte-cross-site.jpg);
}
/***** Logo *****/
#logo {
	z-index: 15;
	display: inline-block;
	position: fixed;
	top: 50%;
	margin-top: -150px;
	left: 50%;
	margin-left: -480px;
	text-shadow: 0px 1px 10px rgba(0,0,0, 1);
}
#logo-sup {
	color: rgba(237, 221, 185, 1);
	font-size: 2.2em;
	font-weight: 700;
	font-style: italic;
	padding-left: 10px;
	line-height: 1;
}
#logo-logo {
	font-size: 8em;
	font-weight: 900;
	line-height: 1;
}
#logo-logo > a {
	color: rgba(237, 221, 185, 1);
	text-decoration: none;
}
#logo-sub {
	margin-top: 30px;
	color: rgba(255, 255, 255, 1);
	text-transform: uppercase;
	font-weight: 300;
	font-size: 3em;
	line-height: 1;
	text-shadow: 0px 1px 8px rgba(0,0,0, 1);
}

/***** Socials *****/
#socials {
	z-index: 15;
	position: fixed;
	top: 15px;
	right: 15px;
	//width: 200px;
	display: inline-block;
}
#socials > a {
	display: inline-block;
	width: 32px;
	height: 32px;
	color: transparent;
	overflow: hidden;
	font-size: 32px;
}
#socials > a:before {
	color: rgba(237, 221, 185, 0.5);
}
#socials > a:hover:before, #socials > a:focus:before {
	color: rgba(237, 221, 185, 1);
}

/***** Menu *****/
#menu {
	z-index: 15;
	width: 1020px;
	height: 50px;
	display: inline-block;
	position: fixed;
	bottom: 50%;
	margin-bottom: -200px;
	left: 50%;
	margin-left: -510px;
	background: rgba(57, 37, 37, 0.6);
	overflow: hidden;
}
#menu > a {
	display:...

JavaScript

$( document ).ready( function(){
	//
} );