---
# System prepended metadata

title: Session Three

---

# Session Three
Autor: Mateus Eustáquio




## HTML

````csharp=

<!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/index.css" />
    <link rel="stylesshet" href="index.css" />
    <title>Educação Financeira para seus colaboradores</title>
  </head>
  <body>
    <div class="Container-site">
      <div class="faixa1">
        <div class="f1-logo">
          <img src="../../assets/images/f1-warren-educacao-logo-white.webp" />
        </div>

        <div class="f1-titulo">
          <h1>
            Educação <br />
            Financeira para <br />
            seus colaboradores
          </h1>

          <div class="f1-botao">
            <button>AGENDE UMA CONVERSA</button>
          </div>
        </div>
      </div>

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

          <div class="f2-texto-direita">
            <p class="p1">
              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="p2">
              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="p3">
              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-textos">
          <div class="f3-titulo">
            <h1>O QUE FAZEMOS</h1>
            <h2>Nossos serviços</h2>
          </div>

          <div class="f3-listas">
            <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="f3-imagem">
          <img
            src="../../assets/images/o-que-fazemos-secao-warren-educacao-in-company.webp"
          />
        </div>
      </div>

      <div class="faixa4">
        <div class="f4-titulos">
          <h1>PARA QUEM</h1>
          <h2>Empresas que já compreenderam:</h2>
          <h3>o bem-estar do colaborador é investimento</h3>
        </div>

        <div class="f4-paragrafo">
          <p class="p1">
            Entendemos que problemas financeiros podem impactar profundamente na
            vida do colaborador.
          </p>

          <p class="p2">
            Afinal, isso é um grande motivo de estresse e ansiedade, coisas que
            não combinam com uma mente saudável, criativa e engajada.
          </p>
        </div>
      </div>

      <div class="faixa5">
        <div class="f5-quote">
          <img src="../../assets/images/quote_warren_educacao_company.webp" />
        </div>

        <div class="f5-frase">
          83% dos profissionais de RH afirmam que o estresse financeiro
          prejudica o desempenho dos colaboradores.
          <br />
          <br />
          <br />
          Society for Human Resources Management
        </div>
      </div>

      <div class="faixa6">
        <div class="f6-itens">
          <div class="f6-item">
            <img src="../../assets/images/f6-educacao-financeira.png" />
          </div>

          <div class="f6-item">
            <img src="../../assets/images/f6-planejamento-financeiro.png" />
          </div>
        </div>

        <div class="f6-itens">
          <div class="f6-item">
            <img src="../../assets/images/f6-investimento.png" />
          </div>

          <div class="f6-item">
            <img src="../../assets/images/f6-cenario-macroeconomico.png" />
          </div>
        </div>
      </div>

      <div class="faixa7">
        <div class="f7-titulos">
          <h1 class="titulo">QUEM FAZ PARTE DESTE MOVIMENTO</h1>
          <h2 class="subtitulo">
            Mais de
            <h2 class="sub-colorido">
              100 empresas e 20 mil colaboradores impactados
            </h2>
          </h2>
        </div>

        <div class="f7-participantes">
          <div class="f7-participante">
            <img src="../../assets//images/logo-hospital-moinhos.webp" />
          </div>
          <div class="f7-participante">
            <img src="../../assets//images/vivo_logo.webp" />
          </div>
          <div class="f7-participante">
            <img src="../../assets//images/piccadilly-logo.webp" />
          </div>
          <div class="f7-participante">
            <img src="../../assets//images/loreal-logo.webp" />
          </div>
        </div>

        <div class="f7-participantes">
          <div class="f7-participante">
            <img src="../../assets//images/MRV-logo.webp" />
          </div>
          <div class="f7-participante">
            <img src="../../assets//images/leroy-merlin-logo.webp" />
          </div>
          <div class="f7-participante">
            <img src="../../assets//images/sap-logo.webp" />
          </div>
        </div>
      </div>

      <div class="faixa8">
        <div class="f8-botao">
          <button>AGENDE UMA CONVERSA</button>
        </div>

        <div class="faixa9">
          <div class="f9-titulos">
            <h1>DEPOIMENTOS</h1>
            <h2>O QUE DIZEM SOBRE NÓS</h2>
          </div>

          <div class="f9-feedbacks">
            <div class="f9-feedback">
              <div class="f9-quote">
                <img
                  src="../../assets/images/quote-warren-educacao-in-company.webp"
                />
              </div>

              <div class="p9-texto-feedback">
                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="f9-autor-feedback">
                Stephany Lopes
              </div>

              <div class="f9-logo-empresa">
                <img src="../../assets/images/neogrid-logo.webp" />
              </div>
            </div>

            <div class="f9-feedback">
              <div class="f9-quote">
                <img
                  src="../../assets/images/quote-warren-educacao-in-company.webp"
                />
              </div>

              <div class="p9-texto-feedback">
                <p>
                  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.
                </p>
              </div>

              <div class="f9-autor-feedback">
                <h1>Emily</h1>
              </div>

              <div class="f9-logo-empresa">
                <img src="../../assets/images/asaas-logo.webp" />
              </div>
            </div>

            <div class="f9-feedback">
              <div class="f9-quote">
                <img
                  src="../../assets/images/quote-warren-educacao-in-company.webp"
                />
              </div>

              <div class="p9-texto-feedback">
                <p>
                  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.
                </p>
              </div>

              <div class="f9-autor-feedback">
                <h1>Cícero</h1>
              </div>

              <div class="f9-logo-empresa">
                <img src="../../assets/images/conta-azul-logo.webp" />
              </div>
            </div>
          </div>
        </div>

        <div class="faixa10">
          <div class="f10-textos">
            <div class="f10-titulo-e-subtitulo">
              <h1>QUEM SOMOS</h1>
              <h2>Sobre a Warren</h2>
            </div>

            <div class="f10-paragrafo">
              <p class="p1">
                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>
              <p class="p2">
                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>
          </div>
          <div class="f10-imagem">
            <img
              src="../../assets/images/device_sobre-a-warren-educacao-in-company.webp"/>
          </div>
        </div>

        <div class="faixa11">
          <div class="faixa11">
            <div class="conteiner-F11"></div>
            <div clas="Informacao-F11">
              <div class="tituloF11">Agende uma conversa</div>
              <div class="descicao-F11">
                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="Informar-Nome">
              <div class="ColocarNome">Nome*</div>
              <input class="Nome" />
            </div>

            <div class="Dados-Contato">
              <div class="email">
                <div class="Email">E-mail*</div>
                <input class="email1" />
              </div>

              <div class="numero">
                <div class="Telefone">Telefone*</div>
                <input class="Telef" />
              </div>
            </div>

            <div class="Dados-Empresa">
              <div class="Cargo">
                <div class="Colocar-Cargo">Cargo*</div>
                <input class="Cargo1" />
              </div>

              <div class="Info-Empresa">
                <div class="Empresa1">Empresa*</div>
                <input class="Empresa2" />
              </div>

              <div class="Selecionar-Quanti">
                <div class="QuantidadeF">Quantidade de funcionários*</div>
                <select class="Opções">
                  <option> Selecione </option>
                  <option> 1 a 50 </option>
                  <option> 51 a 100 </option>
                  <option> 100 a 500 </option>
                  <option> 500 a 100 </option>
                  <option> 1000 a 5000 </option>
                </select>
              </div>
            </div>

            <div class="Comentario">
              <div class="mensagem">Deixe sua mensagem</div>
              <textarea> </textarea>
            </div>

            <div class="botão"><button>Envia</button></div>
          </div>
        </div>
      </div>

      <div class="faixa12">
        <div class="f12-logo">
          <img src="../../assets/images/Wrn_logo-Header_LP.webp" />
        </div>

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

        <div class="f12-email">
          <p>
            Tem alguma dúvida? Mande um email para meajuda@warrenbrasil.com.br
            CNPJ: 24.176.946/0001-71
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
``````


## CSS

````csharp

@font-face {
  font-family: Fonte1;
  src: url(../../assets/fonts/Fonte_Bold.woff2);
}

@font-face {
  font-family: Fonte2;
  src: url(../../assets/fonts/Fonte_Light.woff2);
}

@font-face {
  font-family: Fonte3;
  src: url(../../assets/fonts/Fonte_Ultra_Light.woff2);
}

@font-face {
  font-family: Fonte4;
  src: url(../../assets/fonts/Montserrat-Bold.woff);
}

body {
  display: flex;
  margin: 0em;
  padding: 0em;
}

.faixa1 {
  display: flex;
  flex-direction: column;
  background-image: url("../../assets/images/f1-img-responsive.webp");
  background-attachment: fixed;
  background-size: 100%;
}

.f1-logo {
  padding: 1em;
  margin: 1em;
}

.f1-titulo-e-botao {
  max-width: 30%;
  padding: 10%;
  color: white;
}

.f1-titulo {
  padding: 1em;
  color: white;
  margin: 10%;
  font-family: Fonte1;
}

.f1-botao button {
  margin-top: ;
  color: white;
  padding: 1.5em;
  border-radius: 2em;
  background-color: #ee2e5d;
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.faixa2 {
  background-size: 100%;
  display: flex;
  flex-direction: row;
  padding: 10%;
}

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

.f2-texto-esquerda h1 {
  font-size: 1em;
}

.p1-esquerda {
  max-width: 75%;
}

.f2-texto-esquerda {
  font-size: 2.5em;
  padding: 15px;
}

.f2-texto-direita {
  max-width: 90%;
  font-size: 1em;
  line-height: 1.5em;
  padding: 10px;
}

.faixa3 {
  display: flex;
  flex-direction: row;
  background-color: #f5f6fa;
}

.f3-textos {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 5%;
  margin-left: 10%;
}

.f3-listas {
  line-height: 2em;
}

.f3-imagem {
  padding: 10%;
}
.f3-imagem img {
  max-width: 100%;
}

.faixa4 {
  display: flex;
  flex-direction: row;
  background-color: #1f1f1f;
}

.f4-titulos {
  display: flex;
  flex-direction: column;
  margin: 10%;
}

.f4-paragrafo {
  display: flex;
  flex-direction: column;
  margin: 10%;
}

.faixa5 {
  background-color: #000000;
  background-size: 100%;
}

.f5-quote {
  padding-top: 10%;
  padding-left: 40%;
}

.f5-quote img {
  position: absolute;
}

.f5-frase {
  padding-bottom: 5%;
  padding-right: 30%;
  color: white;
  text-align: center;
  max-width: 50%;
}

.faixa6 {
  display: flex;
  flex-direction: column;
  background-color: #1f1f1f;
  background-image: url("../../assets/images/f6-background-palestra-warren-educacao-incompany.png");
  background-attachment: fixed;
  background-size: 100%;
}

.f6-itens {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  justify-content: center;
}

.f6-item img {
  margin: 10%;
}

.faixa7 {
  margin: 0em;
  padding: 0em;
  background-color: #f5f6fa;
  display: flex;
  flex-direction: column;
}

.f7-titulos {
  padding: 10% 10% 5%;
}

.f7-participantes {
  padding: 10% 10% 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.f7-participante {
  display: flex;
  flex-direction: row;
  max-width: 50%;
}

.f7-participante img {
  width: 10em;
}

.faixa8 {
  display: flex;
  flex-direction: column;
}

.f8-botao {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #1f1f1f;
}

.f8-botao button {
  align-content: center;
  margin: 4%;
  color: white;
  padding: 1.5em;
  border-radius: 2em;
  background-color: #ee2e5d;
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.faixa9 {
  display: flex;
  flex-direction: column;
  background-size: 100%;
}

.f9-feedbacks {
  margin: 10%;
  padding: 10%;
  justify-content: space-evenly;
  display: flex;
  flex-direction: row;
}

.f9-logo-empresa img {
  width: 150px;
}

.faixa10 {
  display: flex;
  flex-direction: row;
  background-size: 100%;
  background-color: #ee2e5d;
  margin: 0em;
  padding: 0em;
}

.f10-textos {
  padding: 15%;
  max-width: 30%;
  font-size: 1em;
}

.f10-imagem img {
  margin-top: 60%;
  padding: 20%;
  max-width: 300px;
}

.faixa11 {
  text-align: center;
  margin: 15em;

  background-color: #f5f6fa;
}
.conteiner-F11 {
  text-align: center;
  margin: 15em;
}

.tituloF11 {
  text-align: center;
  padding: 0em 0em 1em 0em;
  justify-content: space-around;

  font: 2.6em Fonte4;
}

.descicao-F11 {
  display: block;
  text-align: center;
  padding-left: 10em;
  padding-right: 10em;
  padding-block-end: 2em;
  letter-spacing: 1px;

  color: rgb(59, 59, 59);
  font: 18px Fonte1;
}

.ColocarNome {
  display: flex;
  padding: 0em 20em 0em 11em;
  font: 15px Fonte1;
}
.Nome {
  border: 1px;
  padding: 0.64em 23em;
}

.Dados-Contato {
  display: flex;
}

.email {
  padding: 0em 20em 0em 7em;
}

.Email {
  font: 12px Fonte1;
}

.email1 {
  border: 0px;
  padding: 1em 2em 1em 0.65em;
}

.numero {
  padding: 0em 0em 2em 0em;
}

.Telefone {
  padding: 0em 12em 0em 0em;
  font: 13px Fonte1;
}

.Telef {
  border: 0px;
  padding: 1em 2em 1em 0.65em;
}

.Dados-Empresa {
  display: flex;
  padding-left: 1em;
  justify-content: space-around;
}

.Colocar-Cargo {
  padding: 0em 0em 0em 0em;
}

.Cargo1 {
  border: 0px;
  padding: 1em 1em 0em 0em;
}

.Empresa2 {
  border: 0px;
  padding: 1em 1em 0em 0em;
}

.Opções {
  border: 0px;
  padding: 1em 1em 0em 0em;
}

.mensagem {
  padding: 1em 26em 0em 0em;
}

textarea {
  border: 0px;
  padding: 10em 0em 0em 30em;
}

.botão {
  padding: 1em;
}

.botão button {
  padding: 30px;
  font: 1.5em Fonte4;
}

button {
  background: #ff3d6d;
  border: #ff3d6d;

  color: #ffff;
  border-radius: 50px;
  cursor: pointer;
}


.faixa12 {
  display: flex;
  flex-direction: row;
  background-color: #1f1f1f;
  justify-content: space-evenly;
  padding: 5%;
}

.f12-email {
  text-align: center;
  max-width: 20%;
}
````