Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Yadon Scans</title>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto+Condensed">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="icon" href="http://i.imgur.com/88r8pOg.gif" type="image/x-icon">
  <style>
    body {
      background-color: lightcoral;
      left: 0;
      margin: 0;
      overflow: hidden;
      position: relative;
}
    .jumbotron {
      background-image: url(http://i.imgur.com/c317Uo4.png);
    }
    #logo {
      position: relative;
      left: 725px;
      bottom: 110px;
    }
    .page-header {
      background-color: aliceblue;
    }
    .page-header a {
      font-family: arvo;
      font-size: 30px;
      font-weight: bold;
      text-decoration: underline;
      color: black;
      padding-left: 15px;
    }
    #hora {
      font-family: arvo;
      color: #dd5aa2;
      padding-top: 40px;
    }
    .urso {
      font-family: arvo;
      padding-left: 150px;
    }
    #silva {
      font-family: arvo;
      font-size: 15px;
      padding-left: 200px;
      }
      .menu {
  background-color: aliceblue;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
      }
      .menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #636366;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #fff;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu i {
  margin-right: 5px;
}
  </style>
  </head>

  <body>
    <div class="menu">
      <div class="icon-close">
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
      </div>
      <li><a href="#">Higurashi: Kokoroiyashi-hen</a></li>
      <li><a href="#">Inuyasha Special</a></li>
    </div>
    <div class='page-header'>
      <a href="#"><img src="http://www.mettalegal.com/wp-content/uploads/2013/01/menu-icon.png" style="width:45px;height:45px">Projetos</a>
    </div>
    <div class="container">
      <div class="jumbotron" style="width:1100px;height:300px">
  <p class="urso">"Eu que dan&ccedil;o com os Yadons, e voc&ecirc; que fala merda?"</p>
    <p id="silva">- Lispector, Yadonildo 2015 -</p>
      <a href="#"><img src="http://i.imgur.com/wb55lQU.png" style="width:280px;height:280px" id="logo"></a>
        </div>
    </div>

    <script>
     var main = function() {
  /* Push the body and the nav over by 285px over */
  $('.page-header').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('body').animate({
      left: "285px"
    }, 200);
  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-285px"
    }, 200);

    $('body').animate({
      left: "0px"
    }, 200);
  });
};


$(document).ready(main);
    </script>

  </body>