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

A imagem do usuario não aparece

olhei os em outras perguntas do fórum relacionado tem a mesmo duvida que a imagem não aparece com diversas causas, mas na minha causa e diferente, revisei o código mesmo assim não esta aparecendo, podem me ajudar?

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>João da Silva - Contato</title>
    <link rel="icon" href="imagens/favicon.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/site.css">
    <link rel="stylesheet" href="css/contato.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
    <main>
        <h1 class="titulo-principal">Contato</h1>
        <div class="container">
            <form>
                <fieldset>
                    <legend>Seus dados</legend>
                    <label for="nome">Nome completo</label>
                    <input id="nome" type="text" name="nome" required autofocus pattern="[A-Za-z ']{4,}" title="O nome precisa ter pelo menos 4 caracteres">
                    <label for="email">E-mail</label>
                    <input id="email" type="email" name="email" required placeholder="seu@email.com">
                </fieldset>
                <fieldset>
                    <legend>Assunto</legend>
                    <label>
                        <input type="radio" name="assunto" value="Blog">
                        Blog
                    </label>
                    <label>
                        <input type="radio" name="assunto" value="Serviço">
                        Serviço
                    </label>
                    <fieldset>
                        <input type="radio" name="assunto" value="Outro" id="outro">
                        <label for="outro">
                            Outro
                        </label>
                        <input type="text" name="outro-assunto">
                    </fieldset>
                </fieldset>
                <label for="mensagem">Mensagem</label>
                <textarea id="mensagem" name="mensagem" cols="60" rows="10" placeholder="Digite aqui sua mensagem"></textarea>
                <button type="submit">Enviar mensagem</button>
            </form>
        </div>
    </main>
    <img src="imagens/eu.jpg" alt="Minha foto" class="minha-foto">
    <aside class="navegacao-site">
        <h1>João da Silva</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="bio.html">Sobre mim</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>
        <ul class="icones-redes-sociais">
            <li>
                <a href="https://github.com/joaodasilva" class="github" data-tooltip="Veja meus projetos opensource">
                    Github
                </a>
            </li>
            <li>
                <a href="https://twitter.com/joaodasilva" class="twitter" data-tooltip="Siga-me no Twitter">
                    Twitter
                </a>
            </li>
            <li>
                <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin" data-tooltip="Veja meu currículo">
                    LinkedIn
                </a>
            </li>
        </ul>
    </aside>
    <footer class="rodape-pagina">
        © João da Silva 2014
    </footer>
</body>
</html>
9 respostas

CSS:

legend,
label[for="mensagem"] {
    font-weight: bold;
    margin-top: 1em;
}
label[for],
button {
    display: block;
}
input[type="text"],
input[type="email"],
textarea {
    font-family: inherit;
    font-size: 100%;
    padding: .25em .5em;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
button {
    border: 0;
    padding: .5em 1em;
    font-family: "Open Sans Condensed", sans-serif;
    background-color: #3C1D3D;
    color: white;
    font-size: 1.2em;
    margin-left: auto;
    margin-top: 1em;
}
input:invalid {
    box-shadow: 0 0 3px red;
}
input:focus,
textarea:focus {
    background-color: #FFD;
}
button:focus {
    background-color: #8C1D3D;
}
fieldset > fieldset {
    display: inline;
}
label[for="outro"] {
    display: inline;
}
input[name="outro-assunto"] {
    width: auto;
}
label[for="name"] {
    position: relative;
}
label[for="name"]:after {
    content: "";
    background-color: #666;
    background-repeat: no-repeat; 
    background-image: url(../imagens/usuario.png);
    background-size: 50% 50%;
    width: 2em;
    height: 2em;
    background-position: center;
    position: absolute;
    top: 100%;
    left: 0;
}
#name {
    width: calc(100% - 2em);
    position: relative;
    left: 2em;
}

Fala Gabriel, tudo bem?

No console do seu navegador está indicando algum erro?

Abraços!

Bom dia, Gabriel,

Em qual pasta encontra-se a imagem? Qual sua estrutura de pastas?

Bom dia, esse caminho é da imagem que esta na maquina e ja olhei o navegador e não apresentou erro.

C:\Users\gabrielpagoto\Documents\Alura\HTML e CSS\Modulo-2\Projeto_6\imagens

Fala Gabriel!

Verifique o tipo do arquivo, é .jpg mesmo?

Você poderia colocar seu projeto no github, drive ou semelhantes para que eu analisasse?

Abraços!

Fala Paulo! gerei um link ao acesso a somente para leitora no Onedrive, https://1drv.ms/f/s!Artltgi23xTKhrhSKCuNhj5lvzSY6Q

Ps: não tenho gifhub ainda.

solução!

Fala Gabriel!

Aqui a imagem apareceu normalmente.

De acordo com sua organização de pastas, o caminho especificado está certo.

Pelo que eu entendi, seu projeto está organizado em:

PastaDoProjeto -> Onde estão seus HTMLS e subpastas

subPastas -> imagens e CSS

Caso esteja diferente, você terá que modificar o endereço da imagem.

Dá uma olhadinha nisso e me retorna aqui!

Abraços!

Refiz a organização de arquivos das pasta, muito obrigado pela ajuda,

Até a próxima!

Fico feliz que tenha funcionado Gabriel!

Qualquer nova dúvida, basta criar um novo tópico!

Estou fechando esse agora.

Abraços.