Untitled


<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Web Portfolio</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="animate.css">
  <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,400" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css">
</head>

<style>

body{
  background-color: green;
  padding-top: 200px;
  padding-left: 20px;
}

img{
  display: none;
}

button{
  margin-top: 499px;
}

.animated{
  display: inline-block!important;
}

</style>


<body>

<div id="spot">
  <img id="moo" src="zl.png">
  <img id="moo2" src="plus.png">
  <img id="moo22" src="a.png">
  <img id="moo3" src="plus.png">
  <img id="moo33" src="zr.png">
  <img id="moo4" src="plus.png">
  <img id="moo44" src="x.png">
</div>
<button id="button1" type="button" >Click Me!</button>
<button id="button2" type="button" >Click Me!</button>
<button id="button3" type="button" >Click Me!</button>
<button id="button4" type="button" >Click Me!</button>


</body>

<script type='text/javascript'>

$('#button1').click(function() {
    $('#moo').addClass('slideInUp');
    $('#moo').addClass('animated');
});

$('#button2').click(function() {
    $('#moo2').addClass('slideInUp');
    $('#moo2').addClass('animated');
    $('#moo22').addClass('slideInUp');
    $('#moo22').addClass('animated');
});

$('#button3').click(function() {
    $('#moo3').addClass('slideInUp');
    $('#moo3').addClass('animated');
    $('#moo33').addClass('slideInUp');
    $('#moo33').addClass('animated');
});

$('#button4').click(function() {
    $('#moo4').addClass('slideInUp');
    $('#moo4').addClass('animated');
    $('#moo44').addClass('slideInUp');
    $('#moo44').addClass('animated');
});


</script>

</html>