---
# System prepended metadata

title: Site

---

[TOC]


# Site

# Elias
## FAIXA 2

### 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="faixa2.css" />
 
   <title>Faixa2</title>
 </head>
 <body>
   <div class="faixa-2">
     <div class="f2-conteudo">
       <div class="f2-parte1">
         <div class="f2-paragrafo-1">QUEM SOMOS</div>
         <div class="f2-sub-titulo">
           Levamos educação <br />financeira para os mais <br />
           diversos momentos de <br />
           vida do colaboradore <br />
           da empresa
         </div>
       </div>
 
       <div class="f2-parte2">
           <div class="f2-textos">
             Somos uma empresa do Mercado Financeiro com profissionais <br />
             capacitados e certificados para trazer conteúdos para todos os <br />
             momentos financeiros das pessoas.
           </div>
           <div class="f2-textos">
             Além disso, nossa equipe conta com profissionais da área de <br />
             educação, com uma didática fácil e empática, trazendo a leveza
             <br />necessária para abordar esse assunto.
           </div>
           <div class="f2-textos">
             Acreditamos que a educação e a construção de um ambiente <br />
             seguro para nossas finanças pessoais é o melhor investimento <br />
             para o seu colaborador e consequentemente para a empresa.
           </div>
       </div>
   </div>
 </body>
</html>
```

### CSS
```css=

@font-face {
 font-family: Font1;
 src: url("../../assets/fonts/font1.woff2");
}
 
@font-face {
 font-family: Font2;
 src: url("../../assets/fonts/font2.woff2");
}
 
@font-face {
 font-family: Font3;
 src: url("../../assets/fonts/font3.woff2");
}
 
@font-face {
 font-family: Font4;
 src: url("../../assets/fonts/font4.woff");
}
 
.faixa-2 {
 width: 100%;
 justify-content: space-around;
 display: flex;
}
 
.f2-conteudo {
 margin-top: 8em;
 display: flex;
 flex-direction: row;
}
 
.f2-parte2 {
 display: flex;
 flex-direction: column;
}
 
.f2-parte1 {
 flex-direction: column;
 display: flex;
 margin-right: 3rem;
}
 
.f2-paragrago-1 {
 font-weight: bold;
 color: #666666;
 font: 16px Font2;
}
 
.f2-sub-titulo {
 font-weight: 700;
 letter-spacing: -1px;
 text-align: left;
 color: #171717;
 margin-top: 0;
 font: 35px Font4;
}
 
.f2-textos {
 color: #171717;
 padding-top: 7%;
 text-align: left;
}
 
body {
 margin: 0px;
}
 
* {
 box-sizing: border-box;
}
 
a,
a:link,
a:visited {
 text-decoration: none;
}
```

## FAIXA 8

### 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="faixa8.css" />
 
   <title>Faixa8</title>
 
   <div class="faixa-8">
     <div class="botao-f8"><button>AGENDE UMA CONVERSA</button></div>
   </div>
 </head>
</html>
```

### CSS
```css=

@font-face {
 font-family: Font1;
 src: url("../../assets/fonts/font1.woff2");
}
 
@font-face {
 font-family: Font2;
 src: url("../../assets/fonts/font2.woff2");
}
 
@font-face {
 font-family: Font3;
 src: url("../../assets/fonts/font3.woff2");
}
 
@font-face {
 font-family: Font4;
 src: url("../../assets/fonts/font4.woff");
}
 
body {
 margin: 0px;
}
 
* {
 box-sizing: border-box;
}
 
a,
a:link,
a:visited {
 text-decoration: none;
}
 
.faixa-8 {
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: black;
 width: 100%;
 padding: 70px;
}
.botao-f8 button {
 color: #fff;
 font-size: 15px;
 font: Font2;
 background-color: #ee2e5d;
 border-radius: 100px;
 outline: 0;
 border: 0;
 transition: 0.2s cubic-bezier(0.55, 0, 0.1, 1);
 min-height: 69px;
 height: 69px;
 line-height: 69px;
 padding: 0 40px;
 cursor: pointer;
 text-align: center;
}
 
.botao-f8 {
 align-items: center;
 line-height: 0;
 font-weight: 400;
}

```




# Gilson
## FAIXA 3

### 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="faixa3.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>FAIXA 3</title>
  </head>

  <body>
    <div class="faixa3">
      <div class="f3-conteudo">
        <div class="f3-box">
          <div class="f3-titulo">O QUE FAZEMOS</div>
          <div class="f3-subtitulo">Nossos serviços</div>
          <ul class="f3-topicos">
            <li class="f3-topico">Webinars Personalizados</li>
            <li class="f3-topico">
              Cursos Online para Plataformas Corporativas
            </li>
            <li class="f3-topico">Consultoria de Planejamento Financeiro</li>
            <li class="f3-topico">Programas de Educação Financeira</li>
            <li class="f3-topico">
              Campanhas Personalizadas (online e offline)
            </li>
          </ul>
        </div>

        <div class="f3-imagem">
          <img src="../../assets/images/F3-IMAGEM.webp" />
        </div>
      </div>
    </div>
  </body>
</html>
```

### CSS 
```css=
body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

.faixa3 {
  display: flex;
  flex-direction: row;
  justify-content: center;

  background-color: #f5f6fa;
}

.f3-conteudo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  width: 70%;

  padding-top: 10%;
  padding-bottom: 10%;
}

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

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

.f3-subtitulo {
  font-size: 40px;
  color: #171717;
  font-family: Font4;

  margin-bottom: 10px;
}

.f3-topicos {
  font-size: 16px;
  color: #2e2d33;
  font-family: Font1;

  padding-left: 20px;
}

.f3-topico {
  height: 40px;
}

.f3-imagem img {
  width: 520px;
  height: auto;
}
```

## FAIXA 12

### 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="faixa12.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>FAIXA 12</title>
  </head>

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

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

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

### CSS 
```css=
body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

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

  background-color: #2e2d33;
}

.f12-cabecalho {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;

  width: 100%;

  padding-top: 5%;
  padding-bottom: 4%;
}

.f12-imagem {
  padding-top: 10px;
}

.f12-imagem img {
  width: 120px;
  height: auto;
}

.f12-imagens {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  width: 160px;

  padding-top: 10px;
}

.f12-imagem1 img {
  width: 30px;
  height: auto;
}

.f12-infos {
  display: flex;
  flex-direction: column;
}

.f12-info {
  font-size: 16px;
  color: #ffffff;
  font-family: Font1;

  text-align: center;
  line-height: 30px;
}

.f12-info1 {
  font-size: 12px;
  color: #ffffff;
  font-family: Font1;

  text-align: center;
  line-height: 30px;
}
```


# Matheus
## FAIXA 4

### 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="../home/faixa4.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>faixa4</title>
  </head>
  <body>
    <div class="faixa4">
      <div class="f4-parte1">
        <div class="f4-texto">PARA QUEM</div>
        <div class="f4-texto2">
          <span
            >Empresas que já<br />
            compreenderam: <br
          /></span>

          o bem-estar do<br />
          colaborador é<br />
          investimento
        </div>
      </div>
      <div class="f4-parte2">
        <div class="f4-texto3">
          Entendemos que problemas financeiros podem<br />
          impactar profundamente na vida do colaborador.
        </div>
        <div class="f4-texto4">
          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>
  </body>
</html>

```

### CSS
```css=
.faixa4 {
  background-color: #1c1b1f;
  flex-direction: row;
  display: flex;
  padding: 8rem;
  margin-top: 4em;
}

span {
  color: #ee2e5d;
}

.f4-texto {
  color: #666666;
  font-size: 0.8em;
  font-family: Font4;
}

.f4-texto2 {
  color: white;
  font-size: 3rem;
  font-family: Font2;
  line-height: 0.9em;
  margin-right: 5em;
}

.f4-texto3 {
  color: white;
  font-size: 1.1em;
}
.f4-parte2 {
  margin-top: 1em;
}
.f4-texto4 {
  color: white;
  font-size: 1.1em;
  margin-top: 1rem;
}
```

## FAIXA 11

### 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="../../pages/home/faixa11.css" />
    <link rel="stylesheet" href="../../pages/comum/comum.css" />
    <title>faixa11</title>
  </head>
  <body>
</html>


      <div class="faixa11">
        <div class="f11-textos">
            <div class="f11-titulo">Agende uma conversa</div>
            <div class="f11-texto">
              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-botoes">
          <div class="f11-container1">
            <div class="f11-nome">Nome*</div>
            <input type="text" class="f11-nome1">
          </div>

          <div class="f11-parte2">
            <div class="f11-container2">
              <div class="f11-nome">E-mail*</div>
              <input type="text" class="f11-nome1">
            </div>
            <div class="f11-container20">
              <div class="f11-nome">Telefone*</div>
              <input type="text" class="f11-nome1">
            </div>
          </div>

          <div class="f11-parte3">
            <div class="f11-container3">
                <div class="f11-nome">Cargo*</div>
                <input type="text" class="f11-nome1">
            </div>
            <div class="f11-container30">
                <div class="f11-nome">Empresa*</div>
                <input type="text" class="f11-nome1">
            </div>
            <div class="f11-container300">
                <div class="f11-nome">Quantidade de funcionários*</div>
                <select>
                  <option values="0">Selecione</option>
                  <option values="1">0 e 50</option>
                  <option values="2">51 e 100</option>
                  <option values="3">100 e 500</option>
                  <option values="4">500 e 1000</option> 
                  <option values="5">1000 e 5000</option> 
                </select>  
            </div>
         
          </div>

          <div class="f11-parte4">
            <div class="f11-d">Deixe sua mensagem</div>
            <textarea class="f11-deixaaq"></textarea>
          </div> 
          <div class="f11-botaooo">
             <button>ENVIAR</button>
          </div>
        </div>
      </div>
  


</div>
</body>

```
### CSS

```css=
.f11-container1 input {
  height: auto;
  width: 50.5em;
}
input,
select,
textarea {
  border: none;
  background-color: #f5f6fa;
  padding: 12px 15px;
  resize: none;
}

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

.f11-parte3 {
  flex-direction: row;
  display: flex;
}
.f11-container20 input {
  height: auto;
  width: 320px;
}

.f11-container20 {
  margin-left: 2em;
}

.f11-container2 input {
  height: auto;
  width: 320px;
}

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

.faixa11 {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5rem;
}

.f11-container30 {
  margin-left: 1.5em;
}

.f11-container300 {
  margin-left: 1.5em;
}

.f11-container300 select {
  height: auto;
  width: 208px;
}

.f11-container30 input {
  height: auto;
  width: 208px;
}

.f11-container3 input {
  height: auto;
  width: 208px;
}

textarea {
  height: 8em;
  width: 50.5em;
}

.f11-d {
  color: black;
}

button {
  border: none;
  border-radius: 10em;
  background-color: #ee2e5d;
  color: white;
  font-size: 16px;
  font-family: Font2;
  padding: 1.5em 3em;
}

.f11-botaooo {
  margin-top: 1em;
  justify-content: center;
  align-items: center;
  display: flex;
}

.f11-titulo {
  font-size: 3rem;
  font-family: Font2;
  margin-bottom: 0.5em;
}

.f11-texto {
  text-align: center;
  color: black;
  height: 80px;
  width: 650px;
  text-align: center;
  line-height: 1.7rem;
}

.f11-textos {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

select {
  appearance: none;
}

```


# Guilherme
## FAIXA 6

### 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="faixa6.css">
    <link rel="stylesheet" href="../comum/comum.css">
    <title>Static Template</title>
  </head>
  <body>
      <div class="faixa6">

          <div class= "f6_container1">
            <div class= "f6_titulo1">
              organizção <br>
              Financeira
            </div>

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

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

            <div class= "f6_titulo4">
              Cénario <br>
              Macroeconomico
            </div>
          </div>



            




  </body>
</html>

```

### CSS
```css=
.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_container1 {
  display: flex;
  flex-direction: column;
  padding: 0px 130px;
}

.f6_container2 {
  display: flex;
  flex-direction: colum;
  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;
}

```
## FAIXA 9

### 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="faixa9.css">
    <link rel="stylesheet" href="../comum/comum.css">
    <title>faixa9</title>
  </head>
  <body>
    <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="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">
            Sthephany 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="depaspas">
            <img src="../../assets/images/asaas.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">
            Cicero
          </div>
          <div class="f9_empresa">
            <img src="../../assets/images/contaazul.webp">
          </div>
        </div>
      </div>

      </body>

</html>
```

### CSS
```css=
@font-face {
  font-family: Font1;
  src: url("../../assets/fonts/font1.woff2");
}

@font-face {
  font-family: Font2;
  src: url("../../assets/fonts/font2.woff2");
}

@font-face {
  font-family: Font3;
  src: url("../../assets/fonts/font3.woff2");
}

@font-face {
  font-family: Font4;
  src: url("../../assets/fonts/font4.woff");
}

body {
  margin: 0px;
}

.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;
}
```

# Kayky

## FAIXA 5

### 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="faixa5.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>Document</title>
  </head>
  
  <body>
    <div class="faixa-5">
    
      <div class="f5-box">
        <div class="f5-texto">
          83% dos profissionais de RH afirmam que o estresse<br />
          financeiro prejudica o desempenho dos colaboradores.
        </div>
        <div class="f5-rodape">Society for Human Resources Management</div>
      </div>
      
    </div>
    
  </body>
</html>
```

### CSS
```css=
body {
  margin: 0px;
}

.faixa-5 {
  display: flex;
  flex-direction: row;
  background-color: black;
  justify-content: center;
  padding-top: 7%;
  padding-bottom: 6%;
}

.f5-box {
  background-repeat: no-repeat;
  background-image: url(../../assets/images/quote_warren_educacao_company.webp);
  text-align: center;
  background-position: -2px 9px;
}

.f5-texto {
  padding-top: 5%;
  color: white;
  font: 20px Font1;
  margin-bottom: 27px;
}

.f5-rodape {
  color: white;
  font: 16px Font1;
}
```
## FAIXA 7

### 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="faixa7.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>Document</title>
  </head>

  <body>
    <div class="faixa7">
      <div class="f7-conteudo">
        <div class="f7-titulo">QUEM FAZ PARTE DESTE MOVIMENTO</div>
        <div class="f7-subtitulo">
          Mais de<span class="f7-subtitulo1">
            100 empresas <br />
            e 20 mil colaboradores</span
          >
          impactados
        </div>
      </div>

      <div class="f7-box-imagens">
        <div class="f7-box-imagens1">
          <div class="f7-imagem1">
            <img src="../../assets/images/logo-hospital-moinhos.webp" />
          </div>
          <div class="f7-imagem2">
            <img src="../../assets/images/vivo_logo.webp" />
          </div>
          <div class="f7-imagem3">
            <img src="../../assets/images/piccadilly-logo.webp" />
          </div>
          <div class="f7-imagem4">
            <img src="../../assets/images/loreal-logo.webp" />
          </div>
        </div>

        <div class="f7-box-imagens2">
          <div class="f7-imagem5">
            <img src="../../assets/images/MRV-logo.webp" />
          </div>
          <div class="f7-imagem6">
            <img src="../../assets/images/leroy-merlin-logo.webp" />
          </div>
          <div class="f7-imagem7">
            <img src="../../assets/images/sap-logo.webp" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
```

### CSS
```css=
body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

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

  background-color: #f5f6fa;

  padding: 10% 14% 5% 14%;
}

.f7-conteudo {
  display: flex;
  flex-direction: column;
}

.f7-titulo {
  font-family: Font2;
  color: #666666;
}

.f7-subtitulo {
  color: #171717;
  font: 40px Font4;
}

.f7-subtitulo1 {
  color: #ee2e5d;
  font: 40px Font4;
}

.f7-box-imagens {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  padding-top: 15%;
  padding-bottom: 10%;

  height: 500px;
}

.f7-box-imagens1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  width: 90%;
}

.f7-box-imagens2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  width: 45%;
}

.f7-imagem2 img {
  width: 103px;
  height: auto;
}

.f7-imagem3 img {
  width: 147px;
  height: auto;
}

.f7-imagem4 img {
  width: 103px;
  height: auto;
}

.f7-imagem5 img {
  width: 125px;
  height: auto;
}

.f7-imagem6 img {
  width: 103px;
  height: auto;
}

.f7-imagem7 img {
  width: 103px;
  height: auto;
}
```


# João

## FAIXA 1

### 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="faixa1.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>faixa 1</title>
  </head>
  <body>
    <div class="faixa1">
      <div class="cabecalho">
        <img src="../../assets/images/warren-educacao-logo-white.webp" />
      </div>
      <div class="conteudo">
        <div class="texto-f1">
          Educação <br />
          Financeiro para <br />
          seus colaboradores
        </div>
        <div class="botao-f1"><button>AGENDE UMA CONVERSA</button></div>
      </div>
    </div>
  </body>
</html>

```

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

body {
  margin: 0px;
}

.cabecalho {
  margin-left: 0.9em;
}

.faixa1 {
  background-image: url("../../assets/images/hero-warren-educacao-in-company_desktop-min.png");
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  flex-direction: column;
  color: white;
  padding: 1em;
}

.conteudo {
  display: flex;
  flex-direction: column;
  font-size: 4.2em;
  margin: 0em 0.6em;
  padding: 100px;
}

.texto-f1 {
  font-family: Font4;
  font-size: 0.7em;
  display: flex;
  line-height: 1em;
  margin-top: 1em;
}

.botao-f1 button {
  flex-direction: column;
  border-radius: 4em;
  background-color: #ee2e5d;
  padding: 2em 4em;
  color: white;
  border: 0px;
  font-family: Font4;
  display: flex;
  font-size: 0.2em;
}

.botao-f1 {
  margin-top: 1em;
}

```

## FAIXA 10

### 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="../home/faixa10.css" />
    <link rel="stylesheet" href="../comum/comum.css" />
    <title>faixa 10</title>
  </head>
  <body>
    <div class="faixa10">
      <div class="textos-f10">
        <div class="titulo-f10">QUEM SOMOS</div>
        <div class="titulo2-f10">Sobre a Warren</div>
        <div class="conteudo-f10">
          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="conteudo2-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 <br />
          melhores produtos, com muita tecnologia, mas com <br />
          atendimento humano e competente.
        </div>
      </div>
      <div class="imagem-do-celular">
        <img
          src="../../assets/images/device_sobre-a-warren-educacao-in-company.webp"
        />
      </div>
    </div>
  </body>
</html>
```

### CSS
```css=
body {
  margin: 0px;
}

.faixa10 {
  background-color: #ee2e5d;
  flex-direction: row;
  display: flex;
  padding-top: 10%;
  padding-bottom: 5%;
  justify-content: center;
}

.textos-f10 {
  color: white;
  font-family: Font1;
  font-weight: 500;
  width: 440px;
}

.conteudo-f10 {
  margin-top: 1.8em;
  margin-bottom: 1.5em;
}

.titulo-f10 {
  color: #e3e4eb;
  font-family: Font2;
}

.titulo2-f10 {
  font: 2.5em Font4;
}

.imagem-do-celular img {
  width: 23.9375em;
}
.imagem-do-celular {
  margin-left: 115px;
  margin-right: 100px;
}
```