Oi, pessoal Estava tudo certo meu site mas depois que subi ele para o git e github agora a imagem não carrega. Alguem pode me ajudar a arrumar essa caca que eu fiz?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Oi, pessoal Estava tudo certo meu site mas depois que subi ele para o git e github agora a imagem não carrega. Alguem pode me ajudar a arrumar essa caca que eu fiz?
<head>
<meta charset="UTF-8">
<title>Barbearia Alura</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="título-principal">Barbearia Alura</h1>
</header>
<img id="banner" src="banner.jpg">
<div class="Principal">
<h2 class="título-centralizado">Sobre a Barbearia Alura</h2>
<p >Localizada no coração da cidade a Barbearia Alura traz para o mercado o que há de melhor para o seu cabelo e barba.
Fundada em 2019, <strong>a Barbearia Alura</strong> já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p id="missao"><em>Nossa missão é:<strong> "Proporcionar auto-estima e qualidade de vida aos clientes".</strong></em></p>
<p > Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência
e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</div>
<div class="beneficios">
<h3 class="título-centralizado">Beneficíos</h3>
<ul>
<li class="itens">Atendimento</li>
<li class="itens">Espaço Diferenciados</li>
<li class="itens">Localização</li>
<li class="itens">Profissionais Qualificados</li>
</ul>
<img src="beneficios.jpg" class="imagembeneficios">
</div>
</body>body{ background: #cccccc; }
#banner { width: 100%; }
.Principal {
background: #cccccc;
padding: 30px;}
.título-principal{ padding-left: 20%; }
.título-centralizado{ text-align: center; }
P{ text-align: center; }
#missao { font-size: 20px; }
em strong { color: #ff0000; }
.itens{ font-style: italic; }
.beneficios { background: #ffffff; padding: 20%; }
ul{ display: inline-block; vertical-align: top; width: 20%; margin-right: 15%; }
.imagembeneficios { width: 50%; }
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="produtos.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>
<ul class="produtos">
<li>
<h2>Cabelo</h2>
<img src="cabelo.jpg">
<p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
<p class="produto-preco">R$ 25,00</p>
<li>
<h2>Barba</h2>
<img src="barba.jpg">
<p class="produto-descricao">Corte e desenho profissional de barba</p>
<p class="produto-preco">R$ 18,00</p>
</li>
<li>
<h2>Cabelo+barba</h2>
<img src="cabelo+barba.jpg">
<p class="produto-descricao">Pacote completo de cabelo e barba</p>
<p class="produto-preco">R$ 35,00</p>
</li>
</ul>
</main>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyrigtht Barbearia Alura - 2019</p>
</footer>
</body>
Boa noite Danieli,
Fazendo os ajustes abaixo no seu arquivo html seu problema será resolvido:
// No inicio do arquivo, altere:
DE: <link rel="stylesheet" href="style.css">
PARA: <link rel="stylesheet" href="./style.css">
// Em todas as tags de imagens:
DE: <img src="logo-branco.png">
PARA: <img src="./logo-branco.png">
// OBS: Se as imagens estiverem dentro de alguma pasta, ficará assim: "./imagens/teste.png"obrigada!<3