<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="header"> <div class="container"> <div class="row"> <div class="col-md-4"> <h1>Armando Pé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="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p1.jpg"> </a> </div> <div class="col-md-4"> <a class="enterprise thumbnail"> <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p2.jpg"> </a> </div> <div class="col-md-4"> <a class="consumer thumbnail"> <img src="https://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="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p4.jpg"> </a> </div> <div class="col-md-4"> <a class="enterprise thumbnail"> <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p5.jpg"> </a> </div> <div class="col-md-4"> <a class="mobile thumbnail"> <img src="https://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="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p7.jpg"> </a> </div> <div class="col-md-4"> <a class="commerce thumbnail"> <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p8.jpg"> </a> </div> <div class="col-md-4"> <a class="mobile thumbnail"> <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p9.jpg"> </a> </div> </div> </div> </div> <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script> <script src="app.js"></script>

html, body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; } body { background: url('https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/brand.jpg') no-repeat fixed; background-size: 80%; } .container { max-width: 700px; margin: 0 auto; } .header, .footer { padding: 30px 20px; 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; margin: 2px; } .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { background-color: #f01251; margin: 2px; } .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'); if(category === "nav-consumer") { $(".thumbnail").removeClass("selected"); $(".consumer").addClass("selected"); } else if(category === "nav-mobile") { $(".thumbnail").removeClass("selected"); $(".mobile").addClass("selected"); } else if(category === "nav-commerce") { $(".thumbnail").removeClass("selected"); $(".commerce").addClass("selected"); } else if(category === "nav-enterprise") { $(".thumbnail").removeClass("selected"); $(".enterprise").addClass("selected"); } else { $(".thumbnail").removeClass("selected"); } }); }; $(document).ready(main);