Footer is not hidden with page content

Question

Footer is not hidden with page content

Navigation

#1 by (2 votes)

0

A few weeks ago I asked a question about making a parallax effect in a footer and got the answer: Parallax in the footer

But now I've made another page that I want to achieve this same effect. I followed the same steps and still not going at all, I apologize beforehand for the page being messed up and the lack of pictures and js more the main and that I am not able to leave me skirting hidden as in the response of my other post. Here is the code below:

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><scripttype="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><scripttype="text/javascript">
            $(document).ready(function () {
                $("html").niceScroll();
            });
        </script> -->
</body>

</html>

html5 css3

asked by anonymous 07.05.2015 / 16:05

1 answer

Error trying to run JSF application Div with float does not fit the grid

score 2 · Accepted Answer

The problem is that you're leaving the background for #main transparent , so you're viewing footer . Arrange by setting the background-color:#FFFFFF; property in the rule set to #main . It looks like you're using float , so in order content does not "finish" before your content, add the following rule in your CSS.

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

This will make the content end after all floats .

Code:

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>

If the problem is not in the images and scripts, you do not need to add them to your question, clean your code before posting, leave it more objective.

with a focus on the problem. You put so much "junk" together that I lost considerable time to find the problem, something that if the code was "clean" would be a lot easier.