<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
	<link rel='stylesheet' href='style.css'/>
	<script src='script.js'></script>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <h1>Armando P&eacute;rez</h1>
          </div>
          <div class="pull-right">
            
            <ul class="nav nav-pills">
              <li class="nav-all active"><a href="#">All</a></li>
              <li class="nav-consumer"><a href="#">Consumer</a></li>
              <li class="nav-mobile"><a href="#">Mobile</a></li>
              <li class="nav-commerce"><a href="#" >Commerce</a></li>
              <li class="nav-enterprise"><a href="#">Enterprise</a></li>
            </ul>
            
          </div>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="container">
        
        <div class="row">
          <div class="col-md-4">
            <a class="consumer thumbnail">
              <img src="http://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p1.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="enterprise thumbnail">
              <img src="http://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p2.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="consumer thumbnail">
              <img src="http://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p3.jpg">
            </a>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <a class="commerce thumbnail">
              <img src="http://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p4.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="enterprise thumbnail">
              <img src="http://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p5.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="mobile thumbnail">
              <img src="http://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p6.jpg">
            </a>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <a class="mobile thumbnail">
              <img src="http://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p7.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="commerce thumbnail">
              <img src="http://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p8.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="mobile thumbnail">
              <img src="http://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p9.jpg">
            </a>
          </div>
        </div>
      </div>
    </div>
    <script src="http://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

body {
  background: url(http://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/brand.jpg) no-repeat fixed; 
  background-size: 80%;
}

.container {
  width: 700px;
  margin: 0 auto;
}

.header,
.footer {
  padding: 30px 0;
  color: #444;
}

.header h1 {
  color:#fff;
  margin: 0;
  padding: 10px 0;
  font-size: 20px;
  text-transform: uppercase;
}

.header ul,
.footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.header li {
  display: inline;
  text-align: center;
}

.header li a {
  color:#f01251;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
  background-color: #f01251;
}

.thumbnail {
  padding: 0;
  box-shadow:0px 2px 2px rgba(0,0,0,0.1); 
  border-radius:0px; 
  border:0px; 
}

.thumbnail img {
  width: 100%;
  display: block;
}  

.footer li {
  display: inline;
  margin-right: 40px;
}

.footer p {
  margin: 0;
}

.selected {
  border: 10px solid #f01251;
}
var main = function() {
  $('.nav li').click(function() {
    var category = $(this).attr('class');

    $('.nav li').removeClass('active');
    $(this).addClass('active');

    
    
    
  });
};
 
$(document).ready(main);
Created from scratch
143 forks
133 views

Browse more Codebits