# SESSION DE LING PROG
## HTML
```htmlembedded=
<!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" />
<title>Educação Financeira pra seus colaboradores</title>
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="../comun/index.css" />
</head>
<body>
<div class="container-site">
<div class="faixa1">
<div class="f1-logo"><img src="../../assets/imagens/logof1" /></div>
<div class="f1-texto">
Educação<br />Financeira para<br />seus colaboradores
</div>
<div class="f1-botao"><a href="#">AGENDE UMA CONVERSA</a></div>
</div>
<div class="faixa2">
<div class="f2-titulo">QUEM SOMOS</div>
<div class="f2-textos">
<div class="texto1">
<p>
Levamos educação<br />
financeira para os mais<br />
diversos momentos de <br />
vida do colaborador<br />
e da empresa
</p>
</div>
<div class="texto2">
<p>
somos uma empresa do Mercado Financeiro com profissionais
capacitados e certificados para trazer conteúdos para todos os
momentos financeiros das pessoas.
</p>
<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>
<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 class="faixa3">
<div class="f3-agrupamento2">
<div class="f3-textos">
<div class="titulo">O QUE FAZEMOS</div>
<div class="subtitulo">
Nossos serviços
</div>
</div>
<div clasas="serviços">
<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="imagem-faixa3">
<img src="../../assets/images/imagem-faixa3.png"/>
</div>
</div>
<div class="faixa4">
<div class="f4-textos">
<div class="f4-texto1">
<div class="f4-titulo">PARA QUEM</div>
<div class="f4-part1"> Empresas que já<br/>
compreenderam:</div>
<div class="f4-part2"> o bem-estar do<br />
colaborador é
<br />investimento</div>
</div>
<div class="f4-texto2">
Entendemos que problemas financeiros podem<br />
impactar profundamente na vida do colaborador.<br /><br />
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>
</div>
</div>
<div class="faixa-5">
<div class = "f5-agp">
<div class="f5-titulo">
83% dos profissionais de RH afirmam que o estresse financeiro prejudica
o desempenho dos colaboradores.
</div>
<div class="f5-desc">Society for Human Resources Management</div>
</div>
</div>
<div class = "faixa-6">
<div class = "f6-agp">
<div class = "f6-quadrado">
<div class = "f6-texto1">
Organização
<br> Financeira
</div>
<div class = "f6-texto2"> Planejamento
<br> Financeiro </div>
<div class = "f6-texto3"> Investimentos </div>
<div class = "f6-texto4">
Cenário
<br> Macroeconômico
</div>
</div>
</div>
</div>
<div class="faixa7">
<div class="f7-textos">
<div class="f7-titulo">
QUEM FAZ PARTE DESTE MOVIMENTO
</div>
<div class="f7-texto1">
Mais de
<span style="color: #ee2e5d;">
100 empresas <br />e 20 mil colaboradores</span
>
impactados
</div>
<div class="imagens">
<div class="logo1">
<img src="../../assets/images/logo-hospital-moinhos.webp" />
</div>
<div class="logo2">
<img src="../../assets/images/vivo_logo.webp" />
</div>
<div class="logo3">
<img src="../../assets/images/piccadilly-logo.webp" />
</div>
<div class="logo4">
<img src="../../assets/images/loreal-logo.webp" />
</div>
<div class="logo5">
<img src="../../assets/images/MRV-logo.webp" />
</div>
<div class="logo6">
<img src="../../assets/images/leroy-merlin-logo.webp" />
</div>
<div class="logo7">
<img src="../../assets/images/sap-logo.webp" />
</div>
</div>
</div>
</div>
<div class = "faixa-8">
<div class = "f8-botao"> <button> Agende uma Conversa </button> </div>
</div>
<div class="faixa9">
<div class="titulo-f9">
<div class="depoimentos-titulo-f9">DEPOIMENTOS</div>
<div class="titulo-geral-f9">O que dizem sobre nós</div>
</div>
<div class="blocos-f9">
<div class="quadro1-f9">
<div class="imagem-aspas-f9">
<img src="../../assets/images/aspas(1).webp" />
</div>
<div class="descricao-f9">
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="texto-nome-f9">Stephany Lopes</div>
<div class="imagem-logo-f9">
<img src="../../assets/images/neogrid-logo.webp" />
</div>
</div>
<div class="quadro2-f9">
<div class="imagem-aspas-f9">
<img src="../../assets/images/aspas(1).webp" />
</div>
<div class="descricao-f9">
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="texto-nome-f9">Emily</div>
<div class="imagem-logo-f9">
<img src="../../assets/images/asaas-logo.webp" />
</div>
</div>
<div class="quadro3-f9">
<div class="imagem-aspas-f9">
<img src="../../assets/images/aspas(1).webp" />
</div>
<div class="descricao-f9">
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="texto-nome-f9">Cícero</div>
<div class="imagem-logo-f9">
<img src="../../assets/images/conta-azul-logo.webp" />
</div>
</div>
</div>
</div>
<div class="faixa10">
<div class="textos-10">
<div class="quemsomos-10">QUEM SOMOS</div>
<div class="sobrewarren-10">Sobre a Warren</div>
<div class="texto01-10">
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="texto02-10">
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 class="image-10">
<img class="celular-f10" src="../../assets/images/CELULAR-F8.webp" />
</div>
</div>
<div class = "faixa-11">
<div class = "f11-agrupamento">
<div class = "f11-texto">
<div class = "f11-titulo"> Agende uma conversa </div>
<div class = "f11-desc"> 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-agp">
<div class = "f11-1-1"> Nome </div>
<div class = "f11-1"> <input> </input> </div>
<div class = "f11-inputs">
<div class = "agp-f11">
<div class = "f11-2-2"> E-mail </div>
<div class = "f11-2"> <input> </input> </div>
</div>
<div class = "agp-f11">
<div class = "f11-3-3"> Telefone </div>
<div class = "f11-3" > <input> </input> </div>
</div>
</div>
<div class = "f11-inputs2">
<div class = "agp-f11">
<div class = "f11-4-4"> Cargo </div>
<div class = "f11-4"> <input> </input> </div>
</div>
<div class = "agp-f11">
<div class = "f11-5-5"> Empresa </div>
<div class = "f11-5"> <input> </input> </div>
</div>
<div class = "agp-f11">
<div class = "f11-6-6"> Quantidade de funcionários </div>
<div class = "f11-6"> <select name="selecione"> <option value="valor1"> Selecione </option> </select> </div>
</div>
</div>
<div class = "f11-7-7"> Deixe sua mensagem </div>
<div class = "f11-7"> <input> </input> </div>
<div class = "f11-button"> <button> ENVIAR </button> </div>
</div>
</div>
</div>
<div class = "faixa-12">
<div class = "f12-agp">
<div class = "f12-logo"> <img src="../../assets/images/f12-logo.webp"> </div>
<div class = "f12-agp-foto">
<div class = "f12-foto"> <img src="../../assets/images/icon-youtube.webp"> </div>
<div class = "f12-foto"> <img src="../../assets/images/icon-instagram.webp"> </div>
<div class = "f12-foto"> <img src="../../assets/images/icon-facebook.webp"></div>
<div class = "f12-foto"> <img src="../../assets/images/icon-twitter.webp"> </div>
</div>
</div>
<div class = "f12-agp-desc">
<div class = "f12-texto"> Tem alguma dúvida? </div>
<div class = "f12-texto"> Mande um email para </div>
<div class = "f12-texto"> meajuda@warrenbrasil.com.br </div>
<div class = "f12-texto"> CNPJ: 24.176.946/0001-71</div>
</div>
</div>
</body>
</html>
```
## CSS
```css=
.container-site {
font-size: 14px;
font-family: font1;
}
body {
margin: 0px;
}
.faixa1 {
display: flex;
flex-direction: column;
background-image: url("../../assets/imagens/fundo.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
width: 100%;
color: #ffffff;
}
.f1-logo {
margin-top: 1em;
margin-left: 1em;
}
.f1-texto {
text-align: left;
font-size: 3.5em;
padding: 2.5em 1em 0.3em 1.8em;
margin: 1px 1px 1px 1px;
}
.f1-botao {
padding: 2em 1em 0.3em 7.5em;
}
.f1-botao a {
text-decoration: none;
color: #ffff;
background-color: #ee2e5d;
border-radius: 100px;
padding: 27px 25px;
align-items: center;
line-height: 50px;
font-size: 20px font1;
}
a,
a:hover {
text-decoration: none;
color: inherit;
}
.faixa2 {
margin-left: 50px;
height: 60%;
}
.f2-titulo {
margin: 6em 0.2em 0em 0em;
color: #666666;
font: font4 bold;
}
.f2-textos {
display: flex;
flex-direction: row;
}
.texto1 {
font: 40px font3 bold;
width: 70%;
}
.texto2 {
font: 16px;
width: 60%;
margin: 2.3em 8em;
font-size: 1.2em;
}
.faixa3 {
display: flex;
flex-direction: row;
justify-content: space-around;
background-color: #f5f6fa;
padding: 5%;
}
.titulo {
font-family: medio;
font-size: 16px;
color: #666666;
}
.subtitulo {
font-family: forte;
font-size: 2.5rem;
}
.f3-agrupamento2 {
display: flex;
flex-direction: column;
}
li {
font-family: fraca;
color: #2e2d33;
font-size: 1em;
margin: 1em 0em 1em;
}
.imagem-faixa3 img {
max-width: 70%;
}
.faixa4 {
display: flex;
flex-direction: row;
background-color: #1c1b1f;
justify-items: center;
height: 70%;
padding: 5em;
}
.f4-titulo {
color: #666666;
font-family: forte;
}
.f4-textos {
display: flex;
flex-direction: row;
padding: 0em 0em 0em 2em;
}
.f4-texto1 {
display: flex;
flex-direction: column;
justify-items: left;
padding: 3em 10em 0em 0em;
font-family: forte;
}
.f4-part1 {
font-size: 40px;
color: #ee2e5d;
}
.f4-part2 {
font-size: 40px;
color: #ffffff;
}
.f4-texto2 {
font-family: fraca;
text-align: left;
margin-top: 4em;
height: 50%;
padding: px;
color: #ffffff;
font-size: 17px;
}
.f5-titulo {
background-image: url("../../assets/images/f5-aspas.webp");
background-size: 10%;
background-repeat: no-repeat;
}
.f5-titulo {
font-family: fraca;
font-size: 20px;
line-height: 28px;
max-width: 500px;
color: white;
padding-bottom: 3%;
padding-top: 0.7%;
padding-left: 0.7%;
}
.f5-agp {
display: flex;
flex-direction: column;
align-items: center;
background-color: #000;
padding-top: 5%;
padding-bottom: 5%;
}
.f5-desc {
color: white;
font-family: fraca;
font-size: 16px;
}
.f6-quadrado {
max-width: 600px;
display: flex;
flex-wrap: wrap;
padding-top: 50px;
}
.f6-agp {
background-image: url("../../assets/images/background-palestra-f6.webp");
background-size: cover;
background-attachment: fixed;
height: 70vh;
background-color: black;
}
.f6-texto1 {
color: white;
font-family: medio;
font-size: 27px;
padding-bottom: 35px;
background-image: url("../../assets/images/educacao-financeira_1-f6.webp");
background-size: 75%;
background-repeat: no-repeat;
padding-top: 30px;
padding-left: 70px;
}
.f6-quadrado {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-left: 400px;
padding-right: 400px;
justify-content: space-between;
}
.f6-texto2 {
color: white;
font-family: medio;
font-size: 27px;
padding-bottom: 35px;
background-image: url("../../assets/images/planejamento-financeiro_1-f6.webp");
background-size: 70%;
background-repeat: no-repeat;
padding-top: 32px;
padding-left: 70px;
}
.f6-texto3 {
color: white;
font-family: medio;
font-size: 27px;
padding-top: 35px;
background-image: url("../../assets/images/investimento_1-f6.webp");
background-size: 70%;
background-repeat: no-repeat;
padding-top: 30px;
padding-left: 55px;
width: 150px;
height: 100px;
}
.f6-texto4 {
color: white;
font-family: medio;
font-size: 27px;
background-image: url("../../assets/images/cenario-macroeconomico_1-f6.webp");
background-size: 70%;
background-repeat: no-repeat;
padding-top: 50px;
padding-left: 45px;
margin-bottom: 80px;
margin-top: 36px;
}
.faixa7 {
display: flex;
flex-direction: row;
height: 100%;
background-color: #f7f5f5e6;
justify-content: center;
align-items: center;
}
.imagens {
display: flex;
flex-wrap: wrap;
padding: 2em;
margin: 7em;
justify-content: center;
align-items: center;
}
.logo1 img {
height: 4em;
width: 12em;
margin: 80px 36.6211px 0px 36.6211px;
}
.logo2 img {
max-height: 3em;
max-width: 6em;
margin: 80px 73px 0px 73px;
}
.logo3 img {
max-height: 1.5em;
max-width: 6em;
margin: 80px 51.1133px 0px;
}
.logo4 img {
max-height: 1.25em;
max-width: 6em;
margin: 80px 73px 0px 73px;
}
.logo5 img {
max-height: 5em;
max-width: 6em;
margin: 80px 15.957px 0px;
}
.logo6 img {
height: 3em;
width: 5em;
margin: 80px 26.9726px 0px 26.9531px;
}
.logo7 img {
height: 3em;
width: 5em;
margin: 80px 26.9726px 0px 26.9531px;
}
.f7-textos {
display: flex;
flex-direction: column;
justify-content: left;
align-items: left;
margin-top: 10em;
}
.f7-titulo {
justify-content: left;
align-items: left;
font-family: forte;
color: #666666;
font-size: 16px;
padding-left: 11.5em;
margin-bottom: -2em;
}
.f7-texto1 {
justify-content: left;
font-family: forte;
margin-top: 1em;
font-size: 30px;
padding-left: 6em;
}
.faixa-8 {
background-color: #000;
display: flex;
flex-direction: row;
justify-content: center;
}
.f8-botao button {
border-radius: 150px;
width: 245px;
height: 58px;
color: white;
font-family: medio;
font-size: 22px;
background-color: #ee2e5d;
border: none;
cursor: pointer;
text-decoration: none;
}
.f8-botao {
margin-top: 50px;
margin-bottom: 50px;
}
.titulo-f9 {
display: flex;
flex-direction: column;
align-content: left;
margin: 8em 8em 0px 8em;
}
.depoimentos-titulo-f9 {
font-family: fraca;
font-weight: bold;
font-size: 16px;
color: #2e2d33;
opacity: 80%;
}
.titulo-geral-f9 {
color: #2e2d33;
font-family: forte;
font-size: 40px;
}
.blocos-f9 {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin: 0px 7em;
padding-top: 5em;
padding-bottom: 7em;
}
.quadro1-f9 {
max-width: 20em;
min-width: 20em;
padding: 1em;
background-color: #f5f6fa;
border-radius: 10px;
}
.quadro2-f9 {
max-width: 20em;
min-width: 20em;
padding: 1em;
background-color: #f5f6fa;
border-radius: 10px;
}
.quadro3-f9 {
max-width: 20em;
min-width: 20em;
padding: 1em;
background-color: #f5f6fa;
border-radius: 10px;
}
.imagem-aspas-f9 {
width: 40px;
height: 28px;
}
.descricao-f9 {
font-family: fraca;
font-size: 16px;
color: #2d2e33;
max-width: 17em;
padding: 0px 0px 1em 1em;
padding-top: 0px;
}
.texto-nome-f9 {
padding-top: 1em;
padding: 20px;
font-family: forte;
font-size: 16px;
}
.imagem-aspas-f9 img {
width: 40px;
height: 28px;
}
.imagem-aspas-f9 {
padding: 1em;
margin-bottom: 20px;
}
.imagem-logo-f9 img {
width: 4em;
padding: 20px;
}
.faixa10 {
display: flex;
flex-direction: row;
background-color: #ee2e5d;
justify-content: space-around;
padding: 7em 0px;
}
.textos-10 {
font-size: 1.1em;
color: white;
margin-left: 11em;
max-width: 27em;
}
.quemsomos-10 {
font-family: medio;
font-size: 0.9em;
}
.sobrewarren-10 {
font-family: forte;
font-size: 2.2em;
margin: 0.2em 0px 1em;
}
.texto01-10 {
font-family: fraca;
margin-bottom: 1em;
}
.texto02-10 {
font-family: fraca;
}
.image-10 img {
max-width: 24em;
margin-right: 17em;
}
f11-texto {
display: flex;
flex-direction: column;
align-items: center;
}
.f11-titulo {
font: 40px forte;
margin-top: 85px;
}
.f11-desc {
font-family: fraca;
max-width: 670px;
margin-top: 40px;
margin-left: 20px;
}
.f11-agp {
display: flex;
flex-direction: column;
align-items: center;
}
input {
border: none;
background-color: #f5f6fa;
cursor: pointer;
}
.f11-1 input {
width: 700px;
height: 35px;
}
.f11-1-1 {
margin-right: 650px;
margin-top: 30px;
}
.f11-inputs {
display: flex;
flex-direction: row;
}
.f11-2-2 {
margin-top: 30px;
}
.f11-3-3 {
margin-top: 33px;
}
.agp-f11 {
display: flex;
flex-direction: column;
}
.f11-2 input {
width: 325px;
height: 35px;
margin-right: 50px;
}
.f11-3 input {
width: 325px;
height: 35px;
}
.f11-inputs2 {
display: flex;
flex-direction: row;
}
.f11-5 {
margin-right: 25px;
}
.f11-4 {
margin-right: 25px;
}
.f11-4 input {
width: 105px;
}
.f11-4 input {
width: 230px;
height: 35px;
}
.f11-5 input {
width: 230px;
height: 35px;
}
.f11-6 input {
width: 192px;
height: 35px;
}
.f11-6-6 {
margin-top: 30px;
}
.f11-5-5 {
margin-top: 30px;
}
.f11-4-4 {
margin-top: 30px;
}
.f11-7 input {
width: 700px;
height: 130px;
margin-bottom: 40px;
}
.f11-7-7 {
margin-top: 25px;
width: 700px;
}
.f11-button button {
color: #f5f6fa;
background-color: #eb2d5c;
cursor: pointer;
text-decoration: none;
border: none;
border-radius: 34px;
font: 22px medio;
padding: 20px;
width: 200px;
margin-bottom: 130px;
}
.f11-6 select {
border: none;
cursor: pointer;
background-color: #f5f6fa;
width: 192px;
height: 35px;
}
.faixa-12 {
background-color: #2e2d33;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.f12-agp {
display: flex;
}
.f12-agp-desc {
display: flex;
flex-direction: column;
justify-content: right;
margin-top: 33px;
margin-bottom: 33px;
}
.f12-agp-foto {
display: flex;
flex-direction: row;
margin-right: 20px;
margin-top: 44px;
margin-left: 263px;
}
.f12-texto {
color: white;
font-family: fraca;
padding-bottom: 7px;
text-align: center;
}
.f12-logo {
margin-top: 44px;
}
.f12-foto {
padding-right: 10px;
}
```
{"metaMigratedAt":"2023-06-16T00:34:13.521Z","metaMigratedFrom":"Content","title":"SESSION DE LING PROG","breaks":false,"contributors":"[{\"id\":\"4c424d8f-f274-42df-9402-f6014d7ba673\",\"add\":3854,\"del\":29797}]"}