# Session Three
Autor: Mateus Eustáquio
## HTML
````csharp=
<!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/index.css" />
<link rel="stylesshet" href="index.css" />
<title>Educação Financeira para seus colaboradores</title>
</head>
<body>
<div class="Container-site">
<div class="faixa1">
<div class="f1-logo">
<img src="../../assets/images/f1-warren-educacao-logo-white.webp" />
</div>
<div class="f1-titulo">
<h1>
Educação <br />
Financeira para <br />
seus colaboradores
</h1>
<div class="f1-botao">
<button>AGENDE UMA CONVERSA</button>
</div>
</div>
</div>
<div class="faixa2">
<div class="f2-textos">
<div class="f2-texto-esquerda">
<h1>QUEM SOMOS</h1>
<p class="p1-esquerda">
Levamos educação financeira para os mais diversos momentos de vida
do colaborador e da empresa
</p>
</div>
<div class="f2-texto-direita">
<p class="p1">
Somos uma empresa do Mercado Financeiro com profissionais
capacitados e certificados para trazer conteúdos para todos os
momentos financeiros das pessoas.
</p>
<p class="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.
</p>
<p class="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.
</p>
</div>
</div>
</div>
<div class="faixa3">
<div class="f3-textos">
<div class="f3-titulo">
<h1>O QUE FAZEMOS</h1>
<h2>Nossos serviços</h2>
</div>
<div class="f3-listas">
<ul>
<li>Webinars Personalizados</li>
<li>Cursos Online para Plataformas Corporativas</li>
<li>Consultoria de Planejamento Financeiro</li>
<li>Programas de Educação Financeira</li>
<li>Campanhas Personalizadas (online e offline)</li>
</ul>
</div>
</div>
<div class="f3-imagem">
<img
src="../../assets/images/o-que-fazemos-secao-warren-educacao-in-company.webp"
/>
</div>
</div>
<div class="faixa4">
<div class="f4-titulos">
<h1>PARA QUEM</h1>
<h2>Empresas que já compreenderam:</h2>
<h3>o bem-estar do colaborador é investimento</h3>
</div>
<div class="f4-paragrafo">
<p class="p1">
Entendemos que problemas financeiros podem impactar profundamente na
vida do colaborador.
</p>
<p class="p2">
Afinal, isso é um grande motivo de estresse e ansiedade, coisas que
não combinam com uma mente saudável, criativa e engajada.
</p>
</div>
</div>
<div class="faixa5">
<div class="f5-quote">
<img src="../../assets/images/quote_warren_educacao_company.webp" />
</div>
<div class="f5-frase">
83% dos profissionais de RH afirmam que o estresse financeiro
prejudica o desempenho dos colaboradores.
<br />
<br />
<br />
Society for Human Resources Management
</div>
</div>
<div class="faixa6">
<div class="f6-itens">
<div class="f6-item">
<img src="../../assets/images/f6-educacao-financeira.png" />
</div>
<div class="f6-item">
<img src="../../assets/images/f6-planejamento-financeiro.png" />
</div>
</div>
<div class="f6-itens">
<div class="f6-item">
<img src="../../assets/images/f6-investimento.png" />
</div>
<div class="f6-item">
<img src="../../assets/images/f6-cenario-macroeconomico.png" />
</div>
</div>
</div>
<div class="faixa7">
<div class="f7-titulos">
<h1 class="titulo">QUEM FAZ PARTE DESTE MOVIMENTO</h1>
<h2 class="subtitulo">
Mais de
<h2 class="sub-colorido">
100 empresas e 20 mil colaboradores impactados
</h2>
</h2>
</div>
<div class="f7-participantes">
<div class="f7-participante">
<img src="../../assets//images/logo-hospital-moinhos.webp" />
</div>
<div class="f7-participante">
<img src="../../assets//images/vivo_logo.webp" />
</div>
<div class="f7-participante">
<img src="../../assets//images/piccadilly-logo.webp" />
</div>
<div class="f7-participante">
<img src="../../assets//images/loreal-logo.webp" />
</div>
</div>
<div class="f7-participantes">
<div class="f7-participante">
<img src="../../assets//images/MRV-logo.webp" />
</div>
<div class="f7-participante">
<img src="../../assets//images/leroy-merlin-logo.webp" />
</div>
<div class="f7-participante">
<img src="../../assets//images/sap-logo.webp" />
</div>
</div>
</div>
<div class="faixa8">
<div class="f8-botao">
<button>AGENDE UMA CONVERSA</button>
</div>
<div class="faixa9">
<div class="f9-titulos">
<h1>DEPOIMENTOS</h1>
<h2>O QUE DIZEM SOBRE NÓS</h2>
</div>
<div class="f9-feedbacks">
<div class="f9-feedback">
<div class="f9-quote">
<img
src="../../assets/images/quote-warren-educacao-in-company.webp"
/>
</div>
<div class="p9-texto-feedback">
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-feedback">
Stephany Lopes
</div>
<div class="f9-logo-empresa">
<img src="../../assets/images/neogrid-logo.webp" />
</div>
</div>
<div class="f9-feedback">
<div class="f9-quote">
<img
src="../../assets/images/quote-warren-educacao-in-company.webp"
/>
</div>
<div class="p9-texto-feedback">
<p>
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.
</p>
</div>
<div class="f9-autor-feedback">
<h1>Emily</h1>
</div>
<div class="f9-logo-empresa">
<img src="../../assets/images/asaas-logo.webp" />
</div>
</div>
<div class="f9-feedback">
<div class="f9-quote">
<img
src="../../assets/images/quote-warren-educacao-in-company.webp"
/>
</div>
<div class="p9-texto-feedback">
<p>
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.
</p>
</div>
<div class="f9-autor-feedback">
<h1>Cícero</h1>
</div>
<div class="f9-logo-empresa">
<img src="../../assets/images/conta-azul-logo.webp" />
</div>
</div>
</div>
</div>
<div class="faixa10">
<div class="f10-textos">
<div class="f10-titulo-e-subtitulo">
<h1>QUEM SOMOS</h1>
<h2>Sobre a Warren</h2>
</div>
<div class="f10-paragrafo">
<p class="p1">
Somos uma plataforma completa de investimentos com sede em Porto
Alegre em outras 6 cidades. Temos mais de 100 mil clientes e 250
colaboradores.
</p>
<p class="p2">
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.
</p>
</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="faixa11">
<div class="conteiner-F11"></div>
<div clas="Informacao-F11">
<div class="tituloF11">Agende uma conversa</div>
<div class="descicao-F11">
Quer saber mais sobre o Warren Educação in Company e levar
educação financeira para a sua empresa? Preencha o formulário
abaixo para entrarmos em contato com você.
</div>
</div>
<div class="Informar-Nome">
<div class="ColocarNome">Nome*</div>
<input class="Nome" />
</div>
<div class="Dados-Contato">
<div class="email">
<div class="Email">E-mail*</div>
<input class="email1" />
</div>
<div class="numero">
<div class="Telefone">Telefone*</div>
<input class="Telef" />
</div>
</div>
<div class="Dados-Empresa">
<div class="Cargo">
<div class="Colocar-Cargo">Cargo*</div>
<input class="Cargo1" />
</div>
<div class="Info-Empresa">
<div class="Empresa1">Empresa*</div>
<input class="Empresa2" />
</div>
<div class="Selecionar-Quanti">
<div class="QuantidadeF">Quantidade de funcionários*</div>
<select class="Opções">
<option> Selecione </option>
<option> 1 a 50 </option>
<option> 51 a 100 </option>
<option> 100 a 500 </option>
<option> 500 a 100 </option>
<option> 1000 a 5000 </option>
</select>
</div>
</div>
<div class="Comentario">
<div class="mensagem">Deixe sua mensagem</div>
<textarea> </textarea>
</div>
<div class="botão"><button>Envia</button></div>
</div>
</div>
</div>
<div class="faixa12">
<div class="f12-logo">
<img src="../../assets/images/Wrn_logo-Header_LP.webp" />
</div>
<div class="f12-redes-sociais">
<img src="../../assets/images/icon-youtube.webp" />
<img src="../../assets/images/icon-instagram.webp" />
<img src="../../assets/images/icon-facebook.webp" />
<img src="../../assets/images/icon-twitter.webp" />
</div>
<div class="f12-email">
<p>
Tem alguma dúvida? Mande um email para meajuda@warrenbrasil.com.br
CNPJ: 24.176.946/0001-71
</p>
</div>
</div>
</div>
</body>
</html>
``````
## CSS
````csharp
@font-face {
font-family: Fonte1;
src: url(../../assets/fonts/Fonte_Bold.woff2);
}
@font-face {
font-family: Fonte2;
src: url(../../assets/fonts/Fonte_Light.woff2);
}
@font-face {
font-family: Fonte3;
src: url(../../assets/fonts/Fonte_Ultra_Light.woff2);
}
@font-face {
font-family: Fonte4;
src: url(../../assets/fonts/Montserrat-Bold.woff);
}
body {
display: flex;
margin: 0em;
padding: 0em;
}
.faixa1 {
display: flex;
flex-direction: column;
background-image: url("../../assets/images/f1-img-responsive.webp");
background-attachment: fixed;
background-size: 100%;
}
.f1-logo {
padding: 1em;
margin: 1em;
}
.f1-titulo-e-botao {
max-width: 30%;
padding: 10%;
color: white;
}
.f1-titulo {
padding: 1em;
color: white;
margin: 10%;
font-family: Fonte1;
}
.f1-botao button {
margin-top: ;
color: white;
padding: 1.5em;
border-radius: 2em;
background-color: #ee2e5d;
cursor: pointer;
text-decoration: none;
border: none;
}
.faixa2 {
background-size: 100%;
display: flex;
flex-direction: row;
padding: 10%;
}
.f2-textos {
display: flex;
flex-direction: row;
}
.f2-texto-esquerda h1 {
font-size: 1em;
}
.p1-esquerda {
max-width: 75%;
}
.f2-texto-esquerda {
font-size: 2.5em;
padding: 15px;
}
.f2-texto-direita {
max-width: 90%;
font-size: 1em;
line-height: 1.5em;
padding: 10px;
}
.faixa3 {
display: flex;
flex-direction: row;
background-color: #f5f6fa;
}
.f3-textos {
display: flex;
flex-direction: column;
max-width: 100%;
margin: 5%;
margin-left: 10%;
}
.f3-listas {
line-height: 2em;
}
.f3-imagem {
padding: 10%;
}
.f3-imagem img {
max-width: 100%;
}
.faixa4 {
display: flex;
flex-direction: row;
background-color: #1f1f1f;
}
.f4-titulos {
display: flex;
flex-direction: column;
margin: 10%;
}
.f4-paragrafo {
display: flex;
flex-direction: column;
margin: 10%;
}
.faixa5 {
background-color: #000000;
background-size: 100%;
}
.f5-quote {
padding-top: 10%;
padding-left: 40%;
}
.f5-quote img {
position: absolute;
}
.f5-frase {
padding-bottom: 5%;
padding-right: 30%;
color: white;
text-align: center;
max-width: 50%;
}
.faixa6 {
display: flex;
flex-direction: column;
background-color: #1f1f1f;
background-image: url("../../assets/images/f6-background-palestra-warren-educacao-incompany.png");
background-attachment: fixed;
background-size: 100%;
}
.f6-itens {
display: flex;
flex-direction: row;
align-items: center;
justify-items: center;
justify-content: center;
}
.f6-item img {
margin: 10%;
}
.faixa7 {
margin: 0em;
padding: 0em;
background-color: #f5f6fa;
display: flex;
flex-direction: column;
}
.f7-titulos {
padding: 10% 10% 5%;
}
.f7-participantes {
padding: 10% 10% 5%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.f7-participante {
display: flex;
flex-direction: row;
max-width: 50%;
}
.f7-participante img {
width: 10em;
}
.faixa8 {
display: flex;
flex-direction: column;
}
.f8-botao {
display: flex;
flex-direction: column;
align-items: center;
background-color: #1f1f1f;
}
.f8-botao button {
align-content: center;
margin: 4%;
color: white;
padding: 1.5em;
border-radius: 2em;
background-color: #ee2e5d;
cursor: pointer;
text-decoration: none;
border: none;
}
.faixa9 {
display: flex;
flex-direction: column;
background-size: 100%;
}
.f9-feedbacks {
margin: 10%;
padding: 10%;
justify-content: space-evenly;
display: flex;
flex-direction: row;
}
.f9-logo-empresa img {
width: 150px;
}
.faixa10 {
display: flex;
flex-direction: row;
background-size: 100%;
background-color: #ee2e5d;
margin: 0em;
padding: 0em;
}
.f10-textos {
padding: 15%;
max-width: 30%;
font-size: 1em;
}
.f10-imagem img {
margin-top: 60%;
padding: 20%;
max-width: 300px;
}
.faixa11 {
text-align: center;
margin: 15em;
background-color: #f5f6fa;
}
.conteiner-F11 {
text-align: center;
margin: 15em;
}
.tituloF11 {
text-align: center;
padding: 0em 0em 1em 0em;
justify-content: space-around;
font: 2.6em Fonte4;
}
.descicao-F11 {
display: block;
text-align: center;
padding-left: 10em;
padding-right: 10em;
padding-block-end: 2em;
letter-spacing: 1px;
color: rgb(59, 59, 59);
font: 18px Fonte1;
}
.ColocarNome {
display: flex;
padding: 0em 20em 0em 11em;
font: 15px Fonte1;
}
.Nome {
border: 1px;
padding: 0.64em 23em;
}
.Dados-Contato {
display: flex;
}
.email {
padding: 0em 20em 0em 7em;
}
.Email {
font: 12px Fonte1;
}
.email1 {
border: 0px;
padding: 1em 2em 1em 0.65em;
}
.numero {
padding: 0em 0em 2em 0em;
}
.Telefone {
padding: 0em 12em 0em 0em;
font: 13px Fonte1;
}
.Telef {
border: 0px;
padding: 1em 2em 1em 0.65em;
}
.Dados-Empresa {
display: flex;
padding-left: 1em;
justify-content: space-around;
}
.Colocar-Cargo {
padding: 0em 0em 0em 0em;
}
.Cargo1 {
border: 0px;
padding: 1em 1em 0em 0em;
}
.Empresa2 {
border: 0px;
padding: 1em 1em 0em 0em;
}
.Opções {
border: 0px;
padding: 1em 1em 0em 0em;
}
.mensagem {
padding: 1em 26em 0em 0em;
}
textarea {
border: 0px;
padding: 10em 0em 0em 30em;
}
.botão {
padding: 1em;
}
.botão button {
padding: 30px;
font: 1.5em Fonte4;
}
button {
background: #ff3d6d;
border: #ff3d6d;
color: #ffff;
border-radius: 50px;
cursor: pointer;
}
.faixa12 {
display: flex;
flex-direction: row;
background-color: #1f1f1f;
justify-content: space-evenly;
padding: 5%;
}
.f12-email {
text-align: center;
max-width: 20%;
}
````
Sign in with Wallet
Connect another wallet