@import url('https://fonts.googleapis.com/css?family=Paytone+One');
html,body {
height: 100%; /* é necessário definir o height 100% no html, body ou qualquer elemento que estiver entre o body e o .container */
padding: 0;
margin: 0;
}
body {
background: url(https://images5.alphacoders.com/568/568653.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
}
body > main {
flex: 1; /*ocupa todo espaço menos a altura do footer */
}
body > footer {
min-height: 100px;
background: #0c0c0c;
color: #fff;
}
#content h1{
text-align:center;
text-shadow: 2px 1px 3px #000;
}
h1{
color: #00C3FF;
font-family: 'Paytone One', sans-serif;
font-weight:400;
font-size:5em;
}
hr{
border-color: #FFFFFF;
margin-top: -50px;
width:600px;
}
::-webkit-scrollbar {
display: none;
}
#slide-show {
height: 100vh;
min-height: 100vh;
overflow: hidden;
width: 500vw;
min-width: 100vw !important;
}
.slide-text {
font-size: 20px;
color: #fff;
text-align:center;
}
.slide-text h2 {
font-family: 'Paytone One', sans-serif;
font-weight: 400;
font-size: 80px;
text-align: center;
color: #00C3FF;
text-shadow: 2px 1px 3px #000;
}
.slidex {
opacity: 0;
transition: opacity 1.5s ease-in-out;
z-index: -1;
color:#000;
}
.activx {
opacity: 1;
}
.slideshow-nav {
width: 100vw;
min-width: 100vw !important;
font-size: 30px;
background: transparent;
}
.bg1, .bg2, .bg3, .bg4 {
background-repeat: no-repeat !important;
background-attachment: scroll !important;
background-position: center center !important;
height: auto;
min-height: 100vh;
overflow: hidden;
width: 100vw;
min-width: 100vw !important;
position: absolute;
top:0;
left:0;
}
.slider-center {
position: absolute;
height:15%;
width: 50%;
left: 50%;
top: 20%;
background-color: transparent;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: left;
letter-spacing: 2px;
}
.nav-link {
transition: all 0.4s;
padding: 15px;
color:#fff;
opacity: 0.2;
font-size: 40px;
}
.nav-link:hover {
color: #999;
font-size: 80px;
opacity: 0.8;
}
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<header>
<section id="slide-show">
<div class="slidex activx">
<div class="bg1">
<div class="slider-center">
<div class="slide-text"><h2>PRAZO GARANTIDO </h2></div>
</div>
</div>
</div>
<div class="slidex">
<div class="bg2">
<div class="slider-center">
<div class="slide-text"><h2>MD10 DE R$:79,00</h2></div>
</div>
</div>
</div>
<div class="slidex">
<div class="bg3">
<div class="slider-center">
<div class="slide-text"><h2>SEGURANÇA</h2></div>
</div>
</div>
</div>
<div class="slidex">
<div class="bg4">
<div class="slider-center">
<div class="slide-text"><h2>SEGURANÇA2</h2></div>
</div>
</div>
</div>
<div class="slidex">
<div class="bg5">
<div class="slider-center">
<div class="slide-text"><h2>SEGURANÇA3</h2></div>
</div>
</div>
</div>
</div>
</section>
</header>
<main>
<section class="faq">
<div class="bdfaq">
<div class="row">
<h2>FAQ</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>
<div class="faqq">
<a href="faq.html">
<img src="images/faqq.png"alt="faq">
</a>
</div>
</div>
</div>
<section id="colap">
</section>
</section>
<section class="services">
<div class="fundoserv">
<h1>Secure Job</h1>
<h2>Services</h2>
<article>
<dl id="ud_accordion">
<dt>VITORIAS</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
<dt>MELHOR DE 10 (MD10)</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
<dt>ELO BOOSTING</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
<dt>DUO BOOSTING</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
<dt>ELO BOOSTING (PREMIUM)</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
<dt>SECURE BOOSTING(EXCLUSIVE)</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
</dl>
</article>
<img src="img/logo.png"alt="faq">
</div>
</section>
<div id="_opcoes_main">
<form action="teste.php" id="_form" onsubmit="return valEmail()" method="post">
<input type="hidden" id="_valortt" name="_valortt" />
<div class="_opcoes_div">
<em>1.</em> <strong>Selecione a Liga e Divisão atual</strong>
<br />
<img src="imagem.png" />
<br />
<p>Liga</p>
<select name="lig_atu" id="lig_atu">
<option value="bronze">Bronze</option>
<option value="prata">Prata</option>
<option value="ouro">Ouro</option>
<option value="platina">Platina</option>
<option value="diamante">Diamante</option>
</select>
<br />
<p>Divisão</p>
<select name="div_atu" id="div_atu">
<option value="v">V</option>
<option value="iv">IV</option>
<option value="iii">III</option>
<option value="ii">II</option>
<option value="i">I</option>
</select>
</div>
<div class="_opcoes_div">
<em>2.</em> <strong>Selecione a Liga e Divisão desejada</strong>
<br />
<img src="imagem.png" />
<br />
<p>Liga</p>
<select name="lig_des" id="lig_des">
<option value="bronze">Bronze</option>
<option value="prata">Prata</option>
<option value="ouro">Ouro</option>
<option value="platina">Platina</option>
<option value="diamante">Diamante</option>
</select>
<br />
<p>Divisão</p>
<select name="div_des" id="div_des">
<option value="v">V</option>
<option value="iv">IV</option>
<option value="iii">III</option>
<option value="ii">II</option>
<option value="i">I</option>
</select>
</div>
<div class="_opcoes_div">
<em>3.</em> <strong>Selecione a Fila desejada</strong>
<br />
<img src="imagem.png" />
<br />
<p>Fila</p>
<select name="_fila" id="_fila">
<option value="solo/duo">Solo/Duo</option>
<option value="flex">Flex</option>
</select>
</div>
<br clear="all" />
<div id="_botao">
<div id="_errmsg" style="display: none;">Erro</div>
<div id="_botao_email" style="display: none;">
<label>
<strong>E-mail</strong>
<br />
<input onkeyup="$('#_botao #_botao_email label strong').html('E-mail').css('color','#444')" required="required" id="_email" name="_email" type="email" placeholder="Insira seu e-mail" />
</label>
<br />
<button type="submit" id="_botao_valor">
<div>
R$ 0,00
</div>
<div>
ADQUIRIR
</div>
</button>
</div>
</div>
</form>
</div>
</main>
<footer class="mainfooter">
<div class="footer-inner">
conteudo do footer
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script>$(document).ready(function(){var$prev=$('.previousx');var$next=$('.nextx');varmode="auto";
$prev.on({
click: function(e){
e.preventDefault();
mode = "manual";
showPreviousImage();
}
});
$next.on({
click: function(e){
e.preventDefault();
mode = "manual";
showNextImage();
}
});
setInterval(function(){
if(mode==="auto"){
showNextImage();
}
},5000);
function showNextImage(){
var $actEl = $('.activx');
var $nextEl = $actEl.next('.slidex');
if($nextEl.length){
$actEl.removeClass('activx');
$nextEl.addClass('activx');
}else{
$actEl.removeClass('activx');
$('.slidex:first-child').addClass('activx');
}
}
function showPreviousImage(){
var $actEl = $('.activx');
var $prevEl = $actEl.prev('.slidex');
if($prevEl.length){
$actEl.removeClass('activx');
$prevEl.addClass('activx');
}else{
$actEl.removeClass('activx');
$('.slidex.last').addClass('activx');
}
}
});
</script>
</body>
</html>Well I wanted the header part not to have this attachment fixed of the body, I tried anyway and I could not.