Hark template v1

by PhilQ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="top">Hark
	<div id="login">
		<a href="#"><i class="fa fa-sign-in"></i>LOGIN</a>
		<a href="#"><i class="fa fa-magic"></i>REGISTER</a>
	</div>
</div>
<ul id="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">Assets</a></li>
	<li><a href="#">Duration types</a></li>
	<li><a href="#">Products</a></li>
	<li><a href="#">Pricing</a></li>
</ul>

CSS

@import url(https://fonts.googleapis.com/css?family=Wellfleet);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
* { margin:0; padding:0; box-sizing:border-box; }
body {
	font-family: 'Montserrat', sans-serif;
	background-color: #f8f8f8;
}
#top {
	z-index: 15;
	position: fixed;
	left: 0;
	width: 100%;
	top: 0px;
	height: 60px;
	padding: 10px 25px;
	color: #fff;
	font-size: 2em;
	font-family: 'Wellfleet', cursive;
	text-shadow: 0px 1px 5px rgba(0,0,0, 0.5);
	border-bottom: 3px solid rgba(0,0,0, 0.3);
	box-shadow: 0px 1px 5px 0px rgba(0,0,0, 0.3);
	background-color: #333;
	background-repeat: no-repeat;
	background-size: cover;
}
#login {
	position: absolute;
	top: 20px;
	right: 25px;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
}
#login a {
	color: #fff;
	text-shadow: none;
	text-decoration: none;
	padding: 8px 10px;
	opacity: 0.5;
}
#login a:hover, #login a:focus {
	opacity: 1;
	//border-bottom: 2px solid #fff;
}
#login a i {
	//opacity: 0.5;
	margin-right: 10px;
	font-size: 1.2em;
	vertical-align: middle;
}
#login a:hover i, #login a:focus i {
	opacity: 1;
}

#menu {
	list-style: none;
	z-index: 10;
	display: inline-block;
	background-color: #333;
	position: fixed;
	width: 100%;
	height: auto;
	max-height: 100%;
	left: 0px;
	bottom: 100%;
	margin-bottom: -60px;
	transform: translateY(100%);
	text-align: justify;
	font-size: 0;
	border-bottom: 1px solid rgba(0,0,0, 0.3);
}
#menu:after {
	content: '';
	display: inline-block;
	width: 100%;
	height: 0px;
	line-height: 0px;
	overflow: hidden;
}
#menu li {
	display: inline-block;
	font-size: 16px;
	padding: 12px 20px;
}
#menu a {
	text-decoration: none;
	color: #ccc;
	text-shadow: 0px 1px 1px rgba(0,0,0, 0.8);
}
#menu a:hover, #menu a:focus {
	color: #fff;
}

JavaScript

var pattern = Trianglify({
  height: 60,
  width: window.innerWidth,
  cell_size: 20,
  variance: "0.8",
  //seed: 'auct7',
  // x_colors: 'Blues', //'RdBu',
  // x_colors: ['#E8F3F8', '#DBE6EC', '#C2CBCE', '#A4BCC2', '#81A8B8'],
  //x_colors: ['#5998C2', '#ABC7D6', '#D3DFF2', '#ABC7D6', '#5998C2'],//, '#8C001C'],
  //y_colors: ['#002752', '#5998C2','#ABC7D6', '#D3DFF2', '#ABC7D6', '#5998C2', '#002752'],
  x_colors: ['#260A66', '#7FA2BA', '#8C001C'],
  y_colors: ['#E8C5CC', '#13063B'],
});

$( document ).ready( function(){
	$('#top').css('background-image', 'url(' + pattern.png() + ')');
} );