# SESSION THREE: IT'S ALWAYS TIME TO RESTART | LINGUAGEM DE PROGRAMAÇÃO
Author: Igor Lima Charles
N°: 18
Grade: INFOA
LINK DO SITE COMPLETO: https://codesandbox.io/s/recriacao-warren-z8xsd?file=/src/pages/home/index.html
## 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" />
<link rel="stylesheet" href="../home/index.css" />
<link rel="stylesshet" href="index.css" />
<link rel="stylesheet" href="index-responsivo.css">
<link rel="stylesheet" href="../../assets/fonts/Fontes.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-conteudo">
<div class="f1-titulo">
<h1>Educação Financeira para seus colaboradores</h1>
</div>
<div class="f1-botao">
<button> AGENDE UMA CONVERSA </button>
</div>
</div>
</div>
<div class="faixa2">
<div class="f2-titulos">
<div class="f2-titulo">
<h1>QUEM SOMOS</h1>
</div>
<div class="f2-subtitulo">
<h1>
Levamos educação financeira para os mais diversos momentos de vida do colaborador
e da empresa
</h1>
</div>
</div>
<div class="f2-conteudo">
<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 class="faixa3">
<div class="f3-conteudo">
<div class="f3-txt">
<div class="f3-titulos">
<h1>O QUE FAZEMOS
<br>
<span> Nossos serviços </span> </h1>
</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/f3-o-que-fazemos-secao-warren-educacao-in-company.webp"
/>
</div>
</div>
</div>
<div class="faixa4">
<div class="f4-titulos">
<span>
<p> PARA QUEM </p>
<span style="color: #ee2e5d">Empresas que já compreenderam:</span>
<br>
<span style="color: white">o bem-estar do colaborador é investimento </span>
</span>
</div>
<div class="f4-paragrafo">
<p>
Entendemos que problemas financeiros podem impactar profundamente na
vida do colaborador.
<br />
<br />
<br />
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/f5-quote_warren_educacao_company.webp" />
83% dos profissionais de RH afirmam que o estresse financeiro prejudica o
desempenho dos colaboradores.
<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 class="f6-item-texto">
Organização <br />
Financeira
</div>
</div>
<div class="f6-item">
<img src="../../assets/images/f6-planejamento-financeiro.png" />
<div class="f6-item-texto">
Planejamento <br />
Financeiro
</div>
</div>
</div>
<div class="f6-itens">
<div class="f6-item">
<img src="../../assets/images/f6-investimento.png" />
<div class="f6-item-texto">
Investimentos
</div>
</div>
<div class="f6-item">
<img src="../../assets/images/f6-cenario-macroeconomico.png" />
<div class="f6-item-texto">
Cenário <br />
Macroeconômico
</div>
</div>
</div>
</div>
<div class="faixa7">
<div class="f7-titulos">
<div class="f7-titulo">
<h1>QUEM FAZ PARTE DESTE MOVIMENTO</h1>
</div>
<div class="f7-subtitulo">
<h2>
<span style="color: #171717;">Mais de</span>
<span style="color: #ee2e5d;">100 empresas<br />e 20 mil colabores</sapn>
<span style="color: #171717;">impactados</span>
</h2>
</div>
</div>
<div class="f7-participantes">
<div class="f7-participante">
<img src="../../assets/images/f7-logo-hospital-moinhos.webp" />
</div>
<div class="f7-participante">
<img src="../../assets/images/f7-vivo_logo.webp" />
</div>
<div class="f7-participante">
<img src="../../assets/images/f7-piccadilly-logo.webp" />
</div>
<div class="f7-participante">
<img src="../../assets/images/f7-loreal-logo.webp" />
</div>
</div>
<div class="f7-participantes">
<div class="f7-participante">
<img src="../../assets/images/f7-MRV-logo.webp" />
</div>
<div class="f7-participante">
<img src="../../assets/images/f7-leroy-merlin-logo.webp" />
</div>
<div class="f7-participante">
<img src="../../assets/images/f7-sap-logo.webp" />
</div>
</div>
</div>
<div class="faixa8">
<div class="f8-botao">
<button>AGENDE UMA CONVERSA</button>
</div>
</div>
<div class="faixa9">
<div class="f9-titulos">
<h1>DEPOIMENTOS
<br>
<span> O que dizem sobre nós</span></h1>
</div>
<div class="f9-feedbacks">
<div class="f9-quote">
<img
src="../../assets/images/f9-quote-warren-educacao-in-company.webp"
/>
<br />
<p>
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.
</p>
<br />
<span class="f9-autor-do-feedback">Stephany Lopes</span>
<br />
<br>
<img src="../../assets/images/f9-neogrid-logo.webp" />
</div>
<div class="f9-quote">
<img
src="../../assets/images/f9-quote-warren-educacao-in-company.webp"
/>
<br />
<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>
<br />
<span class="f9-autor-do-feedback">Emily</span>
<br>
<br />
<img src="../../assets/images/f9-asaas-logo.webp" />
</div>
<div class="f9-quote">
<img
src="../../assets/images/f9-quote-warren-educacao-in-company.webp"
/>
<br />
<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>
<br />
<br>
<span class="f9-autor-do-feedback">Cícero</span>
<br>
<br />
<img src="../../assets/images/f9-conta-azul-logo.webp" />
</div>
</div>
</div>
<div class="faixa10">
<div class="f10-textos">
<div class="f10-titulo">
<h1>QUEM SOMOS
<br>
<span>Sobre a Warren</span> </h1>
</div>
<div class="f10-paragrafo">
<p>
Somos uma plataforma completa de investimentos com sede em <br>
Porto Alegre em outras 6 cidades. Temos mais de 100 mil clientes
<br>
e 250 colaboradores.
<br>
<br>
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.
</p>
</div>
</div>
<div class="f10-imagem">
<img
src="../../assets/images/f10-device_sobre-a-warren-educacao-in-company.webp"
/>
</div>
</div>
<div class="faixa11">
<div class="f11-t-s">
<div class="f11-titulo">
<h1>Agende uma conversa</h1>
</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>
<div class="f11-formulario">
<form>
<div class="f11-nome">
Nome*
<br>
<input type="name">
</div>
<div class="f11-email-telefone">
<div class="f11-email">
E-mail*
<br>
<input type="email">
</div>
<div class="f1-telefone">
Telefone*
<br>
<input type="text">
</div>
</div>
<div class="f11-c-e-qtd">
<div class="f11-cargo">
Cargo*
<br>
<input type="text">
</div>
<div class="f11-empresa">
Empresa*
<br>
<input type="text">
</div>
<div class="f11-funcionarios">
Quantidade de funcionários*
<br>
<select name="Funcionarios" id="f11-funcionarios">
<option value="null">Selecione</option>
<option value="1_a_50">1 a 50</option>
<option value="51_a_100">51 a 100</option>
<option value="100_a_500">100 a 500</option>
<option value="500_a_1000">500 a 1000</option>
<option value="1000_a_5000">1000 a 5000</option>
</select>
</div>
</div>
<div class="f11-mensagem">
Deixe sua mensagem
<br>
<textarea name="mensagem" id="f11-mensagem"></textarea>
</div>
</form>
</div>
<div class="f11-botao">
<button> ENVIAR </button>
</div>
</div>
<div class="faixa12">
<div class="f12-logo">
<img src="../../assets/images/f12-Wrn_logo-Header_LP.webp" />
</div>
<div class="f12-redes-sociais">
<img src="../../assets/images/f12-icon-youtube.webp" />
<img src="../../assets/images/f12-icon-instagram.webp" />
<img src="../../assets/images/f12-icon-facebook.webp" />
<img src="../../assets/images/f12-icon-twitter.webp" />
</div>
<div class="f12-email">
<p>
Tem alguma dúvida?
<br>
Mande um email para
<br>
meajuda@warrenbrasil.com.br
<br>
CNPJ: 24.176.946/0001-71
</p>
</div>
</div>
</div>
</body>
</html>
```
## CSS — "NORMAL"
```css=
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%;
height: 100vh;
}
.f1-logo {
padding: 1em;
margin: 1em;
}
.f1-conteudo {
padding: 10%;
color: white;
}
.f1-titulo {
padding: 1em;
color: white;
font-size: 1.5em;
font-family: warren2;
font-weight: bold;
max-width: 50%;
}
.f1-botao button {
margin: 1.2em;
color: white;
padding: 1.5em;
border-radius: 2em;
background-color: #ee2e5d;
cursor: pointer;
text-decoration: none;
font-family: warren3;
border: none;
}
.faixa2 {
background-size: 100%;
display: flex;
flex-direction: row;
margin: 10%;
}
.f2-titulos {
letter-spacing: -1px;
font-weight: 700;
margin-right: 10%;
}
.f2-titulo h1 {
font: 1em warren3;
}
.f2-subtitulo h1 {
font: 2em warren2;
letter-spacing: -1px;
}
.f2-conteudo {
font: 1em warren1;
}
.faixa3 {
display: flex;
flex-direction: row;
background-color: #f5f6fa;
}
.f3-conteudo {
display: flex;
flex-direction: row;
margin: 10%;
}
.f3-titulos {
letter-spacing: -1px;
line-height: -1px;
}
.f3-titulos h1 {
font: 1em warren3;
color: #666666;
}
.f3-titulos span {
font: 2.5em warren2;
color: #000000;
padding-bottom: 1em;
}
.f3-listas {
font: 1em warren1;
line-height: 2.5em;
}
.f3-imagem img {
width: 32em;
height: 20em;
margin-left: 50%;
}
.faixa4 {
display: flex;
flex-direction: row;
background-color: #1f1f1f;
}
.f4-titulos {
display: flex;
flex-direction: column;
margin: 10%;
}
.f4-titulos p {
font-family: warren2;
font-size: 0.5em;
color: #666666;
}
.f4-titulos span {
font-family: warren3;
font-size: 1.7em;
}
.f4-paragrafo {
display: flex;
flex-direction: column;
margin: 12% 2%;
}
.f4-paragrafo p {
color: white;
font: 1em warren1;
}
.faixa5 {
background-color: #000000;
background-size: 100%;
}
.f5-quote {
margin-left: 15%;
color: white;
line-height: 1em;
text-align: center;
padding: 10% 20%;
font: 1em warren1;
}
.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%;
align-items: center;
}
.f6-item {
display: flex;
flex-direction: row;
align-items: center;
}
.f6-itens {
display: flex;
flex-direction: row;
margin: 5%;
padding: 2%;
}
.f6-item img {
background-image: cover;
background-attachment: fixed;
width: 10em;
}
.f6-item-texto {
display: block;
color: white;
font: 1.5em warren2;
margin-top: 2em;
}
.faixa7 {
margin: 0em;
padding: 0em;
background-color: #f5f6fa;
display: flex;
flex-direction: column;
}
.f7-titulos {
padding: 10% 10% 5%;
}
.f7-titulos h1 {
font: 1em warren3;
color: #666666;
}
.f7-titulos h2 {
font: 2.5em warren2;
}
.f7-participantes {
padding: 10% 10% 5%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.f7-participante {
display: flex;
flex-direction: row;
}
.f7-participante img {
width: 147px;
}
.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;
color: white;
background-color: #ee2e5d;
font: warren4 1em;
margin: 4%;
padding: 1.5em;
border-radius: 2em;
border: none;
cursor: pointer;
text-decoration: none;
}
.faixa9 {
display: flex;
flex-direction: column;
background-size: 100%;
}
.f9-titulos {
padding: 5% 10%;
}
.f9-titulos h1 {
font: 1em warren3;
color: #666666;
}
.f9-titulos span {
font: 2.7em warren3;
color: black;
}
.f9-feedbacks {
padding: 5% 10% 10%;
justify-content: space-evenly;
display: flex;
flex-direction: row;
}
.f9-quote {
margin: 0.5em;
padding: 1em;
background-color: #f5f6fa;
}
.f9-quote p {
text-align: left;
font: 1em warren1;
}
.f9-quote img {
width: 2.5em;
}
.f9-quote span {
font: 0.9em warren2;
}
.faixa10 {
display: flex;
flex-direction: row;
background-size: 100%;
background-color: #ee2e5d;
margin: 0em;
padding: 0em;
}
.f10-textos {
padding: 15%;
color: white;
}
.f10-titulo h1 {
font: 1em warren3;
color: #f5f6fa;
}
.f10-titulo span {
color: white;
}
.f10-titulo span {
font: 2.5em warren2;
}
.f10-textos p {
font: 1em warren1;
}
.f10-imagem img {
margin-top: 15%;
width: 24em;
}
.faixa11 {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
margin: 0em;
}
.f11-t-s {
text-align: center;
margin: 5%;
}
.f11-t-s h1 {
font: 3.1em warren3;
color: black;
}
.f11-t-s {
font: 1em warren1;
color: #666666;
line-height: 2.3em;
}
.f11-formulario {
display: flex;
flex-direction: column;
text-align: left;
font: 1em warren1;
}
.f11-nome,
.f11-mensagem {
display: flex;
flex-direction: column;
padding: 1.5em;
}
.f11-email-telefone,
.f11-c-e-qtd {
display: flex;
flex-direction: row;
padding: 1.5em;
}
.f11-email-telefone input {
width: 21em;
}
.f11-nome input {
width: 42em;
}
.f11-mensagem textarea {
width: 42em;
}
.f11-funcionarios select {
width: 12em;
font-family: warren1;
}
input {
background-color: #f5f6fa;
font: 1em Font1;
width: 15em;
height: 2em;
padding: 1em;
border: 1em;
border-bottom: 0.1em;
margin: 0.3em 0.2em;
outline: none;
resize: none;
}
textarea {
background-color: #f5f6fa;
font: 1em Font1;
width: 100%;
height: 100px;
padding: 1em;
border: 1em;
border-bottom: 1px;
margin: 0.3em 0.2em;
outline: none;
resize: none;
}
select {
background-color: #f5f6fa;
font: 1em Font1;
padding: 0.5em;
border: 1em;
border-bottom: 1px;
margin: 0.3em 0.2em;
outline: none;
resize: none;
}
.f11-botao {
margin-bottom: 10%;
}
.f11-botao button {
margin: 1em;
color: white;
padding: 1.5em;
border-radius: 2em;
background-color: #ee2e5d;
cursor: pointer;
text-decoration: none;
font: 1.2em warren3;
border: none;
}
.faixa12 {
display: flex;
flex-direction: row;
background-color: #1f1f1f;
justify-content: space-evenly;
padding: 5%;
align-items: center;
}
.f12-email {
text-align: center;
}
.f12-email p {
font: 1em warren1;
line-height: 1.5em;
color: white;
}
```
## CSS — RESPONSIVO
```css=
@media (max-width: 767px) {
body {
margin: 0em;
padding: 0em;
}
.faixa1,
.faixa2,
.faixa3,
.f3-conteudo,
.faixa4,
.faixa5,
.faixa6,
.faixa7,
.faixa8,
.faixa9,
.faixa10,
.faixa11,
.faixa12 {
display: flex;
flex-direction: column;
}
.faixa1:nth-child(1) {
display: flex;
flex-direction: column;
background-image: url("../../assets/images/f1-hero-warren-educacao-in-company-mobile.png");
background-attachment: fixed;
}
.f1-conteudo {
display: flex;
flex-direction: column;
padding: 1em;
margin: 1em;
}
.f1-titulo {
font-size: 1em;
padding: 1em;
}
.f1-botao button {
padding: 1em;
font-size: 1em;
}
.f2-titulos,
.f2-conteudo p {
display: flex;
flex-direction: column;
font: 1.2em;
}
.faixa3,
.f3-conteudo,
.f3-titulos h1,
.f3-listas,
.f3-imagem {
display: flex;
flex-direction: column;
font: 2em;
}
.f3-imagem img {
margin: 1em;
width: 100%;
}
.faixa4 {
display: flex;
flex-direction: column;
padding-top: 10%;
padding-bottom: 10%;
}
.f4-titulos,
.f4-paragrafo {
margin: 1em;
padding: 1.5em;
}
.f4-paragrafo p {
font: warren1 2.5em;
}
.faixa5 {
display: flex;
flex-direction: column;
}
.f5-quote img {
width: 7em;
padding: 1em;
position: absolute;
}
.f5-quote {
display: flex;
flex-direction: column;
margin: 1em;
padding: 1em;
font-size: 1.5em;
align-content: center;
}
.faixa6 {
display: flex;
flex-direction: column;
}
.f6-item {
display: flex;
flex-direction: column;
}
.f6-item img {
position: absolute;
}
.f6-itens {
display: flex;
flex-direction: column;
padding: 1em;
margin: 1em;
justify-content: space-evenly;
}
.f6-item-texto {
padding: 1em;
margin: 1em;
}
.faixa7 {
display: flex;
flex-direction: column;
}
.f7-participantes {
display: flex;
flex-direction: column;
justify-content: center;
}
.f7-participante {
display: flex;
flex-direction: column;
align-items: center;
margin: 1em;
padding: 1em;
}
.faixa8 {
align-content: center;
display: flex;
flex-direction: column;
}
.f8-botao {
display: flex;
flex-direction: column;
}
.f8-botao button {
display: flex;
flex-direction: column;
font-size: 1em;
}
.faixa9 {
display: flex;
flex-direction: column;
}
.f9-feedbacks {
display: flex;
flex-direction: column;
margin: 1em;
padding: 1.5em;
}
.f9-quote {
display: flex;
flex-direction: column;
width: 100%;
}
.f9-quote p {
display: flex;
flex-direction: column;
font-size: 1em;
}
.faixa10 {
display: flex;
flex-direction: column;
align-items: center;
}
.f10-textos {
text-align: left;
}
.f10-textos p {
display: flex;
flex-direction: column;
font-size: 1em;
}
.f10-imagem img {
display: flex;
flex-direction: column;
}
.faixa11 {
display: flex;
flex-direction: column;
}
.f11-t-s {
display: flex;
flex-direction: column;
font-size: 1em;
}
.f11-formulario,
.f11-nome,
.f11-email-telefone,
.f11-c-e-qtd,
.f11-mensagem {
display: flex;
flex-direction: column;
font-size: 1em;
margin: 0em;
}
.f11-email-telefone input {
width: 18em;
margin: 0em;
}
.f11-nome input {
width: 18em;
margin: 0em;
}
.f11-mensagem textarea {
width: 18em;
margin: 0em;
}
.f11-c-e-qtd input {
width: 18em;
margin: 0em;
}
.f11-funcionarios select {
width: 18em;
margin: 0em;
font-family: warren1;
}
.faixa12 {
display: flex;
flex-direction: column;
}
.f12-logo {
padding: 1em;
}
.f12-redes-sociais {
padding: 1em;
}
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
