Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Imagens não carregam

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Alguém poderia está me ajudando? Qual o motivo de isso está ocorrendo?

4 respostas

poderia fornecer o código html e css para e qual imagem na carrega, pois não tem nenhuma imagem quebrada no print

Esse é o HTML da aba "Contato"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Contato - Barbearia Alura</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.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>
                <label for="nomesobrenome"> Nome e sobrenome</label>
                <input type="text" id="nomesobrenome">

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

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

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


            </form>
        </main>

        <footer>
            <img src="logo-branco.png">
            <p class="copyright">© Copyright Barbearia Alura - 2019</p>
        </footer>
    </body>
</html>

E esse é o CSS dela.

#banner {
    width:100%;
}

.principal{
    background: #CCCCCC;
    padding: 30px;
}

.titulo-principal {
    padding-left: 20px;
}

.titulo-centralizado {
    text-align: center
}

p {
    text-align: center;
}

#missao {
    font-size: 20px
}

em strong {
    color: #FF0000;
}

.itens {
    font-style: italic
}

.beneficios {
    background: #FFFFFF;
    padding: 20px;
}

ul {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

.imagembeneficios {
    width: 50%;
}

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

form{
    margin: 40px 0;
}

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

}

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

}

Eu falei "Imagem", mas na verdade é o fundo do cabeçalho e do rodapé que não estão aparecendo. Qual é o meu erro?

solução!

Aparentemente está tudo certo no html e css o que pode está ocorrendo é que as imagens vc colocou em alguma pasta caso tenha colocado vc tem que usar sair da pasta principal utilizado ../ para voltar um nivel caso o index.html for na pasta raiz é só vc colocar /nome da pasta/ nome da imagem o jeito mais prático se usar vs code é vc ir no url dentro do parênteses dar ctrl + espaço que ele vai abrir o caminho das pasta.

PS: e acho que a imagem do footer é branca tenta colocar background de outra cor para ver se aparece.

Funcionou, amigo! Obrigado.