Objetivos da Aula

Fixar os fundamentos do flex-container

Introdução

Fala programador, tudo bem com você? Nessa aula nós vamos fazer um exercício de fixação, fazendo um header básico. Eu desafio você a fazer primeiro com tudo que aprendeu até agora, e depois faremos juntos.

Untitled

Criação do html

Nós vamos começar então criando a estrutura do html, já conectando o css e colocando o título.

<!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="./style.css">
  <title>Exercício de fixação</title>
</head>

<body>

</body>

</html>

Agora, nós vamos criar uma tag header, que vai conter todo o nosso conteúdo.
```
<body>
  <header class="header">
  </header>
</body>
```
Agora, vamos colocar na nossa pasta, as imagens que precisamos. Vamos colocar elas dentro de umas pata chamada “imagens”, e essas imagens estão aqui para você baixar ⇒ https://drive.google.com/drive/folders/10TM5It7PKnEa_hDKOD4ryAnRKY2Asb5w?usp=sharing

Com essas imagens na pasta, nós vamos então colocar as nossas imagens aqui no nosso header.

<body>
  <header class="header">
    <img src="./imagens/iconrock-red.svg" alt="logo-rock" class="logo-rock">
    <img src="./imagens/logo-onebitcode.svg" alt="logo-onebitcode" class="logo-onebitcode">
  </header>
</body>

Com isso feito, nós vamos colocar agora uma div com os botões. Nós teremos uma div com a classe “buttons” e os botões com uma classe “buttonHeader”, para diferenciar.

<body>
  <header class="header">
    <img src="./imagens/iconrock-red.svg" alt="logo-rock" class="logo-rock">
    <img src="./imagens/logo-onebitcode.svg" alt="logo-onebitcode" class="logo-onebitcode">
    <div class="buttons">
      <button class="buttonHeader">
        Início
      </button>
      <button class="buttonHeader">
        FAQ
      </button>
      <button class="buttonHeader">
        Suporte
      </button>
    </div>
  </header>
</body>

Com isso feito, nós temos a nossa estrutura pronta, podemos prosseguir para o css.

Começando o css

Nós vamos começar tirando o margin e o padding de tudo, colocando também o box-sizing.
```
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
```
Agora, podemos colocar um background no header. Vamos colocar o flex com o “space-beteween”, que ele vai fazer com que os itens fiquem afastados uns dos outros, não ligando para as bordas.
```
.header {
  background-color: black;
  display: flex;
  justify-content: space-between;
}
```

Agora, podemos alinhar os itens verticalmente e dar um padding vertical e horizontal para os nossos itens.

.header {
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 25px;
}

A estrutura do header está pronta, podemos então manipular as imagens, colocando tamanhos nelas, para vermos melhor.
```
.logo-rock {
  width: 40px;
}
.logo-onebitcode {
  width: 200px;
}
```
Agora, vamos colocar um display flex na div dos botões e um gap entre os botões.
```
.buttons {
  display: flex;
  gap: 10px;
}
```
Agora, partindo para os botões, vamos estar colocando uma fonte maior para eles, com um padding para ficar espaçado.
```
.buttonHeader {
  font-size: 20px;
  padding: 10px 15px;
}
```

Em seguida, vamos botar um border-radius, tirar o background e também a cor dos textos do botão.

.buttonHeader {
  font-size: 20px;
  padding: 10px 15px;
  border-radius: 10px;
  background-color: transparent;
  border-color: white;
  color: white;
}