0

Bom na página de contato o formulário que era suposto de aparecer ali simplesmente não aparece, nenhum input aparece, já tentei mudar algumas coisas, tirar e colocar em outras divs mas mesmo assim o problema continua. Outra dúvida que estou tendo é que as divs centrais estão passando por cima do meu menu superior, como faço para colocar ele por cima de tudo?

/* 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&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;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>

1 Resposta 1

4

Você está escondendo todos os inputs dentro da div que possui a classe "scroll" nesse código CSS:

.scroll input{
    display: none;
}

Já quanto não permitir que o conteúdo central fique em cima do cabeçalho, você pode definir a div id content com margin-top: 100px, visto que a altura do cabeçalho é fixa.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .