Conclusão | HTML5 e CSS3 parte 1: crie uma página da Web

HTML:

<!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" />
    <link rel="stylesheet" href="assets/styles/style.css" />
    <title>Barbearia Alura</title>
  </head>
  <body>
    <header>
      <h1 class="main-title">Barbearia Alura</h1>
    </header>
    <img
      id="banner"
      src="assets/img/banner.jpg"
      alt="Imagem do interior de uma barbearia, 
      no centro dela duas cadeiras de barbear, ao fundo 
      um balcão com produtos e ferramentas de barbearia,acima desse balcão
      quadros com fotos e imagens pendurados na parede."
    />
    <div class="main">
      <h2 class="title">Sobre a Barbearia Alura</h2>

      <p class="text-content">
        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="text-content" id="mission">
        <em
          >Nossa missão é:
          <strong
            >"Proporcionar auto-estima e qualidade de vida aos
            clientes".</strong
          >
        </em>
      </p>

      <p class="text-content">
        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="benefits">
      <h3>Benefícios</h3>
      <ul>
        <li class="item">Atendimento aos Clientes</li>
        <li class="item">Espaço diferenciado</li>
        <li class="item">Localização</li>
        <li class="item">Profissionais Qualificados</li>
      </ul>
      <img
        class="benefits-img"
        src="assets/img/beneficios.jpg"
        alt="Imagem de um barbeiro em pé e de um homem sentado em uma cadeira de barbeiro
         com a cabeça inclinada para trás, o barbeiro está com uma tesoura de corte de cabelo 
          e barba na mão esquerda, ele está fazendo um corte da parte de baixo da barba do homem que está sentado.
          O homem que está sentado é um cliente e tem a barba grisalha, o barbeiro tem tatuagens no braço esquerdo 
          e na imagem só aparece os braços e o torax do barbeiro"
      />
    </div>
  </body>
</html>

CSS:

body {
  box-sizing: border-box;
}

/* Criando variáveis para as cores*/
:root {
  --bg-color: #cccccc;
  --red-color: #ff0000;
  --white-bg-color: #ffffff;
}

.main-title {
  padding-left: 20px;
}

.main {
  background: var(--bg-color);
  padding: 30px;
}

#banner {
  width: 100%;
}

.title,
.text-content {
  text-align: center;
}

#mission {
  font-size: 20px;
}

#mission em strong {
  color: var(--red-color);
}

.item {
  font-style: italic;
}

.benefits {
  background: var(--white-bg-color);
  padding: 20px;
}

.benefits h3 {
  text-align: center;
}

.benefits ul {
  display: inline-block;
  vertical-align: top;
  width: 20%;
  margin-right: 15%;
}

.benefits-img {
  width: 50%;
}