# Session Three: It's always time to restart
Cauê Freitas Barreto INFOB 05
[toc]
## Faixa 1
### 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">
<link rel="stylesheet" href="faixa1.css" />
<link rel="stylesheet" href="../comum/comum.css" />
<title></title>
</head>
<body>
<div class="conteiner">
<div class="faixa-1">
<img src= "../../assets/images/logofaixa1.webp">
<div class="coteudo">
<div class="texto">
Educação Financeira para seus colaboradores
</div>
<br>
<div class="faixa1-botao">
<a href="#"> AGENDE UMA CONVERSA </a>
</div>
</div>
</div>
</body>
</html>
````
### CSS
````css=
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.conteiner {
background-image: url("../../assets/images/fundo.png");
background-size: 100% 100%;
padding: 1.2em 2.5em;
background-attachment: fixed;
height: 100vh;
}
.texto {
width: 8.5em;
font: 3.5em Font3;
color: #ffffff;
line-height: 1em;
margin: 120px 0px 33.5px 120px;
}
.faixa1-botao a {
font-family: Font3;
color: white;
background-color: #ee2e5d;
border-radius: 25px;
padding: 20px 40px;
text-decoration: none;
margin: 120px 0px 33.5px 120px;
}
.conteudo {
display: flex;
flex-direction: column;
width: 450px;
margin-right: 80px;
}
.faixa-1 {
}
````
## Faixa 2
### HTML
````html=
<!DOCTYPE html>
<html lang="en">
<head>
<title>Faixa 2</title>
<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="../comum/comum.css" />
<link rel="stylesheet" href="../home/faixa2.css" />
</head>
<body>
<div class="faixa">
<div class="faixa2-txts">
<div class="texto1">QUEM SOMOS</div>
<div class="texto2">
Levamos educação financeira para os mais diversos momentos de vida do
colaborador <br> e da empresa
</div>
</div>
<div class="texto3">
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>
</body>
</html>
````
### CSS
````css=
.faixa {
padding: 5em 0em;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.faixa2-txts {
width: 36em;
display: flex;
flex-direction: column;
margin-right: 3em;
}
.texto1 {
font-family: Font1;
font-size: 1em;
font-weight: bold;
color: #666666;
}
.texto2 {
font-family: Font3;
font-size: 2.8em;
line-height: 1em;
}
.texto3 {
width: 28em;
font-family: Font2;
font-size: 1.1em;
}
````
## Faixa 3
### 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" />
<link rel="stylesheet" href="../comum/comum.css" />
<link rel="stylesheet" href="../home/faixa3.css" />
<title>Faixa3 Warren</title>
</head>
<body>
<div class="faixa3">
<div class="f3-conteudo-container">
<div class="f3-textos">
<div class="texto1">O QUE FAZEMOS</div>
<div class="texto2">Nossos serviços</div>
<div class="topicos">
<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>
</div>
</div>
<div class="imagem">
<img src="../../assets/images/img fxa3.webp" width="526" />
</div>
</div>
</div>
</body>
</html>
````
### CSS
````css=
body {
margin: 0em;
}
.faixa3 {
display: flex;
flex-direction: column;
padding: 10em 8em;
background-color: #f5f6fa;
}
.f3-conteudo-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.f3-textos {
padding: 0 10em 0 0;
}
.texto1 {
font-family: Font3;
color: #666666;
}
.texto2 {
font-family: Font3;
font-size: 40px;
}
li {
font-family: font1;
}
.topicos {
line-height: 2.5em;
}
.imagem {
flex-direction: row;
}
````
## Faixa 4
### 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" />
<link rel="stylesheet" href="../home/faixa4.css" />
<link rel="stylesheet" href="../comum/comum.css" />
<title>Faixa 4</title>
</head>
<body>
<div class="Faixa4">
<div class="f4-conteudo-container">
<div class="f4-textos">
<div class="Titulo">PARA QUEM</div>
<div class="Subtitulo1">Empresas que já compreenderam:</div>
<div class="Subtitulo2">
o bem-estar do colaborador é investimento
</div>
</div>
<div class="Texto1">
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>
</body>
</html>
````
### CSS
````css=
body {
margin: 0em;
}
.Faixa4 {
background-color: #171717;
}
.f4-conteudo-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 5em;
}
.f4-textos {
width: 24em;
padding: 0 18em 0 0;
line-height: 2.9em;
margin-left: -0.8em;
}
.Titulo {
font-family: Font3;
color: #666666;
font-size: 1.2em;
margin-bottom: 0.3em;
}
.Subtitulo1 {
color: #ee2e5d;
font-family: Font3;
font-size: 3em;
}
.Subtitulo2 {
color: #fff;
font-family: Font3;
font-size: 3em;
}
.Texto1 {
width: 22em;
color: #fff;
font-family: Font4;
font-size: 1em;
}
````
## Faixa 5
### 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" />
<link rel="stylesheet" href="faixa5.css" />
<link rel="stylesheet" href="../comum/comum.css" />
<title>Warren</title>
</head>
<body>
<div class="Faixa-5">
<div class="conteudo-f5">
<div class="texto1-f5">
83% dos profissionais de RH afirmam que o estresse financeiro
prejudica o desempenho dos colaboradores.
</div>
<div class="texto2-f5">Society for Human Resources Management</div>
</div>
</div>
</body>
</html>
````
### CSS
````css=
Body {
margin: 0px;
}
.Faixa-5 {
display: flex;
flex-direction: column;
text-align: center;
height: 20em;
background-color: black;
color: white;
}
.conteudo-f5 {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 8em;
font-family: Font1;
}
.texto1-f5 {
background-image: url("../../assets/images/quote_warren_educacao_company.webp");
background-repeat: no-repeat;
font-family: Font1;
font-size: 1.2em;
background-position: left-top;
width: 25em;
text-align: center;
margin-bottom: 2.5em;
padding-top: 0.8em;
}
````
## Faixa 6
### 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" />
<link rel="stylesheet" href="faixa6.css" />
<link rel="stylesheet" href="../comum/comum.css" />
<title>Warren</title>
</head>
<body>
<div class="faixa-6">
<div class="conteudo-f6">
<div class="l1-f6">
<div class="box1-f6">Organização Financeira</div>
<div class="box2-f6">Planejamento Financeiro</div>
</div>
<div class="l2-f6">
<div class="box3-f6">Investimentos</div>
<div class="box4-f6">Cenário Macroeconômico</div>
</div>
</div>
</div>
</body>
</html>
````
### CSS
````css=
body {
margin: 0px;
background-color: black;
color: white;
}
.faixa-6 {
background-image: url("../../assets/images/imgfundo-f6.webp");
height: 40em;
background-attachment: fixed;
}
.conteudo-f6 {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10em;
}
.l1-f6 {
display: flex;
flex-direction: row;
padding-bottom: 2.8em;
}
.box1-f6 {
font-size: 1.9em;
font-family: Font3;
width: 10em;
background-image: url("../../assets/images/organizacaofinaceira.webp");
background-repeat: no-repeat;
background-position: left-top;
font-size: 2em;
padding-left: 4em;
padding-bottom: 2em;
padding-top: 1em;
}
.box2-f6 {
font-size: 1.9em;
font-family: Font3;
width: 10em;
background-image: url("../../assets/images/planejamento-financeiro.webp");
background-repeat: no-repeat;
background-position: left-top;
padding-left: 4em;
padding-top: 1em;
}
.l2-f6 {
display: flex;
flex-direction: row;
}
.box3-f6 {
font-size: 1.9em;
font-family: Font3;
width: 10em;
background-image: url("../../assets/images/investimento.webp");
background-repeat: no-repeat;
background-position: left-top;
padding-left: 4em;
padding-top: 1em;
padding-bottom: 2.5em;
}
.box4-f6 {
font-size: 1.9em;
font-family: Font3;
width: 10em;
background-image: url("../../assets/images/cenario-macroeconomico.webp");
background-repeat: no-repeat;
padding-top: 1em;
padding-left: 4em;
}
````
## Faixa 7
### HTML
````html=
<html>
<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="faixa7.css" />
<link rel="stylesheet" href="../comum/comum.css" />
<title>Faixa 7 | Warren Educação</title>
</head>
<body>
<div class="faixa7">
<div class="descricao">
<div class="titulo">QUEM FAZ PARTE DESTE MOVIMENTO</div>
<div class="f7-subtitulo-conteiner1">
<div class="subtitulo1">Mais de</div>
<div class="subtitulo2">100 empresas</div>
</div>
<div class="f7-subtitulo-conteiner2">
<div class="subtitulo3">e 20 mil colaboradores</div>
<div class="subtitulo4">impactados</div>
</div>
</div>
<div class="logos">
<div class="f7-logo-container">
<div class="logo-f7">
<img src="../../assets/images/logo-moinhos.webp" width="170" />
</div>
<div class="logo-f7">
<img src="../../assets/images/vivo_logo.webp" width="100" />
</div>
<div class="logo-f7">
<img src="../../assets/images/picadilly-logo.webp" width="140" />
</div>
<div class="logo-f7">
<img src="../../assets/images/loreal-logo.webp" width="140" />
</div>
</div>
<div class="f7-logo-container">
<div class="logo-f7">
<img src="../../assets/images/MRV-logo.webp" width="100" />
</div>
<div class="logo-f7">
<img
src="../../assets/images/leroy-merlin-logo.webp"
width="100px"
/>
</div>
<div class="logo-f7">
<img src="../../assets/images/sap-logo.webp" width="100px" />
</div>
</div>
</div>
</div>
</body>
</html>
````
### CSS
````css=
.faixa7 {
display: flex;
flex-direction: column;
}
.descricao {
padding: 110px 0px 85px 120px;
}
.titulo {
font-family: Font3;
color: grey;
}
.logo-f7 img {
display: flex;
flex-direction: row;
padding: 4em;
}
.f7-logo-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.f7-subtitulo-conteiner1 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
}
.f7-subtitulo-conteiner2 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
}
.subtitulo1 {
font-family: Font3;
font-size: 2.5rem;
color: black;
}
.subtitulo4 {
font-family: Font3;
font-size: 2.5rem;
color: black;
}
.subtitulo2 {
font-family: Font3;
font-size: 2.5rem;
color: #ee2e5d;
}
.subtitulo3 {
font-family: Font3;
font-size: 2.5rem;
color: #ee2e5d;
}
````
## Faixa 8
### HTML
````html=
<html>
<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="faixa8.css" />
<link rel="stylesheet" href="../comum/comum.css" />
<title>Faixa 8 | Warren Educação</title>
</head>
<body>
<div class="conteiner-faixa8">
<div class="botao-f8">
<button>AGENDE UMA CONVERSA</button>
</div>
</div>
</body>
</html>
````
### CSS
````css=
body {
margin: 0em;
}
.conteiner-faixa8 {
background-color: black;
padding: 4em;
display: flex;
justify-content: center;
}
.botao-f8 button {
background-color: #ee2e5d;
padding: 1.4em 2.4em;
color: white;
border: none;
border-radius: 2em;
font-family: Font3;
font-size: 1.1em;
}
````
## Faixa 9
### HTML
````html=
<html>
<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="faixa9.css">
<link rel="stylesheet" href="../comum/comum.css">
</head>
<body>
<div class="corpo">
<div class="qm"> QUEM SOMOS </div>
<div class="sw"> Sobre a Warren</div>
<div class="texto1">
<p>Somos uma plataforma completa de investimentos com sede em Porto Alegre em outras 6 cidades. Temos mais de 100 mil clientes e 250 colaboradores.</p> </div>
<div class="texto2">
<p>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.</p> </div>
<img class="imagem" src="https://lp.warren.com.br/hs-fs/hubfs/device_sobre-a-warren-educacao-in-company.png?noresize&width=383&name=device_sobre-a-warren-educacao-in-company.png" width="400"/>
</div>
</body>
</head>
</html>
````
### CSS
````css=
.conteiner-faixa9 {
}
.titulo-f9 {
padding: 110px 0px 85px 120px;
display: flex;
flex-direction: column;
align-items: left;
}
.titulo {
font-family: Font3;
color: #666666;
}
.subtitulo {
font-family: Font3;
font-size: 3rem;
color: #171717;
}
.depoimentos-f9 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 10px;
}
.conteiner-depoimento-f9 {
width: 18.5em;
background-color: #f5f6fa;
padding: 2em;
}
.conteudo {
font-family: Font1;
color: #2e2d33;
padding: 1.5em 0em;
width: 17em;
}
.autor {
font-family: Font3;
color: #2e2d33;
}
.logo-empresa {
}
````
## Faixa 10
### 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" />
<link rel="stylesheet" href="../home/faixa10.css" />
<link rel="stylesheet" href="../comum/comum.css" />
<title>Faixa 10</title>
</head>
<body>
<div class="Faixa10">
<div class="faixa10-conteudo-container">
<div class="faixa10-texto">
<div class="Titulo">QUEM SOMOS</div>
<div class="Subtitulo">Sobre a Warren</div>
<div class="Texto1">
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="Imagemfaixa-10">
<img
src="../../assets/images/device_sobre-a-warren-educacao-in-company.webp"
width="400"/>
</div>
</div>
</body>
</html>
````
### CSS
````css=
body {
margin: 0em;
}
.Faixa10 {
background-color: #ee2e5d;
}
.faixa10-conteudo-container {
display: flex;
flex-direction: row;
justify-content: center;
padding: 8em 8em 5em;
}
.faixa10-texto {
width: 28em;
padding: 2em;
}
.Imagemfaixa-10 {
padding: 0em 7em;
}
.Titulo {
font-family: Font3;
font-size: 1.2em;
color: #e3e4eb;
}
.Subtitulo {
color: #ffff;
font-family: Font3;
font-size: 3em;
}
.Texto1 {
color: #ffff;
font-family: Font1;
flex-direction: row;
font-size: 1.1em;
padding: 2em 0em;
}
````
## Faixa 11
### HTML
````html=
<html>
<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="faixa11.css" />
<link rel="stylesheet" href="../comum/comum.css" />
</head>
<body>
<div class="faixa11-container">
<div class="f11-textos">
<div class="f11-titulo">Agende uma conversa</div>
<div class="f11-descricao">
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-forms-container">
<div class="forms-container">
<label>
Nome*
<input type="text" name="primeironome" required="required" />
</label>
</div>
<div class="forms-container">
<label class="forms">
Email*
<input type="text" name="email" required="required" />
</label>
<label>
Telefone*
<input type="text" name="telefone" required="required" />
</label>
</div>
<div class="forms-container">
<label class="forms">
Cargo*
<input type="text" name="cargo" required="required" />
</label>
<label class="forms">
Empresa*
<input type="text" name="empresa" required="required" />
</label>
<label>
Quantidade de funcionários*
<select>
<option select="selected" value=""> Selecione </option>
<option value="1"> 1 a 50 </option>
<option value="2"> 51 a 100 </option>
<option value="3"> 100 a 500 </option>
<option value="4"> 500 a 1000 </option>
<option value="5"> 1000 a 5000 </option>
</select>
</label>
</div>
<label>
Deixe sua mensagem
<textarea rows="5"> </textarea>
</label>
</div>
<div class="f11-botao">
<button type="submit">Enviar</button>
</div>
</div>
</body>
</html>
````
### CSS
````css=
.faixa11-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 5em 0em;
}
.f11-forms-container {
width: 700px;
}
.f11-textos {
text-align: center;
}
.f11-titulo {
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
font-weight: bold;
}
.f11-descricao {
width: 40em;
font-family: Font1;
padding: 2em 0em 1em;
color: #2e2d33;
}
.forms-container {
display: flex;
flex-direction: row;
}
label {
width: 100%;
font-family: Font1;
margin-bottom: 0.8em;
font-size: 0.9em;
color: #2e2d33;
}
input,
textarea,
select {
width: 100%;
background-color: #f5f6fa;
padding: 0.9em;
border: none;
}
select {
appearance: none;
}
.forms {
padding-right: 1.5em;
}
option {
background-color: #f5f6fa;
font-family: Font1;
}
.f11-botao button {
font-family: Font3;
padding: 1.4em 2.5em;
border: none;
background-color: #ee2e5d;
margin: 2em 0em;
color: white;
font-size: 1.1em;
border-radius: 2em;
cursor: pointer;
}
````
## Faixa 12
### HTML
````html=
<html>
<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="faixa12.css" />
<link rel="stylesheet" href="../comum/comum.css" />
</head>
<body>
<div class="f12-rodape-container">
<div class="rodape-container">
<div class="logo-rodape">
<img src="../../assets/images/logofaixa1.webp" />
</div>
<div class="f12-logos-container">
<div class="logo-f12">
<img src="../../assets/images/icon-youtube.webp" />
</div>
<div class="logo-f12">
<img src="../../assets/images/icon-instagram.webp" />
</div>
<div class="logo-f12">
<img src="../../assets/images/icon-facebook.webp" />
</div>
<div class="logo-f12">
<img src="../../assets/images/icon-twitter.webp" />
</div>
</div>
<div class="rodape-txt-container">
<div class="txt-rodape">Tem alguma dúvida?</div>
<div class="txt-rodape">Mande um email para</div>
<div class="txt-rodape">meajuda@warrenbrasil.com.br</div>
<div class="txt-rodape">CNPJ: 24.176.946/0001-71</div>
</div>
</div>
</div>
</body>
</html>
````
### CSS
````css=
body {
margin: 0em;
}
.f12-rodape-container {
background-color: #171717;
padding: 3em;
}
.rodape-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.f12-logos-container {
display: flex;
flex-direction: row;
padding: 0em 15em;
}
.rodape-txt-container {
display: flex;
flex-direction: column;
text-align: center;
}
.txt-rodape {
color: white;
font-family: Font1;
padding: 0.2em;
}
.logo-f12 {
padding: 0.3em;
}
````
{"metaMigratedAt":"2023-06-16T03:47:00.577Z","metaMigratedFrom":"Content","title":"Session Three: It's always time to restart","breaks":true,"contributors":"[{\"id\":\"4197b53a-4db5-46d1-a826-1e82b9d77550\",\"add\":23211,\"del\":0}]"}