[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;
}
```
{"metaMigratedAt":"2023-06-16T00:40:19.668Z","metaMigratedFrom":"Content","title":"Site","breaks":true,"contributors":"[{\"id\":\"efb3f5bc-e3a1-447a-98ad-27d0a118ac39\",\"add\":15123,\"del\":711},{\"id\":\"0ba297e4-eafa-413a-9b17-c3ef1702e693\",\"add\":10409,\"del\":53},{\"id\":\"330b3204-61c5-4231-8ab3-e59d5589a829\",\"add\":4064,\"del\":0}]"}