---
# System prepended metadata

title: Session three | Ling.Prog | 2° bimestre

---

# Session three | Ling.Prog | 2° bimestre
**Nome** Kevin Ribeiro de Andrade
**Número** 27
**Turma** INFO A

## HTML
```htmlembedded=
CODGIO 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="index.css" >
    <title>Static Template</title>
  </head>
  <body>
    <div class = "container">
        <div class="f1">
             <div class="cabecalho-1">
               <div  class="logo">
                <img src=https://lp.warren.com.br/hs-fs/hubfs/warren-educacao-logo-white.png?width=200&amp;name=warren-educacao-logo-white.png/>               </div>
             </div>
           
             
           <div class="conteudo-1">
             <div class="titulo-f1">
                <h1>Educação
                  <br>               
                   Financeira para
                   <br>
                seus colaboradores
                <br>
                </h1>
             </div>
             <div class="botao-f1"> <a href="https://tableless.com.br/unidade-pixels-em-rem/"> Agende uma conversa </a>
             </div>
            </div>
             </div>
        
             <!-- faixa-2 -->
                       
        <div class="faixa-2">
         
            <div class="conteudo-f2">
              <div class="titulo-f2">QUEM SOMOS</div>
              <div class="texto1-f2">Levamos educação financeira para os mais diversos momentos de vida do colaborador e da empresa
              </div>
            </div>            
            
            <div class="texto2-f2">
              <div class="t2-f2"> uma empresa do Mercado Financeiro com profissionais capacitados e certificados para trazer conteúdos para todos os momentos financeiros das pessoas.</div>
              <div class="t2-f2">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="t2-f2">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>
          
          <!-- faixa-3 -->
          

          <div class="faixa-3">
            <div class="conteudo-1-f3">
              <div class="titulo-conteudo-f3">O QUE FAZEMOS</div>
              <div class="subtitulo-conteudo-f3">Nossos serviços</div>
            
             
              <div class="listas-faixa-3">
              <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="conteudo-2-f3"><img src="../../assets/images/galera.jpg"></div>
          </div>

             <!-- faixa-4 -->
          <div class="faixa-4">
    <div class="total-text">
              <div class="text-pt1">
              <div class="text-pequeno-f4">
                PARA QUEM
            </div>
       <div class="texto-rosa"> 
          <h1> Empresas que já compreenderam:<br><span> o bem-estar do<br> colaborador é <br> </span></h1>
           </div>
      
          </div>
    </div>
          <div class="text-small">
            <div class="text1-f4">
                
          
Entendemos que problemas financeiros podem impactar profundamente na vida do colaborador.<P>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> 
      
        
        


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

            <!-- faixa-6 -->

      <div class="faixa-6">  
        <div class="itens">
         <div class="item-cima">
          <div class="item-1"> <p> Organização <br> Financeira </p> </div>
             <div class="item-2"> <p> investimentos </p> </div>
         </div>

         <div class="item-baixo">
            <div class="item-3"> <p> Planejamento <br> Financeiro </p> </div>
            <div class="item-4"> <p> Cenário <br> Macroeconômico </p> </div>
         </div>
      </div>

      </div>      
 

    <!-- faixa-7 -->

    <div class="faixa-7">
      <div class="parte-1">
        <div class="text-1"> QUEM FAZ PARTE DESTE MOVIMENTO </div>
        <div class="text-2">  Mais de <font color="#ee2e5d"> &nbsp; 100 empresas </font> </div>
        <div class="text-3"> <font color="#ee2e5d"> e 20 mil colaboradores </font> &nbsp; impactados 
        </div>
      
            

      </div>

      <div class="parte-2">
        <div class="marcas">
          <div class="marcas-de-cima">
             <div class="marca"> <img src="../../assets/images/moinha de vento - 1.JPG"></div>
             <div class="marca"> <img src="../../assets/images/vivo - 2.JPG"></div>
             <div class="marca"> <img src="../../assets/images/piccadilly - 3.JPG"></div>
             <div class="marca"> <img src="../../assets/images/loreal - 4.JPG"></div>
          </div>
          <div class="marcas-de-baixo">
             <div class="marca"> <img src="../../assets/images/MRV - 5.JPG"></div>
             <div class="marca"> <img src="../../assets/images/leroy merlin - 6.JPG"></div>
             <div class="marca"> <img src="../../assets/images/sap - 7.JPG"></div>
          </div>
           

        </div>
      </div>
    </div> 



    <!-- faixa-8 -->


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



<!-- faixa-9 -->


    <div class="faixa-9">
        <div class="textos-f9">
        <div class="titulo-f9">DEPOIMENTOS</div>
        <div class="subtitulo-f9">O que dizem sobre nós</div>
    </div>
      <div class="setdebox-f9">
        
        <div class="box-f9">
          <div><img src="https://lp.warren.com.br/hs-fs/hubfs/quote-warren-educacao-in-company.png?width=40&name=quote-warren-educacao-in-company.png"></div>
          <div class="texto-box-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="autor-box-f9">Stephany Lopes</div>
          <div class="img-final-box-f9"><img src="https://lp.warren.com.br/hs-fs/hubfs/neogrid-logo.png?noresize&width=70&name=neogrid-logo.png"></div>  
        </div>
        
        <div class="box-f9">
          <div><img src="https://lp.warren.com.br/hs-fs/hubfs/quote-warren-educacao-in-company.png?width=40&name=quote-warren-educacao-in-company.png"></div>        
          <div class="texto-box-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="autor-box-f9">Emily</div>
          <div class="img-final-box-f9"><img src="https://lp.warren.com.br/hs-fs/hubfs/asaas-logo.png?noresize&width=70&name=asaas-logo.png"></div>
        </div>

        <div class="box-f9">
          <div class="img-box-f9"><img src="https://lp.warren.com.br/hs-fs/hubfs/quote-warren-educacao-in-company.png?width=40&name=quote-warren-educacao-in-company.png"></div>
          <div class="texto-box-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="autor-box-f9">Cícero</div>
          <div class="img-final-box-f9"><img class="img-final-box-f9" src="https://lp.warren.com.br/hs-fs/hubfs/conta-azul-logo.png?noresize&width=70&name=conta-azul-logo.png"></div>
        </div>
        </div>
        </div>

        <!-- faixa-10 -->
        <div class = "Faixa-10">
          <div class = "Text-1">
            <div class = "text-pequeno">
            QUEM SOMOS
            </div>
              <div class = "title">
              <h1>Sobre a Warren</h1>
              </div>
  
        <div class = "Conteudo">
        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>
         </div>

         <div class="Conteudo-2-f10">  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="img">
       <img SRC = "https://lp.warren.com.br/hs-fs/hubfs/device_sobre-a-warren-educacao-in-company.png?noresize&width=383&name=device_sobre-a-warren-educacao-in-company.png "/>
          </div>
         </div>
        
        
        
        
        <div class="faixa-11">
          <div class="textos-f11">
            <div class="titulo-f11">Agende uma conversa</div>
            <div class="texto-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="conteudo-f11">
            <form>
              <label for="nome">Nome*</label> <br>
              <input type="text" id="nome">

              <div class="email-telefone">
                <label for="email">Email*</label> <br>
                <input type="text" id="email">
                
                <label for="telefone">Telefone*</label> <br>
                <input type="text" id="telefone">                
              </div>
              
              <div class="cargo-empresa-selecione">
                <label for="cargo">Cargo*</label> <br>
                <input type="text" id="cargo">

                <label for="empresa">Empresa*</label> <br>
                <input type="text" id="empresa">

                <label for="selecione">Quantidade de funcionários*</label>
                <select name="selecione" id="selecione">
                  <option value="selecione">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>
              
              <label for="mensagem">Deixe sua mensagem</label> <br>
              <textarea name="mensagem" id="mensagem" cols="80" rows="7"></textarea>
            </form>

            <div class="botao-f11"> <a href="https://tableless.com.br/unidade-pixels-em-rem/"> ENVIAR </a>
            </div>


          </div>
        </div>

        <div class = "faixa-12">
            <div class = "rodape">
               <div class = "logo"><img src = "https://lp.warren.com.br/hs-fs/hubfs/Wrn_logo-Header_LP.png?width=180&name=Wrn_logo-Header_LP.png"/>
                 </div>
                    <div class = "menu">
                       <div class = "menu-item"><img src = "https://lp.warren.com.br/hs-fs/hubfs/icon-youtube.png?width=45&name=icon-youtube.png"/></div>
                       <div class = "menu-item"><img src = "https://lp.warren.com.br/hs-fs/hubfs/icon-facebook.png?width=45&name=icon-facebook.png"/></div>
                       <div class = "menu-item"><img src = "https://lp.warren.com.br/hs-fs/hubfs/icon-twitter.png?width=45&name=icon-twitter.png"/></div>
                       </div>
                       <div class = "texto">
       Tem alguma dúvida? <br> <br>
       Mande um email para <br> <br>
       meajuda@warrenbrasil.com.br <br> <br>
       <p> CNPJ: 24.176.946/0001-71</p> <br> 
       </div>
       </div>
       </div>




   </div>

</body>
</html>
```

## CSS
```css=
* {
  box-sizing: border-box;
}

body {
  margin: 0px;
}

.container {
  display: flex;
  flex-direction: column;
  margin: none;
}

.f1 {
  display: flex;
  flex-direction: column;
  height: 50em;
  background-image: url("../../assets/images/imagem-2.JPG");
  background-size: 100%;
  background-attachment: fixed;
  height: 650px;
}

.logo {
  margin-top: 25px;
  margin-left: 25px;
}

.conteudo-1 {
  margin-top: 85px;
  margin-left: 145px;
  color: white;
}
.titulo-f1 {
  font-family: "Montserrat-bold", Helvetica, Sans-serif !important;
  font-size: 1.5em;
  color: white;
  margin-top: 50px;
}

.botao-f1 a {
  height: 95px;
  width: 180px;
  background-color: #ee2e5d;
  border-radius: 100px;
  color: white;
  text-decoration: none;
  font-family: "Source Sans Pro", sans-serif;
  padding: 25px 40px;
  line-height: 69px;
  height: 69px;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .container,
  .f1,
  .cabecalho-1,
  .conteudo-1 {
    justify-content: center;
    align-items: center;
  }
}

/* FAIXA-2 */

.faixa-2 {
  display: flex;
  flex-direction: row;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-left: 30px;
  margin-right: 30px;

  justify-content: center;
}

.titulo-f2 {
  font-size: 1em;
  font-family: "Source Sans Pro", Roboto, Sans-serif;
  font-weight: bold;
  color: #666666;
  line-height: 28px;
}

.texto1-f2 {
  font-family: "Montserrat-bold", Helvetica, Sans-serif !important;
  font-size: 2.5rem;
  font-weight: 700;
  max-width: 450px;
  line-height: 35px;
}

.texto2-f2 {
  font-family: 'Source Sans Pro',Roboto,Sans-serif;
  max-width: 400px;
  margin-left: 100px;
}

.t2-f2 {
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .faixa-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .texto1-f2 {
    margin-bottom: 50px;
  }
  .texto2-f2 {
    margin-left: 0px;
    justify-content: center;
  }
}
/* FAIXA-3 */

.faixa-3 {
  display: flex;
  flex-direction: row;
  background-color: #f5f6fa;
  padding-bottom: 100px;
  padding-top: 100px;
  justify-content: space-between;
}

@media (max-width: 1024px) {
  .faixa-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .conteudo-2-f3 img {
    margin-left: 50px;
  }
}
.conteudo-1-f3 {
  margin: 50px 0px 50px 100px;
}

.titulo-conteudo-f3 {
  font-family: "Source Sans Pro", Roboto, Sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #666666;
  margin-left: 20px;
}

.subtitulo-conteudo-f3 {
  font-family: "Montserrat-bold", Helvetica, Sans-serif !important;
  font-weight: 700;
  font-size: 40px;
  margin-left: 20px;
}

.listas-faixa-3 {
  font-family: "Source Sans Pro", Roboto, Sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 40px;
  color: #2e2d33;
  margin-right: 100px;
}

.conteudo-2-f3 img {
  width: 80%;
}

/* faixa-4*/

.faixa-4 {
  display: flex;
  flex-direction: row;
  background-color: #1c1b1f;

}

.text-pt1 {
  display: flex;
  flex-direction: column;
  margin: 130px 70px;

}
.text-pequeno-f4 {
  color: #666666;
  font-family: "Source Sans Pro", Helvetica, Arial, Sans-Serif, sans-serif;
  font-weight: bold;
}
.texto-rosa {
  font-family: "Montserrat-bold", Helvetica, Sans-serif;
  color: #ee2e5d;
  font-size: 20px;

}

.texto-rosa span {
  font-family: "Montserrat-bold", Helvetica, Sans-serif;
  color: #fff;
  margin-top: 0px;
}

.text-small {
  font-family: 'Source Sans Pro',Roboto,Sans-serif;
  color: #fff;

  max-width: 380px;
  margin-top: 200px;
  margin-right: 260px;
}

@media (max-width: 1024px) {
  .faixa4,
  .total-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
  }
  .total-text {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }
}

/* faixa-5 */

.faixa-5 {
  background-color: #000;
  color: #f5f6fa;
  padding: 130px 50px 80px 50px;
  align-items: center;
  justify-content: center;
}

.conteudo-f5 {
  align-items: center;
  justify-content: center;
}

.texto-f5 {
  font-family: "Source Sans Pro", Roboto, Sans-serif;
  font-size: 1.2em;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  text-align: center;
  margin-left: 300px;
  margin-bottom: 40px;
}

.subtexto-f5 {
  margin-left: 465px;
  font-family: 'Source Sans Pro',Roboto,Sans-serif;
}

@media (max-width: 0px) {
  .texto-f5,
  .subtexto-f5 {
    margin: 0px 0px 0px 0px;
  }

  .texto-f5 {
    margin-bottom: 30px !important;
  }
}

/* faixa-6 */

  .faixa-6{
   display: flex;
   flex-direction: column;
   padding-top: 100px;
   padding-bottom: 150px;
   background-color: black;
   background-image: url("https://f.hubspotusercontent20.net/hubfs/5032423/background-palestra-warren-educacao-incompany.png");
   background-size: 100%;
   background-attachment: fixed;
  }

  .itens{
   display: flex;
   flex-direction: row;
   margin-left: 400px;
  }

  .item-1, .item-2, .item-3, .item-4{
    color: white;
    margin-right: 100px;
    font-family: "Source Sans Pro", Helvetica, Arial, Sans-Serif, sans-serif;
    font-weight: bold;
    font-size: 26px;
    padding: 50px 50px 0px 0px;
  }


  .item-1{
  background-image: url("https://f.hubspotusercontent20.net/hubfs/5032423/educacao-financeira%201.png");
  background-size: 70%;
  background-repeat: no-repeat;
  margin-bottom: 10px;
  }

  .item-2{
    background-image: url("https://f.hubspotusercontent20.net/hubfs/5032423/investimento%201.png");
    background-size: 70%;
    background-repeat: no-repeat;
  }


  .item-3{
    background-image: url("https://f.hubspotusercontent20.net/hubfs/5032423/planejamento-financeiro%201.png");
    background-size: 70%;
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  .item-4{
    background-image: url("https://f.hubspotusercontent20.net/hubfs/5032423/cenario-macroeconomico%201.png");
    background-size: 70%;
    background-repeat: no-repeat;
  }



/* faixa-7 */



.faixa-7 {
  display: flex;
  flex-direction: column;
  padding: 140px 0px 160px 80px;
  background-color: #f5f6fa;
}

@media (max-width: 1024px) {
  .faixa-7{
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }
}

.parte-1 {
  padding-bottom: 160px;
}

.text-1 {
  font-family: "Source Sans Pro", Roboto, Sans-serif;
  font-weight: bold;
  color: #666666;
}

.text-3, .text-2 {
  display: flex;
  flex-direction: row;
  font-family: 'Montserrat-bold',Helvetica,Sans-serif;
  font-size: 40px;
  font-weight: 700;
}


.marcas {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 100px;
}

.marca {
  margin-right: 120px;
}

.marcas-de-cima {
  display: flex;
  flex-direction: row;
}

.marcas-de-baixo {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  margin-left: 100px;
}

/* faixa-8 */

.faixa-8 {
  background-color: #1c1b1f;
  padding: 60px 50px;
  justify-content: center;
}

.botao-f8 {
  padding: 24px 40px;
  border-radius: 35px;
  margin-left: 400px;
  justify-content: center;
  background-color: #ee2e5d;
  border: none;
  color: white;
  font-family: "Source Sans Pro", sans-serif !important;
  font-weight: 700;
  font-size: 1em;
}

@media (max-width: 1024px) {
  .botao-f8,
  .botao,
  .faixa-8 {
    justify-content: center;
    align-items: center;
  }
  .botao {
    padding-left: 0px !important;
  }
}


/* faixa-9 */

.faixa-9{
  display: flex;
  flex-direction: column;
  margin-top: 100px;
}

.titulo-f9{
  font-weight: bold;
  color: #666666;
  font-size: 16px;
  margin-bottom: 5px;  
}

.subtitulo-f9{
font-family: 'Montserrat-bold',Helvetica,Sans-serif;
font-size: 40px;  
font-weight: 700;
}

.setdebox-f9 {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 40px;
margin-bottom: 100px;
}

.box-f9{
max-width: 350px;
background-color: #F5F5F5;
padding: 20px 20px;
margin: 20px 15px;
border-radius: 10px;
}

.texto-box-f9{
  font-size: 16px;
  font-weight: 400;
  font-family: 'Source Sans Pro',Roboto,Sans-serif;
  margin-top: 25px;
  margin-bottom: 20px;
}

.autor-box-f9{
  font-size: 16px;
  font-weight: bold;
  font-family: 'Source Sans Pro',Roboto,Sans-serif;
  padding-bottom: 10px;
}

.img-final-box-f9 img{
width: 80px;
height: 50px;
}

.textos-f9{
margin-left: 120px;
}

@media (max-width: 1024px){
.faixa-9, .setdebox-f9{
  display: flex;
  flex-direction: column;
}
.faixa-9{
  align-items: center;
  justify-content: center;
text-align: center;
}
}

/* faixa-10*/



.Faixa-10 {
  display: flex;
  flex-direction: row;
  background-color: #ed2e5d;
  padding: 50px 0px 50px 0px;
}


.text-1 {
  display: flex;
  flex-direction: column;
  margin-left: 40px;
}

.text-pequeno {
  font-size: 17px;
  color: #e3e4eb;;
  font-family: 'Source Sans Pro',Roboto,Sans-serif;
  margin-top: 50px;
  margin-left: 40px;
}

.title {
  color: white;
  margin-left: 40px;
}

.Conteudo {
  font-size: 16px;
  color: white;
  font-family: 'Source Sans Pro',Roboto,Sans-serif;
  font-weight: 400;
  margin-left: 40px;
  max-width: 700px;
}

.Conteudo-2-f10{
  color: white;
  font-family: 'Source Sans Pro',Roboto,Sans-serif;
  font-weight: 400;
  margin-left: 40px;
  max-width: 1000px;
}

.img img{
  width: 60%;
  margin-top: 90px;
  margin-left: 250px;
}

@media (max-width: 1024px) {
  .faixa-10, .text-1, .img {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    }
    .text-pequeno {
      margin-right: 40px;
    }
    .title {
      margin-right: 30px;
    }
    .Conteudo {
      margin-right: 40px;
    }
    .img img {
      margin-left: 40px;
      }
}



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

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

.conteudo-f11{
margin-left: 300px;

}



.titulo-f11{
  font-family: 'Montserrat-bold',Helvetica,Sans-serif !important;
  font-size: 2.5rem;
  line-height: 2.5rem;  
  font-weight: 700;
  margin-bottom: 30px;
  font-weight: 700;  
}

.texto-f11{
  font-size: 16px;
    font-weight: 400;
    font-family: 'Source Sans Pro',Roboto,Sans-serif;
    letter-spacing: 0px;
    line-height: 28px;
    color: #2e2d33;
    padding: 20px;
    margin-left: 280px;
    width: 750px;
  text-align: center !important;
}

.botao-f11 a{
  background-color: #ee2e5d;
  border-radius: 100px;
  color: white;
  text-decoration: none;
  font-family: "Source Sans Pro", sans-serif;
  padding: 25px 40px 30px 40px;
  line-height: 69px;
  height: 69px;
  font-weight: 700;
  margin-left: 250px;
}

.faixa-12 {
  display: flex;
  flex-direction: row;
  
  background-color: #2e2d33;

  justify-content: center;
  }
  
  .rodape {
    display: flex;
    flex-direction: row;
    justify-content: center;
    
    margin-top: 4em;
  }
  .logo {
    margin-left: 1em;
    justify-content: space-around;
  }
  .menu {
    display: flex;
    flex-direction:row;
    margin-right: 200px;
    margin-left:  200px;
  }

.menu-item {
  justify-content: center;
  align-items: center;
  margin-left: 30px;
  
}
.menu-item img {
  margin-top: 30px;
  width: 30px;
  height: 30px;
  
}
.texto {
  color: white;
  font-family: 'Source Sans Pro',Roboto,Sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  padding-bottom: 30px; 
}

.faixa-12 p{
font-size: 11px;
}

@media (max-width: 1024px) {
  .faixa-12, .rodape, .logo, .menu, .texto {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    }
    .menu {
      flex-direction: row;
      margin-top: 1.5em;
      margin-bottom: 1.5em;
      }
}
```