# SESSION THEREE: Linguagem de Programação:
> **Aluna:** Patricia Oliveira Paulino
> **Número:** 37
> **Turma:** Info D
> 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="index.css">
<link rel="stylesheet" href="../comum/comum.css">
<title>Educação financeira</title>
</head>
<body>
<div class="conteiner">
<div class="faixa1">
<div class="f1_logo">
<img src="../../assets/images/logo">
</div>
<div class="f1_titulo">
Educação
Financeira para
seus colaboradores
</div>
<div class="f1_botao">
<button> <a href=""> AGENDE UMA CONVERSA </a> </button>
</div>
</div>
<div class="faixa2">
<div class="f2_conteiner1">
<div class="f2_titulo">
QUEM SOMOS
</div>
<div class="f2_subtitulo">
Levamos educação
financeira para os mais
diversos momentos de
vida do colaborador
e da empresa
</div>
</div>
<div class="f2_conteiner2">
<div class="f2_text">
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_text">
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_text">
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="faixa3">
<div class="f3_conteiner1">
<div class="f3_titulo">
O QUE FAZEMOS
</div>
<div class="f3_subtitulo">
Nossos serviços
</div>
<ul>
<li class="f3_list"> Webinars Personalizados </li>
<li class="f3_list"> Cursos Online para Plataformas Corporativas </li>
<li class="f3_list"> Consultoria de Planejamento Financeiro </li>
<li class="f3_list"> Programas de Educação Financeira </li>
<li class="f3_list"> Campanhas Personalizadas (online e offline) </li>
</ul>
</div>
<div class="f3_conteiner2">
<img src="../../assets/images/grupo">
</div>
</div>
<div class="faixa4">
<div class="f4_conteiner1">
<div class="f4_titulo">
PARA QUEM
</div>
<div class="f4_subtitulo1">
Empresas que já compreenderam:
</div>
<div class="f4_subtitulo2">
o bem-estar do colaborador é investimento
</div>
</div>
<div class="f4_conteiner2">
<div class="f4_texto">
Entendemos que problemas financeiros podem
impactar profundamente na vida do colaborador.
</div>
<div class="f4_texto">
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="faixa5">
<div class="f5_frase">
83% dos profissionais de RH afirmam que o estresse
financeiro prejudica o desempenho dos colaboradores.
</div>
<div class="f5_autor">
Society for Human Resources Management
</div>
</div>
<div class="faixa6">
<div class="f6_conteiner1">
<div class="f6_titulo1">
Organização <br>
Financeira
</div>
<div class="f6_titulo2">
Investimentos
</div>
</div>
<div class="f6_conteiner2">
<div class="f6_titulo3">
Planejamento <br>
Financeiro
</div>
<div class="f6_titulo4">
Cenário <br>
Macroeconômico
</div>
</div>
</div>
<div class="faixa7">
<div class="f7_titulo">
QUEM FAZ PARTE DESTE MOVIMENTO
</div>
<div class="f7_subtitulo">
Mais de <span style="color: #ee2e5d;"> 100 empresas <br>
e 20 mil colaboradores </span> impactados
</div>
<div class="f7_empresas">
<div class="f7_images">
<img src="../../assets/images/hospital.webp">
</div>
<div class="f7_images">
<img src="../../assets/images/vivo.webp">
</div>
<div class="f7_images">
<img src="../../assets/images/piccadilly.webp">
</div>
<div class="f7_images">
<img src="../../assets/images/loreal.webp">
</div>
<div class="f7_images">
<img src="../../assets/images/mrv.webp">
</div>
<div class="f7_images">
<img src="../../assets/images/leroy.webp">
</div>
<div class="f7_images">
<img src="../../assets/images/sap.webp">
</div>
</div>
</div>
<div class="faixa8">
<div class="f8_botao">
<button> <a href=""> AGENDE UMA CONVERSA </a> </button>
</div>
</div>
<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="f9_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">
Stephany 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="f9_depaspas">
<img src="../../assets/images/aspas2.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">
Cícero
</div>
<div class="f9_empresa">
<img src="../../assets/images/contaazul.webp">
</div>
</div>
</div>
</div>
<div class="faixa10">
<div class="f10_textos">
<div class="f10_titulo">
QUEM SOMOS
</div>
<div class="f10_subtitulo">
Sobre a Warren
</div>
<div class="f10_texto1">
Somos uma plataforma completa de investimentos com sede <br>
em Porto Alegre em outras 6 cidades. Temos mais de 100 mil clientes <br>
e 250 colaboradores. <br>
</div>
<div class="f10_texto2">
Na Warren você investe nos melhores produtos com eficiência, <br>
simplicidade e transparência. Somos responsáveis por criar uma <br>
experiência alinhada e transparente, que oferece realmente os <br>
melhores produtos, com muita tecnologia, mas com <br>
atendimento humano e competente. <br>
</div>
</div>
<div class="f10_img">
<img src="../../assets/images/celular.webp">
</div>
</div>
<div class="faixa11">
<div class="f11_titulo">
Agende uma conversa
</div>
<div class="f11_subtitulo">
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 class="f11_formulario">
<div class="f11_form1">
<label for="" > Nome* </label> <br>
<input nome="name" required placeholder="" type="text">
</div>
<div class="f11_form2">
<div>
<label for=""> E-mail* </label>
<input name="email" type="text">
</div>
<div>
<label for=""> Telefone* </label>
<input name="telefone" type="text">
</div>
</div>
<div class="f11_form3">
<div>
<label for=""> Cargo* </label>
<input type="text">
</div>
<div>
<label for=""> Empresa* </label>
<input type="text">
</div>
<div>
<label for=""> Quantidade de funcionários* </label>
<select required="required" name="quantidade">
<option selected="selected" value=""> Selecione </option>
<option selected="1" value=""> 1 a 50 </option>
<option selected="2" value=""> 51 a 100 </option>
<option selected="3" value=""> 100 a 500 </option>
<option selected="4" value=""> 500 a 1000 </option>
<option selected="5" value=""> 1000 a 5000 </option>
</select>
</div>
</div>
<div class="f11_form4">
<label for=""> Deixe sua mensagem </label> <br>
<textarea name="mensagem" cols="30" rows="10"></textarea>
</div>
</div>
<div class="f11_botao">
<button> <a href=""> ENVIAR </a> </button>
</div>
</div>
<div class="faixa12">
<div class="f12_logo">
<img src="../../assets/images/logo2.webp">
</div>
<div class="f12_redes_sociais">
<img src="../../assets/images/youtube.webp">
<img src="../../assets/images/instagram.webp">
<img src="../../assets/images/facebook.webp">
<img src="../../assets/images/twitte.webp">
</div>
<div class="f12_textos">
<div class="f12_texto1">
Tem alguma dúvida?
</div>
<div class="f12_texto2">
Mande um email para
</div>
<div class="f12_texto3">
meajuda@warrenbrasil.com.br
</div>
<div class="f12_texto4">
CNPJ: 24.176.946/0001-71
</div>
</div>
</div>
</div>
</body>
</html>
```
> index.css
```css=
.faixa1 {
display: flex;
flex-direction: column;
background-image: url("../../assets/images/fundof1.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
color: white;
}
.f1_logo {
padding: 20px 30px;
}
.f1_titulo {
font: 3em font1;
margin: 120px 750px 0px 120px;
}
.f1_botao button {
background-color: #ee2e5d;
border: none;
padding: 30px 40px;
border-radius: 50px;
margin: 10px 120px;
}
.f1_botao a {
text-decoration: none;
font: 1.1em font1;
color: #ffffff;
}
.faixa2 {
display: flex;
flex-direction: row;
padding: 100px 100px;
}
.f2_titulo {
font: 1em font1;
color: #666666;
padding: 0px 0px 0px 50px;
}
.f2_subtitulo {
font: 2.5em font1;
color: #171717;
padding: 0px 0px 0px 50px;
line-height: 2.5rem;
}
.f2_conteiner2 {
margin: 0px 75px 0px 75px;
}
.f2_text {
font: 1em font3;
padding: 10px 0px;
color: #171717;
}
.faixa3 {
display: flex;
flex-direction: row;
background-color: #f5f6fa;
justify-content: center;
padding: 100px 100px;
}
.f3_titulo {
font: 1em font1;
color: #666666;
}
.f3_subtitulo {
font: 2.5em font1;
color: #171717;
}
ul {
padding-left: 20px;
margin: 0 0 16px 0;
font: 1em font3;
color: #232d33;
}
.f3_list {
padding: 1em 0 0 0;
}
.f3_conteiner1 {
padding: 0px 200px 100px 0px;
}
.f3_conteiner2 img {
max-width: 500px;
height: auto;
}
.faixa4 {
display: flex;
flex-direction: row;
background-color: #1C1B1F;
padding: 150px 100px;
}
.f4_titulo {
font: 1em font1;
color: #666666;
padding: 0px 100px 0px 50px;
}
.f4_subtitulo1 {
font: 2.25em font1;
color: #ee2e5d;
padding: 0px 100px 0px 50px;
line-height: 2.5rem;
}
.f4_subtitulo2 {
font: 2.25em font1;
color: #ffffff;
padding: 0px 100px 0px 50px;
line-height: 2.5rem;
}
.f4_conteiner2 {
padding: 30px 150px 0px 0px;
}
.f4_texto {
font: 1em font3;
padding: 10px 100px;
color: #ffffff;
}
.faixa5 {
display: flex;
flex-direction: column;
padding: 140px 200px 100px 100px;
background-color: #000000;
align-items: center;
}
.f5_frase {
background-image: url('../../assets/images/aspas');
background-repeat: no-repeat;
margin: 0px 300px 0px 280px;
text-align: end;
font: 20px font3;
color: #ffffff;
}
.f5_autor {
font: 1em font3;
padding: 50px 0px 0px 0px;
color: #ffffff;
}
.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_conteiner1 {
display: flex;
flex-direction: column;
padding: 0px 130px;
}
.f6_conteiner2 {
display: flex;
flex-direction: column;
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;
}
.faixa7 {
display: flex;
flex-direction: column;
padding: 150px 150px;
background-color: #f5f6fa;
}
.f7_titulo {
font: 1em font1;
color: #666666;
}
.f7_subtitulo {
font: 2.25em font1;
color: black;
line-height: 2.5rem;
}
.f7_empresas {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.f7_images img {
width: 150px;
display: block;
margin: 80px 50px 40px 0px;
}
.faixa8 {
padding: 50px 50px;
background-color: #171717;
align-items: center;
justify-content: center;
}
.f8_botao {
align-items: center;
justify-content: center;
}
.f8_botao button {
background-color: #ee2e5d;
border: none;
padding: 25px 30px;
border-radius: 50px;
}
.f8_botao a {
text-decoration: none;
font: 1.1em font1;
color: #ffffff;
}
.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;
}
.faixa10 {
display: flex;
flex-direction: row;
padding: 150px 100px 100px 50px;
background-color: #ee2e5d;
}
.f10_textos {
padding: 0px 100px;
}
.f10_titulo {
font: 1em font1;
color: #e3e4eb;
}
.f10_subtitulo {
font: 2.5em font1;
color: #ffffff;
}
.f10_texto1 {
font: 1em font3;
color: #ffffff;
line-height: 20px;
padding: 20px 0px;
}
.f10_texto2 {
font: 1em font3;
color: #ffffff;
line-height: 20px;
padding: 10px 0px;
}
.f10_img img {
width: 383px;
height: auto;
}
.faixa11 {
display: flex;
flex-direction: column;
padding: 100px 100px;
align-items: center;
}
.f11_titulo {
font: 2.5em font1;
color: #171717;
padding: 0px 0px 30px 0px;
}
.f11_subtitulo {
font: 1em font3;
color: #2E2D33;
text-align: center;
line-height: 28px;
}
.f11_form1 {
font: 0.9em font3;
color: #2E2D33;
padding: 20px;
}
.f11_form1 input {
width: 800px;
height: 40px;
box-sizing: border-box;
display: flex;
color: black;
border-style: solid;
border-color: #0000;
background-color: #f5f6fa;
}
.f11_form2 {
font: 0.9em font3;
color: #2E2D33;
display: flex;
padding: 20px;
}
.f11_form2 input {
width: 400px;
height: 40px;
box-sizing: border-box;
display: flex;
color: black;
border-style: solid;
border-color: #0000;
background-color: #f5f6fa;
margin: 0px 10px;
}
.f11_form3 {
font: 0.9em font3;
color: #2E2D33;
display: flex;
flex-direction: row;
padding: 20px;
}
.f11_form3 input {
width: 266.66px;
height: 40px;
box-sizing: border-box;
display: flex;
color: black;
border-style: solid;
border-color: #0000;
background-color: #f5f6fa;
margin: 0px 10px;
}
.f11_form3 select {
width: 266.66px;
height: 40px;
box-sizing: border-box;
display: flex;
color: black;
border-style: solid;
border-color: #0000;
background-color: #f5f6fa;
margin: 0px 10px;
}
.f11_form4 {
font: 0.9em font3;
color: #2E2D33;
padding: 20px;
}
.f11_form4 textarea {
width: 800px;
height: 100px;
box-sizing: border-box;
display: flex;
color: black;
border-style: solid;
border-color: #0000;
background-color: #f5f6fa;
}
.f11_botao button {
background-color: #ee2e5d;
border: none;
padding: 25px 50px;
border-radius: 50px;
margin: 10px 120px;
}
.f11_botao a {
text-decoration: none;
font: 1.3em font1;
color: #ffffff;
}
.faixa12 {
padding: 50px;
background-color: #2E2D33;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.f12_logo {
width: 120px;
}
.f12_redes_sociais img {
width: 30px;
height: auto;
}
.f12_textos {
text-align: center;
font: 1em font3;
color: #ffffff;
display: flex;
flex-direction: column;
}
.f12_texto1 {
padding: 0px 0px 5px 0px;
}
.f12_texto2 {
padding: 5px 0px;
}
.f12_texto3 {
padding: 5px 0px;
}
.f12_texto4 {
padding: 5px 0px;
}
@media (max-width: 750px)
{
.faixa1 {
background-image: url('../../assets/images/palestra.png');
background-size: cover;
background-attachment: fixed;
height: 100%;
width: 100%;
}
.f1_botao button {
padding: 20px 150px;
}
.faixa2 {
display: flex;
flex-direction: column;
}
.faixa3 {
display: flex;
flex-direction: column;
}
.f3_conteiner2 img {
max-width: 333px;
height: 209px;
}
.faixa4 {
display: flex;
flex-direction: column;
}
.faixa5 {
}
.faixa6 {
display: flex;
flex-direction: column;
}
.faixa7 {
}
.faixa8 {
}
.faixa9 {
}
.f9_depoimentos {
display: flex;
flex-direction: column;
}
.faixa10 {
display: flex;
flex-direction: column;
}
.faixa11 {
display: flex;
flex-direction: column;
}
.f11_form4 textarea {
width: 8'00px;
height: 100px;
}
.f11_form2 {
display: flex;
flex-direction: column;
}
.f11_form3 {
display: flex;
flex-direction: column;
}
```
{"metaMigratedAt":"2023-06-16T00:58:16.258Z","metaMigratedFrom":"Content","title":"SESSION THEREE: Linguagem de Programação:","breaks":true,"contributors":"[{\"id\":\"e94f090e-d7ae-43ea-a141-2738e655b372\",\"add\":0,\"del\":1},{\"id\":\"8f7566f7-64b5-4753-b866-2bb258422309\",\"add\":20618,\"del\":62}]"}