<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory -->
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link data-require="normalize@*" data-semver="3.0.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<nav class="navbar">
<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">
<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="#">Red Beluga</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 navbar-right">
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid text-center">
<div class="jumbotron">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1>Hello, welcome to Red Beluga's lab.</h1>
<p class="lead">
We build simple web apps.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid filterable-portfolio">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li class="portfolio-title">Filter by:</li>
<li role="presentation" class="active">
<a href="#">All</a>
</li>
<li role="presentation">
<a href="#">Animation</a>
</li>
<li role="presentation">
<a href="#">Design</a>
</li>
<li role="presentation">
<a href="#">Photography</a>
</li>
<li role="presentation">
<a href="#">Web</a>
</li>
</ul>
</div>
</div>
<div class="row portfolio-items">
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive" />
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive" />
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive" />
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive" />
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive" />
</a>
</figure>
<figure class="portfolio-item col-sm-4">
<a href="#">
<img src="http://placekitten.com/700/400" class="img-responsive" />
</a>
</figure>
</div>
</div>
<script data-require="jquery@2.1.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
// Code goes here
/* Styles go here */
@import 'main.css';
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
html{
background: #222 url(../img/abstract-bg.svg) bottom right no-repeat;
height: 100%;
background-attachment: fixed;
overflow-y: scroll;
}
body{
background: none;
line-height: 1.5;
color: #F5F5F5;
font-family: 'Source Sans Pro', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Abril Fatface', cursive;
margin-top: 0;
}
p {
margin-bottom: 1rem;
}
.navbar-brand, .navbar-nav>li>a{
color: #F5F5F5;
font-weight: bold;
}
.navbar-brand:hover, .navbar-nav>li>a:hover{
color: #F5F5F5;
font-weight: bold;
background: none;
}
.navbar-nav>li>a:after{
content: '/';
margin-left: 30px;
}
.navbar-nav>li:last-child>a:after{
content: '';
}
.navbar-toggle{
background: #111;
}
.navbar-toggle .icon-bar{
background: #F5F5F5;
}
@media (max-width: 768px) {
.navbar-nav>li>a:after{
content: '';
}
.navbar-nav>li>a{
background: #111;
border-radius: 4px;
margin-bottom: 3px;
}
}
.container .jumbotron, .container-fluid .jumbotron{
padding-left: 0;
padding-right: 0;
}
.jumbotron{
background: none;
margin-top: 75px;
margin-bottom: 75px;
}
.jumbotron h1 {
font-size: 120px;
}
.jumbotron .lead {
font-size: 32px;
}
@media (max-width: 992px) {
.jumbotron h1{
font-size: 72px;
}
}
@media (max-width: 768px) {
.jumbotron h1{
font-size: 40px;
}
.jumbotron .lead {
font-size: 20px;
}
}
.portfolio-title{
padding: 10px 15px 10px 0px;
font-weight: bold;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
color: #F5F5F5;
background: #111;
}
.nav-pills a {
color: #F5F5F5;
margin-bottom: 1rem;
}
.nav>li>a:focus, .nav>li>a:hover{
background: none;
}
.portfolio-item {
margin-bottom: 1rem;
}
.portfolio-item img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
border-radius: 4px;
}
.portfolio-item:hover img{
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}
.filterable-portfolio{
margin-bottom: 3rem;
}