# SESSION ONE | LINGUAGEM DE PROGRAMÇÃO
Murillo Tadeu Oliveira | N° - 33
## It's always time to restart
### Script HTML
`````html=
<!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 para seus colaboradores</title>
<link rel="stylesheet" href="index1.css" />
<link rel="stylesheet" href="index13.css" />
<link rel="stylesheet" href="index4.css" />
<link rel="stylesheet" href="index5.css" />
<link rel="stylesheet" href="index6.css" />
<link rel="stylesheet" href="index7.css"/>
<link rel="stylesheet" href="faixa8.css">
<link rel="stylesheet" href="index9.css">
<link rel="stylesheet" href="index10.css">
<link rel="stylesheet" href="faixa11.css">
<link rel="stylesheet" href="index12.css" />
<link rel="stylesheet" href="../comum/comum.css" />
</head>
<body>
<div class="container">
<div class="faixa1">
<div class="f1_logo">
<img src="../../assets/images/warren-educacao-logo-white.png">
</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="faixa-2">
<div class="f2-box">
<div class="f2-box-texto-1">QUEM SOMOS</div>
<div class="f2-box-texto-2">
Levamos educação financeira para os mais diversos momentos de vida
do colaborador e da empresa
</div>
</div>
<div class="f2-box-1">
<div class="f2-box-texto-3">
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-box-texto-3">
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-box-texto-3">
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="faixa-3">
<div class="f3-box">
<div class="f3-texto-1">O QUE FAZEMOS</div>
<div class="f3-texto-2">Nossos serviços</div>
<div class="f3-texto-3">Webinars Personalizados</div>
<div class="f3-texto-3">
Cursos Online para Plataformas Corporativas
</div>
<div class="f3-texto-3">Consultoria de Planejamento Financeiro</div>
<div class="f3-texto-3">Programas de Educação Financeira</div>
<div class="f3-texto-3">
Campanhas Personalizadas (online e offline)
</div>
</div>
<div class="f3-box-1">
<div class="f3-imagem">
<img src="../../assets/images/Faixa-3.webp" />
</div>
</div>
</div>
<div class="faixa4">
<div class="f4-box">
<div class="f4-titulo">
PARA QUEM?
</div>
<div class="f4-subtitulo">
Empresas que já <br> compreenderam:<br>
</div>
<div class="f4-texto">
o bem-estar do <br> colaborador é <br> investimento
</div>
</div>
<div class="f4-box2">
<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 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="faixa-6">
<div class="retangulo-6">
<div class="box1-6">Organização<br />Financeira</div>
<div class="box2-6">Planejamento<br />Financeiro</div>
</div>
<div class="retangulo-6">
<div class="box3-6">Investimentos</div>
<div class="box4-6">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/logo-hospital-moinhos.png">
</div>
<div class="f7-images">
<img src="../../assets/images/vivo_logo.webp">
</div>
<div class="f7-images">
<img src="../../assets/images/piccadilly-logo.webp">
</div>
<div class="f7-images">
<img src="../../assets/images/loreal-logo.webp">
</div>
<div class = "f7-empresas2">
<div class = "f7-images2">
<img src="../../assets/images/MRV-logo.webp">
</div>
<div class = "f7-images2">
<img src="../../assets/images/leroy-merlin-logo.webp">
</div>
<div class = "f7-images2">
<img src="../../assets/images/sap-logo.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="texto">
<div class="titulo">DEPOIMENTOS</div>
<div class="subtitulo">O que dizem sobre nós</div>
</div>
<div class="caixa">
<div class="box">
<div class="imagem-f9">
<img src="../../assets/images/aspas-f9.webp">
</div>
<div class="conteudo">
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="autor">Stephany Lopes</div>
<div class="empresa">
<img src="../../assets/images/neogrid-logo.webp">
</div>
</div>
<div class="box">
<div class="imagem-f9">
<img src="../../assets/images/aspas-f9.webp">
</div>
<div class="conteudo">
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="autor">Emily</div>
<div class="empresa">
<img src="../../assets/images/asaas-logo.webp">
</div>
</div>
<div class="box">
<div class="imagem-f9">
<img src="../../assets/images/aspas-f9.webp">
</div>
<div class="conteudo">
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="autor">Cícero</div>
<div class="empresa">
<img src="../../assets/images/conta-azul-logo.webp">
</div>
</div>
</div>
</div>
<div class="faixa10">
<div class="f10-parte1">
<div class="f10-subtitulo"> QUEM SOMOS</div>
<div class="f10-titulo"> Sobre a Warren </div>
<div class="conteudo-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.<br> <br> 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="f10-imagem">
<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 class="f11_pergunta1">
<label for=""> E-mail* </label>
<input name="email" type="text">
</div>
<div class="f11_pergunta2">
<label for=""> Telefone* </label>
<input name="telefone" type="text">
</div>
</div>
<div class="f11_form3">
<div class="f11_pergunta3">
<label for=""> Cargo* </label>
<input type="text">
</div>
<div class="f11_pergunta4">
<label for=""> Empresa* </label>
<input type="text">
</div>
<div class="f11_pergunta5">
<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="faixa-12">
<div class="box-12">
<div class="logotipo-12">
<img src="../../assets/images/warren-logo-12.webp" />
</div>
<div class="redes-sociais-12">
<div class="logotipo-rs-12">
<img src="../../assets/images/youtube-12.webp" />
</div>
<div class="logotipo-rs-12">
<img src="../../assets/images/instagram-12.webp" />
</div>
<div class="logotipo-rs-12">
<img src="../../assets/images/facebook-12.webp" />
</div>
<div class="logotipo-rs-12">
<img src="../../assets/images/twitter-12.webp" />
</div>
</div>
<div class="suporte-12">
<div class="conteudo-12">Tem alguma dúvida?</div>
<div class="conteudo-12">Mande um email para</div>
<div class="conteudo-12">meajuda@warrenbrasil.com.br</div>
<div class="diferente-12">CNPJ: 24.176.946/0001-71</div>
</div>
</div>
</div>
</body>
</html>
``````
### Script CSS
`````html=
.faixa1 {
display: flex;
flex-direction: column;
background-image: url("../../assets/images/fundof1.png");
background-size: cover;
background-attachment: fixed;
height: 95vh;
color: white;
}
.f1_logo {
padding: 20px 30px;
}
.f1_logo img {
width: 200px;
}
.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;
}
.container
{
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: rgba(14, 14, 14, 0.994);
padding: 12px 12px;
}
.box{
display: flex;
flex-direction: column;
margin-top: 12px;
margin-right: 15px;
padding: 50px 150px;
}
.titulo{
font-family: "font4.woff2", Helvetica,Arial,sans-serif;
font-size: 13px;
margin: 10px 30px 10px ;
letter-spacing: .15em;
color: #8d8d8d;
}
.subtitulo{
font-family:"font1.woff", Helvetica,Arial,sans-serif;
font-size: 40px;
color: #ee2e5d;
margin: 0px 30px 11px;
font-size: 2.5rem;
line-height: 2.5rem;
}
.texto{
font-family: "font1.woff", Helvetica,Arial,sans-serif;
font-size: 40px;
letter-spacing: .02em;
color: #ffffff;
margin: 0px 30px 30px;
font-size: 2.5rem;
line-height: 2.5rem;
}
.box2{
display: flex;
flex-direction: column;
padding: 50px 0px;
margin-top: 450x;
margin-left: 25px;
}
.texto2{
font-family: "font2.woff", Helvetica,Arial,sans-serif;
color: #ffffff;
}
.faixa-2 {
display: flex;
flex-direction: row;
padding: 80px 10px 100px 10px;
}
.faixa-3 {
display: flex;
flex-direction: row;
background-color: #f2f2f2;
padding: 100px;
padding-top: 150px;
}
.f2-box {
padding-top: 100px;
padding-left: 140px;
padding-right: 100px;
padding: 100px;
}
.f2-box-texto-1 {
font-size: 16px;
color: #666666;
font-family: font1;
padding-top: 20px;
}
.f2-box-texto-2 {
font-size: 40px;
color: #171717;
font-family: font2;
line-height: 33px;
}
.f2-box-1 {
padding-top: 100px;
padding-left: 20px;
padding-right: 150px;
}
.f2-box-texto-3 {
padding-top: 15px;
font-size: 16px;
color: #171717;
font-family: font3;
}
.f3-box {
padding-left: 50px;
padding-right: 250px;
}
.f3-texto-1 {
font-size: 16px;
color: #666666;
font-family: font1;
}
.f3-texto-2 {
font-size: 40px;
color: #171717;
font-family: font2;
}
.f3-texto-3 {
font-size: 16px;
color: #171717;
padding-top: 20px;
font-family: font3;
}
.f3-box-1 {
}
.f3-imagem img {
width: 485px;
height: 305px;
}
.faixa4
{
display: flex;
flex-direction: row;
align-content: center;
background-color: rgb(28 27 31);
padding: 12px 12px;
}
.f4-box{
display: flex;
flex-direction: column;
padding: 17em;
}
.f4-box2{
display: flex;
flex-direction: column;
padding-top: 21em;
}
.f4-titulo{
font-family: "font4.woff2", Helvetica,Arial,sans-serif;
font-size: 13px;
margin: 10px 35px 10px ;
text-align: left;
letter-spacing: .15em;
color: #8d8d8d;
}
.f4-subtitulo{
font-family:"font2.woff2", Helvetica,Arial,sans-serif;
font-size: 40px;
color: #ee2e5d;
text-align: left;
margin: 0px 30px 11px;
font-size: 2.5rem;
line-height: 2.5rem;
margin-top: 5px;
margin-left: 35px;
margin-right: 35px;
}
.f4-texto{
font-family: "font2.woff2", Helvetica,Arial,sans-serif;
font-size: 40px;
letter-spacing: .02em;
color: #ffffff;
text-align: left;
margin: 0px 30px 30px;
font-size: 2.5rem;
line-height: 2.5rem;
margin-top: 0.5px;
margin-left: 35px;
margin-right: 35px;
}
}
.f4-box2{
display: flex;
flex-direction: column;
padding: 50px 350px;
margin-top: 450x;
margin-left: 5px;
}
.f4-texto2{
font-family: "font2.woff", Helvetica,Arial,sans-serif;
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/quote_warren_educacao_company.png");
background-repeat: no-repeat;
background-size: 60px;
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;
}
.faixa-6 {
display: flex;
flex-direction: column;
justify-content: center;
background-image: url(../../assets/images/background-6.webp);
background-size: cover;
background-attachment: fixed;
height: 80vh;
background-color: #0a0a0a;
background-repeat: no-repeat;
}
.retangulo-6 {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 40px;
margin-bottom: 50px;
}
.box1-6 {
background-image: url("../../assets/images/educacao-financeira-12.webp");
background-repeat: no-repeat;
background-size: auto 100%;
background-position: -1em;
height: 4.5em;
width: 9em;
padding: 1em 3.5em;
display: flex;
flex-direction: row;
color: #ffffff;
font-family: font1;
font-size: 26px;
font-weight: 700;
letter-spacing: -1px;
margin-right: 40px;
}
.box2-6 {
background-image: url("../../assets/images/planejamento-financeiro-12.webp");
background-repeat: no-repeat;
background-size: auto 100%;
background-position: -1em;
height: 4.5em;
width: 9em;
padding: 1em 3.5em;
display: flex;
flex-direction: row;
color: #ffffff;
font-family: font1;
font-size: 26px;
font-weight: 700;
letter-spacing: -1px;
margin-left: 40px;
}
.box3-6 {
background-image: url("../../assets/images/investimento-12.webp");
background-repeat: no-repeat;
background-size: auto 100%;
background-position: -1em;
height: 4.5em;
width: 9em;
padding: 1em 3.5em;
display: flex;
flex-direction: row;
color: #ffffff;
font-family: font1;
font-size: 26px;
font-weight: 700;
letter-spacing: -1px;
margin-right: 40px;
}
.box4-6 {
background-image: url("../../assets/images/cenario-macroeconomico-12.webp");
background-repeat: no-repeat;
background-size: auto 100%;
background-position: -1em;
height: 4.5em;
width: 9em;
padding: 1em 3.5em;
display: flex;
flex-direction: row;
color: #ffffff;
font-family: font1;
font-size: 26px;
font-weight: 700;
letter-spacing: -1px;
margin-left: 40px;
}
.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-empresas2{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
}
.f7-images img {
width: 150px;
display: block;
margin: 80px 50px 40px 0px;
}
.f7-images2 img{
width: 150px;
display: block;
margin: 80px 50px 40px 0px;
}
.faixa8 {
display: flex;
padding: 50px 50px;
background-color: #171717;
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;
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.faixa9 {
padding: 6em;
}
.texto {
display: flex;
flex-direction: column;
}
.titulo {
padding-bottom: 1em;
font-family: font1;
color: #666666;
}
.subtitulo {
padding-bottom: 2em;
font: 2.5em font1;
}
.caixa {
display: flex;
flex-direction: row;
}
.box {
background-color: #f5f6fa;
width: 30%;
padding: 2em;
border-radius: 5%;
margin: 15px;
}
.conteudo {
padding-top: 2em;
padding-bottom: 1em;
font-family: font3;
width: 96%;
}
.autor {
padding-bottom: 1em;
font-weight: bold;
font-family: font3;
}
.empresa img {
width: 25%;
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.faixa10{
display: flex;
flex-direction: row;
padding: 6.5em;
background-color: #ee2e5d;
}
.f10-parte1{
padding-right: 14em;
}
.conteudo-10{
width: 433px;
font: 1em font3;
color: #FFFFFF;
}
.f10-imagem img{
width: 383px;
}
.f10-titulo {
color: white;
font: 2.5em font1;
padding-bottom: 1em;
}
.f10-subtitulo{
font: 1em font1;
color: #e3e4eb;
}
.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: 390px;
height: 40px;
box-sizing: border-box;
display: flex;
color: black;
border-style: solid;
border-color: #0000;
background-color: #f5f6fa;
}
.f11_pergunta1 {
margin: 0px 10px 0px 0px;
}
.f11_pergunta2 {
margin: 0px 0px 0px 10px;
}
.f11_form3 {
font: 0.9em font3;
color: #2E2D33;
display: flex;
flex-direction: row;
padding: 20px;
}
.f11_form3 input {
width: 255px;
height: 40px;
box-sizing: border-box;
display: flex;
color: black;
border-style: solid;
border-color: #0000;
background-color: #f5f6fa;
}
.f11_form3 select {
width: 255px;
height: 40px;
box-sizing: border-box;
display: flex;
color: black;
border-style: solid;
border-color: #0000;
background-color: #f5f6fa;
}
.f11_pergunta3 {
margin: 0px 10px 0px 0px;
}
.f11_pergunta4 {
margin: 0px 10px 0px 10px;
}
.f11_pergunta5 {
margin: 0px 10px 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;
}
.faixa-12 {
}
.box-12 {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: rgb(46 45 51);
padding-top: 5%;
padding-bottom: 5%;
}
.logotipo-12 {
margin-left: 220px;
}
.redes-sociais-12 {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 85px;
}
.logotipo-rs-12 {
margin-left: 5px;
margin-right: 5px;
}
.logotipo-rs-12 img {
height: 30px;
}
.suporte-12 {
display: flex;
flex-direction: column;
margin-right: 220px;
}
.conteudo-12 {
color: #ffffff;
font-family: font3;
font-size: 16px;
text-align: center;
line-height: 28px;
}
.diferente-12 {
color: #ffffff;
font-family: font4;
font-size: 12px;
text-align: center;
line-height: 28px;
}
````````
### Script COMUM CSS
`````html=
* { box-sizing: border-box; }
body { margin: 0px; }
.container {
height: 400px;
}
@font-face {
font-family: font1;
src: url("../../assets/fonts/font1.woff");
}
@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.woff2");
}
``````
{"metaMigratedAt":"2023-06-16T02:52:33.514Z","metaMigratedFrom":"Content","title":"SESSION ONE | LINGUAGEM DE PROGRAMÇÃO","breaks":true,"contributors":"[{\"id\":\"ddf4ea40-fb01-4dc1-b147-92a7051a20c0\",\"add\":23140,\"del\":0}]"}