# Session Three: It's always time to restart | Web
autor : Isabela Silva Sousa
[toc]
## HTML
> 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="faixa-1.css" />
<link rel="stylesheet" href="faixa-2.css" />
<link rel="stylesheet" href="faixa-3.css" />
<link rel="stylesheet" href="faixa-4.css" />
<link rel="stylesheet" href="faixa-5.css" />
<link rel="stylesheet" href="faixa-6.css" />
<link rel="stylesheet" href="faixa-7.css" />
<link rel="stylesheet" href="faixa-8.css" />
<link rel="stylesheet" href="faixa-9.css" />
<link rel="stylesheet" href="faixa-10.css" />
<link rel="stylesheet" href="faixa-11.css" />
<link rel="stylesheet" href="faixa-12.css" />
<title>Warren</title>
</head>
<body>
<div class="container-warren">
<div class="faixa-1">
<div class="cabecalho-f1">
<div class="f1-logo">
<img src="../../assets/images/logo-f1.webp" alt="logo_warren" />
</div>
</div>
<div class="centro-f1">
<div class="texto-f1">
Educação <br />Financeira para <br />seus colaboradores
</div>
<div class="botao-f1"><button>AGENDE UMA CONVERSA</button></div>
</div>
</div>
<div class="faixa-2">
<div class="box1-f2">
<div class="titulo-f2">QUEM SOMOS</div>
<div class="subtitulo-f2">
Levamos educação financeira para os mais diversos momentos de vida
do colaborador e da empresa
</div>
</div>
<div class="box2-f1">
<div class="texto-f2">
Somos uma empresa do Mercado Financeiro com profissionais
capacitados e certificados para trazer conteúdos para todos os
momentos financeiros das pessoas.<br /><br />
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.<br /><br />
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-subtitulo">O QUE FAZEMOS</div>
<div class="f3-titulo">Nossos serviços</div>
<div class="f3-lista">
<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/warren-f3.webp"
alt="o-que-fazemos-na-warren"
/>
</div>
</div>
<div class="faixa-4">
<div class="f4-box1">
<div class="f4-subtitulo">PARA QUEM</div>
<div class="f4-titulo">Empresas que já compreenderam:</div>
<div class="f4-titulo2">
o bem-estar do colaborador é investimento
</div>
</div>
<div class="f4-box2">
<div class="f4-text">
Entendemos que problemas financeiros podem impactar profundamente na
vida do colaborador.<br /><br />
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="faixa-5">
<div class="f5-imagem"></div>
<div class="f5-text">
83% dos profissionais de RH afirmam que o estresse<br />
financeiro prejudica o desempenho dos colaboradores.
</div>
<div class="f5-nome">Society for Human Resources Management</div>
</div>
<div class="faixa-6">
<div class="f6-faixa1">
<div class="f6-box1">
<div class="f6-titulo1">Organização Financeira</div>
</div>
<div class="f6-box2">
<div class="f6-titulo2">Planejamento Financeiro</div>
</div>
</div>
<div class="f6-faixa2">
<div class="f6-box3">
<div class="f6-titulo3">Investimentos</div>
</div>
<div class="f6-box4">
<div class="f6-titulo4">Cenário Macroeconômico</div>
</div>
</div>
</div>
<div class="faixa-7">
<div class="f7-faixa1">
<div class="f7-subtitulo">QUEM FAZ PARTE DESTE MOVIMENTO</div>
<div class="f7-titulo">
<span class="f7-preto">Mais de </span
><span class="f7-vermelho"
>100 empresas<br />
e 20 mil colaboradores</span
><span class="f7-preto"> impactados</span>
</div>
</div>
<div class="f7-faixa2">
<div class="f7-f1">
<div class="f7-logo_hospital">
<img
src="../../assets/images/hospital-f7.webp"
alt="Hospital-Moinho-dos-Ventos"
/>
</div>
<div class="f7-vivo">
<img src="../../assets/images/vivo_logo-f7.webp" alt="Vivo" />
</div>
<div class="f7-piccadilly">
<img
src="../../assets/images/piccadilly-logo-f7.webp"
alt="Piccadilly"
/>
</div>
<div class="f7-loreal">
<img
src="../../assets/images/loreal-logo-f7.webp"
alt="L'óreal"
/>
</div>
</div>
<div class="f7-f2">
<div class="f7-mrv">
<img src="../../assets/images/MRV-logo-f7.webp" alt="MRV" />
</div>
<div class="f7-leroy_merlin">
<img
src="../../assets/images/leroy-merlin-logo-f7.webp"
alt="Leroy Merlin"
/>
</div>
<div class="f7-sap">
<img src="../../assets/images/sap-logo-f7.webp" alt="SAP" />
</div>
</div>
</div>
</div>
<div class="faixa-8">
<div class="f8-botao"><button>AGENDE UMA CONVERSA</button></div>
</div>
<div class="faixa-9">
<div class="f9-faixa1">
<div class="f9-subtitulo">DEPOIMENTOS</div>
<div class="f9-titulo">O que dizem sobre nós</div>
</div>
<div class="f9-faixa2">
<div class="box">
<div class="f9-aspas">
<img src="../../assets/images/aspas-f9.webp" alt="Aspas" />
</div>
<div class="f9-texto">
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-nome">Stephany Lopes</div>
<div class="f9-imagem">
<img
src="../../assets/images/neogrid-logo-f9.webp"
alt="Neogrid"
/>
</div>
</div>
<div class="box">
<div class="f9-aspas">
<img src="../../assets/images/aspas-f9.webp" alt="Aspas" />
</div>
<div class="f9-texto">
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-nome">Emily</div>
<div class="f9-imagem">
<img src="../../assets/images/asaas-logo-f9.webp" alt="Asaas" />
</div>
</div>
<div class="box">
<div class="f9-aspas">
<img src="../../assets/images/aspas-f9.webp" alt="Aspas" />
</div>
<div class="f9-texto">
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-nome">Cícero</div>
<div class="f9-imagem">
<img
src="../../assets/images/conta-azul-logo-f9.webp"
alt="ContaAzul"
/>
</div>
</div>
</div>
</div>
<div class="faixa-10">
<div class="f10-box1">
<div class="f10-sub">QUEM SOMOS</div>
<div class="f10-titulo">Sobre a Warren</div>
<div class="f10-texto">
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-box2">
<img
src="../../assets/images/celular-f10.webp"
alt="Celular om a tela aberta na própria tela da warren"
/>
</div>
</div>
<div class="faixa-11">
<div class="f11-faixa1">
<div class="f11-titulo">Agende uma conversa</div>
</div>
<div class="f11-formulario">
<div class="f11-texto">
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-nome">Nome*</div>
<div class="f11-nome1"></div>
<div class="f11-juntos1">
<div class="f11-2">
<div class="f11-email">E-mail*</div>
<div class="f11-email1"></div>
</div>
<div class="f11-3">
<div class="f11-telefone">Telefone*</div>
<div class="f11-telefone1"></div>
</div>
</div>
<div class="f11-juntos2">
<div class="f11-3">
<div class="f11-cargo">Cargo*</div>
<div class="f11-cargo1"></div>
</div>
<div class="f11-3">
<div class="f11-empresa">Empresa*</div>
<div class="f11-empresa1"></div>
</div>
<div class="f11-3">
<div class="f11-quantidade">Quantidade de funcionários*</div>
<div class="f11-quantidade1">Selecione</div>
</div>
</div>
<div class="f11-mensagem">Deixe sua mensagem</div>
<div class="f11-mensagem1"></div>
</div>
<div class="f11-botao"><button>ENVIAR</button></div>
</div>
<div class="faixa-12">
<div class="f12-box1">
<img
src="../../assets/images/Wrn_logo-Header_LP-f12.webp"
alt="logo_warren"
/>
</div>
<div class="f12-box2">
<div class="f12-youtube">
<img
src="../../assets/images/icon-youtube-f12.webp"
alt="Youtube"
/>
</div>
<div class="f12-insta">
<img
src="../../assets/images/icon-instagram-f12.webp"
alt="Instagram"
/>
</div>
<div class="f12-face">
<img
src="../../assets/images/icon-facebook-f12.webp"
alt="Facebook"
/>
</div>
<div class="f12-twitter">
<img src="../../assets/images/icon-twitter-12.webp" alt="Twitter" />
</div>
</div>
<div class="f12-box3">
Tem alguma dúvida?<br />
Mande um email para <br />meajuda@warrenbrasil.com.br <br />
<div class="f12-cnpj">CNPJ: 24.176.946/0001-71</div>
</div>
</div>
</div>
</body>
</html>
```
## CSS
- **FONTE CSS**
```
@font-face {
font-family: "Source Sans Pro", Helvetica, Arial, Sans-Serif, sans-serif;
src: url(Montserrat-Bold.woff);
}
@font-face {
font-family: font-2;
src: url(font-1.woff);
}
@font-face {
font-family: font-3;
src: url(font-2.woff);
}
@font-face {
font-family: font-4;
src: url(font4.woff2);
}
```
- **FAIXA 1**
> index.css
```css=
body {
margin: 0px;
}
.faixa-1 {
background-image: url("../../assets/images/background-warren-f1.webp");
background-size: cover;
background-attachment: fixed;
height: 99vh;
color: white;
}
.f1-logo {
margin: 0px 0px 0px 34px;
padding-top: 18px;
}
.centro-f1 {
padding: 0px 120px 120px 140px;
}
.texto-f1 {
color: #ffffff;
font-size: 50px;
font-weight: bold;
line-height: 1;
margin: 110px 0px 33.5px;
}
.botao-f1 button {
color: #ffffff;
font-size: 16px;
font-weight: bold;
background-color: #ee2e5d;
border: 0px;
border-radius: 50px;
padding: 0px 0px;
height: 69px;
width: 261px;
}
```
- **FAIXA 2**
> index.css
```css=
body {
margin: 0px;
}
.faixa-2 {
background-color: #fff;
display: flex;
flex-direction: row;
padding: 100px 150px;
}
.box1-f2 {
width: 470px;
font-weight: bold;
}
.titulo-f2 {
color: #666666;
font-size: 16px;
}
.subtitulo-f2 {
color: #171717;
font-size: 40px;
line-height: 1;
margin: 0px 0px 33px;
width: 390px;
}
.box2-f2 {
padding: 43px 0px 0px;
}
.texto-f2 {
color: #171717;
font-size: 16px;
padding-top: 40px;
width: 420px;
}
```
- **FAIXA 3**
> index.css
```css=
body {
margin: 0px;
}
.faixa-3 {
display: flex;
flex-direction: row;
background-color: #f5f6fa;
padding: 134px 120px;
height: 443px;
}
.f3-box {
padding: 0px 0px 52px;
width: 540px;
}
.f3-subtitulo {
color: #666666;
font-size: 16px;
font-weight: bold;
padding-left: 20px;
}
.f3-titulo {
color: #171717;
font-size: 40px;
font-weight: bold;
padding-left: 20px;
margin: 0px 0px 33px;
}
.f3-lista {
color: #2e2d33;
font-size: 16px;
line-height: 3;
}
.f3-imagem img {
width: 526px;
height: 331px;
}
```
- **FAIXA 4**
> index.css
```css=
body {
margin: 0px;
}
.faixa-4 {
background-color: #171717;
display: flex;
flex-direction: row;
padding: 134px 134px;
}
.f4-box1 {
width: 500px;
font-weight: bold;
}
.f4-subtitulo {
color: #666666;
font-size: 16px;
margin: 0px 0px 5px;
width: 335px;
}
.f4-titulo {
color: #ee2e5d;
font-size: 40px;
width: 335px;
}
.f4-titulo2 {
color: #ffffff;
font-size: 40px;
width: 335px;
}
.f4-box2 {
width: 328px;
}
.f4-text {
color: #ffffff;
font-size: 16px;
padding: 34px 0px 0px;
width: 328px;
}
```
- **FAIXA 5**
> index.css
```css=
body {
margin: 0px;
}
.faixa-5 {
background-color: #000000;
padding: 67px 0px;
text-align: center !important;
height: 206px;
}
.f5-text {
color: #ffffff;
font-size: 20px;
background-image: url("../../assets/images/aspas-f5.webp");
background-repeat: no-repeat;
background-position: 34.5% 60%;
padding: 52px 0px 0px;
}
.f5-nome {
color: #ffffff;
font-size: 16px;
margin-top: 30px;
}
```
- **FAIXA 6**
> index.css
```css=
body {
margin: 0px;
background-color: #000000;
font-family: "Source Sans Pro", Helvetica, Arial, Sans-Serif, sans-serif;
}
.faixa-6 {
font-weight: bold;
background-color: #171717;
padding: 115px 134px 67px;
background-image: url("../../assets/images/background-palestra-f6.webp");
background-size: cover;
background-attachment: fixed;
max-height: 362px;
height: 100vh;
}
.f6-faixa1 {
display: flex;
flex-direction: row;
margin-left: 17%;
}
.f6-box1 {
background-image: url("../../assets/images/organizacao-f6.webp");
background-repeat: no-repeat;
background-position: 0.1% 10%;
}
.f6-titulo1 {
color: #ffffff;
font-size: 27.5px;
width: 253px;
padding: 30px 0px 50px 88px;
margin-left: 40px;
}
.f6-box2 {
background-image: url("../../assets/images/planejamento-f6.webp");
background-repeat: no-repeat;
background-position: 0.1% 10%;
}
.f6-titulo2 {
color: #ffffff;
font-size: 27.5px;
width: 253px;
padding: 30px 0px 50px 88px;
margin-left: 40px;
}
.f6-faixa2 {
display: flex;
flex-direction: row;
margin-left: 17%;
}
.f6-box3 {
background-image: url("../../assets/images/investimento-f6.webp");
background-repeat: no-repeat;
background-position: 0.1% 10%;
}
.f6-titulo3 {
color: #ffffff;
font-size: 27.5px;
width: 253px;
padding: 30px 0px 70px 88px;
margin-left: 40px;
margin-top: 30px;
}
.f6-box4 {
background-image: url("../../assets/images/cenario-macroeconomico-f6.webp");
background-repeat: no-repeat;
background-position: 0.1% 10%;
}
.f6-titulo4 {
color: #ffffff;
font-size: 27.5px;
width: 253px;
padding: 30px 0px 70px 88px;
margin-left: 40px;
}
```
- **FAIXA 7**
> index.css
```css=
body {
margin: 0px;
}
.faixa-7 {
padding: 120px 134px 67px;
background-color: #f5f6fa;
}
.f7-subtitulo {
color: #666666;
font-size: 16px;
font-weight: bold;
}
.f7-titulo {
margin: 0px 0px 33px;
font-weight: bold;
}
.f7-preto {
color: #171717;
font-size: 40px;
}
.f7-vermelho {
color: #ee2e5d;
font-size: 40px;
}
.f7-faixa2 {
padding: 54px 0px 108px;
}
.f7-f1 {
display: flex;
flex-direction: row;
}
.f7-logo_hospital img {
margin: 80px 36px 0px;
height: 70px;
width: 176px;
}
.f7-vivo img {
margin: 80px 73px 0px;
height: 40px;
width: 103px;
}
.f7-piccadilly img {
margin: 80px 51px 0px;
height: 14px;
width: 147px;
}
.f7-loreal img {
margin: 80px 73px 0px;
height: 19px;
width: 103px;
}
.f7-f2 {
display: flex;
flex-direction: row;
padding-left: 23%;
}
.f7-mrv img {
margin: 80px 15px 0px 32px;
height: 36px;
width: 125px;
}
.f7-leroy_merlin img {
margin: 80px 26px 0px 53px;
height: 61px;
width: 103px;
}
.f7-sap img {
margin: 80px 26px 0px 53px;
height: 49px;
width: 103px;
}
```
- **FAIXA 8**
> index.css
```css=
body {
margin: 0px;
}
.faixa-8 {
display: flex;
flex-direction: row;
background-color: #171717;
padding: 20px 134px 67px 134px;
}
.f8-botao button {
color: #ffffff;
font-size: 16px;
font-weight: bold;
background-color: #ee2e5d;
border: 0px;
border-radius: 50px;
padding: 0px 0px;
height: 69px;
width: 261px;
margin-top: 40px;
margin-left: 140%;
margin-right: auto;
width: 17em;
}
```
- **FAIXA 9**
> index.css
```css=
.faixa-9 {
padding: 130px 134px 134px 134px;
background-color: #ffffff;
}
.f9-subtitulo {
color: #666666;
font-size: 16px;
font-weight: bold;
margin: 0px 0px 5px;
}
.f9-titulo {
color: #171717;
font-size: 40px;
font-weight: bold;
margin: 0px 0px 33px;
}
.f9-faixa2 {
display: flex;
flex-direction: row;
padding: 54px 0px 0px;
}
.box {
background-color: #f5f6fa;
padding: 34px;
border-radius: 10px;
margin-left: 25px;
height: 310px;
width: 348px;
}
.f9-texto {
color: #2e2d33;
font-size: 15px;
margin-bottom: 20px;
}
.f9-nome {
color: #2e2d33;
font-size: 16px;
font-weight: bold;
margin-bottom: 30px;
}
.f9-imagem img {
width: 70px;
height: 42px;
}
```
- **FAIXA 10**
> index.css
```css=
body {
margin: 0px;
}
.faixa-10 {
display: flex;
flex-direction: row;
background-color: #ee2e5d;
padding: 138px 140px 67px;
}
.f10-sub {
color: #e3e4eb;
font-size: 16px;
font-weight: bold;
padding: 0px 0px 5px;
}
.f10-titulo {
color: #ffffff;
font-size: 40px;
font-weight: bold;
margin: 0px 0px 33px;
}
.f10-texto {
color: #ffffff;
font-size: 16px;
}
.f10-box2 img {
margin: 0px 117px 0px 117px;
width: 383px;
height: 590px;
}
```
- **FAIXA 11**
> index.css
```css=
.faixa-11 {
background-color: white;
padding: 108px 0px;
text-align: center !important;
}
.f11-faixa1 {
text-align: center !important;
}
.f11-titulo {
color: #171717;
font-size: 40px;
font-weight: bold;
margin: 0px 0px 33px 27px;
}
.f11-formulario {
box-sizing: inherit;
text-align: center !important;
padding-left: 25%;
}
.f11-texto {
color: #2e2d33;
font-size: 16px;
line-height: 1.8;
padding: 20px;
width: 670px;
}
.f11-nome {
color: #2e2d33;
font-size: 14px;
text-align: left !important;
margin: 0px 0px 2px;
}
.f11-nome1 {
background-color: #f5f6fa;
text-align: left !important;
border: 1px solid transparent !important;
padding: 8px 15px;
margin: 0px 0px 10px;
width: 650px;
height: 20px;
}
.f11-juntos1 {
display: flex;
flex-direction: row;
}
.f11-email {
color: #2e2d33;
font-size: 14px;
text-align: left !important;
margin: 0px 0px 2px;
}
.f11-email1 {
background-color: #f5f6fa;
text-align: left !important;
border: 1px solid transparent !important;
padding: 8px 15px;
margin: 0px 20px 15px 0px;
width: 295px;
height: 20px;
}
.f11-telefone {
color: #2e2d33;
font-size: 14px;
text-align: left !important;
margin: 0px 0px 2px;
padding-left: 12px;
}
.f11-telefone1 {
background-color: #f5f6fa;
text-align: left !important;
border: 1px solid transparent !important;
padding: 8px 15px;
margin: 0px 10px 15px;
width: 295px;
height: 20px;
}
.f11-juntos2 {
display: flex;
flex-direction: row;
}
.f11-cargo {
color: #2e2d33;
font-size: 14px;
text-align: left !important;
margin: 0px 0px 2px;
}
.f11-cargo1 {
background-color: #f5f6fa;
text-align: left !important;
border: 1px solid transparent !important;
padding: 8px 15px;
margin: 0px 20px 15px 0px;
width: 176px;
height: 20px;
}
.f11-empresa {
color: #2e2d33;
font-size: 14px;
text-align: left !important;
margin: 0px 0px 2px;
padding-left: 12px;
}
.f11-empresa1 {
background-color: #f5f6fa;
text-align: left !important;
border: 1px solid transparent !important;
padding: 8px 15px;
margin: 0px 20px 15px 10px;
width: 176px;
height: 20px;
}
.f11-quantidade {
color: #2e2d33;
font-size: 14px;
text-align: left !important;
margin: 0px 0px 2px;
padding-left: 8px;
}
.f11-quantidade1 {
color: #2e2d33;
font-size: 16px;
text-align: left !important;
background-color: #f5f6fa;
text-align: left !important;
border: 1px solid transparent !important;
padding: 8px 15px;
margin: 0px 0px 15px 10px;
width: 176px;
height: 20px;
}
.f11-mensagem {
color: #2e2d33;
font-size: 14px;
text-align: left !important;
margin: 0px 0px 2px;
}
.f11-mensagem1 {
background-color: #f5f6fa;
text-align: left !important;
border: 1px solid transparent !important;
padding: 8px 15px;
margin: 0px 0px 15px;
width: 650px;
height: 82px;
}
.f11-botao button {
color: #ffffff;
font-size: 16px;
font-weight: bold;
background-color: #ee2e5d;
border: 0px;
border-radius: 50px;
padding: 0px 0px;
height: 69px;
width: 160px;
}
```
- **FAIXA 12**
> index.css
```css=
body {
margin: 0px;
font-family: "Source Sans Pro", Helvetica, Arial, Sans-Serif, sans-serif;
}
.faixa-12 {
background-color: rgb(46 45 51);
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 54px 108px;
height: 114px;
}
.f12-box1 img {
margin: 20px 110px 20px 70px;
}
.f12-box2 {
display: flex;
flex-direction: row;
}
.f12-box2 img {
margin: 20px 5px;
}
.f12-box3 {
color: #ffffff;
font-size: 14px;
line-height: 1.8;
text-align: center;
width: 341px;
}
.f12-cnpj {
color: #ffffff;
font-size: 11px;
line-height: 2.3;
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
