Segue abaixo a solução:
HTML
<!DOCTYPE html> <!--Mostra que estamos utilizando a última versão do HTML--->
<html lang="pt-br"> <!--Idicando ao navegador qual idioma estaremos utilizando -->
<head>
<meta charset="UTF-8"><!--Utilizando o charset para utilizar os metacaracteres necessários,como acentuação -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Definindo Texto</title>
<link rel="stylesheet" href="assets/style.css"> <!--Interligando o documento HTML com o CSS-->
</head>
<body>
<img class="banner" src="img/banner.jpg" alt="banner">
<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 class="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>
</body>
</html>
<!-- Cores
Binário: 01
numérico: 0123456789
hexadecimal: 0123456789ABCDEF
RGB = RED GREEN BLUE
# __ __ __
0 - Ausência de cor
F = Máximo
#000000
#FFFFFF
#FF0000
Dicionário RGB 0,1,2,3,4, ..., 255
0 = ausência de cor
255 = máximo
rgb(255, 255, 255)
rgb(0, 0, 255)
-->
CSS
body {
background-color: #CCCCCC;
color: white;
}
.banner {
width: 100%;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
.missao {
font-size: 20px;
color: rgb(216, 90, 90);
}