Arquivo index.html
`
<!-- Cabeçalho: informações para o navegador -->
<head>
<!-- Informar ao navegador o conjunto de regras para correta representação dos caracteres (exemplo: acentuação) -->
<meta charset="UTF-8">
<!-- Título do site (utilizado na aba do navegador) -->
<title>Barbearia Alura</title>
<!-- Link deste arquvio HTML com a folha de estilo CSS (arquivo da folha de estilo) -->
<link rel="stylesheet" href="style.css">
</head>
<!-- Corpo: informações da página -->
<body>
<!-- Definição do cabeçalho da página (não é igual ao "head"!!) -->
<header>
<!-- Conteúdo enfatizao com a TAG h1 (Título das páginas do site)-->
<!-- CLASSE está definida no arquvio CSS -->
<h1 class="titulo-principal">Barbearia Alura</h1>
</header>
<!-- Define banner na página: o nome do arquivo da imagem está em "src"-->
<!-- ID está definido no arquvio CSS -->
<img id="banner" src="banner.jpg">
<!-- Divisão 1: bloco de conteúdo -->
<!-- CLASSE está definida no arquvio CSS -->
<div class="principal">
<!-- CLASSE está definida no arquvio CSS -->
<h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>
<!-- TAGs está definida no arquvio CSS -->
<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>
<!-- ID está definido no arquvio CSS -->
<!-- TAGs estão definidos no arquvio CSS -->
<p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
<!-- TAGs estão definidos no arquvio CSS -->
<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>
<!-- Divisão 2: bloco de conteúdo -->
<!-- CLASSE está definida no arquvio CSS -->
<div class="beneficios">
<!-- CLASSE está definida no arquvio CSS -->
<h3 class="titulo-centralizado">Benefícios</h3>
<!-- Define lista não ordenada (ul): ordem dos itens não importa -->
<!-- TAGs está definida no arquvio CSS -->
<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>
<!-- Define imagem que será exibida ao lado da lista de benefícios -->
<!-- CLASSE está definida no arquvio CSS -->
<img src="beneficios.jpg" class="imagembeneficios">
</div>
</body>