---
# System prepended metadata

title: LINGUAGENS PROGAMENTAIS

---

**NOME** Joâo Gabriel Camargo Ramos 
**TURMA** INFO C
**NUMERO** 23

# LINGUAGENS PROGAMENTAIS

```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"/>
    <link rel = "stylesheet" href = "responsivo.css"/>
    <title>WARREN</title>
  </head>
  <body>
    <div class = "geral">
        <div class="primeira-faixa">
          <div class="f1-parte1">
            <img src = "../../assets/images/F1-LOGO1.webp">
          </div>
          <div class="f1-parte2">
            <div class="f1-titulo">Educação <br> Financeira para <br> seus colaboradores</div>
            <div class="f1-botao">
              <button>Agende uma conversa</button>
            </div>
          </div>
        </div>
        <div class="segunda-faixa">
          <div class="f2-parte1">
            <div class="f2-quems">QUEM SOMOS</div>
            <div class="f2-titulo">Levamos educação financeira para os mais diversos momentos de vida do colaborador <br> e da empresa</div>
          </div>
          <div class="f2-parte2">
            <div class="f2-p1">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-p2">Além disso, nossa equipe conta com profissionais da área de educação, com uma didática fácil e empática, trazendo a leveza necessária para abordar esse assunto.</div>
            <div class="f2-p3">Acreditamos que a educação e a construção de um ambiente seguro para nossas finanças pessoais é o melhor investimento para o seu colaborador e consequentemente para a empresa.</div>
          </div>
        </div>
        <div class="terceira-faixa">
          <div class="f3-parte1">
            <div class="f3-subt">O QUE FAZEMOS</div>
            <div class="f3-titulo">Nossos serviços</div>
            <div class="f3-lista">
              <li class="f3-l1">Webinars Personalizados</li>
              <li class="f3-l1">Cursos Online para Plataformas Corporativas</li>
              <li class="f3-l1">Consultoria de Planejamento Financeiro</li>
              <li class="f3-l1">Programas de Educação Financeira</li>
              <li class="f3-l1">Campanhas Personalizadas (online e offline)</li>
            </div>
          </div>
          <div class="f3-parte2">
            <img src = "../../assets/images/f3-image.webp">
          </div>
        </div>
        <div class="quarta-faixa">
          <div class = "f4-parte1">
            <div class="f4-subt">PARA QUEM</div>
            <span class = f4-titulo>
              <span class = "f4-titulo1">Empresas que já compreenderam:</span> 
                o bem-estar do colaborador é investimento
              </span>
          </div>
          <div class="f4-parte2">
            <div class="f4-p1">Entendemos que problemas financeiros podem impactar profundamente na vida do colaborador.</div>
            <div class="f4-p2">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="quinta-faixa">
          <div class="f5-textos">
            <div class="f5-porcentagem">83% dos profissionais de RH afirmam que o estresse financeiro prejudica o desempenho dos colaboradores.</div>
            <div class="f5-nomezin">Society for Human Resources Management</div>
          </div>
        </div>
        <div class="sexta-faixa">
          <div class="f6-coluna">
            <div class="f6-faix1">
              <div class="f6-b1"> Organização<br>Financeira </div>
            </div>
            <div class="f6-faix2">
              <div class="f6-b2"> Planejamento<br>Financeiro </div>
            </div>
          </div>
          <div class="f6-coluna">
            <div class="f6-faix3"><div class="f6-b3">Investimentos</div></div>
            <div class="f6-faix4"><div class="f6-b4"> Cenário<br>Macroeconômico </div></div>
          </div>
        </div>
        <div class="setima-faixa">
          <div class="f7-parte1">
            <div class="f7-subt">QUEM FAZ PARTE DESTE MOVIMENTO</div>
            <span class = "f7-titulo">
              <span>Mais de</span>
              <span class = "f7-titulo1"> 100 empresas<br>e 20 mil </span>
              <span class = "f7-titulo1">colaboradores</span>
              <span>impactados</span>
            </span>
          </div>
          <div class="f7-parte2">
            <div class="f7-coluna">
              <div class="f7-item1">
                <img src = "../../assets/images/f7-img1.png">
              </div>
              <div class="f7-item2">
                <img src = "../../assets/images/f7-img2.png">
              </div>
              <div class="f7-item">
                <img src = "../../assets/images/f7-img3.png">
              </div>
              <div class="f7-item">
                <img src = "../../assets/images/f7-img4.png">
              </div>
            </div>
            <div class="f7-coluna2">
              <div class="f7-item3">
                <img src = "../../assets/images/f7-img5.png">
              </div>
              <div class="f7-item4">
                <img src = "../../assets/images/f7-img6.png">
              </div>
              <div class="f7-item4">
                <img src = "../../assets/images/f7-img7.png">
              </div>
            </div>
          </div>
        </div>
        <div class="oitava-faixa">
          <div class="f8-botao">
            <button>AGENDE UMA CONVERSA</button>
          </div>
        </div>
        <div class="nona-faixa">
          <div class="f9-parte1">
            <div class="f9-subt">DEPOIMENTOS</div>
            <div class="f9-titulo">O que dizem sobre nós</div>
          </div>
          <div class="f9-parte2">
            <div class="f9-conteiner">
              <div class="f9-co">
                <div class="f9-imagem">
                  <img src = "../../assets/images/f9-aspas.png">
                </div>
                <div class="f9-texto">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-nome">Stephany Lopes</div>
                <div class="f9-logo">
                  <img src = "../../assets/images/f9-c1.png">
                </div>
            </div>
            </div>
            <div class="f9-conteiner">
              <div class="f9-co">
                <div class="f9-imagem">
                  <img src = "../../assets/images/f9-aspas.png">
                </div>
                <div class="f9-texto">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-nome">Emily</div>
                <div class="f9-logo">
                    <img src = "../../assets/images/f9-c2.png">
                </div>
              </div>
            </div>
            <div class="f9-conteiner">
              <div class="f9-co">
                <div class="f9-imagem">
                  <img src = "../../assets/images/f9-aspas.png">
                </div>
                <div class="f9-texto">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-nome">Cícero</div>
                <div class="f9-logo">
                    <img src = "../../assets/images/f9-c3.png">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="decima-faixa">
          <div class="f10-ger">
              <div class="f10-parte1">
                <div class="f10-subt">QUEM SOMOS</div>
                <div class="f10-titulo">Sobre a Warren</div>
                <div class="f10-paragrafo">
                  <div class="f10-par1">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="f10-par2">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>
              <div class="f10-parte2">
                <img src = "../../assets/images/f10-celular.png">
              </div>
          </div>
        </div>
        <div class="decima-primeira-faixa">
          <div class="f11-parte1">
            <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 empresa? Preencha o formulário abaixo para entrarmos em contato com você.</div>
          </div>
          <div class="f11-parte2">
            <div class="f11-conteiner">
              <div class="f11-nome">Nome*</div>
              <input type="text" class="f11-nome1">
            </div>
            <div class="f11-meio">
              <div class="f11-conteiner1">
                <div class="f11-nome">E-mail*</div>
                <input type="text" class="f11-nome4">
              </div>
              <div class="f11-conteiner">
                <div class="f11-nome">Telefone*</div>
                <input type="text" class="f11-nome2">
              </div>
            </div>
            <div class="f11-outros">
              <div class="f11-conteiner1">
                <div class="f11-nome">Cargo*</div>
                <input type="text" class="f11-nome3">
              </div>
              <div class="f11-conteiner1">
                <div class="f11-nome">Empresa*</div>
                <input type="text" class="f11-nome3">
              </div>
              <div class="f11-conteiner">
                <div class="f11-nome">Quantidade de funcionários*</div>
                <div class = "f11-selecione">
                  <select>
                    <option value="0">Selecione</option>
                    <option value="1">0 a 50</option>
                    <option value="2">51 a 100</option>
                    <option value="3">100 a 500</option>
                    <option value="4">500 a 1000</option>
                    <option value="5">1000 a 5000</option>
                  </select>
    
                </div>
              </div>
            </div>
            <div class="f11-mensagem">
              <div class="f11-d">Deixe sua mensagem</div>
              <textarea class="f11-deixeaqui"></textarea>
            </div>
            <div class="f11-botao">
              <button>Enviar</button>
            </div>
          </div>
        </div>
        <div class="decima-segunda-faixa">
          <div class="f12-parte1">
            <img src = "../../assets/images/f12-logo.png">
          </div>
          <div class="f12-parte2">
            <div class="f12-logo">
              <img src = "../../assets/images/f12-icon-youtube.png">
            </div>
            <div class="f12-logo">
              <img src = "../../assets/images/f12-icon-instagram.png">
            </div>
            <div class="f12-logo">
              <img src = "../../assets/images/f12-icon-facebook.png">
            </div>
            <div class="f12-logo">
              <img src = "../../assets/images/f12-icon-twitter.png">
            </div>
          </div>
          <div class="f12-parte3">
            <div class="f12-duvida">Tem alguma dúvida?</div>
            <div class="f12-mande-email">Mande um email para</div>
            <div class="f12-email">meajuda@warrenbrasil.com.br</div>
            <div class="f12-cnpj">CNPJ: 24.176.946/0001-71</div>
          </div>
        </div>
    </div>
  </body>
</html>
```

## CSS

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

body {
  margin: 0px;
}

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

.primeira-faixa {
  display: flex;
  flex-direction: column;

  background-image: url("../../assets/images/F1-P1.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;

  height: 100vh;
  
}

.f1-parte1 img {
  width: 15%;
  cursor: pointer;
}

.f1-parte2 {
  display: flex;
  flex-direction: column;

  margin-left: 100px;
}

.f1-titulo {
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -1px;
  color: #fff;
  font-family: F4;

  margin-top: 120px;
  margin-bottom: 30px;
}

.f1-botao button {
  border: none;
  border-radius: 2em;
  background-color: #ee2e5d;
  color: #fff;

  font: 16px F1;
  text-transform: uppercase;
  cursor: pointer;

  padding: 1.5em 2.5em;
}

.f1-botao {
  margin-bottom: 12.5em;
}

.segunda-faixa {
  display: flex;
  flex-direction: row;

  padding: 6.5em 6.5em;
}

.f2-parte1 {
  display: flex;
  flex-direction: column;

  padding-right: 4em;
  padding-left: 1em;
}

.f2-quems {
  font: 16px F1;
  color: #666666;
}

.f2-titulo {
  color: #171717;
  font: 2.5em F4;
  line-height: 2.5rem;

  width: 500px;
}

.f2-parte2 {
  font: 16px F3;
  width: 450px;
  color: #171717;

  padding-top: 2em;
}

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

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

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


  padding: 10% 0 10% 0;
  background-color: #F5F6FA;
}

.f3-parte1 {
  display: flex;
  flex-direction: column;

  padding-left: 10%;
}

.f3-subt {
  color: #666666;
  font: 16px F1;
}

.f3-titulo {
  color: #171717;
  font: 2.5em F4;
}

.f3-lista {
  font: 16px F3;
  color: #2E2D33;
}

.f3-l1 {
  margin-bottom: 20px;
}

.f3-parte2 img{
  width: 80%;
}

.f3-parte2 {
  margin-left: 15em;
}

.quarta-faixa {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;

  background-color: #1c1b1f;

  padding: 8em;
}

.f4-parte1 {
  width: 340px;
  margin-right: 12em;
}

.f4-subt {
  color: #666666;
  font: 16px F1;
}

.f4-titulo1 {
  color: #ee2e5d;
}

.f4-titulo {
  color: #fff;
  font: 2.5em F4;
}

.f4-parte2 {
  width: 330px;
  color: #fff;
  font: 16px F3;
  line-height: 20px;

  margin-top: 2em;
}

.f4-p1 {
  margin-bottom: 20px;
}

.quinta-faixa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: #000000;
  background-image: url('../../assets/images/f4-aspas.webp');
  background-repeat: no-repeat;
  background-position: 34.3% 30%;
  background-size: 5%;
  color: #fff;

  padding: 7em;
}

.f5-textos {
  font: 20px F3;
  width: 460px;
  text-align: center;
}

.f5-porcentagem {
  margin-bottom: 3em;
}

.f5-nomezin {
  font-size: 16px;
}

.sexta-faixa {
  display: flex;
  flex-direction: column;
  align-items: center;

  background-color: #000000;
  background-image: url('../../assets/images/f6-fundo.webp');
  background-size: 100%;
  background-attachment: fixed;

  padding: 7em;
}

.f6-coluna {
  display: flex;
  flex-direction: row;
  color: #fff;

  font: 1.7rem F1;
  line-height: 1.7rem;

}

.f6-faix1 {
  background-image: url('../../assets/images/f6-c1.webp');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: -18% 0%;

  height: 150px;
  width: 340px;

}

.f6-b1 {
  text-align: left;
  margin: 10% 0% 10% 20%;
}

.f6-faix2 {
  background-image: url('../../assets/images/f6-c2.png');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: -18% 0%;

  height: 150px;
  width: 340px;

}

.f6-b2 {
  text-align: left;
  margin: 10% 0% 10% 20%;
}

.f6-faix3 {
  background-image: url('../../assets/images/f6-c3.webp');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: -18% 0%;

  height: 150px;
  width: 340px;

}

.f6-b3 {
  text-align: left;
  margin: 10% 0% 10% 20%;
}

.f6-faix4 {
  background-image: url('../../assets/images/f6-c4.webp');
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: -18% 0%;

  height: 150px;
  width: 340px;

}

.f6-b4 {
  text-align: left;
  margin: 10% 0% 10% 20%;
}

.setima-faixa {
  display: flex;
  flex-direction: column;

  padding: 7em;

  background-color: #F5F6FA;
}

.f7-subt {
  font: 16px F1;
  color: #666666;
}

.f7-titulo {
  font: 2.5rem F4;
  line-height: 2.5rem;
}

.f7-titulo1 {
  color: #ee2e5d;
}

.f7-parte2 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-self: center;

  margin-top: 10em;
}

.f7-coluna {
  display: flex;
  flex-direction: row;

  margin-bottom: 8em;
}

.f7-coluna2 {
  display: flex;
  flex-direction: row;
  align-self: center;

  margin-bottom: 2em;
}

.f7-item img {
  width: 150px;
}

.f7-item1 img {
  width: 160px;
}

.f7-item2 img {
  width: 100px;
}

.f7-item3 img {
  width: 120px;
}

.f7-item4 img {
  width: 100px;
}

.f7-item, .f7-item2 {
  margin-left: 9em;
}

.f7-item4 {
  margin-left: 4em;
}

.oitava-faixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #1c1b1f;

  padding: 3em;
}

.f8-botao button {
  border: none;
  border-radius: 2em;
  background-color: #ee2e5d;
  color: #fff;

  font: 16px F1;
  cursor: pointer;

  padding: 1.5em 2.5em;
}

.nona-faixa {
  display: flex;
  flex-direction: column;

  padding: 7em;
}

.f9-parte1 {
  margin-bottom: 5em;
}

.f9-subt {
  font: 16px F1;
  color: #666666;
}

.f9-titulo {
  font: 2.5rem F4;
  line-height: 2.5rem;

  color: #171717;
}

.f9-parte2 {
  display: flex;
  flex-direction: row;

  margin-bottom: 2em;
}

.f9-conteiner {
  background-color: #F5F6FA;

  margin-left: 2em;
  border-radius: 0.8em;
}

.f9-co {
  width: 340px;
  padding: 2em;
}

.f9-imagem img {
  width: 15%;
}

.f9-imagem {
  margin-bottom: 1em;
}

.f9-texto {
  font: 16px F3;
  line-height: 20px;
  color: #2E2D33;

  margin-bottom: 1em;
}

.f9-nome {
  font: 16px F1;

  margin-bottom: 1em;
}

.f9-logo img {
  width: 25%;
}

.decima-faixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-color: #EE2E5D;

  padding: 8em 0em 0em 8em;
}

.f10-ger {
  display: flex;
  flex-direction: row;
}

.f10-parte1 {
  margin-right: 8em;
  margin-left: 2em;
}

.f10-subt {
  font: 16px F1;
  color: #e3e4eb;
}

.f10-titulo {
  font: 2.5rem F4;
  color: #fff;

  margin-bottom: 0.8em;
}

.f10-paragrafo {
  width: 30em;
  font: 16px F3;
  color: #fff;
}

.f10-par1 {
  margin-bottom: 1em;
}

.f10-parte2 img {
  width: 60%;
}

.decima-primeira-faixa {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 7em;
}

.f11-parte1 {
  text-align: center;

  width: 670px;
}

.f11-titulo {
  font: 2.5rem F4;
  color: #171717;
  line-height: 2.5rem;

  margin-bottom: 1.5em;
}

.f11-texto {
  line-height: 28px;
  color: #2e2d33;
  font: 16px F3;

  margin-bottom: 1em;
}

.f11-parte2 {
  display: flex;
  flex-direction: column;

  align-items: center;
}

.f11-meio,.f11-outros {
  display: flex;
  flex-direction: row;
}

.f11-conteiner1 {
  margin-right: 30px;
}

.f11-conteiner, .f11-conteiner1, .f11-mensagem {
  font: 14px F3;
  color: #2E2D33;

  margin-bottom: 10px;
}

input, select, textarea {
  border: none;
  background-color: #F5F6FA;
  padding: 12px 15px;
  resize: none;
}

.f11-nome1 {
  width: 50em;
}

.f11-nome4 {
  width: 25.5em;
}

.f11-nome2 {
  width: 22em;
}

.f11-nome3, select {
  width: 14em;
}

select {
  appearance: none;
  cursor: pointer;

  font: 16px F3;
  color: #2E2D33;
}

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

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

.f11-botao button {
  border: none;
  border-radius: 2.5em;
  background-color: #ee2e5d;
  color: #fff;

  font: 16px F1;
  cursor: pointer;
  text-transform: uppercase;

  padding: 1.5em 3em;
}

.decima-segunda-faixa {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: #2e2d33;

  padding: 4em;
}

.f12-parte1 img {
  width: 60%;
}

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

.f12-logo img {
  width: 35%;
}

.f12-logo {
  margin: 0px -25px 0px -25px;
}

.f12-parte3 {
  display: flex;
  flex-direction: column;

  font: 16px F3;
  color: #fff;
  text-align: center;
}

.f12-cnpj {font-size: 13px;}

.f12-duvida, .f12-mande-email, .f12-email {
  margin-bottom: 0.5em;
}
```

## CSS 

```css=
@media (max-width: 1024px) {
  .primeira-faixa, .f1-parte1, .f1-parte2 {
    padding: 0;
    margin: 0;
  }

  .primeira-faixa {
    background-image: url("../../assets/images/f1-amigo.webp");
    background-size: 144%;
    background-position: 92% 0%;
    width: 100%;
    height: 480px;

    padding: 1em 2.5em;
  }
  
  .f1-parte1 img {
    width: 60%;
  }

  .f1-titulo {
    font-size: 30px;
    line-height: normal;

    margin-top: 100px;
  }

  .f1-botao button {
    padding: 1.5em 2em;
  }

  .segunda-faixa, .f2-parte1, .f2-parte2 {
    margin: 0px;
    padding: 0px;

    flex-direction: column;
  }

  .segunda-faixa {
    padding: 2em;
  }

  .f2-titulo {
    font-size: 1.5em;
    line-height: normal;

    width: 340px;

    margin-bottom: 2em;
  }

  .f2-parte2 {
    width: 330px;
  }

  .terceira-faixa, .f3-parte1, .f3-parte2 {
    margin: 0px;
    padding: 0px;

    flex-direction: column;
  }

  .terceira-faixa {
    padding: 2em;
  }

  .f3-parte1 {
    margin-bottom: 1.2em;
  }

  .f3-titulo {
    font-size: 1.5em;
    line-height: normal;

    margin-bottom: 1em;
  }

  .f3-parte2 img {
    width: 100%;
  }

  .quarta-faixa, .f4-parte, .f4-parte2 {
    margin: 0px;
    padding: 0px;

    flex-direction: column;
  }

  .quarta-faixa {
    padding: 2.2em 2.5em;
  }

  .f4-titulo {
    font-size: 1.5em;
    line-height: normal;
  }

  .f4-parte2 {
    margin-top: 2em;
  }

  .quinta-faixa, .f5-textos {
    margin: 0px;
    padding: 0px;

    width: 100%;
  }

  .quinta-faixa {
    padding: 3em;

    background-size: 15%;
    background-position: 10% 17%;
  }

  .f5-porcentagem {
    margin-bottom: 2em;
  }

  .sexta-faixa, .f6-coluna {
    flex-direction: column;
    margin: 0px;
    padding: 0em;
  }

  .setima-faixa, .f7-parte1, .f7-parte2, .f7-coluna, .f7-coluna2, .f7-item, .f7-item1, .f7-item2, .f7-item3, .f7-item4 {
    flex-direction: column;

    align-self: center;

    margin: 0px;
    padding: 0em;
  }

  .setima-faixa {
    padding: 2em;
  }

  .f7-titulo {
    font-size: 24px;
    line-height: normal;
  }

  .f7-item, .f7-item1, .f7-item2, .f7-item3, .f7-item4 {
    margin-bottom: 2em;
    margin-top: 5em;
  }

  .oitava-faixa {
    padding: 1em;
    flex-direction: column;
  }

  .nona-faixa, .f9-parte1, .f9-parte2, .f9-conteiner {
    margin: 0px;
    padding: 0px;

   flex-direction: column;
  }

  .nona-faixa {
   padding: 2em;
  }

  .f9-parte1 {
    margin-bottom: 2em;
  }

  .f9-titulo {
    font-size: 24px;
  }

  .f9-conteiner {
    margin-bottom: 1em;
  }

  .decima-faixa, .f10-parte1, .f10-parte2, .f10-ger {
    margin: 0;
    padding: 0;

    flex-direction: column;
  }

  .decima-faixa {
    padding: 2em;
  }

  .f10-paragrafo{
    width: 20.5em;

    margin-bottom: 3em;
  }

  .f10-parte2 img {
    width: 100%;
  }

  .decima-primeira-faixa, .f11-parte1, .f11-parte2, .f11-meio, .f11-outros, .f11-conteiner, .f11-conteiner1, .f11-mensagem {
    flex-direction: column;
    margin: 0px;
    padding: 0px;
  }

  .decima-primeira-faixa {padding: 2em;}

  .f11-titulo {
    font-size: 1.5em;
    line-height: normal;
  }

    .f11-texto {
      text-align: center;
      font-size: 16px;
      line-height: 28px;
  }

  .f11-parte1 {
    width: 100%;
  }

  .f11-nome1, .f11-nome2, .f11-nome3, .f11-nome4, textarea {
    width: 20em;
    margin: 0;
    margin-bottom: 10px;
  }

  select {
    width: 16.5em;
    margin-bottom: 10px;
  }

  .decima-segunda-faixa, .f12-parte1, .f12-parte3 {
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .decima-segunda-faixa {
    padding: 2em;
  }

  .f12-parte1 {
    margin-left: 4em;
    margin-bottom: 3em;
  }

 .f12-parte2 {
    margin-bottom: 2em;
    margin-left: 3em;
  }

}
```

```css=
@font-face {
  font-family: F1;
  src: url("../../assets/fonts/fonte12.woff2");
}
@font-face {
  font-family: F2;
  src: url("../../assets/fonts/fonte22.woff2");
}
@font-face {
  font-family: F3;
  src: url("../../assets/fonts/fonte32.woff2");
}
@font-face {
  font-family: F4;
  src: url("../../assets/fonts/Montserrat-Bold.woff");
}