0

Há algumas semanas atrás fiz uma pergunta sobre fazer um efeito de parallax em um rodapé e obtive a resposta: Parallax no rodapé

Porém agora fiz uma outra página que quero obter esse mesmo efeito. Eu segui os mesmos passos e mesmo assim não vai de jeito nenhum peço desculpas de ante mão pela a pagina estar bagunçada pois e a falta de imagens e de js mais o principal e que não estou conseguindo deixar me rodapé escondido como na resposta do meu outro post. Segue o código abaixo:

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
}
figcaption {
  color: #fff;
}
ul li {
  list-style-type: none;
}
a {
  text-decoration: none;
}
/********************************************************************
                            
                             parallax

***********************************************************************/

.layer img {
  display: block;
  width: 105%;
  overflow: hidden;
}
.container {
  position: relative;
}
.scene {
  background: #000;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.layer:nth-child(1) {} .layer:nth-child(1) button {
  -webkit-transform: rotate(150deg);
}
.layer:nth-child(2) {} .layer:nth-child(2) button {
  -webkit-transform: rotate(120deg);
}
.layer:nth-child(3) {} .layer:nth-child(3) button {
  -webkit-transform: rotate(90deg);
}
.layer:nth-child(4) {} .layer:nth-child(4) button {
  -webkit-transform: rotate(60deg);
}
.layer:nth-child(5) {} .layer:nth-child(5) button {
  -webkit-transform: rotate(30deg);
}
.layer:nth-child(6) {} .layer:nth-child(6) button {} #homen {
  margin-left: 5%;
  margin-top: 3.7%;
}
@-webkit-keyframes movimento-diagonal {
  from {
    top: 0px;
  }
  to {
    top: 10px;
  }
}
#anim {
  -webkit-animation-name: movimento-diagonal;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  /*para que volte a sua posicao inicial */
  width: 100px;
  color: #fff;
  position: absolute;
  z-index: 3;
  margin-top: -1%;
}
/********************************************************************
                            
                             Menu-header

***********************************************************************/

#menu ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: absolute;
  top: 3.5%;
  left: 28%;
  z-index: 200;
}
#menu ul li {
  display: inline;
}
#menu ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 1.4em;
  font-family: Gabriola;
  margin: 5px;
  cursor: pointer;
}
#menu ul li a:hover {
  color: #f80;
}
.seta-menu {
  position: absolute;
  top: 7%;
  left: 11%;
  z-index: 5;
  transform: scale(0.9);
}
#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  /*  box-shadow: inset 0px 0px 200px 100px rgba(0,0,0,0.6);*/
}
.fontes-header {
  position: absolute;
  z-index: 6;
  top: 15%;
  left: 50%;
  line-height: 1px;
  text-align: right;
}
.titulo-header {
  color: #fff;
  font-size: 4.5em;
  font-weight: bold;
  font-family: Gabriola;
}
.fontes-header h2 {
  color: #f80;
  font-family: Gabriola;
  font-weight: bold;
  font-size: 1.5em;
}
.fontes-header p {
  line-height: 1em;
  color: #fff;
  font-family: Gabriola;
  font-size: 1.3em;
}
/********************************************************************
                            
                           corpo-sobre-findadores

***********************************************************************/

.titulo-sobre {
  line-height: 25px;
}
.titulo-sobre h1 {
  color: #fff;
  text-align: center;
  font-family: Gabriola;
  font-size: 3em;
  font-weight: bold;
}
.titulo-sobre p {
  color: #fff;
  text-align: center;
  font-family: Gabriola;
  font-size: 1.3em;
}
#char-1 {
  margin-left: 10%;
}
#sobre-char-1 {
  font-family: Gabriola;
  font-size: 1.3em;
  float: right;
  margin-top: 5%;
}
#sobre-char-1 ul li {
  display: block;
  text-indent: -8%;
}
#sobre-char-1 ul li strong {
  font-weight: bold;
  font-size: 1.3em;
  color: #f80;
}
#linha-char-1 {
  transform: scale(0.5);
  float: right;
  position: absolute;
  top: 58%;
  left: 37%;
}
.redes-sociais-char-1 {
  position: absolute;
  left: 62.7%;
}
.redes-sociais-char-1 li {
  display: inline;
}
.redes-sociais-char-1 li a img {
  transform: scale(0.7);
  width: 50px !important;
  border: 2px solid #fff;
  border-radius: 100px;
}
/*Char-2*/

#char-2 {
  margin-top: -5%;
  margin-left: 40%;
  transform: scale(0.6);
}
#sobre-char-2 {
  font-family: Gabriola;
  font-size: 1.3em;
  float: left;
  margin-top: -50%;
}
#sobre-char-2 ul li {
  display: block;
  text-indent: -8%;
}
#sobre-char-2 ul li strong {
  font-weight: bold;
  font-size: 1.3em;
  color: #f80;
}
#linha-char-2 {
  transform: scale(0.5);
  float: left;
  position: absolute;
  top: 65%;
  right: 43%;
}
/*Char-3*/

#char-3 {
  margin-top: -1%;
  margin-left: 10%;
  transform: scale(1.1);
}
#sobre-char-3 {
  font-family: Gabriola;
  font-size: 1.3em;
  float: right;
  margin-top: 2%;
}
#sobre-char-3 ul li {
  display: block;
  text-indent: -8%;
}
#sobre-char-3 ul li strong {
  font-weight: bold;
  font-size: 1.3em;
  color: #f80;
}
#linha-char-3 {
  transform: scale(0.5);
  float: right;
  position: absolute;
  top: 65%;
  left: 37%;
}
/********************************************************************
                            
                          Diferencial

***********************************************************************/

.diferencial {
  color: #fff;
  text-align: center;
  font-family: Gabriola;
  font-weight: bold;
  font-size: 2em;
}
.coluna-1 {
  margin-top: 5%;
  margin-left: 25%;
  float: left;
}
.coluna-1 h2 {
  color: #f80;
  font-family: Gabriola;
  font-size: 1.7em;
}
.coluna-1 p {
  color: #fff;
  font-family: Gabriola;
  font-size: 1.2em;
}
#jogos {
  background: transparent;
  width: 200px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-family: Gabriola;
  font-size: 1.3em;
  text-align: center;
  cursor: pointer;
  transition: 0.5s;
}
#jogos:hover {
  color: #000;
  background: #fff;
  transition: 0.5s;
}
.coluna-2 {
  float: right;
  margin-right: 20%;
  margin-top: 5%;
}
.coluna-2 h2 {
  color: #f80;
  font-family: Gabriola;
  font-size: 1.7em;
  text-align: left;
  margin-right: 25%;
}
.coluna-2 p {
  color: #fff;
  font-family: Gabriola;
  font-size: 1.2em;
}
#ts {
  background: transparent;
  width: 200px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-family: Gabriola;
  font-size: 1.3em;
  text-align: center;
  cursor: pointer;
  transition: 0.5s;
}
#ts:hover {
  color: #000;
  background: #fff;
  transition: 0.5s;
}
/********************************************************************
                            
                          Roda-pé

***********************************************************************/

#main {
  position: relative;
  z-index: 2;
  min-height: 800px;
  margin: 0 0 400px;
}
#main-footer {
  position: fixed;
  bottom: 0;
  height: 400px;
  width: 100%;
  background-color: #CCC;
  text-align: center;
  z-index: 1;
}
.content {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}
.teste-footer {
  position: relative;
  font-size: 22px;
  line-height: 25px;
  padding: 80px 0;
  text-align: center;
}
/********************************************************************
                            
                           Particulas

***********************************************************************/

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>nova era | Sobre</title>
  <link rel="stylesheet" type="text/css" href="css/sobre/style-sobre.css" />
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/animate.css" />
  <link rel="stylesheet" type="text/css" href="css/sobre/demo.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script type="text/javascript" src="js/sobre/modernizr.custom.28468.js"></script>
  <script src="js/sobre/modernizr.js"></script>
</head>

<body>
  <div id="main">
    <div class="content">
      <nav id="menu">
        <ul>
          <li><a href="index.html">Home</a>
          </li>
          <li><a href="sobre-fundadores.html">Sobre</a>
          </li>
          <li><a href="#">Games</a>
          </li>
          <li><a href="#">Galeria</a>
          </li>
          <li><a href="#">Team</a>
          </li>
          <li><a href="#">Contoto</a>
          </li>
          <li><a href="#">Ajuda</a>
          </li>
          <li><a href="#">Forum</a>
          </li>
        </ul>
      </nav>

      <div class="fontes-header">
        <h1 class="titulo-header">Sobre a Nova Era</h1>
        <h2>A MELHOR COMUNIDADE DE GAMES</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
          <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus,
          <br>mollis sit amet vehicula id, volutpat eget mauris. Lorem ipsum dolor sit amet
          <br>consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula ut justo commodo
          <br>porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.
          <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
          <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet
          <br>vehicula id, volutpat eget mauris.Lorem ipsum dolor sit amet, consectetur</p>
      </div>

      <div class="seta-menu">
        <img src="images/linha-estilo-menu.png">
      </div>
      <div id="anim">
        <img src="images/sobre/mao.png" id="mao">
      </div>
      <div id="container" class="container">
        <ul id="scene" class="scene">
          <li class="layer" data-depth="0.04">
            <img src="images/sobre/floresta10.png">
          </li>
          <li class="layer" data-depth="0.09">
            <img src="images/sobre/homen-zumbi5.png" id="homen">
          </li>
        </ul>
      </div>

      <!--===================================================================================================

                                                    corpo-sobre-findadores 

            =======================================================================================================-->

      <div id="particles-js">

      </div>

      <div class="titulo-sobre">
        <h1>Conheça  os Fundadores</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
          <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus.</p>
      </div>

      <section class="section--blue wow bounceInLeft char-1" data-wow-offset="300">
        <figure>
          <img src="images/sobre/char-1.png" id="char-1">
          <figcaption id="sobre-char-1">

            <ul>
              <li><strong>Nome:</strong>&nbsp;&nbsp;Phelipe Alves</li>
              <li><strong>Idade:</strong>&nbsp;&nbsp;19</li>
              <li><strong>Cargo:</strong>&nbsp;&nbsp;Fundador</li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus,
              <br>mollis sit amet vehicula id, volutpat eget mauris. Lorem ipsum dolor sit amet
              <br>consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula ut justo commodo
              <br>porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.
              <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet
              <br>vehicula id, volutpat eget mauris.Lorem ipsum dolor sit amet, consectetur</p>

          </figcaption>
          <img src="images/linha-estilo-menu.png" id="linha-char-1">
        </figure>

        <div class="component">
          <a href="#" class="icon icon-mono facebook">
            <img src="images/sobre/facebook.png">
          </a>
          <a href="#" class="icon icon-mono twitter">
            <img src="images/sobre/twitter.png">
          </a>
          <a href="#" class="icon icon-mono googleplus">
            <img src="images/sobre/google-plus.png">+</a>
        </div>
      </section>


      <section class="section--blue wow bounceInRight char-2" data-wow-offset="300">
        <figure>
          <img src="images/sobre/char-2.png" id="char-2">
          <figcaption id="sobre-char-2">
            <ul>
              <li><strong>Nome:</strong>&nbsp;&nbsp;Phelipe Alves</li>
              <li><strong>Idade:</strong>&nbsp;&nbsp;19</li>
              <li><strong>Cargo:</strong>&nbsp;&nbsp;Fundador</li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus,
              <br>mollis sit amet vehicula id, volutpat eget mauris. Lorem ipsum dolor sit amet
              <br>consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula ut justo commodo
              <br>porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.
              <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet
              <br>vehicula id, volutpat eget mauris.Lorem ipsum dolor sit amet, consectetur</p>
          </figcaption>
          <img src="images/linha-estilo-menu.png" id="linha-char-2">
        </figure>
        <div class="component-2">
          <a href="#" class="icon icon-mono facebook">
            <img src="images/sobre/facebook.png">
          </a>
          <a href="#" class="icon icon-mono twitter">
            <img src="images/sobre/twitter.png">
          </a>
          <a href="#" class="icon icon-mono googleplus">
            <img src="images/sobre/google-plus.png">+</a>
        </div>
      </section>


      <section class="section--blue wow bounceInLeft char-3" data-wow-offset="300">
        <figure>
          <img src="images/sobre/char-3.png" id="char-3">
          <figcaption id="sobre-char-3">
            <ul>
              <li><strong>Nome:</strong>&nbsp;&nbsp;Phelipe Alves</li>
              <li><strong>Idade:</strong>&nbsp;&nbsp;19</li>
              <li><strong>Cargo:</strong>&nbsp;&nbsp;Fundador</li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus,
              <br>mollis sit amet vehicula id, volutpat eget mauris. Lorem ipsum dolor sit amet
              <br>consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula ut justo commodo
              <br>porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.
              <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet
              <br>vehicula id, volutpat eget mauris.Lorem ipsum dolor sit amet, consectetur</p>
          </figcaption>
          <img src="images/linha-estilo-menu.png" id="linha-char-3">
        </figure>
        <div class="component-3">
          <a href="#" class="icon icon-mono facebook">
            <img src="images/sobre/facebook.png">
          </a>
          <a href="#" class="icon icon-mono twitter">
            <img src="images/sobre/twitter.png">
          </a>
          <a href="#" class="icon icon-mono googleplus">
            <img src="images/sobre/google-plus.png">+</a>
        </div>
      </section>
      <br>
      <br>

      <!--===================================================================================================
            
                                                           Depoimentos 
            
            =======================================================================================================-->


      <div class="container">

        <div id="da-slider" class="da-slider">
          <!-- <img src="images/sobre/bg-team.png"> -->
          <div class="da-slide">

            <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>

            <div class="da-img">
              <img src="images/sobre/aspas.png" alt="image01" />
            </div>
          </div>
          <div class="da-slide">

            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>

            <div class="da-img">
              <img src="images/sobre/aspas.png" alt="image01" />
            </div>
          </div>
          <div class="da-slide">

            <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>

            <div class="da-img">
              <img src="images/sobre/aspas.png" alt="image01" />
            </div>
          </div>
          <div class="da-slide">

            <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>

            <div class="da-img">
              <img src="images/sobre/aspas.png" alt="image01" />
            </div>
          </div>
          <nav class="da-arrows">
            <span class="da-arrows-prev"></span>
            <span class="da-arrows-next"></span>
          </nav>
        </div>
      </div>

      <!--===================================================================================================
            
                                                           Diferencial
            
            =======================================================================================================-->

      <!-- <center></center> -->
      <h1 class="diferencial">Nosso Diferencial</h1>

      <section class="section--blue wow bounceInLeft " data-wow-offset="300">
        <div class="coluna-1">
          <h2>Lorem Ipsum Dolor</h2>
          <p>Lorem ipsum dolor sit amet, consectetur elit,
            <br>sed do eiusmod tempor incididunt ut labore et aliqua.
            <br>Ut enim ad minim veniam, quis nostrud ullamco
            <br>laboris nisi ut aliquip ex ea commodo consequat.
            <br>Duis aute irure dolor in reprehenderit in voluptate
            <br>velit esse cillum dolore eu fugiat nulla pariatur.
            <br>Excepteur sint occaecat cupidatat non proident,
            <br>sunt in culpa qui officia deserunt mollit laborum.</p>
          <input type="button" id="jogos" value="Veja nosso games ..." />
        </div>

      </section>

      <section class="section--blue wow bounceInRight" data-wow-offset="300">
        <div class="coluna-2">
          <h2>Lorem Ipsum Dolor</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            <br>sed do eiusmod tempor incididunt ut labore et aliqua.
            <br>Ut enim ad minim veniam, quis nostrud ullamco
            <br>laboris nisi ut aliquip ex ea commodo consequat.
            <br>Duis aute irure dolor in reprehenderit in voluptate
            <br>velit esse cillum dolore eu fugiat nulla pariatur.
            <br>Excepteur sint occaecat cupidatat non proident,
            <br>sunt in culpa qui officia deserunt mollit laborum.</p>
          <input type="button" id="ts" value="Conheça o TeamSpeak ..." />
        </div>
      </section>
    </div>
  </div>

  <!--===================================================================================================
        
                                                        Roda-pé
        
            =======================================================================================================-->

  <footer id="main-footer">
    <div class="content">
      <div class="teste-footer">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero officia beatae praesentium accusamus, delectus possimus ea eligendi minima, laudantium amet corrupti quas quae sint sunt, a iure. Quaerat, recusandae, voluptatibus.</p>
      </div>
    </div>
  </footer>

  <!--===================================================================================================
        
                                                        Scripts 
        
        =======================================================================================================-->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/sobre/jquery.cslider.js"></script>
  <script type="text/javascript">
    $(function() {

      $('#da-slider').cslider();

    });
  </script>


  <script src="js/sobre/particles.js"></script>
  <script src="js/sobre/app.js"></script>
  <script>
    var stats = new Stats();
    stats.setMode(0); // 0: fps, 1: ms
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
    var update = function() {
      stats.begin();
      // monitored code goes here
      stats.end();
      requestAnimationFrame(update);
    };
    requestAnimationFrame(update);
  </script>


  <script src="js/sobre/jquery.parallax.js"></script>
  <script>
    // Yep, that's it!
    $('#scene').parallax();
  </script>

  <script src="js/wow.js"></script>
  <script>
    wow = new WOW({
      animateClass: 'animated',
      offset: 100,
      callback: function(box) {
        console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
      }
    });
    wow.init();
    document.getElementById('moar').onclick = function() {
      var section = document.createElement('section');
      section.className = 'section--purple wow fadeInDown';
      this.parentNode.insertBefore(section, this);
    };
  </script>


  <!--  <script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("html").niceScroll();
            });
        </script> -->
</body>

</html>

1 Resposta 1

2

O problema é que você está deixando o background do #main transparent, por isso está exibindo o footer. Arrume colocando a propriedade background-color:#FFFFFF; no conjunto de regras para #main. Parece que você está utilizando float, então para que o content não "termine" antes do seu conteúdo, adicione a seguinte regra no teu CSS.

.content::after {
  content: '';
  display: block;
  clear: both;
}

Isso vai fazer com que o content termine após todos os floats.


Código:

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
}
figcaption {
  color: #fff;
}
ul li {
  list-style-type: none;
}
a {
  text-decoration: none;
}
/********************************************************************
                            
                             parallax

***********************************************************************/

.layer img {
  display: block;
  width: 105%;
  overflow: hidden;
}
.container {
  position: relative;
}
.scene {
  background: #000;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.layer:nth-child(1) {} .layer:nth-child(1) button {
  -webkit-transform: rotate(150deg);
}
.layer:nth-child(2) {} .layer:nth-child(2) button {
  -webkit-transform: rotate(120deg);
}
.layer:nth-child(3) {} .layer:nth-child(3) button {
  -webkit-transform: rotate(90deg);
}
.layer:nth-child(4) {} .layer:nth-child(4) button {
  -webkit-transform: rotate(60deg);
}
.layer:nth-child(5) {} .layer:nth-child(5) button {
  -webkit-transform: rotate(30deg);
}
.layer:nth-child(6) {} .layer:nth-child(6) button {} #homen {
  margin-left: 5%;
  margin-top: 3.7%;
}
@-webkit-keyframes movimento-diagonal {
  from {
    top: 0px;
  }
  to {
    top: 10px;
  }
}
#anim {
  -webkit-animation-name: movimento-diagonal;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  /*para que volte a sua posicao inicial */
  width: 100px;
  color: #fff;
  position: absolute;
  z-index: 3;
  margin-top: -1%;
}
/********************************************************************
                            
                             Menu-header

***********************************************************************/

#menu ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: absolute;
  top: 3.5%;
  left: 28%;
  z-index: 200;
}
#menu ul li {
  display: inline;
}
#menu ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 1.4em;
  font-family: Gabriola;
  margin: 5px;
  cursor: pointer;
}
#menu ul li a:hover {
  color: #f80;
}
.seta-menu {
  position: absolute;
  top: 7%;
  left: 11%;
  z-index: 5;
  transform: scale(0.9);
}
#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  /*  box-shadow: inset 0px 0px 200px 100px rgba(0,0,0,0.6);*/
}
.fontes-header {
  position: absolute;
  z-index: 6;
  top: 15%;
  left: 50%;
  line-height: 1px;
  text-align: right;
}
.titulo-header {
  color: #fff;
  font-size: 4.5em;
  font-weight: bold;
  font-family: Gabriola;
}
.fontes-header h2 {
  color: #f80;
  font-family: Gabriola;
  font-weight: bold;
  font-size: 1.5em;
}
.fontes-header p {
  line-height: 1em;
  color: #fff;
  font-family: Gabriola;
  font-size: 1.3em;
}
/********************************************************************
                            
                           corpo-sobre-findadores

***********************************************************************/

.titulo-sobre {
  line-height: 25px;
}
.titulo-sobre h1 {
  color: #fff;
  text-align: center;
  font-family: Gabriola;
  font-size: 3em;
  font-weight: bold;
}
.titulo-sobre p {
  color: #fff;
  text-align: center;
  font-family: Gabriola;
  font-size: 1.3em;
}
#char-1 {
  margin-left: 10%;
}
#sobre-char-1 {
  font-family: Gabriola;
  font-size: 1.3em;
  float: right;
  margin-top: 5%;
}
#sobre-char-1 ul li {
  display: block;
  text-indent: -8%;
}
#sobre-char-1 ul li strong {
  font-weight: bold;
  font-size: 1.3em;
  color: #f80;
}
#linha-char-1 {
  transform: scale(0.5);
  float: right;
  position: absolute;
  top: 58%;
  left: 37%;
}
.redes-sociais-char-1 {
  position: absolute;
  left: 62.7%;
}
.redes-sociais-char-1 li {
  display: inline;
}
.redes-sociais-char-1 li a img {
  transform: scale(0.7);
  width: 50px !important;
  border: 2px solid #fff;
  border-radius: 100px;
}
/*Char-2*/

#char-2 {
  margin-top: -5%;
  margin-left: 40%;
  transform: scale(0.6);
}
#sobre-char-2 {
  font-family: Gabriola;
  font-size: 1.3em;
  float: left;
  margin-top: -50%;
}
#sobre-char-2 ul li {
  display: block;
  text-indent: -8%;
}
#sobre-char-2 ul li strong {
  font-weight: bold;
  font-size: 1.3em;
  color: #f80;
}
#linha-char-2 {
  transform: scale(0.5);
  float: left;
  position: absolute;
  top: 65%;
  right: 43%;
}
/*Char-3*/

#char-3 {
  margin-top: -1%;
  margin-left: 10%;
  transform: scale(1.1);
}
#sobre-char-3 {
  font-family: Gabriola;
  font-size: 1.3em;
  float: right;
  margin-top: 2%;
}
#sobre-char-3 ul li {
  display: block;
  text-indent: -8%;
}
#sobre-char-3 ul li strong {
  font-weight: bold;
  font-size: 1.3em;
  color: #f80;
}
#linha-char-3 {
  transform: scale(0.5);
  float: right;
  position: absolute;
  top: 65%;
  left: 37%;
}
/********************************************************************
                            
                          Diferencial

***********************************************************************/

.diferencial {
  color: #fff;
  text-align: center;
  font-family: Gabriola;
  font-weight: bold;
  font-size: 2em;
}
.coluna-1 {
  margin-top: 5%;
  margin-left: 25%;
  float: left;
}
.coluna-1 h2 {
  color: #f80;
  font-family: Gabriola;
  font-size: 1.7em;
}
.coluna-1 p {
  color: #fff;
  font-family: Gabriola;
  font-size: 1.2em;
}
#jogos {
  background: transparent;
  width: 200px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-family: Gabriola;
  font-size: 1.3em;
  text-align: center;
  cursor: pointer;
  transition: 0.5s;
}
#jogos:hover {
  color: #000;
  background: #fff;
  transition: 0.5s;
}
.coluna-2 {
  float: right;
  margin-right: 20%;
  margin-top: 5%;
}
.coluna-2 h2 {
  color: #f80;
  font-family: Gabriola;
  font-size: 1.7em;
  text-align: left;
  margin-right: 25%;
}
.coluna-2 p {
  color: #fff;
  font-family: Gabriola;
  font-size: 1.2em;
}
#ts {
  background: transparent;
  width: 200px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-family: Gabriola;
  font-size: 1.3em;
  text-align: center;
  cursor: pointer;
  transition: 0.5s;
}
#ts:hover {
  color: #000;
  background: #fff;
  transition: 0.5s;
}
/********************************************************************
                            
                          Roda-pé

***********************************************************************/

#main {
  position: relative;
  z-index: 2;
  min-height: 800px;
  margin: 0 0 400px;
  background-color:#FFF;
}
#main-footer {
  position: fixed;
  bottom: 0;
  height: 400px;
  width: 100%;
  background-color: #CCC;
  text-align: center;
  z-index: 1;
}
.content {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}
.content::after {
  content: '';
  display: block;
  clear: both;
}
.teste-footer {
  position: relative;
  font-size: 22px;
  line-height: 25px;
  padding: 80px 0;
  text-align: center;
}
/********************************************************************
                            
                           Particulas

***********************************************************************/

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
}
  <div id="main">
    <div class="content">
      <nav id="menu">
        <ul>
          <li><a href="index.html">Home</a>
          </li>
          <li><a href="sobre-fundadores.html">Sobre</a>
          </li>
          <li><a href="#">Games</a>
          </li>
          <li><a href="#">Galeria</a>
          </li>
          <li><a href="#">Team</a>
          </li>
          <li><a href="#">Contoto</a>
          </li>
          <li><a href="#">Ajuda</a>
          </li>
          <li><a href="#">Forum</a>
          </li>
        </ul>
      </nav>

      <div class="fontes-header">
        <h1 class="titulo-header">Sobre a Nova Era</h1>
        <h2>A MELHOR COMUNIDADE DE GAMES</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
          <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus,
          <br>mollis sit amet vehicula id, volutpat eget mauris. Lorem ipsum dolor sit amet
          <br>consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula ut justo commodo
          <br>porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.
          <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
          <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet
          <br>vehicula id, volutpat eget mauris.Lorem ipsum dolor sit amet, consectetur</p>
      </div>

      <div class="seta-menu">

      </div>
      <div id="anim">

      </div>
      <div id="container" class="container">
        <ul id="scene" class="scene">
          <li class="layer" data-depth="0.04">

          </li>
          <li class="layer" data-depth="0.09">

          </li>
        </ul>
      </div>

      <!--===================================================================================================

                                                    corpo-sobre-findadores 

            =======================================================================================================-->

      <div id="particles-js">

      </div>

      <div class="titulo-sobre">
        <h1>Conheça  os Fundadores</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
          <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus.</p>
      </div>

      <section class="section--blue wow bounceInLeft char-1" data-wow-offset="300">
        <figure>

          <figcaption id="sobre-char-1">

            <ul>
              <li><strong>Nome:</strong>&nbsp;&nbsp;Phelipe Alves</li>
              <li><strong>Idade:</strong>&nbsp;&nbsp;19</li>
              <li><strong>Cargo:</strong>&nbsp;&nbsp;Fundador</li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus,
              <br>mollis sit amet vehicula id, volutpat eget mauris. Lorem ipsum dolor sit amet
              <br>consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula ut justo commodo
              <br>porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.
              <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet
              <br>vehicula id, volutpat eget mauris.Lorem ipsum dolor sit amet, consectetur</p>

          </figcaption>

        </figure>

        <div class="component">
          <a href="#" class="icon icon-mono facebook">

          </a>
          <a href="#" class="icon icon-mono twitter">

          </a>
          <a href="#" class="icon icon-mono googleplus">

            +</a>
        </div>
      </section>


      <section class="section--blue wow bounceInRight char-2" data-wow-offset="300">
        <figure>

          <figcaption id="sobre-char-2">
            <ul>
              <li><strong>Nome:</strong>&nbsp;&nbsp;Phelipe Alves</li>
              <li><strong>Idade:</strong>&nbsp;&nbsp;19</li>
              <li><strong>Cargo:</strong>&nbsp;&nbsp;Fundador</li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus,
              <br>mollis sit amet vehicula id, volutpat eget mauris. Lorem ipsum dolor sit amet
              <br>consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula ut justo commodo
              <br>porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.
              <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet
              <br>vehicula id, volutpat eget mauris.Lorem ipsum dolor sit amet, consectetur</p>
          </figcaption>

        </figure>
        <div class="component-2">
          <a href="#" class="icon icon-mono facebook">

          </a>
          <a href="#" class="icon icon-mono twitter">

          </a>
          <a href="#" class="icon icon-mono googleplus">

           +</a>
        </div>
      </section>


      <section class="section--blue wow bounceInLeft char-3" data-wow-offset="300">
        <figure>

          <figcaption id="sobre-char-3">
            <ul>
              <li><strong>Nome:</strong>&nbsp;&nbsp;Phelipe Alves</li>
              <li><strong>Idade:</strong>&nbsp;&nbsp;19</li>
              <li><strong>Cargo:</strong>&nbsp;&nbsp;Fundador</li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus,
              <br>mollis sit amet vehicula id, volutpat eget mauris. Lorem ipsum dolor sit amet
              <br>consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula ut justo commodo
              <br>porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.
              <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
              <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet
              <br>vehicula id, volutpat eget mauris.Lorem ipsum dolor sit amet, consectetur</p>
          </figcaption>

        </figure>
        <div class="component-3">
          <a href="#" class="icon icon-mono facebook">

          </a>
          <a href="#" class="icon icon-mono twitter">

          </a>
          <a href="#" class="icon icon-mono googleplus">

           +</a>
        </div>
      </section>
      <br>
      <br>

      <!--===================================================================================================
            
                                                           Depoimentos 
            
            =======================================================================================================-->


      <div class="container">

        <div id="da-slider" class="da-slider">

          <div class="da-slide">

            <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>

            <div class="da-img">

            </div>
          </div>
          <div class="da-slide">

            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>

            <div class="da-img">

            </div>
          </div>
          <div class="da-slide">

            <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>

            <div class="da-img">

            </div>
          </div>
          <div class="da-slide">

            <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>

            <div class="da-img">

            </div>
          </div>
          <nav class="da-arrows">
            <span class="da-arrows-prev"></span>
            <span class="da-arrows-next"></span>
          </nav>
        </div>
      </div>

      <!--===================================================================================================
            
                                                           Diferencial
            
            =======================================================================================================-->

      <!-- <center></center> -->
      <h1 class="diferencial">Nosso Diferencial</h1>

      <section class="section--blue wow bounceInLeft " data-wow-offset="300">
        <div class="coluna-1">
          <h2>Lorem Ipsum Dolor</h2>
          <p>Lorem ipsum dolor sit amet, consectetur elit,
            <br>sed do eiusmod tempor incididunt ut labore et aliqua.
            <br>Ut enim ad minim veniam, quis nostrud ullamco
            <br>laboris nisi ut aliquip ex ea commodo consequat.
            <br>Duis aute irure dolor in reprehenderit in voluptate
            <br>velit esse cillum dolore eu fugiat nulla pariatur.
            <br>Excepteur sint occaecat cupidatat non proident,
            <br>sunt in culpa qui officia deserunt mollit laborum.</p>
          <input type="button" id="jogos" value="Veja nosso games ..." />
        </div>

      </section>

      <section class="section--blue wow bounceInRight" data-wow-offset="300">
        <div class="coluna-2">
          <h2>Lorem Ipsum Dolor</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            <br>sed do eiusmod tempor incididunt ut labore et aliqua.
            <br>Ut enim ad minim veniam, quis nostrud ullamco
            <br>laboris nisi ut aliquip ex ea commodo consequat.
            <br>Duis aute irure dolor in reprehenderit in voluptate
            <br>velit esse cillum dolore eu fugiat nulla pariatur.
            <br>Excepteur sint occaecat cupidatat non proident,
            <br>sunt in culpa qui officia deserunt mollit laborum.</p>
          <input type="button" id="ts" value="Conheça o TeamSpeak ..." />
        </div>
      </section>
    </div>
  </div>

  <!--===================================================================================================
        
                                                        Roda-pé
        
            =======================================================================================================-->

  <footer id="main-footer">
    <div class="content">
      <div class="teste-footer">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero officia beatae praesentium accusamus, delectus possimus ea eligendi minima, laudantium amet corrupti quas quae sint sunt, a iure. Quaerat, recusandae, voluptatibus.</p>
      </div>
    </div>
  </footer>


Obs.: Se o problema não está nas imagens e nos scripts, você não precisa adiciona-los à sua pergunta, limpe o seu código antes de postar, deixe-o mais objetivo possível com foco no problema. Você colocou tanto "lixo" junto que perdi um tempo considerável para encontrar o problema, algo que se o código estivesse "limpo" seria bem mais fácil.

1
  • obrigado @KaduAmaral pela ajuda e pela dica 8/05/2015 às 11:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .