---
# System prepended metadata

title: SESSION DE LING PROG

---

# SESSION DE LING PROG

## HTML

```htmlembedded=
<!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 pra seus colaboradores</title>
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="../comun/index.css" />
  </head>
  <body>
    <div class="container-site">
      <div class="faixa1">
        <div class="f1-logo"><img src="../../assets/imagens/logof1" /></div>
        <div class="f1-texto">
          Educação<br />Financeira para<br />seus colaboradores
        </div>
        <div class="f1-botao"><a href="#">AGENDE UMA CONVERSA</a></div>
      </div>

      <div class="faixa2">
        <div class="f2-titulo">QUEM SOMOS</div>
        <div class="f2-textos">
          <div class="texto1">
            <p>
              Levamos educação<br />
              financeira para os mais<br />
              diversos momentos de <br />
              vida do colaborador<br />
              e da empresa
            </p>
          </div>

          <div class="texto2">
            <p>
              somos uma empresa do Mercado Financeiro com profissionais
              capacitados e certificados para trazer conteúdos para todos os
              momentos financeiros das pessoas.
            </p>
            <p>
              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>
              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 class="f3-agrupamento2">
        <div class="f3-textos">
        <div class="titulo">O QUE FAZEMOS</div>
        <div class="subtitulo">
        Nossos serviços
        </div>
        </div>
        <div clasas="serviços">
        <ul>
        <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>
        </ul>
        </div>
        </div>
        <div class="imagem-faixa3">
        <img src="../../assets/images/imagem-faixa3.png"/>
        </div>
        
        
        </div>
        <div class="faixa4">
            <div class="f4-textos">  
            
          
                <div class="f4-texto1">
                    <div class="f4-titulo">PARA QUEM</div>
              <div class="f4-part1"> Empresas que já<br/>
                            compreenderam:</div>
              <div class="f4-part2"> o bem-estar do<br />
                colaborador é
                <br />investimento</div>
             
    </div>
    <div class="f4-texto2">
      Entendemos que problemas financeiros podem<br />
              impactar profundamente na vida do colaborador.<br /><br />
    
              Afinal, isso é um grande motivo de estresse e<br />
              ansiedade, coisas que não combinam com uma<br />
              mente saudável, criativa e engajada.
    </div>
    </div>
    
            </div>
          </div>
        </div>
      
        <div class="faixa-5">
            <div class = "f5-agp">
             <div class="f5-titulo">
               83% dos profissionais de RH afirmam que o estresse financeiro prejudica
               o desempenho dos colaboradores.
             </div>
             <div class="f5-desc">Society for Human Resources Management</div>
            </div>
           </div>

           
           <div class = "faixa-6">
              <div class = "f6-agp">
               <div class = "f6-quadrado">
                <div class = "f6-texto1"> 
                    Organização
                   <br> Financeira
               </div>
              
                  <div class = "f6-texto2"> Planejamento
                     <br> Financeiro  </div>
                
                    <div class = "f6-texto3"> Investimentos </div>
                  
                      <div class = "f6-texto4"> 
                        Cenário
                        <br>  Macroeconômico
                      </div>     
               </div>   
              </div>
            </div>
            <div class="faixa7">
                <div class="f7-textos">
                  <div class="f7-titulo">
                    QUEM FAZ PARTE DESTE MOVIMENTO
                  </div>
                  <div class="f7-texto1">
                    Mais de
                    <span style="color: #ee2e5d;">
                      100 empresas <br />e 20 mil colaboradores</span
                    >
                    impactados
                  </div>
          
                  <div class="imagens">
                    <div class="logo1">
                      <img src="../../assets/images/logo-hospital-moinhos.webp" />
                    </div>
                    <div class="logo2">
                      <img src="../../assets/images/vivo_logo.webp" />
                    </div>
                    <div class="logo3">
                      <img src="../../assets/images/piccadilly-logo.webp" />
                    </div>
                    <div class="logo4">
                      <img src="../../assets/images/loreal-logo.webp" />
                    </div>
                    <div class="logo5">
                      <img src="../../assets/images/MRV-logo.webp" />
                    </div>
                    <div class="logo6">
                      <img src="../../assets/images/leroy-merlin-logo.webp" />
                    </div>
                    <div class="logo7">
                      <img src="../../assets/images/sap-logo.webp" />
                    </div>
                  </div>
                </div>
              </div>
              
              <div class = "faixa-8">
                  <div class = "f8-botao"> <button> Agende uma Conversa </button> </div>
                </div>

                <div class="faixa9">
                    <div class="titulo-f9">
                      <div class="depoimentos-titulo-f9">DEPOIMENTOS</div>
                      <div class="titulo-geral-f9">O que dizem sobre nós</div>
                    </div>
                    <div class="blocos-f9">
                      <div class="quadro1-f9">
                        <div class="imagem-aspas-f9">
                          <img src="../../assets/images/aspas(1).webp" />
                        </div>
                        <div class="descricao-f9">
                          O momento que tivemos com o Papo de Grana foi essencial para
                          entendermos a importância de ter uma vida financia controlada e que
                          sim, é possível se divertir quando o assunto é finanças.
                        </div>
                        <div class="texto-nome-f9">Stephany Lopes</div>
                        <div class="imagem-logo-f9">
                          <img src="../../assets/images/neogrid-logo.webp" />
                        </div>
                      </div>
                      <div class="quadro2-f9">
                        <div class="imagem-aspas-f9">
                          <img src="../../assets/images/aspas(1).webp" />
                        </div>
                        <div class="descricao-f9">
                          Consegui ver a transparência e integridade da empresa, eu não tinha
                          conhecimento nenhum na área de investimento e muito menos onde
                          investir sem ter medo de levar a “ré” e acabar perdendo tudo. Foi
                          uma palestra rápida, focada e ágil, não ficaram enrolando ou até
                          mesmo forçando algo.
                        </div>
                        <div class="texto-nome-f9">Emily</div>
                        <div class="imagem-logo-f9">
                          <img src="../../assets/images/asaas-logo.webp" />
                        </div>
                      </div>
                      <div class="quadro3-f9">
                        <div class="imagem-aspas-f9">
                          <img src="../../assets/images/aspas(1).webp" />
                        </div>
                        <div class="descricao-f9">
                          O Papo de Grana levantou assuntos antes considerados muito
                          complicados e muitas vezes restritos a uma pequena parcela da
                          população, de uma forma didática que traz conhecimento ao alcance de
                          todos e principalmente na palma da mão.
                        </div>
                        <div class="texto-nome-f9">Cícero</div>
                        <div class="imagem-logo-f9">
                          <img src="../../assets/images/conta-azul-logo.webp" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="faixa10">
                      <div class="textos-10">
                        <div class="quemsomos-10">QUEM SOMOS</div>
                        <div class="sobrewarren-10">Sobre a Warren</div>
                        <div class="texto01-10">
                          Somos uma plataforma completa de investimentos com sede em Porto
                          Alegre em outras 6 cidades. Temos mais de 100 mil clientes e 250
                          colaboradores.
                        </div>
                        <div class="texto02-10">
                          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="image-10">
                        <img class="celular-f10" src="../../assets/images/CELULAR-F8.webp" />
                      </div>
                    </div>
                    <div class = "faixa-11">
                        <div class = "f11-agrupamento">
                          <div class = "f11-texto">
                            <div class = "f11-titulo"> Agende uma conversa </div>
                            <div class = "f11-desc"> 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-agp">
                            <div  class = "f11-1-1"> Nome </div>
                            <div class = "f11-1"> <input>  </input> </div>
                            
                            <div class = "f11-inputs">
                              <div class = "agp-f11">  
                              <div class = "f11-2-2">  E-mail </div>
                            <div class = "f11-2"> <input> </input> </div>
                              </div>
                              <div class = "agp-f11">  
                              <div class = "f11-3-3"> Telefone </div>
                            <div class = "f11-3" > <input>  </input> </div>
                          </div>
                            </div>
                          <div class = "f11-inputs2">
                              <div class = "agp-f11">  
                            <div class = "f11-4-4"> Cargo </div>
                            <div class = "f11-4"> <input> </input> </div>
                              </div>
                              <div class = "agp-f11">  
                              <div class = "f11-5-5"> Empresa </div>
                            <div class = "f11-5">  <input> </input> </div>
                              </div>
                              <div class = "agp-f11">  
                              <div class = "f11-6-6"> Quantidade de funcionários </div>
                            <div class = "f11-6"> <select name="selecione"> <option value="valor1"> Selecione </option>  </select>  </div>
                              </div>
                          </div>
                         <div class = "f11-7-7">  Deixe sua mensagem </div>
                          <div class = "f11-7"> <input>  </input>  </div>
                          <div class = "f11-button"> <button> ENVIAR </button> </div>
                          </div>  
                        </div>
                      </div>

                    <div class = "faixa-12">
                        <div class = "f12-agp">
                          <div class = "f12-logo"> <img src="../../assets/images/f12-logo.webp"> </div>
                          <div class = "f12-agp-foto">
                          <div class = "f12-foto"> <img src="../../assets/images/icon-youtube.webp"> </div>
                          <div class = "f12-foto"> <img src="../../assets/images/icon-instagram.webp"> </div>
                          <div class = "f12-foto"> <img src="../../assets/images/icon-facebook.webp"></div>
                          <div class = "f12-foto"> <img src="../../assets/images/icon-twitter.webp"> </div>
                          </div>
                        </div>
                        <div class = "f12-agp-desc">
                          <div class = "f12-texto"> Tem alguma dúvida? </div>
                          <div class = "f12-texto"> Mande um email para </div>
                          <div class = "f12-texto">  meajuda@warrenbrasil.com.br </div>
                          <div class = "f12-texto">  CNPJ: 24.176.946/0001-71</div>
                        </div>
                      </div>

  </body>
</html>
```

## CSS 

```css=
.container-site {
  font-size: 14px;
  font-family: font1;
}
body {
  margin: 0px;
}

.faixa1 {
  display: flex;
  flex-direction: column;
  background-image: url("../../assets/imagens/fundo.png");

  background-size: cover;
  background-attachment: fixed;

  height: 100%;
  width: 100%;

  color: #ffffff;
}

.f1-logo {
  margin-top: 1em;
  margin-left: 1em;
}
.f1-texto {
  text-align: left;

  font-size: 3.5em;
  padding: 2.5em 1em 0.3em 1.8em;
  margin: 1px 1px 1px 1px;
}

.f1-botao {
  padding: 2em 1em 0.3em 7.5em;
}

.f1-botao a {
  text-decoration: none;
  color: #ffff;
  background-color: #ee2e5d;
  border-radius: 100px;
  padding: 27px 25px;
  align-items: center;
  line-height: 50px;

  font-size: 20px font1;
}
a,
a:hover {
  text-decoration: none;
  color: inherit;
}

.faixa2 {
  margin-left: 50px;
  height: 60%;
}

.f2-titulo {
  margin: 6em 0.2em 0em 0em;
  color: #666666;
  font: font4 bold;
}

.f2-textos {
  display: flex;
  flex-direction: row;
}

.texto1 {
  font: 40px font3 bold;
  width: 70%;
}

.texto2 {
  font: 16px;
  width: 60%;

  margin: 2.3em 8em;

  font-size: 1.2em;
}
.faixa3 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color: #f5f6fa;
  padding: 5%;
}

.titulo {
  font-family: medio;
  font-size: 16px;
  color: #666666;
}

.subtitulo {
  font-family: forte;
  font-size: 2.5rem;
}

.f3-agrupamento2 {
  display: flex;
  flex-direction: column;
}

li {
  font-family: fraca;
  color: #2e2d33;
  font-size: 1em;
  margin: 1em 0em 1em;
}

.imagem-faixa3 img {
  max-width: 70%;
}
.faixa4 {
  display: flex;
  flex-direction: row;

  background-color: #1c1b1f;
  justify-items: center;
  height: 70%;
  padding: 5em;
}

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

.f4-textos {
  display: flex;
  flex-direction: row;

  padding: 0em 0em 0em 2em;
}

.f4-texto1 {
  display: flex;
  flex-direction: column;

  justify-items: left;
  padding: 3em 10em 0em 0em;

  font-family: forte;
}

.f4-part1 {
  font-size: 40px;
  color: #ee2e5d;
}

.f4-part2 {
  font-size: 40px;
  color: #ffffff;
}

.f4-texto2 {
  font-family: fraca;

  text-align: left;
  margin-top: 4em;

  height: 50%;
  padding: px;
  color: #ffffff;

  font-size: 17px;
}

.f5-titulo {
  background-image: url("../../assets/images/f5-aspas.webp");
  background-size: 10%;
  background-repeat: no-repeat;
}
.f5-titulo {
  font-family: fraca;
  font-size: 20px;
  line-height: 28px;
  max-width: 500px;
  color: white;
  padding-bottom: 3%;
  padding-top: 0.7%;
  padding-left: 0.7%;
}
.f5-agp {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #000;
  padding-top: 5%;
  padding-bottom: 5%;
}
.f5-desc {
  color: white;
  font-family: fraca;
  font-size: 16px;
}

.f6-quadrado {
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  padding-top: 50px;
}
.f6-agp {
  background-image: url("../../assets/images/background-palestra-f6.webp");
  background-size: cover;
  background-attachment: fixed;
  height: 70vh;
  background-color: black;
}

.f6-texto1 {
  color: white;
  font-family: medio;
  font-size: 27px;
  padding-bottom: 35px;
  background-image: url("../../assets/images/educacao-financeira_1-f6.webp");
  background-size: 75%;
  background-repeat: no-repeat;
  padding-top: 30px;
  padding-left: 70px;
}
.f6-quadrado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 400px;
  padding-right: 400px;
  justify-content: space-between;
}
.f6-texto2 {
  color: white;
  font-family: medio;
  font-size: 27px;
  padding-bottom: 35px;
  background-image: url("../../assets/images/planejamento-financeiro_1-f6.webp");
  background-size: 70%;
  background-repeat: no-repeat;
  padding-top: 32px;
  padding-left: 70px;
}

.f6-texto3 {
  color: white;
  font-family: medio;
  font-size: 27px;
  padding-top: 35px;
  background-image: url("../../assets/images/investimento_1-f6.webp");
  background-size: 70%;
  background-repeat: no-repeat;
  padding-top: 30px;
  padding-left: 55px;
  width: 150px;
  height: 100px;
}

.f6-texto4 {
  color: white;
  font-family: medio;
  font-size: 27px;
  background-image: url("../../assets/images/cenario-macroeconomico_1-f6.webp");
  background-size: 70%;
  background-repeat: no-repeat;
  padding-top: 50px;
  padding-left: 45px;
  margin-bottom: 80px;
  margin-top: 36px;
}

.faixa7 {
  display: flex;
  flex-direction: row;

  height: 100%;
  background-color: #f7f5f5e6;
  justify-content: center;
  align-items: center;
}

.imagens {
  display: flex;
  flex-wrap: wrap;

  padding: 2em;
  margin: 7em;

  justify-content: center;
  align-items: center;
}
.logo1 img {
  height: 4em;
  width: 12em;
  margin: 80px 36.6211px 0px 36.6211px;
}
.logo2 img {
  max-height: 3em;
  max-width: 6em;
  margin: 80px 73px 0px 73px;
}
.logo3 img {
  max-height: 1.5em;
  max-width: 6em;
  margin: 80px 51.1133px 0px;
}
.logo4 img {
  max-height: 1.25em;
  max-width: 6em;
  margin: 80px 73px 0px 73px;
}
.logo5 img {
  max-height: 5em;
  max-width: 6em;
  margin: 80px 15.957px 0px;
}

.logo6 img {
  height: 3em;
  width: 5em;
  margin: 80px 26.9726px 0px 26.9531px;
}
.logo7 img {
  height: 3em;
  width: 5em;
  margin: 80px 26.9726px 0px 26.9531px;
}
.f7-textos {
  display: flex;
  flex-direction: column;

  justify-content: left;
  align-items: left;
  margin-top: 10em;
}
.f7-titulo {
  justify-content: left;
  align-items: left;

  font-family: forte;
  color: #666666;
  font-size: 16px;

  padding-left: 11.5em;
  margin-bottom: -2em;
}

.f7-texto1 {
  justify-content: left;

  font-family: forte;
  margin-top: 1em;
  font-size: 30px;
  padding-left: 6em;
}

.faixa-8 {
  background-color: #000;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.f8-botao button {
  border-radius: 150px;
  width: 245px;
  height: 58px;
  color: white;
  font-family: medio;
  font-size: 22px;
  background-color: #ee2e5d;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.f8-botao {
  margin-top: 50px;
  margin-bottom: 50px;
}

.titulo-f9 {
  display: flex;
  flex-direction: column;
  align-content: left;

  margin: 8em 8em 0px 8em;
}

.depoimentos-titulo-f9 {
  font-family: fraca;
  font-weight: bold;
  font-size: 16px;
  color: #2e2d33;
  opacity: 80%;
}

.titulo-geral-f9 {
  color: #2e2d33;
  font-family: forte;
  font-size: 40px;
}

.blocos-f9 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;

  margin: 0px 7em;
  padding-top: 5em;
  padding-bottom: 7em;
}

.quadro1-f9 {
  max-width: 20em;
  min-width: 20em;

  padding: 1em;

  background-color: #f5f6fa;
  border-radius: 10px;
}

.quadro2-f9 {
  max-width: 20em;
  min-width: 20em;

  padding: 1em;

  background-color: #f5f6fa;
  border-radius: 10px;
}

.quadro3-f9 {
  max-width: 20em;
  min-width: 20em;

  padding: 1em;

  background-color: #f5f6fa;
  border-radius: 10px;
}

.imagem-aspas-f9 {
  width: 40px;
  height: 28px;
}

.descricao-f9 {
  font-family: fraca;
  font-size: 16px;
  color: #2d2e33;

  max-width: 17em;

  padding: 0px 0px 1em 1em;
  padding-top: 0px;
}

.texto-nome-f9 {
  padding-top: 1em;
  padding: 20px;

  font-family: forte;
  font-size: 16px;
}

.imagem-aspas-f9 img {
  width: 40px;
  height: 28px;
}

.imagem-aspas-f9 {
  padding: 1em;
  margin-bottom: 20px;
}

.imagem-logo-f9 img {
  width: 4em;
  padding: 20px;
}

.faixa10 {
  display: flex;
  flex-direction: row;
  background-color: #ee2e5d;
  justify-content: space-around;
  padding: 7em 0px;
}

.textos-10 {
  font-size: 1.1em;
  color: white;
  margin-left: 11em;
  max-width: 27em;
}

.quemsomos-10 {
  font-family: medio;
  font-size: 0.9em;
}

.sobrewarren-10 {
  font-family: forte;
  font-size: 2.2em;
  margin: 0.2em 0px 1em;
}

.texto01-10 {
  font-family: fraca;
  margin-bottom: 1em;
}

.texto02-10 {
  font-family: fraca;
}

.image-10 img {
  max-width: 24em;
  margin-right: 17em;
}
f11-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.f11-titulo {
  font: 40px forte;
  margin-top: 85px;
}
.f11-desc {
  font-family: fraca;
  max-width: 670px;
  margin-top: 40px;
  margin-left: 20px;
}
.f11-agp {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input {
  border: none;
  background-color: #f5f6fa;
  cursor: pointer;
}
.f11-1 input {
  width: 700px;
  height: 35px;
}
.f11-1-1 {
  margin-right: 650px;
  margin-top: 30px;
}

.f11-inputs {
  display: flex;
  flex-direction: row;
}

.f11-2-2 {
  margin-top: 30px;
}
.f11-3-3 {
  margin-top: 33px;
}

.agp-f11 {
  display: flex;
  flex-direction: column;
}

.f11-2 input {
  width: 325px;
  height: 35px;
  margin-right: 50px;
}

.f11-3 input {
  width: 325px;
  height: 35px;
}

.f11-inputs2 {
  display: flex;
  flex-direction: row;
}

.f11-5 {
  margin-right: 25px;
}
.f11-4 {
  margin-right: 25px;
}

.f11-4 input {
  width: 105px;
}

.f11-4 input {
  width: 230px;
  height: 35px;
}
.f11-5 input {
  width: 230px;
  height: 35px;
}
.f11-6 input {
  width: 192px;
  height: 35px;
}
.f11-6-6 {
  margin-top: 30px;
}
.f11-5-5 {
  margin-top: 30px;
}
.f11-4-4 {
  margin-top: 30px;
}
.f11-7 input {
  width: 700px;
  height: 130px;
  margin-bottom: 40px;
}
.f11-7-7 {
  margin-top: 25px;
  width: 700px;
}
.f11-button button {
  color: #f5f6fa;
  background-color: #eb2d5c;
  cursor: pointer;
  text-decoration: none;
  border: none;
  border-radius: 34px;
  font: 22px medio;
  padding: 20px;
  width: 200px;
  margin-bottom: 130px;
}

.f11-6 select {
  border: none;
  cursor: pointer;
  background-color: #f5f6fa;
  width: 192px;
  height: 35px;
}

.faixa-12 {
  background-color: #2e2d33;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.f12-agp {
  display: flex;
}

.f12-agp-desc {
  display: flex;
  flex-direction: column;
  justify-content: right;
  margin-top: 33px;
  margin-bottom: 33px;
}
.f12-agp-foto {
  display: flex;
  flex-direction: row;
  margin-right: 20px;
  margin-top: 44px;
  margin-left: 263px;
}

.f12-texto {
  color: white;
  font-family: fraca;
  padding-bottom: 7px;
  text-align: center;
}
.f12-logo {
  margin-top: 44px;
}
.f12-foto {
  padding-right: 10px;
}
```