Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Layout da minha tela não ficou igual ao da aula

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo Tipos de campos diferentes e atividade Consolidando o seu conhecimento

por Maurício Batista de Moraes Filho
| 59.4k xp | 38 posts
Front-end Developer

Boa tarde,

A disposição dos elementos na minha exibição não ficaram iguais ao da aula já tentei checar o código mas parece igual ao do professor , por gentileza verificar aonde estou errando.

Seguem os códigos html e css

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Contatos - Barbearia Alura</title>

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style-main.css">
</head>

<body>
    <header>
        <div class="caixa">
            <h1><img src="logo.png"></h1>

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <form action="">

            <label for="nomesobrenome" class="input-padrao">Nome e Sobrenome :</label>
            <input type="text" id="nomesobrenome">

            <label for="email" class="input-padrao">E-mail :</label>
            <input type="text" id="email">

            <label for="telefone" class="input-padrao">Telefone :</label>
            <input type="text" id="telefone">

            <label for="mensagem">Mensagem</label>
            <textarea name="" id="mensagem" class="input-padrao" cols="70" rows="10"></textarea>

            <div class="contato">
                <p>Como prefere o nosso contato ?</p>

                <label for="radio-email">
                    E-mail
                    <input type="radio" name="contato" value="email" id="radio-email">
                </label>

                <label for="radio-telefone">
                    Telefone
                    <input type="radio" name="contato" value="telefone" id="radio-telefone">
                </label>

                <label for="radio-whatsapp">
                    Whatsapp
                    <input type="radio" name="contato" value="whatsapp" id="radio-whatsapp">
                </label>

            </div>

            <div>

                <p>Qual horário prefere ser atendido ? </p>

                <select>

                    <option>Manhã</option>

                    <option>Tarde</option>

                    <option>Noite</option>

                </select>

                <label class="checkbox">
                    <input type="checkbox"> Gostaria de receber nossas novidades por e-mail ?
                </label>

            </div>

            <input type="submit" value="Enviar Formulário">

        </form>
    </main>

    <footer>
        <img src="../barbearia_alura/logo-branco.png">
        <p class="copyright">&copy; Copyright Barbearia Alura - 2020 </p>
    </footer>
</body>

</html>
8 respostas
por Maurício Batista de Moraes Filho
| 59.4k xp | 38 posts
Front-end Developer

Segue o código css

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: gold;
    text-decoration: underline;
}

.produtos {
    width: 940px;
    margin: auto auto;
    padding: 50px 0;
}

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.produtos li:hover {
    border-color: gold;
}

.produtos li:hover h2 {
    font-size: 34px;
}

.produtos li:active {
    border-color: green;
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}

.produto-descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

main {
    width: 940px;
    margin: 0 auto;
}

form {
    margin: 40px 0;
}

form label {
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

form label, form p {
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

form input {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.input-padrao {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox {
    margin: 20px 0;
}

footer {
    text-align: center;
    background: url("../barbearia_alura/bg.jpg");
    padding: 40px 0;
}

.copyright {
    color: white;
    font-size: 13px;
    margin: 20px 0 0;
}
por Maurício Batista de Moraes Filho
| 59.4k xp | 38 posts
Front-end Developer

Estou tentando adicionar o print da tela mas não consegui , tem alguma forma de enviar o arquivo png para visualização ?

por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Maurício, tudo bem?

Retire esse trecho de estilo no css:

form input {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

Assim, os inputs ficarão iguais a da aula.

Sobre como anexar fotos, você pode adicionar pelo https://imgur.com/ e colar o link da imagem aqui :}

Testa e me fala se deu certo!

por Maurício Batista de Moraes Filho
| 59.4k xp | 38 posts
Front-end Developer

Bom dia

Fiz a alteração conforme orientado mas mesmo assim a exibição não ficou a mesma da aula mostrada pelo professor.

Segue o link do print da tela do navegador : https://imgur.com/IbVOEnU

por Maurício Batista de Moraes Filho
| 59.4k xp | 38 posts
Front-end Developer

Outra coisa que não entendi é que em nenhum momento da aula vi o professor retirando essa parte do código que você me orientou a retirar, por que no meu caso tive que ocultar essa parte do código ?

por Maurício Batista de Moraes Filho
| 59.4k xp | 38 posts
Front-end Developer

Algum retorno ?

solução!
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Mauricio, tudo bem?

Analisando o seu html, a classe input-padrao está dentro da tag label e não dentro dos input, devendo ficar assim:

<label for="nomesobrenome">Nome e sobrenome</label>
                <input type="text" id="nomesobrenome" class="input-padrao">

                <label for="email">Email</label>
                <input type="text" id="email" class="input-padrao">

                <label for="telefone">Telefone</label>
                <input type="text" id="telefone" class="input-padrao">

                <label for="mensagem">Mensagem</label>
                <textarea cols="70" rows="10" id="mensagem" class="input-padrao"></textarea>

Nos estilos, houve uma repetição para os elementos form label, sendo o correto, deixar somente:

form label, form p {
    display:block;
    font-size: 20px;
    margin: 0 0 10px;
}

Testando com as alterações, o layout ficará correto.

por Maurício Batista de Moraes Filho
| 59.4k xp | 38 posts
Front-end Developer

Obrigado pelo retorno realmente me equivoquei na inserção da classe na (LABEL) quando o correto seria no (input) .