title: Sticky navbar position front of content
body: <p>i followed a stackoverflow question to do the first part of the sticky navbar, here is the jFiddle of what i pretend to do <a href="http://jsfiddle.net/yeco/4EcFf/" rel="nofollow noreferrer">sticky navbar</a>, i have the menu and the i put all my content in a content class div, the only problem that i have is when i scrool on the page the sticky navbar goes behind the content, i want the sticky navbar to place in front, i tryied it with a z-index and a position relative, but then all my inputs(textarea, links) stop working and it kinda makes sense, how can i archieve what i want to do?</p>
  
  <p><strong>here is my full code</strong> </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;TSIW - Um curso em inovação&lt;/title&gt;
      &lt;link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Bungee+Hairline|Exo|Maven+Pro|Quicksand" rel="stylesheet"&gt;
      &lt;link href="page.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row backColor"&gt;&lt;img alt="TSIW" class="img img-responsive" src="TSIW.jpg"&gt;&lt;/div&gt;
          &lt;div class="row backColor"&gt;
              &lt;div id="wrapper"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row menu2"&gt;
              &lt;div class="centerBlock"&gt;
                  &lt;ul id="menu"&gt;
                      &lt;li class="menuItem"&gt;
                          &lt;a href="#aluno"&gt;Apresentação&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="menuItem"&gt;
                          &lt;a href="#PlanoEstudos"&gt;Plano de Estudos&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="menuItem"&gt;
                          &lt;a&gt;Notícias&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="menuItem"&gt;
                          &lt;a&gt;Projetos&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="menuItem"&gt;
                          &lt;a&gt;Outros&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
              &lt;div class="row spacing2"&gt;
                  &lt;h3 id="Apresentacao"&gt;Apresentação&lt;/h3&gt;&lt;iframe allowfullscreen frameborder="0" height="315" id="aluno" name="aluno" src="https://www.youtube.com/embed/BdyPhLbCPA8" width="900"&gt;&lt;/iframe&gt;
                  &lt;div class="col-md-offset-2 col-md-8"&gt;
                      &lt;p class="aluno" style="background-color:white;padding:4%;border-radius:10px"&gt;A licenciatura em Tecnologias e Sistemas de Informação para a Web é um projeto conjunto da Escola Superior de Estudos Industriais e de Gestão (ESEIG) e do Instituto Superior de Engenharia do Porto (ISEP). O curso funciona nas instalações da ESEIG, com docentes da ESEIG e do ISEP, e o grau é atribuído conjuntamente por estas duas Escolas do Instituto Politécnico do Porto. Tem por objetivo formar profissionais capazes de liderarem projetos nos domínios da conceção, desenvolvimento e gestão de sistemas de informação e de conteúdos para a Web. O Curso privilegia uma sólida formação em design para meios digitais e em tecnologias da informação, procurando formar profissionais que dominem quer a vertente mais criativa do processo produtivo, quer a vertente mais técnica ou tecnológica. O Curso procura privilegiar as tendências emergentes na área das ciências e tecnologias da informação, como a computação centrada na Web (cloud computing), segurança, interfaces gráficas e ambientes virtuais. Os licenciados deverão desenvolver as competências necessárias para se envolverem em projetos de conceção, desenvolvimento e gestão de sistemas de informação e de conteúdos para a Web, suportados nas mais diversas tecnologias e plataformas tecnológicas. O perfil do licenciado compreende as seguintes competências:&lt;/p&gt;
                      &lt;p class="foco spacing2"&gt;Competências&lt;/p&gt;
                      &lt;ul class="spacing4" id="competencias" style="background-color:white;padding-left:4%;border-radius:10px"&gt;
                          &lt;li&gt;Conceber, desenvolver e gerir sistemas de informação e produtos para a Web;&lt;/li&gt;
                          &lt;li&gt;Demonstrar capacidade de liderança, capacidade de iniciativa e espírito empreendedor;&lt;/li&gt;
                          &lt;li&gt;Conceber e desenvolver produtos em ambientes interativos ou 3D;&lt;/li&gt;
                          &lt;li&gt;Desenvolver sistemas e produtos para multiplataformas;&lt;/li&gt;
                          &lt;li&gt;Projetar e desenvolver produtos digitais de entretenimento e lazer.&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;p class="foco spacing2"&gt;Saídas Profissionais&lt;/p&gt;
                      &lt;ul class="spacing4" id="Saidas" style="background-color:white;padding-left:4%;border-radius:10px"&gt;
                          &lt;li&gt;Conceção, desenvolvimento e gestão de software e produtos para a Web;&lt;/li&gt;
                          &lt;li&gt;Desenvolvimento de produtos para dispositivos móveis;&lt;/li&gt;
                          &lt;li&gt;Conceção e desenvolvimento de software de entretenimento e jogos;&lt;/li&gt;
                          &lt;li&gt;Consultadoria na área de sistemas de produtos para a Web&lt;/li&gt;
                          &lt;li&gt;Desenvolvimento de plataformas de negócio electrónico;&lt;/li&gt;
                          &lt;li&gt;Designer Web.&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row spacing2"&gt;
                  &lt;h3 id="PlanoEstudos"&gt;Plano de Estudos&lt;/h3&gt;
                  &lt;div class="col-md-offset-2 col-md-8" style="background-color:white;padding:2%;border-radius:10px"&gt;
                      &lt;ul class="nav nav-tabs"&gt;
                          &lt;li class="active"&gt;
                              &lt;a data-toggle="tab" href="#ano1"&gt;1ºano&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a data-toggle="tab" href="#ano2"&gt;2ºano&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a data-toggle="tab" href="#ano3"&gt;3ºano&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class="tab-content"&gt;
                          &lt;table class="table tab-pane fade in active" id="ano1"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Unidade Curricular&lt;/th&gt;
                                      &lt;th&gt;Tipologia&lt;/th&gt;
                                      &lt;th&gt;ECTS&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;MatemáticaI&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;7&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Algoritmia e Estrutura de dados&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;7&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Sistemas Computacionais&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;4&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Tecnologias e aplicações web&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;4&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Fundamentos de design&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;MatemáticaII&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Conceção e produção multimédia&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Programação orientada a objetos&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;7&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Design Gráfico&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;5&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;ProjetoI&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                          &lt;table class="table tab-pane fade" id="ano2"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Unidade Curricular&lt;/th&gt;
                                      &lt;th&gt;Tipologia&lt;/th&gt;
                                      &lt;th&gt;ECTS&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Análise e modelação de sistemas&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Bases de dados&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Física aplicada à programação&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;5&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Programação webI&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;7&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Animação gráfica&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Engenharia de software&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Modelação e ambientes 3D&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Programação webII&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;7&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Sistemas gráficos&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;5&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;ProjetoII&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                          &lt;table class="table tab-pane fade" id="ano3"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Unidade Curricular&lt;/th&gt;
                                      &lt;th&gt;Tipologia&lt;/th&gt;
                                      &lt;th&gt;ECTS&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Sistemas cistribuidos&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;7&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Ergonomia cognitiva e design de interação&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;5&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Desenvolvimento de jogos&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Negócio eletrónico e segurança&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Gestão empresarial&lt;/td&gt;
                                      &lt;td&gt;1.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;6&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Técnicas avançadas de web design&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;3&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Inovação e empreendedorismo&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;3&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Programação para dispositivos móveis&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;4&lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Projeto final/estágio&lt;/td&gt;
                                      &lt;td&gt;2.ºSemestre&lt;/td&gt;
                                      &lt;td&gt;20&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row spacing2"&gt;
                  &lt;h3 id="Noticias"&gt;Notícias&lt;/h3&gt;
                  &lt;div class="carousel slide" data-ride="carousel" id="text-carousel"&gt;
                      &lt;!-- Wrapper for slides --&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-xs-offset-3 col-xs-6"&gt;
                              &lt;div class="carousel-inner"&gt;
                                  &lt;div class="item active"&gt;
                                      &lt;div class="carousel-content" style="background-color:white;padding:5%;border-radius:10px"&gt;
                                          &lt;div&gt;
                                              &lt;h4 style="text-align:right;font-weight:900"&gt;Seminário Gestão de Projectos de Software&lt;/h4&gt;
                                              &lt;p style="text-align:right"&gt;&lt;b&gt;Orador&lt;/b&gt;: Nelson Faria&lt;/p&gt;&lt;br&gt;
                                              &lt;ul id="noti"&gt;
                                                  &lt;li&gt;Professional Services Director at Nonius - Hospitality Technology&lt;/li&gt;
                                                  &lt;li&gt;Professional Services Director&lt;/li&gt;
                                                  &lt;li&gt;Systems Engineer&lt;/li&gt;
                                                  &lt;li&gt;Software Enginner&lt;/li&gt;
                                              &lt;/ul&gt;&lt;br&gt;
                                              &lt;p&gt;As inscrições são gratuítas mas obrigatórias para &lt;a href="#"&gt;mariopinto@eseig.ipp.pt&lt;/a&gt;&lt;/p&gt;
                                              &lt;p&gt;Uma organização da Licenciatura em TSIW.&lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="item"&gt;
                                      &lt;div class="carousel-content" style="background-color:white;padding:5%;border-radius:10px"&gt;
                                          &lt;div&gt;
                                              &lt;h4 style="text-align:center;font-weight:900"&gt;Seminário de controlo de versões de software&lt;/h4&gt;
                                              &lt;p style="text-align:right"&gt;&lt;b&gt;Orador&lt;/b&gt;: Pedro Cunha, Software Engineer @ Multicert&lt;/p&gt;
                                              &lt;p&gt;Quem desenvolve software (SW) apercebe-se que nenhuma aplicação está totalmente acabada, há bugs por detetar, algoritmos a melhorar, interfaces a modificar... Atualmente é impensável desenvolver projetos de SW sem ter um sistema que controle tudo o que acontece, desde alterações de código até à própria documentação. Neste seminário, aberto a toda a comunidade da ESEIG, pretende-se introduzir os conceitos gerais dos sistemas de controlo de versões de SW mais utilizados atualmente, tendo como "case study" o Git.&lt;/p&gt;&lt;br&gt;
                                              &lt;br&gt;
                                              &lt;p style="text-align:left"&gt;&lt;b&gt;Data&lt;/b&gt;:Sexta-feira, 20 de maio de 2016, pelas 14h&lt;/p&gt;
                                              &lt;p style="text-align:left"&gt;&lt;b&gt;Local&lt;/b&gt;:Anfiteatro Joaquim Ribeiro (B101), ESEIG&lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="item"&gt;
                                      &lt;div class="carousel-content" style="background-color:white;padding:5%;border-radius:10px"&gt;
                                          &lt;div&gt;
                                              &lt;h4 style="text-align:center;font-weight:900"&gt;Desenvolvimento de Jogos em Unity em 120 minutos&lt;/h4&gt;
                                              &lt;p style="text-align:right"&gt;&lt;b&gt;Orador&lt;/b&gt;: Alberto Simões, IPCA.&lt;/p&gt;
                                              &lt;p&gt;Neste seminário procura-se demonstrar como implementar um pequeno jogo em unity, tirando partido de diferentes tipos de funcionalidades, bem como de recursos pré-disponibilizados, com o intuito de introduzir a filosofia de desenvolvimento de jogos em unity.&lt;/p&gt;&lt;br&gt;
                                              &lt;br&gt;
                                              &lt;p style="text-align:left"&gt;As inscrições são gratuítas mas obrigatórias para &lt;a href="#"&gt;mariopinto@eseig.ipp.pt&lt;/a&gt;&lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!-- Controls --&gt; &lt;a class="left carousel-control" data-slide="prev" href="#text-carousel"&gt;&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;&lt;/a&gt; &lt;a class="right carousel-control" data-slide="next" href="#text-carousel"&gt;&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row spacing2" id="thumbnails"&gt;
                  &lt;h3 id="PlanoEstudos"&gt;Projetos&lt;/h3&gt;
                  &lt;div class="col-md-3 spacing4"&gt;
                      &lt;div class="hovereffect"&gt;
                          &lt;img alt="" class="img img-responsive img-thumbnail" src="thumbnails/Damas.png" style="height:170px; width:240px"&gt;
                          &lt;div class="overlay"&gt;
                              &lt;h2&gt;Jogo das damas em Three.js&lt;/h2&gt;
                              &lt;p&gt;&lt;a href="#"&gt;LINK AQUI&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3 spacing4"&gt;
                      &lt;div class="hovereffect"&gt;
                          &lt;img alt="" class="img img-responsive img-thumbnail" src="thumbnails/MSDiary.png" style="height:170px; width:240px"&gt;
                          &lt;div class="overlay"&gt;
                              &lt;h2&gt;Plataforma de gestão de despesas&lt;/h2&gt;
                              &lt;p&gt;&lt;a href="#"&gt;LINK AQUI&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3 spacing4"&gt;
                      &lt;div class="hovereffect"&gt;
                          &lt;img alt="" class="img img-responsive img-thumbnail" src="thumbnails/Crowd.png" style="height:170px; width:240px"&gt;
                          &lt;div class="overlay"&gt;
                              &lt;h2&gt;Plataforma de inovação turística&lt;/h2&gt;
                              &lt;p&gt;&lt;a href="#"&gt;LINK AQUI&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3 spacing4"&gt;
                      &lt;div class="hovereffect"&gt;
                          &lt;img alt="" class="img img-responsive img-thumbnail" src="thumbnails/localize.jpg" style="height:170px; width:240px"&gt;
                          &lt;div class="overlay"&gt;
                              &lt;h2&gt;Plataforma de gestão de equipamentos na ESMAD&lt;/h2&gt;
                              &lt;p&gt;&lt;a href="#"&gt;LINK AQUI&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3 spacing4"&gt;
                      &lt;div class="hovereffect"&gt;
                          &lt;img alt="" class="img img-responsive img-thumbnail" src="thumbnails/SmartSquare.png" style="height:170px; width:240px"&gt;
                          &lt;div class="overlay"&gt;
                              &lt;h2&gt;Twitter personalizado da Esmad&lt;/h2&gt;
                              &lt;p&gt;&lt;a href="#"&gt;LINK AQUI&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3 spacing4"&gt;
                      &lt;div class="hovereffect"&gt;
                          &lt;img alt="" class="img img-responsive img-thumbnail" src="thumbnails/MSDiary.png" style="height:170px; width:240px"&gt;
                          &lt;div class="overlay"&gt;
                              &lt;h2&gt;Plataforma de gestão de despesas&lt;/h2&gt;
                              &lt;p&gt;&lt;a href="#"&gt;LINK AQUI&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3 spacing4"&gt;
                      &lt;div class="hovereffect"&gt;
                          &lt;img alt="" class="img img-responsive img-thumbnail" src="thumbnails/Crowd.png" style="height:170px; width:240px"&gt;
                          &lt;div class="overlay"&gt;
                              &lt;h2&gt;Plataforma de inovação turística&lt;/h2&gt;
                              &lt;p&gt;&lt;a href="#"&gt;LINK AQUI&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-3 spacing4"&gt;
                      &lt;div class="hovereffect"&gt;
                          &lt;img alt="" class="img img-responsive img-thumbnail" src="thumbnails/localize.jpg" style="height:170px; width:240px"&gt;
                          &lt;div class="overlay"&gt;
                              &lt;h2&gt;Plataforma de gestão de equipamentos na ESMAD&lt;/h2&gt;
                              &lt;p&gt;&lt;a href="#"&gt;LINK AQUI&lt;/a&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row spacing2"&gt;
                  &lt;h3 id="Parceiros"&gt;Parceiros&lt;/h3&gt;
                  &lt;div class="col-md-2 spacing4"&gt;
                      &lt;a href="http://www.criticalsoftware.com/pt/homepage"&gt;&lt;img alt="" class="img img-responsive img-thumbnail" src="parceiros/CriticalSoftware.png"&gt;&lt;/a&gt;
                  &lt;/div&gt;&lt;a href="http://www.globalmediagroup.pt/"&gt;
                  &lt;div class="col-md-2 spacing4"&gt;&lt;img alt="" class="img img-responsive img-thumbnail" src="parceiros/GlobalMedia.png"&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="https://www.facebook.com/pfrinvest/"&gt;
                  &lt;div class="col-md-2 spacing4"&gt;&lt;img alt="" class="img img-responsive img-thumbnail" src="parceiros/pfr.jpg" style="height:100px;width:200px"&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="http://www.planeta-virtual.pt/"&gt;
                  &lt;div class="col-md-2 spacing4"&gt;&lt;img alt="" class="img img-responsive img-thumbnail" src="parceiros/PlanetaVirtual.png"&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="https://www.sonae.pt/pt/"&gt;
                  &lt;div class="col-md-2 spacing4"&gt;&lt;img alt="" class="img img-responsive img-thumbnail" src="parceiros/Sonae.png"&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="http://www.agros.pt/"&gt;
                  &lt;div class="col-md-2 spacing4"&gt;&lt;img alt="" class="img img-responsive img-thumbnail" src="parceiros/Agros.png"&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-2 spacing4"&gt;&lt;img alt="" class="img img-responsive img-thumbnail" src="parceiros/VDC.png" style="height:100px;width:200px"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;div class="row spacing5"&gt;
                      &lt;div class="col-md-offset-1 col-md-3"&gt;
                          &lt;div class="row" style="margin-top:5%"&gt;
                              &lt;p&gt;Coordenador do curso: Mário Pinto&lt;/p&gt;
                              &lt;p&gt;Email: MarioPinto@eseig.ipp.pt&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;form action="" class="form-group"&gt;&lt;/form&gt;
                          &lt;textarea class="form-control" cols="30" id="" name="" rows="10"&gt;Dúvidas gerais acerca do curso...&lt;/textarea&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-offset-1 col-md-3" style="margin-top:12%"&gt;&lt;img alt="" class="img img-responsive img-thumbnail" src="Pporto.png"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;script src="jquery-3.1.1.js"&gt;
              &lt;/script&gt; 
              &lt;script src="bootstrap-3.3.7-dist/js/bootstrap.js"&gt;
              &lt;/script&gt; 
              &lt;script src="typed.js"&gt;
              &lt;/script&gt; 
              &lt;script src="page.js"&gt;
              &lt;/script&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>   $(document).ready(function(){
      console.log("a");
      var sentence1 = "System.out.println('TSIW - Um curso em constante inovação')";
      $("#wrapper").typed({
          strings: [sentence1],
          typeSpeed: 30
      });
  
      $(document).off('keypress');
      var menu = $('.menu2');
      var origOffsetY = menu.offset().top;
  
      function scroll() {
          if ($(window).scrollTop() &gt;= origOffsetY) {
              $('.menu2').addClass('sticky');
              $('.content').addClass('menu-padding');
          } else {
              $('.menu2').removeClass('sticky');
              $('.content').removeClass('menu-padding');
          }
  
  
      }
  
      document.onscroll = scroll;
  
  });
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>body{
      background-color:#D3D3D3;
      font-family: Exo;
  }
  
  .menuItem{
      display:inline-block;
      margin-left:150px;
      font-family:Exo;
      font-weight: 700;
      color:gray;
      line-height: 50px;
      height: 50px;
  }
  
  #menu{
      margin-right:200px;
  }
  
  
  .img-responsive{
      margin:0 auto;
  }
  
  #wrapper{
      text-align:center;
  }
  
  .centerBlock {
    background-color:#F8F8FF;
  }
  
  .spacing{
       margin-top:100px;
  }
  
  #Apresentacao{
      text-align:center;
      font-family:Exo;
      font-weight:900;
      font-size:2.2em;
  }
  
  .spacing2{
      margin-top:50px;
  }
  
  .aluno{
      margin-top:30px;
  }
  
  #competencias{
      padding:15px;
  }
  
  #Saidas{
      padding:15px;
  }
  
  .backColor {
      background-color: #D3D3D3;
      padding:0;
  }
  
  .foco{
      font-weight:700;
  }
  
  iframe{
     display: block;
      margin: 0 auto;
      max-width: 100%;
  }
  
  .spacing4{
      margin-top:20px;
  }
  
  #PlanoEstudos{
       text-align:center;
      font-family:Exo;
      font-weight:900;
      font-size:2.2em;
  }
  
  #Parceiros{
       text-align:center;
      font-family:Exo;
      font-weight:900;
      font-size:2.2em;
  }
  
  .carousel-control.left, 
  .carousel-control.right {
      background-image: none
  }
  
  #Noticias{
       text-align:center;
      font-family:Exo;
      font-weight:900;
      font-size:2.2em;
  }
  
  .ano{
      display:inline-block;
  }
  
  
  .anos{
  padding:0;
  }
  
  .ano{
      border:1px solid black;
      padding:2px;
  }
  
  td{
      width:50%;
  }
  
  
  
  .hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
  }
  
  .hovereffect .overlay {
    position: absolute;
    overflow: hidden;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
    border-bottom: 1px solid #FFF;
    border-top: 1px solid #FFF;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0,1);
    -ms-transform: scale(0,1);
    transform: scale(0,1);
  }
  
  .hovereffect:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  
  .hovereffect img {
    display: block;
    position: relative;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
  }
  
  .hovereffect:hover img {
    filter: url('data:image/svg+xml;charset=utf-8,&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;&lt;filter id="filter"&gt;&lt;feComponentTransfer color-interpolation-filters="sRGB"&gt;&lt;feFuncR type="linear" slope="0.6" /&gt;&lt;feFuncG type="linear" slope="0.6" /&gt;&lt;feFuncB type="linear" slope="0.6" /&gt;&lt;/feComponentTransfer&gt;&lt;/filter&gt;&lt;/svg&gt;#filter');
    filter: brightness(0.6);
    -webkit-filter: brightness(0.6);
  }
  
  .hovereffect h2 {
    text-transform: uppercase;
    text-align: center;
    position: relative;
    font-size: 17px;
    background-color: transparent;
    color: #FFF;
    padding: 1em 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
  }
  
  .hovereffect a, hovereffect p {
    color: #FFF;
    padding: 1em 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.65s, -webkit-transform 0.35s;
    transition: opacity 0.65s, transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }
  
  .hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  
  .texture{
      background-image: url('texture.jpg');
      padding:0;
  }
  
  .spacing5{
      margin-top:150px;
  }
  
  
  .carousel-content {
      color:black;
      display:flex;
      align-items:center;
  }
  
  #text-carousel {
    width: 100%;
    height: auto;
    padding: 50px;
  }
  
  #noti{
      padding:20px;
  }
  
  
  
  .logo, .intro, .menu, .content {
      padding:10px;
  }
  .menu {
  
      background:#428bca;
      color:#fff;
      height:50px;
      line-height:30px;
      letter-spacing:1px;
      width:100%;
      z-index: -1; position:relative;
  
  }
  .content {
      margin-top:10px;
  
  }
  .menu-padding {
      padding-top:40px;
  }
  .content p {
      margin-bottom:20px;
  }
  .sticky {
      position:fixed;
      top:0;
  }
  </code></pre>