---
# System prepended metadata

title: 'SESSION THEREE: Linguagem de Programação:'

---

# SESSION THEREE: Linguagem de Programação:
> **Aluna:** Patricia Oliveira Paulino
> **Número:** 37
> **Turma:** Info D

> index.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">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="../comum/comum.css">
    <title>Educação financeira</title>
  </head>
  <body>


<div class="conteiner">
 
  <div class="faixa1">
  
  <div class="f1_logo">
    <img src="../../assets/images/logo">
  </div>

  <div class="f1_titulo">
    Educação
    Financeira para
    seus colaboradores
  </div>

  <div class="f1_botao">
<button> <a href=""> AGENDE UMA CONVERSA </a> </button>
  </div>

  </div>

  <div class="faixa2">

    <div class="f2_conteiner1">
    <div class="f2_titulo">
        QUEM SOMOS
    </div>

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

  <div class="f2_conteiner2">
    
      <div class="f2_text">
          Somos uma empresa do Mercado Financeiro com profissionais 
          capacitados e certificados para trazer conteúdos para todos os 
          momentos financeiros das pessoas.
        </div>

        <div class="f2_text">
            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.
          </div>

          <div class="f2_text">
              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>

  </div>

  <div class="faixa3">

    <div class="f3_conteiner1">
      <div class="f3_titulo">
        O QUE FAZEMOS
      </div>

    <div class="f3_subtitulo">
        Nossos serviços
    </div>

      <ul>
       <li class="f3_list"> Webinars Personalizados </li>

       <li class="f3_list">  Cursos Online para Plataformas Corporativas </li>
        
       <li class="f3_list"> Consultoria de Planejamento Financeiro </li>
        
       <li class="f3_list"> Programas de Educação Financeira </li>
        
       <li class="f3_list">  Campanhas Personalizadas (online e offline) </li>
      </ul>
 

    </div>

    <div class="f3_conteiner2">
      <img src="../../assets/images/grupo">
    </div>

  </div>

  <div class="faixa4">

    <div class="f4_conteiner1">
      <div class="f4_titulo">
          PARA QUEM
      </div>
      <div class="f4_subtitulo1">
        Empresas que já  compreenderam:
      </div>
      <div class="f4_subtitulo2">
        o bem-estar do colaborador é investimento
      </div>
    </div>

    <div class="f4_conteiner2">
      <div class="f4_texto">
        Entendemos que problemas financeiros podem 
        impactar profundamente na vida do colaborador.
      </div>
      <div class="f4_texto">
        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>

  <div class="faixa5">

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

  </div>

  <div class="faixa6">

  <div class="f6_conteiner1">
    <div class="f6_titulo1">
      Organização <br>
      Financeira
    </div>

    <div class="f6_titulo2">
      Investimentos
    </div>
  </div>

  <div class="f6_conteiner2">
    <div class="f6_titulo3">
        Planejamento <br>
        Financeiro
    </div>

    <div class="f6_titulo4">
      Cenário <br>
      Macroeconômico
    </div>
  </div>
  
  </div>

  <div class="faixa7">

    <div class="f7_titulo">
      QUEM FAZ PARTE DESTE MOVIMENTO
    </div>

    <div class="f7_subtitulo">
        Mais de <span style="color: #ee2e5d;"> 100 empresas <br>
        e 20 mil colaboradores </span> impactados
    </div>

  <div class="f7_empresas">

    <div class="f7_images">
      <img src="../../assets/images/hospital.webp">
    </div>

    <div class="f7_images">
      <img src="../../assets/images/vivo.webp">
    </div>

    <div class="f7_images">
      <img src="../../assets/images/piccadilly.webp">
    </div>

    <div class="f7_images">
      <img src="../../assets/images/loreal.webp">
    </div>

    <div class="f7_images">
      <img src="../../assets/images/mrv.webp">
    </div>

    <div class="f7_images">
      <img src="../../assets/images/leroy.webp">
    </div>

    <div class="f7_images">
      <img src="../../assets/images/sap.webp">
    </div>

  </div>

  </div>

  <div class="faixa8">

    <div class="f8_botao">
      <button> <a href=""> AGENDE UMA CONVERSA </a> </button>
    </div>

  </div>

  <div class="faixa9">

    <div class="f9_titulo">
      DEPOIMENTOS
    </div>

    <div class="f9_subtitulo">
      O que dizem sobre nós
    </div>

    <div class="f9_depoimentos">

     <div class="f9_depoimento1">
      
      <div class="f9_depaspas">
        <img src="../../assets/images/aspas2.webp">
      </div>

      <div class="f9_dep">
        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">
        Stephany Lopes
      </div>

      <div class="f9_empresa">
        <img src="../../assets/images/neogrid.webp">
      </div>

     </div> 

     <div class="f9_depoimento2">

        <div class="f9_depaspas">
          <img src="../../assets/images/aspas2.webp">
        </div>

        <div class="f9_dep">
          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="f9_autor">
          Emily
        </div>

        <div class="f9_empresa">
          <img src="../../assets/images/asaas.webp">
        </div>

     </div>

     <div class="f9_depoimento3">

      <div class="f9_depaspas">
        <img src="../../assets/images/aspas2.webp">
      </div>

      <div class="f9_dep">
        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="f9_autor">
        Cícero
      </div>

      <div class="f9_empresa">
        <img src="../../assets/images/contaazul.webp">
      </div>

     </div>

    </div>

  </div>

  <div class="faixa10">

    <div class="f10_textos">
     <div class="f10_titulo">
        QUEM SOMOS
     </div>

      <div class="f10_subtitulo">
       Sobre a Warren
      </div>

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

      <div class="f10_texto2">
        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. <br>
      </div>
    </div>  

    <div class="f10_img">
      <img src="../../assets/images/celular.webp">
    </div>
  
  </div>

  <div class="faixa11">

      <div class="f11_titulo">
        Agende uma conversa
      </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 class="f11_formulario">

           <div class="f11_form1">
              <label for="" > Nome* </label> <br>
              <input nome="name" required placeholder="" type="text">
            </div>
      
            <div class="f11_form2">
              <div>
              <label for=""> E-mail* </label>
              <input name="email" type="text">
              </div>
      
              <div>
              <label for=""> Telefone* </label>
              <input name="telefone" type="text">
              </div>
            </div>
      
            <div class="f11_form3">
              
              <div>
              <label for=""> Cargo* </label> 
              <input type="text">
              </div>
      
              <div>
              <label for=""> Empresa* </label> 
              <input type="text">
             </div>

             <div>
              <label for=""> Quantidade de funcionários* </label>
              <select required="required" name="quantidade">
                <option selected="selected" value=""> Selecione </option>
                <option selected="1" value=""> 1 a 50 </option>
                <option selected="2" value=""> 51 a 100 </option>
                <option selected="3" value=""> 100 a 500 </option>
                <option selected="4" value=""> 500 a 1000 </option>
                <option selected="5" value=""> 1000 a 5000 </option>
              </select>
            </div>
            </div>
      
            <div class="f11_form4">
              <label for=""> Deixe sua mensagem </label> <br>
              <textarea name="mensagem" cols="30" rows="10"></textarea>
            </div>
     
      </div>

      <div class="f11_botao">
        <button> <a href=""> ENVIAR </a> </button>
      </div>

  </div>

  <div class="faixa12">

    <div class="f12_logo">
      <img src="../../assets/images/logo2.webp">
    </div>

    <div class="f12_redes_sociais">
      <img src="../../assets/images/youtube.webp">
      <img src="../../assets/images/instagram.webp">
      <img src="../../assets/images/facebook.webp">
      <img src="../../assets/images/twitte.webp">
    </div>

   <div class="f12_textos">
    <div class="f12_texto1">
      Tem alguma dúvida? 
    </div>

    <div class="f12_texto2">
      Mande um email para
    </div>

    <div class="f12_texto3">
      meajuda@warrenbrasil.com.br
    </div>

    <div class="f12_texto4">
      CNPJ: 24.176.946/0001-71
    </div>
  </div>

  </div>

</div>

</body>
</html>
```

> index.css
```css=
.faixa1 {
  display: flex;
  flex-direction: column;

  background-image: url("../../assets/images/fundof1.png");
  background-size: cover;
  background-attachment: fixed;

  height: 100%;

  color: white;
}

.f1_logo {
  padding: 20px 30px;
}

.f1_titulo {
  font: 3em font1;
  margin: 120px 750px 0px 120px;
}

.f1_botao button {
  background-color: #ee2e5d;
  border: none;
  padding: 30px 40px;
  border-radius: 50px;
  margin: 10px 120px;
}

.f1_botao a {
  text-decoration: none;
  font: 1.1em font1;
  color: #ffffff;
}

.faixa2 {
  display: flex;
  flex-direction: row;
  padding: 100px 100px;
}

.f2_titulo {
  font: 1em font1;
  color: #666666;
  padding: 0px 0px 0px 50px;
}

.f2_subtitulo {
  font: 2.5em font1;
  color: #171717;
  padding: 0px 0px 0px 50px;
  line-height: 2.5rem;
}

.f2_conteiner2 {
  margin: 0px 75px 0px 75px;
}

.f2_text {
  font: 1em font3;
  padding: 10px 0px;
  color: #171717;
}

.faixa3 {
  display: flex;
  flex-direction: row;
  background-color: #f5f6fa;
  justify-content: center;
  padding: 100px 100px;
}

.f3_titulo {
  font: 1em font1;
  color: #666666;
}

.f3_subtitulo {
  font: 2.5em font1;
  color: #171717;
}

ul {
  padding-left: 20px;
  margin: 0 0 16px 0;
  font: 1em font3;
  color: #232d33;
}

.f3_list {
  padding: 1em 0 0 0;
}

.f3_conteiner1 {
  padding: 0px 200px 100px 0px;
}

.f3_conteiner2 img {
  max-width: 500px;
  height: auto;
}

.faixa4 {
  display: flex;
  flex-direction: row;
  background-color: #1C1B1F;
  padding: 150px 100px;
}

.f4_titulo {
  font: 1em font1;
  color: #666666;
  padding: 0px 100px 0px 50px;
}

.f4_subtitulo1 {
  font: 2.25em font1;
  color: #ee2e5d;
  padding: 0px 100px 0px 50px;
  line-height: 2.5rem;
}

.f4_subtitulo2 {
  font: 2.25em font1;
  color: #ffffff;
  padding: 0px 100px 0px 50px;
  line-height: 2.5rem;
}

.f4_conteiner2 {
  padding: 30px 150px 0px 0px;
}

.f4_texto {
  font: 1em font3;
  padding: 10px 100px;
  color: #ffffff;
}

.faixa5 {
  display: flex;
  flex-direction: column;
  padding: 140px 200px 100px 100px;
  background-color: #000000; 
  align-items: center;
}

.f5_frase {
  background-image: url('../../assets/images/aspas');
  background-repeat: no-repeat;
  margin: 0px 300px 0px 280px;
  text-align: end;

  font: 20px font3;
  color: #ffffff;
}

.f5_autor {
  font: 1em font3;
  padding: 50px 0px 0px 0px;
  color: #ffffff;
}

.faixa6 {
  display: flex;
  flex-direction: row;
  
  padding: 150px 100px;
  
  background-image: url('../../assets/images/fundo2.webp');
  background-size: cover;
  background-attachment: fixed;
  background-color: black;

  justify-content: center;
}

.f6_conteiner1 {
  display: flex;
  flex-direction: column;
  padding: 0px 130px;
}

.f6_conteiner2 {
  display: flex;
  flex-direction: column;
  padding: 0px 100px;
}

.f6_titulo1 {
font: 27.2px font1;
color: #ffffff;

background-image: url('../../assets/images/calculadora.webp');
background-repeat: no-repeat;
background-size: auto 100%;
background-position: -1em;


height: 5em;
width: 10em;
padding: 1em 3.5em;
}

.f6_titulo2 {
  font: 27.2px font1;
  color: #ffffff;

  background-image: url('../../assets/images/moeda.webp');
  background-repeat: no-repeat;
  
  background-size: auto 100%;
  background-position: -1em;
  
  
  height: 5em;
  width: 10em;
  padding: 1em 3.5em;
}

.f6_titulo3 {
  font: 27.2px font1;
  color: #ffffff;

  background-image: url('../../assets/images/anotacao.webp');
  background-repeat: no-repeat;
  
  background-size: auto 100%;
  background-position: -1em;


  height: 5em;
  width: 10em;
  padding: 1em 3.5em;
}

.f6_titulo4 {
  font: 27.2px font1;
  color: #ffffff;

  background-image: url('../../assets/images/grafico.webp');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: -1em;

  height: 5em;
  width: 10em;
  padding: 1em 3.5em;
}

.faixa7 {
  display: flex;
  flex-direction: column;
  padding: 150px 150px;

  background-color: #f5f6fa;
}

.f7_titulo {
  font: 1em font1;
  color: #666666;
}

.f7_subtitulo {
  font: 2.25em font1;
  color: black;
  line-height: 2.5rem;
}

.f7_empresas {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: center;
}

.f7_images img {
  width: 150px;
  display: block;
  margin: 80px 50px 40px 0px;

}

.faixa8 {
  padding: 50px 50px;
  background-color: #171717;

  align-items: center;
  justify-content: center;
}

.f8_botao {
  align-items: center;
  justify-content: center;
}

.f8_botao button {
  background-color: #ee2e5d;
  border: none;
  padding: 25px 30px;
  border-radius: 50px;
}

.f8_botao a {
  text-decoration: none;
  font: 1.1em font1;
  color: #ffffff;
}

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

  padding: 100px 100px 100px 100px;
}

.f9_titulo {
  font: 1em font1;
  color: #666666;

  padding: 0px 80px 0px 0px;
}

.f9_subtitulo {
  font: 2.5em font1;
  color: #171717;

  padding: 0px 80px 80px 0px;
}

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

}

.f9_depoimento1 {
  background-color: #f5f6fa;

  margin: 0px 20px 0px 0px;
  padding: 50px 100px 50px 50px;
  
  align-items: center;

  border-radius: 10px;
}

.f9_depoimento2 {
  background-color: #f5f6fa;

  margin: 0px 20px;
  padding: 50px 30px 50px 50px;

  align-items: center;

  border-radius: 10px;
}

.f9_depoimento3 {
  background-color: #f5f6fa;

  margin: 0px 20px;
  padding: 50px 50px 50px 50px;
  
  align-items: center;

  border-radius: 10px;
}

.f9_dep {
  padding: 20px 0px 0px 0px;

  font: 1em font3;
  color: #2E2D33;
}

.f9_autor {
  font: 1em font2;
  color: #2E2D33;

  padding: 10px 0px;
}

.f9_empresa img {
  width: 70px;
  height: 42px;
}

.faixa10 {
  display: flex;
  flex-direction: row;
  
  padding: 150px 100px 100px 50px;
  background-color: #ee2e5d;
}

.f10_textos {
  padding: 0px 100px;
}

.f10_titulo {
  font: 1em font1;
  color: #e3e4eb;
}

.f10_subtitulo {
  font: 2.5em font1;
  color: #ffffff;
}

.f10_texto1 {
  font: 1em font3;
  color: #ffffff;

  line-height: 20px;
  padding: 20px 0px;
}

.f10_texto2 {
  font: 1em font3;
  color: #ffffff;

  line-height: 20px;

  padding: 10px 0px;
}

.f10_img img {
  width: 383px;
  height: auto;
}

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

  padding: 100px 100px;

  align-items: center;
}

.f11_titulo {
  font: 2.5em font1;
  color: #171717;
  padding: 0px 0px 30px 0px;
}

.f11_subtitulo {
  font: 1em font3;
  color: #2E2D33;
  text-align: center;
  line-height: 28px;
}

.f11_form1 {
  font: 0.9em font3;
  color: #2E2D33;

  padding: 20px;
}

.f11_form1 input {
  width: 800px;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  color: black; 
  border-style: solid;
  border-color: #0000;
  background-color: #f5f6fa;
}

.f11_form2 {
  font: 0.9em font3;
  color: #2E2D33;

  display: flex;


  padding: 20px;
}

.f11_form2 input {
  width: 400px;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  color: black; 
  border-style: solid;
  border-color: #0000;
  background-color: #f5f6fa;
  margin: 0px 10px;
}

.f11_form3 {
  font: 0.9em font3;
  color: #2E2D33;

  display: flex;
  flex-direction: row;

  padding: 20px;
}

.f11_form3 input {
  width: 266.66px;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  color: black; 
  border-style: solid;
  border-color: #0000;
  background-color: #f5f6fa;
  margin: 0px 10px;
}

.f11_form3 select {
  width: 266.66px;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  color: black; 
  border-style: solid;
  border-color: #0000;
  background-color: #f5f6fa;
  margin: 0px 10px;
}


.f11_form4 {
  font: 0.9em font3;
  color: #2E2D33;
  padding: 20px;
}

.f11_form4 textarea {
  width: 800px;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  color: black; 
  border-style: solid;
  border-color: #0000;
  background-color: #f5f6fa;
}

.f11_botao button {
  background-color: #ee2e5d;
  border: none;
  padding: 25px 50px;
  border-radius: 50px;
  margin: 10px 120px;
}

.f11_botao a {
  text-decoration: none;
  font: 1.3em font1;
  color: #ffffff;
}

.faixa12 {
  padding: 50px;
  background-color: #2E2D33;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.f12_logo {
  width: 120px;

}

.f12_redes_sociais img {
  width: 30px;
  height: auto;
}

.f12_textos {
  text-align: center;
  font: 1em font3;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.f12_texto1 {
  padding: 0px 0px 5px 0px;
}

.f12_texto2 {
  padding: 5px 0px;
}

.f12_texto3 {
  padding: 5px 0px;
}

.f12_texto4 {
  padding: 5px 0px;
}

@media (max-width: 750px)
{

.faixa1 {
  background-image: url('../../assets/images/palestra.png');
  background-size: cover;
  background-attachment: fixed;

  height: 100%;
  width: 100%;
}

.f1_botao button {
 padding: 20px 150px;
}

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

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

.f3_conteiner2 img {
  max-width: 333px;
  height: 209px;
}

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

.faixa5 {
  
}

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

.faixa7 {
  
}

.faixa8 {
 
}

.faixa9 {
  
}

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

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

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

.f11_form4 textarea {
  width: 8'00px;
  height: 100px;
}

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

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

```