---
# 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


Author: Igor Lima Charles
N°: 18
Grade: INFOA

LINK DO SITE COMPLETO: https://codesandbox.io/s/recriacao-warren-z8xsd?file=/src/pages/home/index.html


## 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" />
    <link rel="stylesheet" href="../home/index.css" />
    <link rel="stylesshet" href="index.css" />
    <link rel="stylesheet" href="index-responsivo.css">
    <link rel="stylesheet" href="../../assets/fonts/Fontes.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-conteudo">
          <div class="f1-titulo">
            <h1>Educação Financeira para seus colaboradores</h1>
          </div>

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

      <div class="faixa2">
        
        <div class="f2-titulos">
            <div class="f2-titulo">
              <h1>QUEM SOMOS</h1>
            </div>

            <div class="f2-subtitulo">
              <h1>
                  Levamos educação financeira para os mais diversos momentos de vida do colaborador
                  e da empresa
              </h1>
            </div>
        </div>

        <div class="f2-conteudo">
            <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 class="faixa3">
        <div class="f3-conteudo">
            <div class="f3-txt">
              <div class="f3-titulos">
                <h1>O QUE FAZEMOS
                  <br>
                <span> Nossos serviços </span> </h1>
              </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/f3-o-que-fazemos-secao-warren-educacao-in-company.webp"
            />
          </div>

        </div>
      </div>

      <div class="faixa4">
          <div class="f4-titulos">
            <span>
              <p> PARA QUEM </p>
              <span style="color: #ee2e5d">Empresas que já compreenderam:</span>
              <br>
              <span style="color: white">o bem-estar do colaborador é investimento </span>
            </span>
            
          </div>
    
          <div class="f4-paragrafo">
            <p>
              Entendemos que problemas financeiros podem impactar profundamente na
              vida do colaborador.
              <br />
              <br />
              <br />
              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/f5-quote_warren_educacao_company.webp" />
          83% dos profissionais de RH afirmam que o estresse financeiro prejudica o
          desempenho dos colaboradores.
          <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 class="f6-item-texto">
              
                Organização <br />
                Financeira
              
            </div>
          </div>

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

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

          <div class="f6-item">
            <img src="../../assets/images/f6-cenario-macroeconomico.png" />
            <div class="f6-item-texto">
              
                Cenário <br />
                Macroeconômico
              
            </div>
          </div>
        </div>
      </div>

      <div class="faixa7">
        <div class="f7-titulos">
          <div class="f7-titulo">
            
            <h1>QUEM FAZ PARTE DESTE MOVIMENTO</h1>
          </div>
  
          <div class="f7-subtitulo">
            <h2>
            <span style="color: #171717;">Mais de</span>
            <span style="color: #ee2e5d;">100 empresas<br />e 20 mil colabores</sapn>
            <span style="color: #171717;">impactados</span>
            </h2>
          </div>
        </div>
        <div class="f7-participantes">
          <div class="f7-participante">
            <img src="../../assets/images/f7-logo-hospital-moinhos.webp" />
          </div>
  
          <div class="f7-participante">
            <img src="../../assets/images/f7-vivo_logo.webp" />
          </div>
  
          <div class="f7-participante">
            <img src="../../assets/images/f7-piccadilly-logo.webp" />
          </div>
  
          <div class="f7-participante">
            <img src="../../assets/images/f7-loreal-logo.webp" />
          </div>
        </div>
  
        <div class="f7-participantes">
          <div class="f7-participante">
            <img src="../../assets/images/f7-MRV-logo.webp" />
          </div>
  
          <div class="f7-participante">
            <img src="../../assets/images/f7-leroy-merlin-logo.webp" />
          </div>
  
          <div class="f7-participante">
            <img src="../../assets/images/f7-sap-logo.webp" />
          </div>
        </div>
      </div>

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

      <div class="faixa9">
        <div class="f9-titulos">
          <h1>DEPOIMENTOS
            <br>
          <span> O que dizem sobre nós</span></h1>
        </div>

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

            <br />

            <p>
              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.
            </p>

            <br />
            <span class="f9-autor-do-feedback">Stephany Lopes</span>
            <br />
            <br>
            <img src="../../assets/images/f9-neogrid-logo.webp" />
          </div>

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

            <br />

            <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>

            <br />
            <span class="f9-autor-do-feedback">Emily</span>
            <br>
            <br />
            <img src="../../assets/images/f9-asaas-logo.webp" />
          </div>

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

            <br />

            <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>

            <br />
            <br>
            <span class="f9-autor-do-feedback">Cícero</span>
            <br>
            <br />
            <img src="../../assets/images/f9-conta-azul-logo.webp" />
          </div>
        </div>
      </div>

      <div class="faixa10">
        <div class="f10-textos">
          <div class="f10-titulo">
            <h1>QUEM SOMOS
              <br>
           <span>Sobre a Warren</span> </h1>
          </div>

          <div class="f10-paragrafo">
            <p>
              Somos uma plataforma completa de investimentos com sede em <br>
              Porto Alegre em outras 6 cidades. Temos mais de 100 mil clientes 
              <br>
              e 250 colaboradores.


              <br>
              <br>
            
              Na Warren você investe nos melhores produtos com eficiência,
              <br>
              simplicidade e transparência. Somos responsáveis por criar uma
              <br>
              experiência alinhada e transparente, que oferece realmente os
              <br>
              melhores produtos, com muita tecnologia, mas com 
              <br> atendimento
              humano e competente.
            </p>
          </div>
        </div>
        <div class="f10-imagem">
          <img
            src="../../assets/images/f10-device_sobre-a-warren-educacao-in-company.webp"
          />
        </div>
      </div>

        <div class="faixa11">
            <div class="f11-t-s">

              <div class="f11-titulo">
                <h1>Agende uma conversa</h1>
              </div>

              <div class="f11-subtitulo">
                  Quer saber mais sobre o Warren Educação in Company e levar educação financeira para a sua
                  <br>
                  empresa? Preencha o formulário abaixo para entrarmos em contato com você.
              </div>
            </div>

            <div class="f11-formulario">
              <form>
                   
               <div class="f11-nome">
                    Nome*
                    <br>
                  <input type="name">
                </div>

                <div class="f11-email-telefone">

                  <div class="f11-email">
                      E-mail*
                      <br>
                      <input type="email">
                  </div>

                  <div class="f1-telefone">
                    Telefone* 
                    <br>
                    <input type="text">
                  </div>
                </div>

                <div class="f11-c-e-qtd">

                  <div class="f11-cargo">
                    Cargo* 
                    <br>
                    <input type="text">
                  </div>

                  <div class="f11-empresa">
                      Empresa* 
                      <br>
                      <input type="text">
                    </div>

                  <div class="f11-funcionarios">
                      Quantidade de funcionários*
                      <br>
                    <select name="Funcionarios" id="f11-funcionarios">
                    <option value="null">Selecione</option>
                    <option value="1_a_50">1 a 50</option>
                    <option value="51_a_100">51 a 100</option>
                    <option value="100_a_500">100 a 500</option>
                    <option value="500_a_1000">500 a 1000</option>
                    <option value="1000_a_5000">1000 a 5000</option>
                  </select>
                  </div>

                </div>
                    

                  <div class="f11-mensagem">
                      Deixe sua mensagem
                      <br>
                      <textarea name="mensagem" id="f11-mensagem"></textarea>
                  </div>
              </form>
            </div>

            <div class="f11-botao">
              <button> ENVIAR </button>
            </div>
        </div>

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

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

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



## CSS — "NORMAL"
```css=
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%;
  height: 100vh;
}

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

.f1-conteudo {
  padding: 10%;
  color: white;
}

.f1-titulo {
  padding: 1em;
  color: white;
  font-size: 1.5em;
  font-family: warren2;
  font-weight: bold;
  max-width: 50%;
}

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

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

.f2-titulos {
  letter-spacing: -1px;
  font-weight: 700;
  margin-right: 10%;
}

.f2-titulo h1 {
  font: 1em warren3;
}

.f2-subtitulo h1 {
  font: 2em warren2;
  letter-spacing: -1px;
}

.f2-conteudo {
  font: 1em warren1;
}

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

.f3-conteudo {
  display: flex;
  flex-direction: row;
  margin: 10%;
}

.f3-titulos {
  letter-spacing: -1px;
  line-height: -1px;
}
.f3-titulos h1 {
  font: 1em warren3;
  color: #666666;
}

.f3-titulos span {
  font: 2.5em warren2;
  color: #000000;
  padding-bottom: 1em;
}

.f3-listas {
  font: 1em warren1;
  line-height: 2.5em;
}

.f3-imagem img {
  width: 32em;
  height: 20em;
  margin-left: 50%;
}

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

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

.f4-titulos p {
  font-family: warren2;
  font-size: 0.5em;
  color: #666666;
}

.f4-titulos span {
  font-family: warren3;
  font-size: 1.7em;
}

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

.f4-paragrafo p {
  color: white;
  font: 1em warren1;
}

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

.f5-quote {
  margin-left: 15%;
  color: white;
  line-height: 1em;
  text-align: center;
  padding: 10% 20%;
  font: 1em warren1;
}

.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%;
  align-items: center;
}

.f6-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.f6-itens {
  display: flex;
  flex-direction: row;
  margin: 5%;
  padding: 2%;
}

.f6-item img {
  background-image: cover;
  background-attachment: fixed;
  width: 10em;
}

.f6-item-texto {
  display: block;
  color: white;
  font: 1.5em warren2;
  margin-top: 2em;
}

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

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

.f7-titulos h1 {
  font: 1em warren3;
  color: #666666;
}

.f7-titulos h2 {
  font: 2.5em warren2;
}

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

.f7-participante {
  display: flex;
  flex-direction: row;
}

.f7-participante img {
  width: 147px;
}

.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;
  color: white;
  background-color: #ee2e5d;
  font: warren4 1em;

  margin: 4%;
  padding: 1.5em;
  border-radius: 2em;
  border: none;

  cursor: pointer;
  text-decoration: none;
}

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

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

.f9-titulos h1 {
  font: 1em warren3;
  color: #666666;
}

.f9-titulos span {
  font: 2.7em warren3;
  color: black;
}

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

.f9-quote {
  margin: 0.5em;
  padding: 1em;
  background-color: #f5f6fa;
}

.f9-quote p {
  text-align: left;

  font: 1em warren1;
}

.f9-quote img {
  width: 2.5em;
}

.f9-quote span {
  font: 0.9em warren2;
}

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

.f10-textos {
  padding: 15%;
  color: white;
}

.f10-titulo h1 {
  font: 1em warren3;
  color: #f5f6fa;
}

.f10-titulo span {
  color: white;
}

.f10-titulo span {
  font: 2.5em warren2;
}

.f10-textos p {
  font: 1em warren1;
}

.f10-imagem img {
  margin-top: 15%;
  width: 24em;
}

.faixa11 {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  margin: 0em;
}

.f11-t-s {
  text-align: center;
  margin: 5%;
}

.f11-t-s h1 {
  font: 3.1em warren3;
  color: black;
}

.f11-t-s {
  font: 1em warren1;
  color: #666666;
  line-height: 2.3em;
}

.f11-formulario {
  display: flex;
  flex-direction: column;
  text-align: left;
  font: 1em warren1;
}

.f11-nome,
.f11-mensagem {
  display: flex;
  flex-direction: column;
  padding: 1.5em;
}

.f11-email-telefone,
.f11-c-e-qtd {
  display: flex;
  flex-direction: row;
  padding: 1.5em;
}

.f11-email-telefone input {
  width: 21em;
}

.f11-nome input {
  width: 42em;
}

.f11-mensagem textarea {
  width: 42em;
}

.f11-funcionarios select {
  width: 12em;
  font-family: warren1;
}

input {
  background-color: #f5f6fa;
  font: 1em Font1;
  width: 15em;
  height: 2em;
  padding: 1em;
  border: 1em;
  border-bottom: 0.1em;
  margin: 0.3em 0.2em;
  outline: none;
  resize: none;
}

textarea {
  background-color: #f5f6fa;
  font: 1em Font1;
  width: 100%;
  height: 100px;
  padding: 1em;
  border: 1em;
  border-bottom: 1px;
  margin: 0.3em 0.2em;
  outline: none;
  resize: none;
}

select {
  background-color: #f5f6fa;
  font: 1em Font1;
  padding: 0.5em;
  border: 1em;
  border-bottom: 1px;
  margin: 0.3em 0.2em;
  outline: none;
  resize: none;
}

.f11-botao {
  margin-bottom: 10%;
}

.f11-botao button {
  margin: 1em;
  color: white;
  padding: 1.5em;
  border-radius: 2em;
  background-color: #ee2e5d;
  cursor: pointer;
  text-decoration: none;
  font: 1.2em warren3;
  border: none;
}

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

.f12-email {
  text-align: center;
}

.f12-email p {
  font: 1em warren1;
  line-height: 1.5em;
  color: white;
}
```



## CSS — RESPONSIVO
```css=
@media (max-width: 767px) {
  body {
    margin: 0em;
    padding: 0em;
  }

  .faixa1,
  .faixa2,
  .faixa3,
  .f3-conteudo,
  .faixa4,
  .faixa5,
  .faixa6,
  .faixa7,
  .faixa8,
  .faixa9,
  .faixa10,
  .faixa11,
  .faixa12 {
    display: flex;
    flex-direction: column;
  }

  .faixa1:nth-child(1) {
    display: flex;
    flex-direction: column;
    background-image: url("../../assets/images/f1-hero-warren-educacao-in-company-mobile.png");
    background-attachment: fixed;
  }

  .f1-conteudo {
    display: flex;
    flex-direction: column;
    padding: 1em;
    margin: 1em;
  }

  .f1-titulo {
    font-size: 1em;
    padding: 1em;
  }

  .f1-botao button {
    padding: 1em;
    font-size: 1em;
  }

  .f2-titulos,
  .f2-conteudo p {
    display: flex;
    flex-direction: column;
    font: 1.2em;
  }

  .faixa3,
  .f3-conteudo,
  .f3-titulos h1,
  .f3-listas,
  .f3-imagem {
    display: flex;
    flex-direction: column;
    font: 2em;
  }

  .f3-imagem img {
    margin: 1em;
    width: 100%;
  }

  .faixa4 {
    display: flex;
    flex-direction: column;
    padding-top: 10%;
    padding-bottom: 10%;
  }

  .f4-titulos,
  .f4-paragrafo {
    margin: 1em;
    padding: 1.5em;
  }

  .f4-paragrafo p {
    font: warren1 2.5em;
  }

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

  .f5-quote img {
    width: 7em;
    padding: 1em;
    position: absolute;
  }
  .f5-quote {
    display: flex;
    flex-direction: column;
    margin: 1em;
    padding: 1em;
    font-size: 1.5em;
    align-content: center;
  }

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

  .f6-item {
    display: flex;
    flex-direction: column;
  }

  .f6-item img {
    position: absolute;
  }

  .f6-itens {
    display: flex;
    flex-direction: column;
    padding: 1em;
    margin: 1em;
    justify-content: space-evenly;
  }

  .f6-item-texto {
    padding: 1em;
    margin: 1em;
  }

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

  .f7-participantes {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .f7-participante {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1em;
    padding: 1em;
  }

  .faixa8 {
    align-content: center;
    display: flex;
    flex-direction: column;
  }

  .f8-botao {
    display: flex;
    flex-direction: column;
  }

  .f8-botao button {
    display: flex;
    flex-direction: column;
    font-size: 1em;
  }

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

  .f9-feedbacks {
    display: flex;
    flex-direction: column;
    margin: 1em;
    padding: 1.5em;
  }

  .f9-quote {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .f9-quote p {
    display: flex;
    flex-direction: column;
    font-size: 1em;
  }

  .faixa10 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .f10-textos {
    text-align: left;
  }

  .f10-textos p {
    display: flex;
    flex-direction: column;
    font-size: 1em;
  }

  .f10-imagem img {
    display: flex;
    flex-direction: column;
  }

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

  .f11-t-s {
    display: flex;
    flex-direction: column;
    font-size: 1em;
  }

  .f11-formulario,
  .f11-nome,
  .f11-email-telefone,
  .f11-c-e-qtd,
  .f11-mensagem {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    margin: 0em;
  }

  .f11-email-telefone input {
    width: 18em;
    margin: 0em;
  }

  .f11-nome input {
    width: 18em;
    margin: 0em;
  }

  .f11-mensagem textarea {
    width: 18em;
    margin: 0em;
  }

  .f11-c-e-qtd input {
    width: 18em;
    margin: 0em;
  }

  .f11-funcionarios select {
    width: 18em;
    margin: 0em;
    font-family: warren1;
  }

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

  .f12-logo {
    padding: 1em;
  }

  .f12-redes-sociais {
    padding: 1em;
  }
}
```