Armando Perez

In this example below you will see how to do a Armando Perez with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0319AM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0319AM ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Armando Perez</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
  </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="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>
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0319AM/armando-perez-wqvEep */
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;
}

/*Downloaded from https://www.codeseek.co/0319AM/armando-perez-wqvEep */
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);

Comments