Solucionado
Ao decorrer do curso fui fazendo o codigo e ao mesmo tempo com o VSCode aberto com ajuda da extensao do live server fui acompanhando do lado o site pelo navegador mas quando eu fecho o live server e clico pra abrir pela propria pasta do meu computador ou pelo vs code com open with dephault browser as imagens nao carregam e nem algumas formatações do css. Aparece a seguinte mensagem: Failed to load resource: net::ERR_FILE_NOT_FOUND. Teria com alguem me ajudar? ficaria muito agradecido.
Oi Gustavo, tudo bem?
Você está salvando todas as imagens na mesma pasta do projeto? Lembrando que é preciso fazer assim para que as imagens apareçam.
Bons estudos.
Olá Lorena, tudo sim e voce? Sim estou salvando as imagens na mesma pasta do projeto e mesmo assim nao vai.
Oi Gustavo, tudo bem?
Eu faço assim, abro minha pasta do projeto e clico com o botão direito do mouse no index.html:
Aí vai abrir assim, você pode ver o endereço:
Se não der certo pra você, poderia tirar print da sua pasta do projeto, e do seu código para que eu possa te ajudar melhor?
Obrigada!
Olá, tudo bem? Então vou mandar aqui meu codigo e as imagens de como estao cada tela.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barbearia Alura - Produtos</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="estilo-produtos.css">
</head>
<body>
<header>
<div class="caixa">
<nav class="menu">
<div class="logo">
<img src="/imagens/logo.png" alt="logo do site">
</div>
<ul class="menu-nav">
<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>
<div class="container">
<div class="row">
<div class="cards">
<div id="card" class="corte-cabelo">
<h3>Corte da cabelo</h3>
<img src="/imagens/cabelo.jpg" alt="">
<p class="descricao">Na tesoura ou na máquina, como o cliente preferir.</p>
<p class="preco">R$25,00</p>
</div>
<div id="card" class="corte-barba">
<h3>Barba</h3>
<img src="/imagens/barba.jpg" alt="">
<p class="descricao">Corte e desenho profissional da barba.</p>
<p class="preco">R$18,00</p>
</div>
<div id="card" class="corte-barba">
<h3>Corte de cabelo + Barba</h3>
<img src="/imagens/cabelo+barba.jpg" alt="">
<p class="descricao">Pacote completo de cabelo e barba.</p>
<p class="preco">R$40,00</p>
</div>
</div>
</div>
</div>
</main>
<footer>
<img src="imagens/logo-branco.png" alt="">
<p>© CopyRight Barbearia Alura 2022 - Gustavo B B Biazzi</p>
</footer>
</body>
</html>body {
margin: 0;
padding: 0;
}
/* MENU */
header {
background-color: #BBBBBB;
padding: 20px 0;
}
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}
.logo img {
height: 80px;
}
.menu-nav {
position: absolute;
top: 30px;
right: 0;
}
nav li {
display: inline;
}
nav a {
text-transform: uppercase;
color: black;
text-decoration: none;
list-style: none;
font-weight: bold;
font-size: 22px;
margin-right: 15px;
}
nav a:hover {
color: #c78c19;
}
/* CARDS */
.container {
display:flex;
align-items: center;
justify-content: center;
}
.cards {
display: inline-flex;
}
#card {
border: 3px solid black;
border-radius: 5%;
padding: 30px;
width: 30%;
height: auto;
margin: 50px 1.5%;
vertical-align: top;
box-sizing: border-box;
cursor: pointer;
}
#card h3, p {
text-align: center;
}
#card img {
width: 100%;
margin: 0 auto;
}
#card .descricao {
padding: 10px 0;
font-style: italic;
font-size: 20px;
}
#card .preco {
padding: 10px 0;
font-weight: bold;
font-size: 18px;
}
#card h3 {
font-weight: bolder;
font-size: 25px;
}
#card:hover {
transform: scale(1.1);
transition: .5s ease-in-out;
border: 3px solid #c78c19;;
}
/* FOOTER */
footer {
background-image: url('/imagens/bg.jpg');
display: flex;
align-items: center;
justify-content: center;
}
footer p {
text-align: center;
color: white;
font-size: 15px;
padding: 10px;
align-self: center;
justify-content: center;
}
footer img {
height: 80px;
padding: 10px;
display: inline-flex;
} 
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barbearia Alura - Contatos</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="estilo-contato.css">
</head>
<body>
<header>
<div class="caixa">
<nav class="menu">
<div class="logo">
<img src="/imagens/logo.png" alt="logo do site">
</div>
<ul class="menu-nav">
<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>
<div class="caixa-formulario">
<div class="formulario">
<form name="barbearia" action="">
<label for="nome-campo">Nome completo</label>
<input type="text" id="nome-campo" class="imput-padrao" required>
<label for="email-campo">Email</label>
<input type="email" id="email-campo" placeholder="email@dominio.com" class="imput-padrao" required>
<label for="celular-campo">Telefone</label>
<input type="tel" id="celular-campo" placeholder="(XX)XXXX-XXXX" class="imput-padrao" required>
<label for="mensagem-campo">Mensagem</label>
<textarea id="mensagem-campo" cols="30" rows="10" placeholder="Escreva sua mensagem aqui..." class="imput-padrao" required></textarea>
<fieldset>
<legend>Como prefere o nosso contato?</legend>
<label for="email-pra-contato"><input type="radio" name="contato" value="email"
id="email-pra-contato"> Email</label>
<label for="ligacao-pra-contato"><input type="radio" name="contato" value="ligacao"
id="ligacao-pra-contato"> Ligação</label>
<label for="whats-pra-contato"><input type="radio" name="contato" value="whatsapp"
id="whats-pra-contato"> Whatsapp</label>
</fieldset>
<fieldset>
<legend class="atendimento">Qual horário prefere ser atendido?</legend>
<select id="horarios-dia">
<option value="Manha">Manhã</option>
<option value="Tarde">Tarde</option>
<option value="Noite">Noite</option>
</select>
</fieldset>
<label class="checkbox"> <input type="checkbox" name="" id="">
Gostaria de receber nossas novidades por email?</label>
<input type="button" value="Enviar" class="btn-enviar">
</form>
</div>
<div class="tabela-horario">
<p>Horário de Funcionamento</p>
<table>
<thead>
<tr>
<th>Dias</th>
<th>Horários</th>
</tr>
</thead>
<tbody>
<tr>
<td>Segunda á <br>Quinta</td>
<td>8h - 18h</td>
</tr>
<tr>
<td>Sexta</td>
<td>8h - 20h</td>
</tr>
<tr>
<td>Finais de semana <br> e feriados</td>
<td>8h - 13h</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<footer>
<img src="/imagens/logo-branco.png" alt="logo do rodape do site">
<p>© CopyRight Barbearia Alura 2022 - Gustavo B B Biazzi</p>
</footer>
</body>
</html>body {
margin: 0;
padding: 0;
}
/* MENU */
header {
background-color: #BBBBBB;
padding: 20px 0;
}
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}
.logo img {
height: 80px;
}
.menu-nav {
position: absolute;
top: 30px;
right: 0;
}
nav li {
display: inline;
}
nav a {
text-transform: uppercase;
color: black;
text-decoration: none;
list-style: none;
font-weight: bold;
font-size: 22px;
margin-right: 15px;
}
nav a:hover {
color: #c78c19;
}
/* FORMULARIO */
.caixa-formulario {
position: relative;
width: 940px;
margin: 0 auto;
}
.formulario {
margin-top: 40px;
}
form label, form legend {
display: block;
font-size: 20px;
margin-bottom: 5px ;
}
.imput-padrao {
display: block;
margin-bottom: 10px;
padding: 10px 25px;
width: 30%;
}
.checkbox {
margin: 20px 0;
}
select {
margin: 5px 0;
}
.atendimento {
margin-top: 20px;
}
.btn-enviar {
width: 30%;
padding: 15px 0;
background-color: orange;
color: white;
font-weight: bold;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-enviar:hover {
background-color: darkorange;
transition: .3s ease-in-out all;
transform: scale(1.1);
}
/* TABELA */
.tabela-horario {
margin: 40px 0;
}
.tabela-horario p {
margin-bottom: 5px;
}
thead {
background-color: #555555;
color: white;
font-weight: bold;
}
td, th {
border: 1px solid #555555;
padding: 8px 15px;
vertical-align: middle;
}
/* FOOTER */
footer {
background-image: url('/imagens/bg.jpg');
display: flex;
align-items: center;
justify-content: center;
}
footer p {
text-align: center;
color: white;
font-size: 15px;
padding: 10px;
align-self: center;
justify-content: center;
}
footer img {
height: 80px;
padding: 10px;
display: inline-flex;
}Oi Gustavo, tudo bem?
O erro está no caminho de import das imagens, testei aqui e tirando / antes de imagens dá certo.
Faça assim em todos os caminhos de imagem:
<img src="imagens/logo.png" alt="logo do site">Espero ter ajudado!
Bons estudos.
AJudou sim! Muito obrigado!! Agora deu certo!