---
# System prepended metadata

title: 'Session Three: It''s always time to restart'

---

# Session Three: It's always time to restart
Cauê Freitas Barreto INFOB 05
[toc]
## Faixa 1
### HTML
````html=
<!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">

    <link rel="stylesheet" href="faixa1.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title></title>
  </head>
  <body>
    <div class="conteiner">
      <div class="faixa-1">
        <img src= "../../assets/images/logofaixa1.webp">
      <div class="coteudo">
        <div class="texto">
          Educação Financeira para seus colaboradores
        </div>   
        <br>
        <div class="faixa1-botao"> 
          <a href="#"> AGENDE UMA CONVERSA </a> 
        </div>
      </div>
    </div>
      
  </body>
 
</html>
````
### CSS
````css=
* {
  box-sizing: border-box;
}

body {
  margin: 0px;
}

.conteiner {
  background-image: url("../../assets/images/fundo.png");
  background-size: 100% 100%;
  padding: 1.2em 2.5em;
  background-attachment: fixed;
  height: 100vh;
}
.texto {
  width: 8.5em;
  font: 3.5em Font3;
  color: #ffffff;
  line-height: 1em;
  margin: 120px 0px 33.5px 120px;
}

.faixa1-botao a {
  font-family: Font3;
  color: white;
  background-color: #ee2e5d;
  border-radius: 25px;
  padding: 20px 40px;
  text-decoration: none;
  margin: 120px 0px 33.5px 120px;
}

.conteudo {
  display: flex;
  flex-direction: column;
  width: 450px;
  margin-right: 80px;
}

.faixa-1 {
}
````
## Faixa 2
### HTML
````html=
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Faixa 2</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <link rel="stylesheet" href="../home/faixa2.css" />
  </head>
  <body>
    <div class="faixa">
      <div class="faixa2-txts">
        <div class="texto1">QUEM SOMOS</div>
        <div class="texto2">
          Levamos educação financeira para os mais diversos momentos de vida do
          colaborador <br> e da empresa
        </div>
      </div>
      <div class="texto3">
        Somos uma empresa do Mercado Financeiro com profissionais capacitados e
        certificados para trazer conteúdos para todos os momentos financeiros
        das pessoas.
        <br />
        <br />
        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.
        <br />
        <br />
        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.
      </div>
    </div>
  </body>
</html>
````
### CSS
````css=
.faixa {
  padding: 5em 0em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.faixa2-txts {
  width: 36em;
  display: flex;
  flex-direction: column;
  margin-right: 3em;
}

.texto1 {
  font-family: Font1;
  font-size: 1em;
  font-weight: bold;
  color: #666666;
}

.texto2 {
  font-family: Font3;
  font-size: 2.8em;
  line-height: 1em;
}

.texto3 {
  width: 28em;
  font-family: Font2;
  font-size: 1.1em;
}
````
## Faixa 3
### HTML
````html=
<!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" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <link rel="stylesheet" href="../home/faixa3.css" />
    <title>Faixa3 Warren</title>
  </head>
  <body>
    <div class="faixa3">
      <div class="f3-conteudo-container">
        <div class="f3-textos">
          <div class="texto1">O QUE FAZEMOS</div>
          <div class="texto2">Nossos serviços</div>
          <div class="topicos">
            <li>Webinars Personalizados</li>
            <li>Cursos Online para Plataformas Corporativas</li>
            <li>Consultoria de Planejamento Financeiro</li>
            <li>Programas de Educação Financeira</li>
            <li>Campanhas Personalizadas (online e offline)</li>
          </div>
        </div>
        <div class="imagem">
          <img src="../../assets/images/img fxa3.webp" width="526" />
        </div>
      </div>
    </div>
  </body>
</html>
````
### CSS
````css=
body {
  margin: 0em;
}

.faixa3 {
  display: flex;
  flex-direction: column;
  padding: 10em 8em;
  background-color: #f5f6fa;
}
.f3-conteudo-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.f3-textos {
  padding: 0 10em 0 0;
}
.texto1 {
  font-family: Font3;
  color: #666666;
}

.texto2 {
  font-family: Font3;
  font-size: 40px;
}

li {
  font-family: font1;
}

.topicos {
  line-height: 2.5em;
}

.imagem {
  flex-direction: row;
}
````

## Faixa 4
### HTML
````html=
<!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" />
    <link rel="stylesheet" href="../home/faixa4.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>Faixa 4</title>
  </head>

  <body>
    <div class="Faixa4">
      <div class="f4-conteudo-container">
        <div class="f4-textos">
          <div class="Titulo">PARA QUEM</div>
          <div class="Subtitulo1">Empresas que já compreenderam:</div>
          <div class="Subtitulo2">
            o bem-estar do colaborador é investimento
          </div>
        </div>
        <div class="Texto1">
          Entendemos que problemas financeiros podem impactar profundamente na
          vida do colaborador.
          <br />
          <br />
          Afinal, isso é um grande motivo de estresse e ansiedade, coisas que
          não combinam com uma mente saudável, criativa e engajada.
        </div>
      </div>
    </div>
  </body>
</html>
````
### CSS
````css=
body {
  margin: 0em;
}

.Faixa4 {
  background-color: #171717;
}

.f4-conteudo-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5em;
}

.f4-textos {
  width: 24em;
  padding: 0 18em 0 0;
  line-height: 2.9em;
  margin-left: -0.8em;
}

.Titulo {
  font-family: Font3;
  color: #666666;
  font-size: 1.2em;
  margin-bottom: 0.3em;
}

.Subtitulo1 {
  color: #ee2e5d;
  font-family: Font3;
  font-size: 3em;
}

.Subtitulo2 {
  color: #fff;
  font-family: Font3;
  font-size: 3em;
}

.Texto1 {
  width: 22em;
  color: #fff;
  font-family: Font4;
  font-size: 1em;
}
````

## Faixa 5
### HTML
````html=
<!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" />
    <link rel="stylesheet" href="faixa5.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>Warren</title>
  </head>
  <body>
    <div class="Faixa-5">
      <div class="conteudo-f5">
        <div class="texto1-f5">
          83% dos profissionais de RH afirmam que o estresse financeiro
          prejudica o desempenho dos colaboradores.
        </div>
        <div class="texto2-f5">Society for Human Resources Management</div>
      </div>
    </div>
  </body>
</html>
````
### CSS
````css=
Body {
  margin: 0px;
}

.Faixa-5 {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 20em;
  background-color: black;
  color: white;
}

.conteudo-f5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8em;
  font-family: Font1;
}

.texto1-f5 {
  background-image: url("../../assets/images/quote_warren_educacao_company.webp");
  background-repeat: no-repeat;
  font-family: Font1;
  font-size: 1.2em;
  background-position: left-top;
  width: 25em;
  text-align: center;
  margin-bottom: 2.5em;
  padding-top: 0.8em;
}
````

## Faixa 6
### HTML
````html=
<!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" />
    <link rel="stylesheet" href="faixa6.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>Warren</title>
  </head>
  <body>
    <div class="faixa-6">
      <div class="conteudo-f6">
        <div class="l1-f6">
          <div class="box1-f6">Organização Financeira</div>
          <div class="box2-f6">Planejamento Financeiro</div>
        </div>

        <div class="l2-f6">
          <div class="box3-f6">Investimentos</div>
          <div class="box4-f6">Cenário Macroeconômico</div>
        </div>
      </div>
    </div>
  </body>
</html>
````
### CSS
````css=
body {
  margin: 0px;
  background-color: black;
  color: white;
}

.faixa-6 {
  background-image: url("../../assets/images/imgfundo-f6.webp");
  height: 40em;
  background-attachment: fixed;
}

.conteudo-f6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10em;
}

.l1-f6 {
  display: flex;
  flex-direction: row;
  padding-bottom: 2.8em;
}

.box1-f6 {
  font-size: 1.9em;
  font-family: Font3;
  width: 10em;
  background-image: url("../../assets/images/organizacaofinaceira.webp");
  background-repeat: no-repeat;
  background-position: left-top;
  font-size: 2em;
  padding-left: 4em;
  padding-bottom: 2em;
  padding-top: 1em;
}

.box2-f6 {
  font-size: 1.9em;
  font-family: Font3;
  width: 10em;
  background-image: url("../../assets/images/planejamento-financeiro.webp");
  background-repeat: no-repeat;
  background-position: left-top;
  padding-left: 4em;
  padding-top: 1em;
}

.l2-f6 {
  display: flex;
  flex-direction: row;
}

.box3-f6 {
  font-size: 1.9em;
  font-family: Font3;
  width: 10em;
  background-image: url("../../assets/images/investimento.webp");
  background-repeat: no-repeat;
  background-position: left-top;
  padding-left: 4em;
  padding-top: 1em;
  padding-bottom: 2.5em;
}

.box4-f6 {
  font-size: 1.9em;
  font-family: Font3;
  width: 10em;
  background-image: url("../../assets/images/cenario-macroeconomico.webp");
  background-repeat: no-repeat;
  padding-top: 1em;
  padding-left: 4em;
}
````

## Faixa 7
### HTML
````html=
<html>
  <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" />
    <link rel="stylesheet" href="faixa7.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>Faixa 7 | Warren Educação</title>
  </head>
  <body>
    <div class="faixa7">
      <div class="descricao">
        <div class="titulo">QUEM FAZ PARTE DESTE MOVIMENTO</div>
        <div class="f7-subtitulo-conteiner1">
          <div class="subtitulo1">Mais de</div>
          <div class="subtitulo2">100 empresas</div>
        </div>
        <div class="f7-subtitulo-conteiner2">
          <div class="subtitulo3">e 20 mil colaboradores</div>
          <div class="subtitulo4">impactados</div>
        </div>
      </div>
      <div class="logos">
        <div class="f7-logo-container">
          <div class="logo-f7">
            <img src="../../assets/images/logo-moinhos.webp" width="170" />
          </div>
          <div class="logo-f7">
            <img src="../../assets/images/vivo_logo.webp" width="100" />
          </div>
          <div class="logo-f7">
            <img src="../../assets/images/picadilly-logo.webp" width="140" />
          </div>
          <div class="logo-f7">
            <img src="../../assets/images/loreal-logo.webp" width="140" />
          </div>
        </div>
        <div class="f7-logo-container">
          <div class="logo-f7">
            <img src="../../assets/images/MRV-logo.webp" width="100" />
          </div>
          <div class="logo-f7">
            <img
              src="../../assets/images/leroy-merlin-logo.webp"
              width="100px"
            />
          </div>
          <div class="logo-f7">
            <img src="../../assets/images/sap-logo.webp" width="100px" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
````
### CSS
````css=
.faixa7 {
  display: flex;
  flex-direction: column;
}

.descricao {
  padding: 110px 0px 85px 120px;
}

.titulo {
  font-family: Font3;
  color: grey;
}

.logo-f7 img {
  display: flex;
  flex-direction: row;
  padding: 4em;
}

.f7-logo-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.f7-subtitulo-conteiner1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
}

.f7-subtitulo-conteiner2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
}

.subtitulo1 {
  font-family: Font3;
  font-size: 2.5rem;
  color: black;
}

.subtitulo4 {
  font-family: Font3;
  font-size: 2.5rem;
  color: black;
}

.subtitulo2 {
  font-family: Font3;
  font-size: 2.5rem;
  color: #ee2e5d;
}

.subtitulo3 {
  font-family: Font3;
  font-size: 2.5rem;
  color: #ee2e5d;
}
````

## Faixa 8
### HTML
````html=
<html>
  <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" />
    <link rel="stylesheet" href="faixa8.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>Faixa 8 | Warren Educação</title>
  </head>
  <body>
    <div class="conteiner-faixa8">
      <div class="botao-f8">
        <button>AGENDE UMA CONVERSA</button>
      </div>
    </div>
  </body>
</html>
````
### CSS
````css=
body {
  margin: 0em;
}

.conteiner-faixa8 {
  background-color: black;
  padding: 4em;
  display: flex;
  justify-content: center;
}

.botao-f8 button {
  background-color: #ee2e5d;
  padding: 1.4em 2.4em;
  color: white;
  border: none;
  border-radius: 2em;
  font-family: Font3;
  font-size: 1.1em;
}
````

## Faixa 9
### HTML
````html=
<html>
<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">
 
  <link rel="stylesheet" href="faixa9.css">
  <link rel="stylesheet" href="../comum/comum.css">
  </head>
    <body>   
      <div class="corpo"> 
        <div class="qm"> QUEM SOMOS </div>
        <div class="sw"> Sobre a Warren</div>
        <div class="texto1">
          <p>Somos uma plataforma completa de investimentos com sede em Porto Alegre em outras 6 cidades. Temos mais de 100 mil clientes e 250 colaboradores.</p> </div>
        <div class="texto2">
          <p>Na Warren você investe nos melhores produtos com eficiência, simplicidade e transparência. Somos responsáveis por criar uma experiência alinhada e transparente, que oferece realmente os melhores produtos, com muita tecnologia, mas com atendimento humano e competente.</p> </div>
          <img class="imagem" src="https://lp.warren.com.br/hs-fs/hubfs/device_sobre-a-warren-educacao-in-company.png?noresize&amp;width=383&amp;name=device_sobre-a-warren-educacao-in-company.png" width="400"/>
      </div>
    </body>
  </head>
</html>
````
### CSS
````css=
.conteiner-faixa9 {
}

.titulo-f9 {
  padding: 110px 0px 85px 120px;
  display: flex;
  flex-direction: column;
  align-items: left;
}

.titulo {
  font-family: Font3;
  color: #666666;
}

.subtitulo {
  font-family: Font3;
  font-size: 3rem;
  color: #171717;
}

.depoimentos-f9 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.conteiner-depoimento-f9 {
  width: 18.5em;
  background-color: #f5f6fa;
  padding: 2em;
}

.conteudo {
  font-family: Font1;
  color: #2e2d33;
  padding: 1.5em 0em;
  width: 17em;
}

.autor {
  font-family: Font3;
  color: #2e2d33;
}

.logo-empresa {
}
````

## Faixa 10
### HTML
````html=
<!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" />
    <link rel="stylesheet" href="../home/faixa10.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>Faixa 10</title>
  </head>

  <body>
    <div class="Faixa10">
      <div class="faixa10-conteudo-container">
        <div class="faixa10-texto">
          <div class="Titulo">QUEM SOMOS</div>
          <div class="Subtitulo">Sobre a Warren</div>
          <div class="Texto1">
            Somos uma plataforma completa de investimentos com sede em Porto Alegre
            em outras 6 cidades. Temos mais de 100 mil clientes e 250 colaboradores.
            <br />
            <br />
            Na Warren você investe nos melhores produtos com eficiência,
            simplicidade e transparência. Somos responsáveis por criar uma
            experiência alinhada e transparente, que oferece realmente os melhores
            produtos, com muita tecnologia, mas com atendimento humano e competente.
          </div>
        </div>
      <div class="Imagemfaixa-10">
        <img
          src="../../assets/images/device_sobre-a-warren-educacao-in-company.webp"
          width="400"/>
      </div>
    </div>
  </body>
</html>
````
### CSS
````css=
body {
  margin: 0em;
}

.Faixa10 {
  background-color: #ee2e5d;
}

.faixa10-conteudo-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 8em 8em 5em;
}

.faixa10-texto {
  width: 28em;
  padding: 2em;
}

.Imagemfaixa-10 {
  padding: 0em 7em;
}

.Titulo {
  font-family: Font3;
  font-size: 1.2em;
  color: #e3e4eb;
}

.Subtitulo {
  color: #ffff;
  font-family: Font3;
  font-size: 3em;
}

.Texto1 {
  color: #ffff;
  font-family: Font1;
  flex-direction: row;
  font-size: 1.1em;
  padding: 2em 0em;
}
````

## Faixa 11
### HTML
````html=
<html>
  <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" />

    <link rel="stylesheet" href="faixa11.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
  </head>

  <body>
    <div class="faixa11-container">
      <div class="f11-textos">
        <div class="f11-titulo">Agende uma conversa</div>
        <div class="f11-descricao">
          Quer saber mais sobre o Warren Educação in Company e levar educação
          financeira para a sua empresa? Preencha o formulário abaixo para
          entrarmos em contato com você.
        </div>
      </div>

      <div class="f11-forms-container">
        <div class="forms-container">
          <label>
            Nome*
            <input type="text" name="primeironome" required="required" />
          </label>
        </div>

        <div class="forms-container">
          <label class="forms">
            Email*
            <input type="text" name="email" required="required" />
          </label>

          <label>
            Telefone*
            <input type="text" name="telefone" required="required" />
          </label>
        </div>

        <div class="forms-container">
          <label class="forms">
            Cargo*
            <input type="text" name="cargo" required="required" />
          </label>

          <label class="forms">
            Empresa*
            <input type="text" name="empresa" required="required" />
          </label>

          <label>
            Quantidade de funcionários*
            <select>
              <option select="selected" value=""> Selecione </option>
              <option value="1"> 1 a 50 </option>
              <option value="2"> 51 a 100 </option>
              <option value="3"> 100 a 500 </option>
              <option value="4"> 500 a 1000 </option>
              <option value="5"> 1000 a 5000 </option>
            </select>
          </label>
        </div>
        <label>
          Deixe sua mensagem
          <textarea rows="5"> </textarea>
        </label>
      </div>
      <div class="f11-botao">
        <button type="submit">Enviar</button>
      </div>
    </div>
  </body>
</html>
````
### CSS
````css=
.faixa11-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5em 0em;
}

.f11-forms-container {
  width: 700px;
}

.f11-textos {
  text-align: center;
}

.f11-titulo {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
  font-weight: bold;
}

.f11-descricao {
  width: 40em;
  font-family: Font1;
  padding: 2em 0em 1em;
  color: #2e2d33;
}

.forms-container {
  display: flex;
  flex-direction: row;
}

label {
  width: 100%;
  font-family: Font1;
  margin-bottom: 0.8em;
  font-size: 0.9em;
  color: #2e2d33;
}

input,
textarea,
select {
  width: 100%;
  background-color: #f5f6fa;
  padding: 0.9em;
  border: none;
}

select {
  appearance: none;
}

.forms {
  padding-right: 1.5em;
}

option {
  background-color: #f5f6fa;
  font-family: Font1;
}

.f11-botao button {
  font-family: Font3;
  padding: 1.4em 2.5em;
  border: none;
  background-color: #ee2e5d;
  margin: 2em 0em;
  color: white;
  font-size: 1.1em;
  border-radius: 2em;
  cursor: pointer;
}
````

## Faixa 12
### HTML
````html=
<html>
  <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" />

    <link rel="stylesheet" href="faixa12.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
  </head>
  <body>
    <div class="f12-rodape-container">
      <div class="rodape-container">
        <div class="logo-rodape">
          <img src="../../assets/images/logofaixa1.webp" />
        </div>

        <div class="f12-logos-container">
          <div class="logo-f12">
            <img src="../../assets/images/icon-youtube.webp" />
          </div>
          <div class="logo-f12">
            <img src="../../assets/images/icon-instagram.webp" />
          </div>
          <div class="logo-f12">
            <img src="../../assets/images/icon-facebook.webp" />
          </div>
          <div class="logo-f12">
            <img src="../../assets/images/icon-twitter.webp" />
          </div>
        </div>

        <div class="rodape-txt-container">
          <div class="txt-rodape">Tem alguma dúvida?</div>
          <div class="txt-rodape">Mande um email para</div>
          <div class="txt-rodape">meajuda@warrenbrasil.com.br</div>
          <div class="txt-rodape">CNPJ: 24.176.946/0001-71</div>
        </div>
      </div>
    </div>
  </body>
</html>
````
### CSS
````css=
body {
  margin: 0em;
}

.f12-rodape-container {
  background-color: #171717;
  padding: 3em;
}
.rodape-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.f12-logos-container {
  display: flex;
  flex-direction: row;
  padding: 0em 15em;
}

.rodape-txt-container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.txt-rodape {
  color: white;
  font-family: Font1;
  padding: 0.2em;
}

.logo-f12 {
  padding: 0.3em;
}
````