# Warren | Web
**Author:** Matheus Rafael Morato Rocha
**Turma:** InfoC
**Número:** 40
[toc]
## Faixas
https://lp.warren.com.br/warren-educacao-in-company
## html
> 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="../comum/comum.css">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="index-responsivo.css">
<link rel="stylesheet" href="font.css">
<title>Educação</title>
</head>
<body>
<div class="ContainerTudo">
<div class="faixa1">
<div class="f1-container1">
<div class="f1-imagem"> <img src= "../../assets/images/warren-educacao-logo-white.png" /></div>
</div>
<div class="f1-cotainer2">
<div class="f1-texto"> <h2>Educação<br> Financeira para<br> seus colaboradores</h2></div>
<div class="f1-botao"><button>AGENDE UMA CONVERSA </button> </div>
</div>
</div>
<div class="faixa2">
<div class="f2-container1">
<div class="f2-texto">QUEM SOMOS</div>
<div class="f2-texto2">
<h2> Levamos educação financeira para os mais diversos momentos de vida do colaborador e da empresa</h2>
</div>
</div>
<div class="f2-container2">
<div class="f2-frase1">
<div class="f2-texto3">
<p>Somos uma empresa do Mercado Financeiro com profissionais capacitados e certificados para trazer conteúdos para todos os momentos financeiros das pessoas.</p>
</div>
<div class="f2-frase2">
<div class="f2-texto3">
<p>Além disso, nossa equipe conta com profissionais da área de educação, com uma didática fácil e empática, trazendo a leveza necessária para abordar esse assunto.</p>
</div>
</div>
<div class="f2-frase3">
<div class="f2-texto3">
<p>Acreditamos que a educação e a construção de um ambiente seguro para nossas finanças pessoais é o melhor investimento para o seu colaborador e consequentemente para a empresa.</p>
</div>
</div>
</div>
</div>
</div>
<div class="faixa3">
<div class="f3-container1">
<div class="f3-texto">O QUE FAZEMOS</div>
<div class="f3-texto2">Nossos serviços</div>
<div class="f5-lista">
<ul>
<li class="text">Webinars Personalizados</li>
<li class="text">Cursos Online para Plataformas Corporativas</li>
<li class="text">Consultoria de Planejamento Financeiro</li>
<li class="text">Programas de Educação Financeira</li>
<li class="text">Campanhas Personalizadas (online e offline)</li>
</ul>
</div>
</div>
<div class="f3-container2">
<div class="f3-imagem"><div class="f1-imagem">
<img src= "../../assets/images/o-que-fazemos-secao-warren-educacao-in-company.webp" />
</div>
</div>
</div>
</div>
<div class="faixa4">
<div class="f4-cabecalho">
<div class="f4-container1">
<div class="f4-text1">PARA QUEM</div>
<div class="f4-textocontainer">
<div class="f4-texto2"><font color="#f36">Empresas que já compreenderam:</font><font color="#fffff">o bem-estar do colaborador é investimento</div>
</div>
</div>
<div class="f4-container2">
<div class="f4-texto4">
Entendemos que problemas financeiros podem
impactar profundamente na vida do colaborador.
</div>
<div class="f4-texto5">
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>
<div class="faixa5">
<div class="f5-texto">
83% dos profissionais de RH afirmam que o estresse
financeiro prejudica o desempenho dos colaboradores.
</div>
<div class="f5-texto1">
Society for Human Resources Management
</div>
</div>
<div class="faixa6">
<div class="f6-container">
<div class="f6-imagem1"> <div class="f6-texto">Organização <br>Financeira</div></div>
<div class="f6-imagem2"> <div class="f6-texto">Planejamento <br>Financeiro</div></div>
</div>
<div class="f6-container">
<div class="f6-imagem3"> <div class="f6-texto">Investimentos</div></div>
<div class="f6-imagem4"> <div class="f6-texto">Cenário <br>Macroeconômico</div></div>
</div>
</div>
<div class="faixa7">
<div class="f7-container1">
<div class="f7-texto">QUEM FAZ PARTE DESTE MOVIMENTO</div>
<div class="f7-texto2">
<h2>
<font color="#1c1b1f"> Mais de </font><font color="#f36">100 empresas<br> e 20 mil colaboradores </font><font color="#1c1b1f"> impactados</font>
<h2>
</div>
</div>
<div class="imagens">
<div class="f7-container2">
<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-container3">
<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>
<div class="faixa8">
<div class="f8-botao"><button>AGENDE UMA CONVERSA</button></div>
</div>
</div>
<div class="faixa9">
<div class="f9-container1">
<div class="f9-texto">DEPOIMENTOS</div>
<div class="f9-texto1">O que dizem sobre nós</div>
</div>
<div class="f9-boxes">
<div class="f9-container2">
<div class="f9-box1">
<div class="f9-coisas">
<div class="f9-imagem"><img src= "../../assets/images/quote-warren-educacao-in-company.webp"></div>
<div class="f9-frase">
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-pessoa">Stephany Lopes</div>
<div class="f9-logo"><img src= "../../assets/images/neogrid-logo.webp"></div>
</div>
</div>
</div>
<div class="f9-container3">
<div class="f9-box1">
<div class="f9-coisas1">
<div class="f9-imagem1"><img src= "../../assets/images/quote-warren-educacao-in-company.webp"></div>
<div class="f9-frase1">
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-pessoa1">Emily</div>
<div class="f9-logo1"><img src= "../../assets/images/asaas-logo.webp"></div>
</div>
</div>
</div>
<div class="f9-container4">
<div class="f9-box1">
<div class="f9-coisas2">
<div class="f9-imagem2"><img src= "../../assets/images/quote-warren-educacao-in-company.webp"></div>
<div class="f9-frase2">
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-pessoa2">Cícero</div>
<div class="f9-logo2"><img src= "../../assets/images/conta-azul-logo.webp"></div>
</div>
</div>
</div>
</div>
</div>
<div class="faixa10">
<div class="f10-textos">
<div class="f10-texto1">QUEM SOMOS</div>
<div class="f10-texto2">Sobre a Warren</div>
<div class="f10-textos2">
<div class="f10-texto3">
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-texto4">
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-imagem"><img src="../../assets/images/device_sobre-a-warren-educacao-in-company.webp"> </div>
</div>
<div class="faixa11">
<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-conteiner2">
<div class="f11-nome">Telefone*</div>
<input type="text" class="f11-nome2">
</div>
</div>
<div class="f11-outros">
<div class="f11-conteiner3">
<div class="f11-nome">Cargo*</div>
<input type="text" class="f11-nome3">
</div>
<div class="f11-conteiner4">
<div class="f11-nome">Empresa*</div>
<input type="text" class="f11-nome3">
</div>
<div class="f11-conteiner5">
<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>
<div class="faixa12">
<div class="f12-warren"><img src="../../assets/images/Wrn_logo-Header_LP.webp"> </div>
<div class="f12-zap">
<div class="f12-you"><img src="../../assets/images/icon-youtube.webp"></div>
<div class="f12-insta"><img src="../../assets/images/icon-facebook.webp"></div>
<div class="f12-face"><img src="../../assets/images/icon-instagram.webp"></div>
<div class="f12-twitter"><img src="../../assets/images/icon-twitter.webp"></div>
</div>
<div class="f12-textos">
<div class="f12-texto1">
Tem alguma dúvida?<br>
Mande um email para<br>
meajuda@warrenbrasil.com.br<br>
</div>
<div class="f12-texto4">CNPJ: 24.176.946/0001-71</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
# css
> index.css
```css=
body {
margin: 0px 0px 0px 0px;
}
@font-face {
font-family: fonte1;
src: url('../../assets/fonts/font2.woff2');
}
@font-face {
font-family: fonte2;
src: url('../../assets/fonts/font2.woff2');
}
@font-face {
font-family: fonte3;
src: url('../../assets/fonts/font3.woff2');
}
@font-face {
font-family: fonte4;
src: url('../../assets/fonts/font4.woff');
}
.faixa1 {
background-image: url("../../assets/images/hero-warren-educacao-in-company_desktop-min.png");
background-attachment:fixed;
background-size: cover;
height: 100vh;
}
.f1-texto {
font-family: fonte4;
color:white;
font-size: 30px;
}
.f1-botao button {
background-color:#EE2E5D;
color: white;
font-size: 16px;
font-family: fonte1;
padding:25px 40px;
border-radius: 100px;
border:none;
cursor: pointer;
text-transform: uppercase;
align-items: center;
}
.f1-imagem {
margin-left: 30px;
}
.f1-container1 {
margin-bottom: 15vh;
}
.f1-texto,.f1-botao {
margin-left: 23vh;
}
.f1-imagem img {
margin-top: 20px;
}
@media (max-width: 1024px) {
.faixa1 {
background-image: url("../../assets/images/fx1-img-responsive.webp");
background-attachment:fixed;
background-size: cover;
background-position: 1000px;
height: 480px;
}
.f1-texto {
font-family: fonte4;
color:white;
font-size: 15px;
}
.f1-botao, .f1-texto,.f1-imagem {
margin: 4.3vh;
margin-top: 0px;
}
.f1-imagem img {
margin-top: 20px;
}
}
.f2-texto2 {
font-family: fonte4;
font-size: 25px;
}
.f2-texto {
font-family: fonte2;
font-size: 18px;
color: #666666;
}
.faixa2 {
flex-direction: row;
display: flex;
justify-content: center;
margin-top: 100px;
margin-left: -90px;
margin-bottom: 70px;
}
.f2-container1 {
margin-right: 100px;
}
.f2-texto2 h2 {
height:240px;
width: 371px;
color: #171717;
text-align: left;
margin: 0px 0px 0px 0px;
}
.f2-texto3 {
font-size: 18px;
}
.f2-container2 {
margin-top: 40px;
height: 350px;
width: 500px;
}
@media (max-width: 1024px) {
.faixa2 {
flex-direction: column;
display: flex;
justify-content: center;
margin: 0px 0px 0px 0px;
text-align: justify;
margin-left: 25px;
}
.f2-texto {
font-size: 18px;
margin: 0px 0px 0px 0px;
padding: 20px;
}
.f2-texto2 {
font-size: 15px;
margin: 0px 0px 0px 0px;
}
.f2-container2 {
height: 350px;
width: 250px;
text-align: left;
}
.f2-texto2 h2 {
height:240px;
width: 280px;
color: #171717;
text-align: left;
margin: 0px 0px 0px 0px;
}
.f2-container1{
margin-bottom: -130px;
}
}
.faixa3 {
background-color: #f5f6fa;
flex-direction: row;
display: flex;
padding: 15vh;
}
.f3-texto {
color:#666666;
font-size: 1.2em;
font-family: fonte1;
}
.f3-texto2 {
color: black;
font-size: 7.15vh;
font-family: fonte1;
}
.f3-imagem img {
width: 531px;
height: auto;
}
.f3-container2{
margin-left: 14.64vw;
}
ul {
color:#666666;
margin-left:-20px;
line-height: 40px;
}
li.text {
color:#2D2E33;
}
@media (max-width: 1024px) {
.faixa3 {
justify-content: center;
flex-direction: column;
display: flex;
padding: 0px 0px 0px 0px;
margin-top: 150px;
padding-top: 50px;
}
.f3-imagem img {
height: 181.16px;
width: 288px;
display: flex;
justify-content: center;
margin: 0px;
}
ul {
margin-left: 10px;
}
.f3-texto2 {
font-size: 25px;
margin-left: 35px;
}
.f3-texto {
font-size: 15px;
margin-left: 35px;
}
.f3-container2 {
margin: 0px;
}
}
.faixa4 {
background-color:#1c1b1f;
justify-content: center;
flex-direction: row;
display: flex;
padding: 80px;
margin-left: -100px;
padding: 10rem;
}
.f4-cabecalho {
flex-direction: row;
display: flex;
}
.f4-text1 {
color:#666666;
font-size: 18px;
font-family: fonte1;
}
.f4-texto2 {
color: #ee2e5d;
font-size: 40px;
font-family: fonte4;
height: 220px;
width: 540px;
line-height: 35px;
}
.f4-texto3 {
color: white;
font-size: 40px;
font-family: fonte4;
height: 247px;
width: 360px;
margin-top: -150px;
line-height: 41px;
}
.f4-texto4 {
color: white;
height: 250px;
width: 320px;
margin-top: 60px;
font-size: 19px;
}
.f4-texto5 {
color: white;
height: 143px;
width: 320px;
margin-top: -160px;
font-size: 19px;
}
.f4-container1 {
margin-right: 250px;
}
.f4-container1 {
height: 233px;
width: 390px;
}
@media (max-width: 1024px) {
.faixa4 {
justify-content: center;
flex-direction: column;
display: flex;
margin: 0px;
padding: 0px
}
.f4-text1 {
height: 30px;
width: 320px;
}
.f4-texto2 {
font-size: 20px;
line-height: 1em;
height: 100px;
width: 280px;
}
.f4-cabecalho {
margin-left: 2em;
margin-top: 3em;
margin-right: 3em;
flex-direction: column;
display: flex;
}
.f4-texto4 {
margin-right: -2em;
margin-top: -2em;
}
}
.faixa5 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #000000;
background-image: url('../../assets/images/quote_warren_educacao_company.webp');
background-repeat: no-repeat;
background-position: 38% 30%;
background-size: 5%;
color: #fff;
padding: 7em;
}
.f5-texto1 {
color: white;
margin-top: 60px;
}
.f5-texto {
font-size: 20px;
line-height: 20px;
height: 40px;
width: 360px;
color: white;
text-align: center;
}
@media (max-width: 1024px) {
.f5-texto {
height: 60px;
width: 290px;
}
.f5-texto1 {
margin-top: 50px;
height: 60px;
width: 290px;
}
.faixa5 {
background-color: #000000;
background-image: url('../../assets/images/quote_warren_educacao_company.webp');
background-repeat: no-repeat;
background-position: 20% 30%;
background-size: 15%;
}
}
.faixa6 {
background-image: url("../../assets/images/background-palestra-warren-educacao-incompany.png");
background-attachment:fixed;
background-size: cover;
background-size: 100%;
background-color: black;
flex-direction: column;
justify-content: center;
display: flex;
align-items: center;
padding: 7em;
}
.f6-texto {
text-align: left;
margin: 10% 0% 10% 20%;
}
.f6-imagem1 {
background-image: url("../../assets/images/educacao-financeira 1.png");
background-size: 50%;
background-repeat: no-repeat;
background-position: -18% 0%;
height: 150px;
width: 340px;
}
.f6-imagem2 {
background-image: url("../../assets/images/planejamento-financeiro 1.png");
background-size: 50%;
background-repeat: no-repeat;
background-position: -18% 0%;
height: 150px;
width: 340px;
}
.f6-imagem3 {
background-image: url("../../assets/images/investimento 1.png");
background-size: 50%;
background-repeat: no-repeat;
background-position: -18% 0%;
height: 150px;
width: 340px;
}
.f6-imagem4 {
background-image: url("../../assets/images/cenario-macroeconomico 1.png");
background-size: 50%;
background-repeat: no-repeat;
background-position: -18% 0%;
height: 150px;
width: 340px;
}
.f6-texto {
display: flex;
flex-direction: row;
color: #fff;
font: 1.7rem fonte4;
line-height: 1.7rem;
}
.f6-container {
justify-content: center;
display: flex;
flex-direction: row;
}
@media (max-width: 1024px) {
.f6-texto {
display: flex;
flex-direction: column;
}
.f6-container {
justify-content: center;
display: flex;
flex-direction: column;
}
.f6-imagem1,.f6-imagem2,.f6-imagem3,.f6-imagem4 {
height: 100px;
width: 260px;
margin-top: 50px;
}
.f6-texto {
display: flex;
flex-direction: row;
color: #fff;
font: 1.7rem fonte4;
line-height: 1.7rem;
}
}
.f7-imagem1 img {
height: 70.8px;
width: 176px;
}
.f7-imagem2 img{
height: 40.05px;
width: 103px;
}
.f7-imagem3 img{
height: 14.18px;
width: 147px;
}
.f7-imagem4 img{
height:19.57px;
width: 103px;
}
.f7-imagem5 img {
height:33.02px;
width: 114px;
}
.f7-imagem6 img {
height:61.95px;
width: 103px;
}
.f7-imagem7 img {
height:auto;
width: 103px;
}
.faixa1{
background-color: #f5f6fa;
}
.f7-container2,.f7-container3 {
flex-direction: row;
display: flex;
align-items: center;
justify-content: center;
}
.f7-imagem1,.f7-imagem2,.f7-imagem3,.f7-imagem4,.f7-imagem5,.f7-imagem6,.f7-imagem7 img {
margin: 2.5rem;
}
.f7-container2 {
margin-top: 6.25rem;
}
.f7-texto {
font-size: 1rem;
font-family: fonte1;
}
.f7-container1 {
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
margin-top: 8rem;
}
.f7-texto {
margin-top: 2rem;
color: #666666;
margin-bottom: -2rem;
margin-right: 55.9rem;
}
.f7-texto2 h2 {
font-size: 2.5rem;
font-family: fonte1;
height: 180px;
width: 800px;
margin-bottom: -10rem;
margin-right: 9em;
}
.f7-container3 {
margin-bottom: 5rem;
}
@media (max-width: 1024px) {
.f7-texto {
margin-bottom: 5rem;
margin-right: 0rem;
margin-top: -6rem;
}
.f7-texto2 h2 {
height: 180px;
width: 250px;
font-size: 1.5rem;
margin-bottom: -15rem;
margin-top: -5rem;
margin-right: 0em;
justify-content: center;
}
.f7-imagem1,.f7-imagem2,.f7-imagem3,.f7-imagem4,.f7-imagem5,.f7-imagem6,.f7-imagem7 img {
margin: 2rem;
}
.f7-container2,.f7-container3 {
flex-direction: column;
display: flex;
}
}
.faixa8 {
background-color: #1c1b1f;
padding-top: 3.25rem;
padding-bottom: 3.25rem;
}
.f8-botao button {
background-color:#EE2E5D;
color: white;
font-size: 16px;
font-family: fonte1;
padding:25px 40px;
border-radius: 100px;
border:none;
cursor: pointer;
text-transform: uppercase;
align-items: center;
}
.f8-botao {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1024px) {
.f8-botao button {
margin: 0px;
}
}
.f9-container1 {
margin-left: 8.1rem;
}
.f9-logo img {
width: 80px;
height: auto;
}
.f9-texto {
color: #666666;
font-family: fonte4;
font-size: 1.0rem;
margin-top: 7rem;
}
.f9-texto1 {
color: black;
font-family: fonte2;
font-size: 2.5rem;
margin-bottom: 4rem;
}
.f9-box1{
background-color: #f5f6fa;
height: 322px;
width: 272px;
padding: 2rem;
margin-top: 2rem;
border-radius: 0.5rem;
}
.f9-frase {
color: #2e2d33;
height: 320px;
width: 272px;
font-size: 1rem;
margin-top: 1rem;
}
.f9-pessoa {
color: black;
font-family: fonte2;
font-size: 1rem;
margin-top: -12rem;
}
.f9-imagem {
margin-top: 1rem;
}
.f9-coisas {
margin-left: 1rem;
}
.f9-boxes {
flex-direction: row;
display: flex;
}
.f9-logo img {
width: 80px;
height: auto;
margin-top: 1rem;
}
.f9-texto {
color: #666666;
font-family: fonte4;
font-size: 1.0rem;
margin-top: 7rem;
}
.f9-texto1 {
color: black;
font-family: fonte2;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.f9-box1{
background-color: #f5f6fa;
height: 322px;
width: 272px;
padding: 2,5rem 2.5rem 0rem 2.5rem ;
margin-left: 2rem;
margin-top: 2rem;
border-radius: 0.5rem;
}
.f9-frase1 {
color: #2e2d33;
height: 320px;
width: 272px;
font-size: 1rem;
margin-top: 1rem;
}
.f9-pessoa1 {
color: black;
font-family: fonte2;
font-size: 1rem;
margin-top: -10rem;
}
.f9-imagem1 {
margin-top: 1rem;
}
.f9-coisas1 {
margin-left: 1rem;
}
.f9-boxes1 {
flex-direction: row;
display: flex
}
.f9-logo1 img {
width: 70px;
height:auto;
margin-top: 1.5rem;
}
.f9-texto2 {
color: black;
font-family: fonte2;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.f9-frase2 {
color: #2e2d33;
height: 190px;
width: 225px;
font-size: 1rem;
margin-top: 1rem;
}
.f9-pessoa2 {
color: black;
font-family: fonte2;
font-size: 1rem;
margin-bottom: -10rem;
margin-top: -2rem;
}
.f9-imagem2 {
margin-top: 1rem;
}
.f9-coisas2 {
margin-left: 1rem;
}
.f9-boxes2 {
flex-direction: row;
display: flex;
}
.f9-logo2 img {
width: 70px;
height:auto;
margin-top: 10rem;
}
.f9-boxes {
justify-content: center;
align-items: center;
display: flex;
}
@media (max-width: 1024px) {
.f9-boxes {
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
.f9-texto1 {
color: black;
font-family: fonte2;
font-size: 2rem;
margin-bottom: 4rem;
}
.f9-container1 {
margin-left: 1rem;
margin-bottom: -1rem;
}
.f9-box1 {
margin-left: 0rem;
}
}
.faixa10 {
background-color: #ee2e5d;
flex-direction: row;
display: flex;
justify-content: space-evenly;
}
.f10-texto1 {
font-family: fonte2;
font-size: 1.2rem;
}
.f10-texto2 {
font-family: fonte2;
font-size: 3rem;
}
.f10-imagem img {
height: auto;
width: 383px;
}
.f10-textos {
flex-direction: column;
display: flex;
margin-right: 10rem;
}
.f10-textos2 {
height: 450px;
width: 510px;
margin-top: 3rem;
}
.f10-texto4 {
margin-top: 1rem;
font-size: 1.2rem;
height: 180px;
width: 495px;
font-family: fonte3;
}
.f10-texto3 {
font-size: 1.2rem;
font-family: fonte3;
}
.faixa9 {
margin-bottom: 5rem;
}
.faixa10 {
padding: 9rem 0rem 9rem 9rem;
padding-bottom: 0px;
margin-bottom: 9rem;
}
.f10-imagem {
margin-right: 10rem;
}
@media (max-width: 1024px) {
.faixa10 {
flex-direction: column;
display: flex;
justify-content: center;
padding: 0px;
align-items: center;
}
.f10-textos {
margin-right: 0rem;
}
.f10-texto1 {
font-size: 0.8rem;
}
.f10-imagem img{
height: auto;
width: 288px;
margin-top: 8rem;
margin-left: 10rem;
}
.f10-texto1 {
font-family: fonte2;
font-size: 1.2rem;
margin-top: 2rem;
}
.f10-texto2 {
font-family: fonte2;
font-size: 2rem;
}
.f10-texto3 {
font-size: 1rem;
}
.f10-texto4 {
font-size: 1rem;
height: 180px;
width: 280px;
}
.f10-texto3 {
height: 80px;
width: 280px;
margin: 0px;
}
.f10-textos2 {
height: 230;
width: 320;
margin-top: 3rem;
}
}
.faixa11 {
display: flex;
flex-direction: column;
align-items: center;
}
.f11-titulo {
font-size: 3rem;
font-family: fonte2;
color: black;
margin-top: -1em;
}
.f11-texto {
color: black;
height: 80px;
width: 650px;
text-align: center;
margin-top: 2em;
line-height: 1.7rem;
}
.f11-nome {
color: black;
}
.f11-parte1 {
display: flex;
flex-direction: column;
align-items: center;
}
input, select, textarea {
border: none;
background-color: #F5F6FA;
padding: 12px 15px;
resize: none;
}
.f11-conteiner input {
height:auto;
width: 50.5em;
}
.f11-conteiner1 input{
height:auto;
width:320px;
}
.f11-conteiner2 input {
height:auto;
width:320px;
}
.f11-conteiner2 {
margin-left: 2rem;
}
.f11-meio {
display: flex;
flex-direction: row;
}
.f11-outros {
display: flex;
flex-direction: row;
}
.f11-conteiner3 input {
height:auto;
width:208px;
}
.f11-conteiner4 input {
height:auto;
width:208px;
}
.f11-conteiner5 select {
height:auto;
width:208px;
}
.f11-conteiner5,.f11-conteiner4 {
margin-left: 1.5rem;
}
textarea {
width: 50.5em;
height: 8em;
}
.f11-botao button:hover {
transition-delay: 0.5s;
background-color: #f33c69;
}
.f11-botao button {
border: none;
border-radius: 10em;
background-color: #ee2e5d;
color: white;
font-size: 16px;
font-family: fonte1;
cursor: pointer;
text-transform: uppercase;
align-items: center;
padding: 1.5em 3em;
}
.f11-botao {
margin-top: 1em;
justify-content: center;
align-items: center;
align-content: center;
display: flex;
padding-bottom: 5em;
}
@media (max-width: 1024px) {
.f11-titulo {
font-size: 1.5rem;
margin-top: -2em;
}
.f11-texto {
color: black;
height: 168px;
width: 248px;
}
.f11-conteiner input {
height:auto;
width: 20em;
margin: 0rem;
}
.f11-conteiner1 input{
height:auto;
width: 20em;
margin: 0rem;
}
.f11-conteiner2 input {
height:auto;
width: 20em;
margin: 0rem;
}
.f11-conteiner3 input {
height:auto;
width: 20em;
margin: 0rem;
}
.f11-conteiner4 input {
height:auto;
width: 20em;
margin: 0rem;
}
.f11-selecione select {
height:auto;
width: 20em;
margin: 0rem;
}
.f11-meio {
display: flex;
flex-direction: column;
}
.f11-outros {
display: flex;
flex-direction: column;
}
.f11-conteiner2 {
margin: 0rem;
}
.f11-conteiner5,.f11-conteiner4 {
margin-left: 0em;
}
.faixa11 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
textarea {
width: 20em;
height: 8em;
}
}
.faixa12 {
background-color: #2e2d33;
align-items: center;
display: flex;
justify-content: space-evenly;
padding: 3rem;
}
.f12-zap {
flex-direction: row;
display: flex;
cursor: pointer;
text-transform: uppercase;
align-items: center;
}
.f12-warren {
cursor: pointer;
text-transform: uppercase;
align-items: center;
}
.f12-textos {
text-align: center;
}
.f12-texto1 {
line-height: 1.2rem;
}
.f12-texto4 {
font-size: 0.8rem;
margin-top: 0.5rem;
}
.f12-you,.f12-insta,.f12-face {
margin-right: 0.5em;
}
@media (max-width: 1024px) {
.faixa12 {
flex-direction: column;
display: flex;
}
.f12-textos {
margin-bottom: 2rem;
margin-top: 2rem;
}
.f12-zap {
margin-top: 2rem;
}
html {
margin-right: -4rem;
}
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
