Olá Boa tarde, conclui todos os passos passados pela instrutora. No live serv tudo ficou perfeito (primeira imagem), porem no navegador mesmo do google nenhuma das imagens estão aparecendo (segunda imagem). Podem me ajudar por favor?
obs: peguei uma parte da página devido ao tamanho do site, porem em todo conteúdo do site as imagens usadas não aparecem.
SEGUE CODIGO HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../ex004/estilo/style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<title>Alura Plus</title>
</head>
<body>
<section class="container principal">
<div class="container-caixa">
<h1 class="container-titulo">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
<img src="/imagem/Combo.png" alt="O combo+ é a junção do alura+ e o alura lingua" class="container-img">
<a href="www.alura.com.br" class="container-botao">Assine por 12x de R$ 120,00*</a>
<a href="www.alura.com.br" class="container-botao botao-secundario">Assinar somente o Alura+</a>
<p class="container-aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
</div>
</section>
<section class="container secundario">
<img src="/imagem/Plataformas.png" alt="Um monitor e um celular com o alura plus aberto" class="secundario-img">
<div class="container-descricao">
<h2 class="descricao-titulo">Assita do seu jeito</h2>
<p class="descricao-texto">Aproveite a tela grande da TV ou assista no tablet, laptop, celular e outros aparelhos. Nossa seleção de cursos não para de crescer.</p>
</div>
</section>
<section class="container secundario">
<div class="container-descricao">
<p class="descricao-texto">Só o Combo+ oferece Alura+ e Alura Língua juntos para você ter acesso a cursos de diversas áreas da tecnologia e aprender inglês ou espanhol, onde e como quiser.</p>
<a href="www.alura.com.br" class="container-botao secundario-botao">Assinar o Combo+</a>
</div>
<img src="/imagem/Telas.png" alt="Tela da alura plus e do alura lingua" class="secundario-img">
</section>
<section class="container secundario">
<img src="/imagem/Notebook.png" alt="NOtebook com a página do curos aberta." class="secundario-img">
<div class="container-descricao">
<h2 class="descricao-titulo">Baixe seus cursos</h2>
<p class="descricao-texto">Baixe e assista quando e onde quiser. Assim, seus favoritos estão sempre com você, até mesmo sem internet.</p>
</div>
</section>
<section class="dispositivos">
<h2 class="dispositivos-titulo">Disponível nos seus dispositivos favoritos</h2>
<ul class="dispositivos-lista ">
<li><img src="/imagem/tv.png" alt="Ícone de televisão"><h3 class="lista-item">TV</h3></li>
<li><img src="/imagem/computador.png" alt="ícone de computador"><h3 class="lista-item">Computadores</h3></li>
<li><img src="/imagem/celular.png" alt="ícone de celular"><h3 class="lista-item">Celuar</h3></li>
</ul>
</section>
<footer class="rodape">
<img src="/imagem/Logo.png" alt="Alura+" class="rodape-logo">
<ul class="rodape-lista">
<li class="lista-link"><a href="#">Idioma</a></li>
<li class="lista-link"><a href="#">Dispositivos compatíveis</a></li>
<li class="lista-link"><a href="#">Contrato de assinatura</a></li>
<li class="lista-link"><a href="#">Politica de privacidade</a></li>
<li class="lista-link"><a href="#">Proteção de dados no Brasil</a></li>
<li class="lista-link"><a href="#">Anúncios personalizados</a></li>
<li class="lista-link"><a href="#">Ajuda</a></li>
</ul>
<p class="rodape-texto">©2024 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade.</p>
<p class="rodape-texto">Alura+ é um serviço pago, baseado em assinatura e sujeito a termos e condições. O serviço Alura+ é comercializado por Aovs Sistemas de Informática S.A., Rua Vergueiro, 3185 - Liberdade, São Paulo - SP, 04101-300, Brasil e CNPJ 05.555.382/0001-33</p>
</footer>
</body>
</html>
SEGUE CODIGO CSS
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--cor-principal: #ffffff;
--cor-secundario: #c0c0c0;
--cor-botao-azul: #167bf7;
--cor-fundo: #00030c;
--fonte-principal: 'Inter';
--botao-azul-efeito: #3c92fa;
}
body {
background-color: var(--cor-fundo);
color: var(--cor-principal);
font-family: var(--fonte-principal);
font-size: 16px;
font-weight: 400;
}
.principal {
background-image: url(/imagem/Background.png);
background-repeat: no-repeat;
background-size: contain;
align-items: center;
text-align: center;
}
.container {
height: 100vh;
display: grid;
grid-template-columns: 50% 50%;
}
.container-botao {
background-color: var(--cor-botao-azul);
border-radius: 5px;
padding: 1em;
color: var(--cor-principal);
display: block;
text-decoration: none;
margin-bottom: 1em;
}
.botao-secundario {
background-color: transparent;
border: 2px solid var(--cor-principal);
}
.container-aviso {
font-size: 12px;
color: var(--cor-secundario);
}
.container-titulo {
font-size: 28px;
font-weight: 700;
}
.container-img {
margin: 1em 0 2em 0;
}
.container-caixa {
margin: 0 6em;
}
.secundario-img {
width: 80%;
}
.secundario {
align-items: center;
margin: 0 10em;
}
.descricao-titulo {
font-weight: 700;
font-size: 48px;
color: var(--cor-principal);
margin-bottom: 0.1em;
}
.descricao-texto {
color: var(--cor-secundario);
}
.secundario-botao {
display: inline-block;
margin-top: 1em;
}
.container-descricao {
padding: 2em;
}
.dispositivos-lista {
display: flex;
justify-content: center;
list-style-type: none;
margin: 5em 0;
}
.dispositivos {
text-align: center;
}
.dispositivos-titulo {
font-size: 48px;
color: var(--cor-principal);
}
.lista-item {
font-size: 32px;
color: var(--cor-principal);
}
.rodape {
text-align: center;
}
.rodape-logo {
margin-top: 2em;
}
.rodape-lista {
display: flex;
justify-content: center;
gap: 18px;
list-style-type: none;
margin: 2em 1em;
}
.lista-link > a {
text-decoration: none;
color: var(--cor-primaria);
font-size: 16px;
}
.rodape-texto {
text-align: center;
color: var(--cor-secundario);
margin: 1.5em;
font-size: 14px;
}
.lista-link > a:hover {
color:var(--cor-botao-azul);
}
.lista-link > a:active {
color: purple;
}
.container-botao:hover {
background-color: var(--botao-azul-efeito);
color: var(--cor-fundo);
}
@media screen and (max-width: 768px) {
.container {
display: block;
background-image: none;
}
.container-img {
width: 50vw;
}
.container-caixa {
margin: 2em 2em;
}
.secundario {
margin: 0;
text-align: center;
}
.secundario-img {
width: 50%;
}
.dispositivos-lista {
display: block;
}
.rodape-lista {
display: block;
}
}
Oi Matheus, como vai você? Espero que esteja bem!
Para que suas imagens apareçam é necessário verificar o caminho que você colocou na tag . No curso, as imagens ficam armazenadas dentro da pasta "img" e como essa pasta está no mesmo nível hierárquico que os demais arquivos o caminho ficaria como no seguinte exemplo:
src="img/Combo.png"
Espero ter ajudado!
Caso surjam dúvidas, fico à disposição.
Abraços e bons estudos!