---
# System prepended metadata

title: 'Session Three: It´s always time to restart - Linguagem de Programação'

---

# Session Three: It´s always time to restart - Linguagem de Programação
Autor: Jonathan Fernando Costa Galo

[toc]

## Investimentos
### Link Site HTML
https://codesandbox.io/s/sweet-khayyam-tx9bm
### Código Html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Educação financeira para seus colaboradores</title>
    <link rel="stylesheet" href="../comum/comum.css">
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div class="container">
      <div id="container-image" class="faixa1">
        <div class="f1-cabecalho">
          <img class="f1-cabecalho" src="../../assets/images/img-f1-cabecalho.webp">
        </div>
        <div class="faixa1-parte2">
          <div class="f1-texto">
            <h1 class="f1-texto">Educação Financeira para seus colaboradores</h1>
          </div>
          <div class="f1-botao">
            <button class="f1-botao">AGENDE UMA CONVERSA</button>
          </div>
        </div>
      </div>

      <div class="faixa2">
        <div class="f2-parte1">
          <div class="f2-parte1-1">
            <h2 class="f2-parte1-text1">QUEM SOMOS</h2>
            <h1 class="f2-parte1-text2">Levamos educação financeira para os mais diversos momentos de vida do colaborador
              e da empresa</h1>
          </div>
        </div>
        <div class="f2-parte2">
          <div class="f2-parte1-2">
            <p class="f2-parte2-text1">Somos uma empresa do Mercado Financeiro com profissionais capacitados e certificados para trazer conteúdos para todos os momentos financeiros das pessoas.</p>
            <p class="f2-parte2-text2">Além disso, nossa equipe conta com profissionais da área de educação, com uma didática fácil e empática, trazendo a leveza necessária para abordar esse assunto.</p>
            <p class="f2-parte2-text3">Acreditamos que a educação e a construção de um ambiente seguro para nossas finanças pessoais é o melhor investimento para o seu colaborador e consequentemente para a empresa.</p>
          </div>
        </div>
      </div>

      <div class="faixa3"></div>
    </div>
  </body>
</html>
```

### Código CSS
```css=
.container{
  display: flex;
  flex-direction: column;
}

#container-image{
  height: 100vh;
  width: 100vw;
  background-image: url('../../assets/images/img-f1-teste.webp');
  position: relative;
  background-size: cover;
  background-attachment: fixed;
} 

.faixa1{

}

.f1-cabecalho{
  margin: 18px 0px 0px 34px;  
}

.f1-texto{
  font: 50px font3;
  margin: 120px 0px 33.5px;
  height: 200px;
  width: 502px;
  color: #eeeeee;
}

.f1-botao button {
  font: 13px font3;
  background-color: #EE2E5D;
  color: #eeeeee;
  border-radius: 3em;
  border: none;
  padding: 2em 4em;
}

.faixa1-parte2{
  margin: 0px 140px;
}

.faixa2{
  display: flex;
  flex-direction: row;
}

.f2-parte1{
  padding: 58px 50px;
  margin: 0px 50px;
}

.f2-parte1-text1{
  font-size: 16px;
  font-family: font3;
}

.f2-parte1-text2{
  font-size: 40px;
  margin:  0px 0px 33px;
  font-family: font3;
}

.f2-parte2{
  padding: 0px 150px 0px 30px;
}

.f2-parte1-2{
  padding: 58px 0px;
}

.f2-parte2-text1{
  font-size: 16px;
  font-family: font1;
}

.f2-parte2-text2{
  font-size: 16px;
  font-family: font1;
}

.f2-parte2-text3{
  font-size: 16px;
  font-family: font1;
}
```