Footer is not hidden with page content

Asked

Viewed 66 times

0

A few weeks ago I asked a question about having an effect Parallax in a footnote and got the answer: Parallax in the footer

But now I’ve made another page that I want to get that same effect. I followed the same steps and still will not at all apologize before hand for the page is messy because and the lack of images and js plus the main and that I am not able to leave me hidden footnote as in the reply of my other post. Follow 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>
  <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>

html5 css3

1 answer

2


The problem is that you are leaving the background of #main Transparent, That’s why he’s exhibiting the footer. Arrange placing the property background-color:#FFFFFF; in the set of rules for #main. Looks like you’re using float, then why the content not "finish" before your content, add the following rule to 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>

Obs.: If the problem is not in the images and scripts, you do not need to add them to your question, clear your code before posting, leave it as objective as possible 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 much easier.

  • Thanks @Kaduamaral for the help and tip

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.