0
Well on the contact page the form that was supposed to appear there simply does not appear, no input appears, I have tried to change some things, take and put in other Ivs but still the problem continues. Another question I’m having is that the central Divs are going over my top menu, how do I put it over everything?
/* geral */
*{
margin: 0;
padding: 0;
font-family: 'Open Sans', Arial, sans-serif;
}
h1, h2, h3{
font-family: 'Roboto Slab', sans-serif;
}
div{
background-color: #e1e1e1;
}
/* menu superior nav */
.links{
width: 100%;
height: 50px;
position: fixed;
display: flex;
}
.links label{
padding: 13px 0;
flex-grow: 1;w
cursor: pointer;
transition: all .4s;
text-align: center;
font-size: 100%;
font-weight: Bold;
color: #ffffff;
background-color: rgba(46,83,35,.8);
}
.links label:hover{
background-color: rgba(115,184,98,.8);
color: #111111;
}
/* Botões */
.scroll{
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.scroll input{
display: none;
}
.bloc{
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
display: flex;
}
/* páginas */
#inicio{
background-color: #D1C1C0;
}
#historia{
background-color: #C9E4C2;
}
#galeria{
background-color: #D1C1C0;
}
#contato{
background-color: #C9E4C2;
}
#content{
position:relative;
height: 85%;
width: 85%;
margin-top: 3%;
}
/* rolamento e transição de páginas */
.sections{
transition: all .8s;
}
#rd_historia:checked ~ .sections{
margin-top: -100vh;
}
#rd_galeria:checked ~ .sections{
margin-top: -200vh;
}
#rd_contato:checked ~ .sections{
margin-top: -300vh;
}
/* pagina inicio */
#homelogo{
display: flex;
margin-left: auto;
margin-right: auto;
padding-top: 5%;
}
#uphome{
height: 50%;
width: 100%;
}
#dwhome{
text-align: justify;
height: 50%;
width: 80%;
margin-left: auto;
margin-right: auto;
}
/* pagina historia */
#uphist{
text-align: justify;
padding-top: 2%;
height:40%;
width:80%;
margin-left: auto;
margin-right: auto;
}
#esqhist{
display: inline-block;
height:50%;
width:50%;
float:left;
margin-left: 9%;
}
#dirhist{
display: inline-block;
text-align: justify;
height:40%;
width:30%;
float:right;
margin-right: 10%;
}
#imgmap{
display: flex;
margin: auto;
width: 350px;
height: ;
}
/* pagina galeria*/
#gameimg{
height: 220px;
width: 272px;
}
#upgale{
margin-top: 2%;
text-align: center;
height: 48%;
width: 96%;
margin-left: auto;
margin-right: auto;
}
#dwgale{
text-align: center;
height: 48%;
width: 96%;
margin-left: auto;
margin-right: auto;
}
/* pagina contato */
#upcont{
text-align: center;
width: 80%;
height: 60%;
margin-top: 1%;
margin-left: auto;
margin-right: auto;
}
#dwcont{
text-align: center;
width: 80%;
height: 30%;
margin-left: auto;
margin-right: auto;
}
.socicon{
height: 68px;
width: 68px;
}
/* TESTES */
#centlogo{
position: relative;
top: 40%;
transform: translateY(-50%);
}
#esqlogo{
position: relative;
top: 70%;
transform: translateY(-50%);
}<!DOCTYPE html>
<head>
<html lang="pt-br">
<meta charset="UTF-8">
<title>Pandora</title>
<link href="css/estilo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Slab:400,700|Roboto:400,700" rel="stylesheet">
</head>
<body>
<!-- Menu superior -->
<nav class="links">
<label for="rd_inicio">ÍNICIO</label>
<label for="rd_historia">HISTÓRIA</label>
<label for="rd_galeria">GALERIA</label>
<label for="rd_contato">CONTATO</label>
</nav>
<div class="scroll">
<!-- Botões menu superior -->
<input type="radio" name="grupo" id="rd_inicio" checked="true">
<input type="radio" name="grupo" id="rd_historia">
<input type="radio" name="grupo" id="rd_galeria">
<input type="radio" name="grupo" id="rd_contato">
<!-- Páginas -->
<section class="sections">
<!-- pagina 1 inicio -->
<section class="bloc" id="inicio">
<div id="content">
<div id="uphome">
<img src="imgs/logoext.png" id="homelogo" alt="logo do jogo: pandora e a pedra do suspiro">
</div>
<div id="dwhome">
<h2> O Projeto:</h2>
<p> A proposta deste projeto é fazer um jogo de RPG estilo fantasia onde o jogador precisará seguir a história cumprindo desafios e explorando os mapas. O foco principal será a exploração e o mapeamento. Por isso o local onde se passa a história (reino de Synph) será bastante complexo com muitas histórias, lendas, figuras e lugares para serem descobertos. O enredo tem como objetivo principal desconstruir a ideia de “herói”, tornando os personagens mais reais e com defeitos marcantes, como ambição e egoísmo por exemplo. Já os combates ficam em um segundo plano, apenas como uma diversão, já que o jogador não precisará subir de nível para zerar o jogo. E além de completar a história e descobrir lugares novos, o jogador poderá ter outros objetivos importantes como o de encontrar todos os tesouros perdidos e completar a coleção de cartas mágicas.</p>
</div>
</div>
</section>
<!-- pagina 2 sobre -->
<section class="bloc" id="historia">
<div id="content">
<div id="uphist">
<h2>O Enredo:</h2>
<p> Pandora vivia uma vida comum na Vila das Flores ao lado do seu pai Lortan, que sofria de uma terrível doença. Até que um certo dia, enquanto ela e sua amiga Chloe coletavam itens pela Floresta das Luzes, Pandora acabou acidentalmente encontrando o tesouro mais procurado pelo reino inteiro: a Pedra do Suspiro.</p>
<p> Ao revelar o que achou para seu pai ele ficou surpreso e decidiu que deveriam guardar o tesouro pois tinha um grande valor sentimental para ele. Sem conseguir compreender isso, Pandora decide agir contra a vontade de Lortan e foge de casa para vender o tesouro e com o dinheiro pagar a cura de sua doença. Porém, o que ela e Chloe não imaginavam é que essa pequena viagem até a Guilda dos Guardiões era na verdade apenas o início de uma longa aventura.</p>
</div>
<div id="esqhist">
<img src="imgs/mapa.png" id="imgmap" alt="mapa do reino de synph">
</div>
<div id="dirhist">
<h2>O Cenário:</h2>
<p>O jogo se passa em um lugar mágico chamado Reino de Synph e cuja fonte de energia é a Árvore da Vida localizada na Floresta Sagrada. De clima temperado e próximo ao Mar Azul, ele é composto por várias criaturas mágicas e lugares fantásticos prontos para serem explorados. Porém, esse lugar é mais conhecido por todo o mundo pelos seus tesouros perdidos e seus corajosos (e ambiciosos) caçadores.</p>
</div>
</div>
</section>
<!-- pagina 3 processo -->
<section class="bloc" id="galeria">
<div id="content">
<div id="upgale">
<h2>Imagens:</h2>
<br />
<img src="imgs/img01.png" id="gameimg" alt="imagem do jogo: personagem encontra morto por cogumelos">
<img src="imgs/img02.png" id="gameimg" alt="imagem do jogo: era uma vez a fada fiuly">
<img src="imgs/img03.png" id="gameimg" alt="imagem do jogo: caverna com estatua dourada">
<img src="imgs/img04.png" id="gameimg" alt="imagem do jogo: menu dentro do jogo">
</div>
<div id="dwgale">
<h2>Trilha Sonora:</h2>
<br />
<iframe width="80%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/281557932&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</section>
<!-- pagina 4 receitas -->
<section class="bloc" id="contato">
<div id="content">
<!-- formulario de contato de email -->
<div id="upcont">
<h3>Entre em contato conosco:</h3>
<form>
<div class="emailform">
<input type="text" placeholder="NOME"> <input type="email" placeholder="EMAIL"> <br />
<input type="text" placeholder="ASSUNTO"> <br />
<input type="text" placeholder="MENSAGEM"> <br />
<input type="button" name="ENVIAR">
</div>
</form>
</div>
<div id="dwcont">
<a href="http://www.facebook.com" class="socicon"><img src="imgs/facebook.png"></a>
<a href="http://www.twitter.com" class="socicon"><img src="imgs/twitter.png"></a>
<a href="http://www.youtube.com" class="socicon"><img src="imgs/youtube.png"></a>
</div>
</div>
</section>
</section>
<!-- rodapé -->
<section></section>
</div>
</body>
</html>