1
@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');
var mode = "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 that part of the header not be with this Attachment Fixed of the body, I tried anyway and I could not .
I don’t know what you mean
a parte do head não ficasse com esse attachment fixed– user60252
type I didn’t want to leave the body background-Attachment:Fixed in the < header part>
– Felipe
Do you want BG to roll with the page? How do you want Header to behave?
– hugocsl
Type bg is already rolling along with the quiet page, but I wanted q part of the <header> not to roll, because I would go for a slide and it stopped would be better.
– Felipe
I wanted q the background not to just roll in the <header> Nav bar part etc .
– Felipe
https://elojobmax.com.br/ an example is this slide text / other things from the header of this site .
– Felipe
If you put
<header style="position: fixed; ">you will see that it will stay fixed. But this Script that keeps changing the text is interfering with something. Have you noticed that there is no scrollbar on the site? It looks like it creates an element over the viewport... From a survey on Parallax, this is the effect they are using on elojobmax.com.br !!– hugocsl
@hugocsl so they are using onepage only at index, pq the other pages load is not that?
– Felipe