Olá Karla, tudo bem?
Dei uma olhada no código e notei que todo o conteúdo da página está dentro da tag <head>
.
Muitas vezes, os navegadores tentam se virar com que tem e nem sempre um erro é lançado quando algo de diferente está ocorrendo, acredito que esse tenha sido o caso.
Entretanto, não é indicado que o conteúdo que aparecerá na página seja alocado no <head>
e sim no <body>
, que é o elemento responsável por isso.
De modo geral, o <head>
de um documento HTML compreende a parte que não é exibida no navegador. Ele contém informações como <title>
, links para CSS e outros metadados (dados sobre o HTML, como quem o escreveu, e palavras-chave importantes que descrevem o documento.)
Já o <body>
, contém todos os elementos que irão construir a página, como títulos, imagens, parágrafos, imagens, listas, divisões etc, é de fato onde a estrutura e marcação acontecem.
Além disso, notei que o arquivo HTML não está chamando o seu arquivo CSS.
Modificando, o código ficará assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Barbearia Alura</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img id="banner" src="banner.jpg">
<div class="principal">
<h1>Sobre a Barbearia Alura</h1>
<p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura 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">
<h2>Benefícios</h2>
<ul>
<li class="itens">Atendimento aos Clientes</li>
<li class="itens">Espaço diferenciado</li>
<li class="itens">Localização</li>
<li class="itens">Profissionais Qualificados</li>
</ul>
<img src="beneficios.jpg" class="imagembeneficios">
</div>
</body>
</html>
Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!