Post

Criando uma Seção Sobre Nós.

Postado em Atualizado
Por Vagner Leite
1 min de leitura

About section

Uma “about section” (seção sobre, em português) é um termo usado no design de websites para descrever uma área onde é contado a história ou o propósito do site e/ou serviço oferecido.

Exemplos

Modelo de hero section Modelo de hero section Modelo de hero section

Criando uma about section

Para criarmos uma hero section primeiramente vamos criar uma nova branch a partir da main, chamada hero-section git checkout -b about-section e em seguida criar um novo arquivo about.html e criar a estrutura básica do arquivo.

O resultado esperado deve ser algo parecido com a imagem abaixo.

Seção sobre

Faça o download da imagem a ser usada aqui

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre Nós</title>
</head>
<body>
    <section id="about" class="about-container">
      <div class="text-content">
        <h2>Sobre Nós</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          varius enim in eros elementum tristique. Duis cursus, mi quis viverra
          ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
        </p>
        <p>
          Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc
          ut sem vitae risus tristique posuere.
        </p>
      </div>
      <div class="image-content">
        <img src="about.jpg" alt="Descrição da imagem" />
      </div>
    </section>

</body>
</html>

Passos

  • remova a margem, espacamento das tags html e body definindo o padding e a margin para 0, configure o height para 100% e a família da fonte para Arial, sans-serif e com o background-color com valor #231942
  • crie una regra definir os estilos da section #about com o display definido como flex, alinhe os elemenos ao centro verticalmente usando o align-items com o valor center e horizontalmente use o justify-content com space-between um espaçamento de 48pxe o background-color com o valor #f4e9ff e a cor da fonte color com valor #5e548e
  • para a div tex-content defina o seu tamanho width para 50%
  • para .image-content defina seu tamanho width em 50% e o text-align como right
  • e para a tag img, o witdh em 100% e o height para auto

Comite o resultado na sua branch

css, html
css
Esta postagem está licenciada sob CC BY 4.0 pelo autor.