<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Samuel Elkins</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Overview</a></li>
<li><a href="#"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> New Task</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Categories</a></li>
</ul>
</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li><a href="#">Übersicht</a></li>
<li><a href="#">New Contact</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Categories</a></li>
</ul>
</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li><a href="#">Overview</a></li>
<li><a href="#">New Notiz</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Notebooks</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" role="button" aria-expanded="false">Learnings </a>
</li>
<li class="dropdown">
<a href="#" role="button" aria-expanded="false">Learnings </a>
</li>
<li class="dropdown">
<a href="#" role="button" aria-expanded="false">Learnings </a>
</li>
<li class="dropdown">
<a href="#" role="button" aria-expanded="false">Learnings </a>
</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li><a href="#">Overview</a></li>
<li><a href="#">New Entry</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Topics</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<ul class="dropdown-menu">
<li><a href="http://www.google.ch" target="_blank">My Webmail</a></li>
<li role="separator" class="divider"></li>
<li><a href="http://www.google.ch" target="_blank">Timelogger</a></li>
<li><a href="http://www.cubetech.ch" target="_blank">cubetech.ch</a></li>
</ul>
</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li><a href="http://www.fgruber.ch/" target="_blank"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> User Settings</a></li>
<li><a href="/logout"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<body>
<div class="site-wrapper">
<div class = "frost"> </div>
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="image-background">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Group of Seven</h3>
<nav>
<ul class="nav masthead-nav">
<!-- <li class="active"><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>-->
</ul>
</nav>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Mirror Lake</h1>
<p class="lead">Franklin Charmichael was the youngest member of the Group of Seven when they formed in 1920. This painting is one of his watercolours which was his main medium of choice. He spent a lot of travel time with the group going to remote locations in Northern Ontario, and bought a cottage in the La Cloche mountains, where he did a lot of his paintings. This painting is a beautiful array of soft blues and purples in the reflections on the water.</p>
<p class="lead">
<!-- <a href="#" class="btn btn-lg btn-default">Learn more</a> -->
</p>
</div>
</div>
<div class="mastfoot">
<a href="http://bootsnipp.com/iframe/x80rX" target="_blank">Best viewed full screen</a><br>
<div class="inner">
<p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
.frost{
background: rgba(245, 245, 245, 0.9);
height: 88px;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
-webkit-filter:blur(10px);
filter: url(#blur-effect-1);
}
.masthead {
z-index:1100;
}
body {
background: url(http://nebula.wsimg.com/53957ca28f2f3e6567d20647db21abd7?AccessKeyId=57022C337249FFDC4A2F&disposition=0&alloworigin=1) no-repeat center center fixed;
}
.image-background{
/* background: url(http://nebula.wsimg.com/53957ca28f2f3e6567d20647db21abd7?AccessKeyId=57022C337249FFDC4A2F&disposition=0&alloworigin=1) no-repeat center center fixed;
/*height:800px;*/
}
/* Team Members */
.team-members {
width: 100%;
cursor: pointer;
overflow: hidden;
position: relative;
margin-bottom: 35px;
}
.team-members .team-avatar {
position: relative;
}
.team-members .team-avatar:after {
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
position: absolute;
background: rgba(129, 129, 129, 0.1);
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.team-members .team-avatar img {
display: block;
margin: 0 auto;
text-align: center;
}
.team-members .team-desc {
left: auto;
bottom: 0;
width: 100%;
padding: 0 20px;
position: absolute;
opacity: 0;
color: #fff;
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.team-members .team-desc h4 {
font-size: 22px;
font-weight: 600;
margin: 0 0 10px;
color: #fff;
}
.team-members .team-desc span {
display: block;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
color: #fff;
}
.team-members:hover .team-avatar:after {
background: rgba(47, 60, 72, 0.5);
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.team-members:hover .team-desc {
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0);
-webkit-transform: translate3d(0, -10%, 0);
transform: translate3d(0, -10%, 0);
}
.team-members:hover .team-desc {
opacity: 1;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.lead{
/*background-color: #d1d1e0;*/
opacity:0.9;
}
