# Session three | Ling.Prog | 2° bimestre
**Nome** Kevin Ribeiro de Andrade
**Número** 27
**Turma** INFO A
## HTML
```htmlembedded=
CODGIO 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="index.css" >
<title>Static Template</title>
</head>
<body>
<div class = "container">
<div class="f1">
<div class="cabecalho-1">
<div class="logo">
<img src=https://lp.warren.com.br/hs-fs/hubfs/warren-educacao-logo-white.png?width=200&name=warren-educacao-logo-white.png/> </div>
</div>
<div class="conteudo-1">
<div class="titulo-f1">
<h1>Educação
<br>
Financeira para
<br>
seus colaboradores
<br>
</h1>
</div>
<div class="botao-f1"> <a href="https://tableless.com.br/unidade-pixels-em-rem/"> Agende uma conversa </a>
</div>
</div>
</div>
<!-- faixa-2 -->
<div class="faixa-2">
<div class="conteudo-f2">
<div class="titulo-f2">QUEM SOMOS</div>
<div class="texto1-f2">Levamos educação financeira para os mais diversos momentos de vida do colaborador e da empresa
</div>
</div>
<div class="texto2-f2">
<div class="t2-f2"> uma empresa do Mercado Financeiro com profissionais capacitados e certificados para trazer conteúdos para todos os momentos financeiros das pessoas.</div>
<div class="t2-f2">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="t2-f2">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>
<!-- faixa-3 -->
<div class="faixa-3">
<div class="conteudo-1-f3">
<div class="titulo-conteudo-f3">O QUE FAZEMOS</div>
<div class="subtitulo-conteudo-f3">Nossos serviços</div>
<div class="listas-faixa-3">
<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="conteudo-2-f3"><img src="../../assets/images/galera.jpg"></div>
</div>
<!-- faixa-4 -->
<div class="faixa-4">
<div class="total-text">
<div class="text-pt1">
<div class="text-pequeno-f4">
PARA QUEM
</div>
<div class="texto-rosa">
<h1> Empresas que já compreenderam:<br><span> o bem-estar do<br> colaborador é <br> </span></h1>
</div>
</div>
</div>
<div class="text-small">
<div class="text1-f4">
Entendemos que problemas financeiros podem impactar profundamente na vida do colaborador.<P>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>
<!-- faixa-5 -->
<div class="faixa-5">
<div class="texto-f5">83% dos profissionais de RH afirmam que o estresse financeiro prejudica o desempenho dos colaboradores.</div>
<div class="subtexto-f5">Society for Human Resources Management</div>
</div>
<!-- faixa-6 -->
<div class="faixa-6">
<div class="itens">
<div class="item-cima">
<div class="item-1"> <p> Organização <br> Financeira </p> </div>
<div class="item-2"> <p> investimentos </p> </div>
</div>
<div class="item-baixo">
<div class="item-3"> <p> Planejamento <br> Financeiro </p> </div>
<div class="item-4"> <p> Cenário <br> Macroeconômico </p> </div>
</div>
</div>
</div>
<!-- faixa-7 -->
<div class="faixa-7">
<div class="parte-1">
<div class="text-1"> QUEM FAZ PARTE DESTE MOVIMENTO </div>
<div class="text-2"> Mais de <font color="#ee2e5d"> 100 empresas </font> </div>
<div class="text-3"> <font color="#ee2e5d"> e 20 mil colaboradores </font> impactados
</div>
</div>
<div class="parte-2">
<div class="marcas">
<div class="marcas-de-cima">
<div class="marca"> <img src="../../assets/images/moinha de vento - 1.JPG"></div>
<div class="marca"> <img src="../../assets/images/vivo - 2.JPG"></div>
<div class="marca"> <img src="../../assets/images/piccadilly - 3.JPG"></div>
<div class="marca"> <img src="../../assets/images/loreal - 4.JPG"></div>
</div>
<div class="marcas-de-baixo">
<div class="marca"> <img src="../../assets/images/MRV - 5.JPG"></div>
<div class="marca"> <img src="../../assets/images/leroy merlin - 6.JPG"></div>
<div class="marca"> <img src="../../assets/images/sap - 7.JPG"></div>
</div>
</div>
</div>
</div>
<!-- faixa-8 -->
<div class="faixa-8">
<div class="botao"><button class="botao-f8">AGENDE UMA CONVERSA</button></div>
</div>
<!-- faixa-9 -->
<div class="faixa-9">
<div class="textos-f9">
<div class="titulo-f9">DEPOIMENTOS</div>
<div class="subtitulo-f9">O que dizem sobre nós</div>
</div>
<div class="setdebox-f9">
<div class="box-f9">
<div><img src="https://lp.warren.com.br/hs-fs/hubfs/quote-warren-educacao-in-company.png?width=40&name=quote-warren-educacao-in-company.png"></div>
<div class="texto-box-f9">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-box-f9">Stephany Lopes</div>
<div class="img-final-box-f9"><img src="https://lp.warren.com.br/hs-fs/hubfs/neogrid-logo.png?noresize&width=70&name=neogrid-logo.png"></div>
</div>
<div class="box-f9">
<div><img src="https://lp.warren.com.br/hs-fs/hubfs/quote-warren-educacao-in-company.png?width=40&name=quote-warren-educacao-in-company.png"></div>
<div class="texto-box-f9">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-box-f9">Emily</div>
<div class="img-final-box-f9"><img src="https://lp.warren.com.br/hs-fs/hubfs/asaas-logo.png?noresize&width=70&name=asaas-logo.png"></div>
</div>
<div class="box-f9">
<div class="img-box-f9"><img src="https://lp.warren.com.br/hs-fs/hubfs/quote-warren-educacao-in-company.png?width=40&name=quote-warren-educacao-in-company.png"></div>
<div class="texto-box-f9">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-box-f9">Cícero</div>
<div class="img-final-box-f9"><img class="img-final-box-f9" src="https://lp.warren.com.br/hs-fs/hubfs/conta-azul-logo.png?noresize&width=70&name=conta-azul-logo.png"></div>
</div>
</div>
</div>
<!-- faixa-10 -->
<div class = "Faixa-10">
<div class = "Text-1">
<div class = "text-pequeno">
QUEM SOMOS
</div>
<div class = "title">
<h1>Sobre a Warren</h1>
</div>
<div class = "Conteudo">
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>
</div>
<div class="Conteudo-2-f10"> 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="img">
<img 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 "/>
</div>
</div>
<div class="faixa-11">
<div class="textos-f11">
<div class="titulo-f11">Agende uma conversa</div>
<div class="texto-f11">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="conteudo-f11">
<form>
<label for="nome">Nome*</label> <br>
<input type="text" id="nome">
<div class="email-telefone">
<label for="email">Email*</label> <br>
<input type="text" id="email">
<label for="telefone">Telefone*</label> <br>
<input type="text" id="telefone">
</div>
<div class="cargo-empresa-selecione">
<label for="cargo">Cargo*</label> <br>
<input type="text" id="cargo">
<label for="empresa">Empresa*</label> <br>
<input type="text" id="empresa">
<label for="selecione">Quantidade de funcionários*</label>
<select name="selecione" id="selecione">
<option value="selecione">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>
<label for="mensagem">Deixe sua mensagem</label> <br>
<textarea name="mensagem" id="mensagem" cols="80" rows="7"></textarea>
</form>
<div class="botao-f11"> <a href="https://tableless.com.br/unidade-pixels-em-rem/"> ENVIAR </a>
</div>
</div>
</div>
<div class = "faixa-12">
<div class = "rodape">
<div class = "logo"><img src = "https://lp.warren.com.br/hs-fs/hubfs/Wrn_logo-Header_LP.png?width=180&name=Wrn_logo-Header_LP.png"/>
</div>
<div class = "menu">
<div class = "menu-item"><img src = "https://lp.warren.com.br/hs-fs/hubfs/icon-youtube.png?width=45&name=icon-youtube.png"/></div>
<div class = "menu-item"><img src = "https://lp.warren.com.br/hs-fs/hubfs/icon-facebook.png?width=45&name=icon-facebook.png"/></div>
<div class = "menu-item"><img src = "https://lp.warren.com.br/hs-fs/hubfs/icon-twitter.png?width=45&name=icon-twitter.png"/></div>
</div>
<div class = "texto">
Tem alguma dúvida? <br> <br>
Mande um email para <br> <br>
meajuda@warrenbrasil.com.br <br> <br>
<p> CNPJ: 24.176.946/0001-71</p> <br>
</div>
</div>
</div>
</div>
</body>
</html>
```
## CSS
```css=
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
.container {
display: flex;
flex-direction: column;
margin: none;
}
.f1 {
display: flex;
flex-direction: column;
height: 50em;
background-image: url("../../assets/images/imagem-2.JPG");
background-size: 100%;
background-attachment: fixed;
height: 650px;
}
.logo {
margin-top: 25px;
margin-left: 25px;
}
.conteudo-1 {
margin-top: 85px;
margin-left: 145px;
color: white;
}
.titulo-f1 {
font-family: "Montserrat-bold", Helvetica, Sans-serif !important;
font-size: 1.5em;
color: white;
margin-top: 50px;
}
.botao-f1 a {
height: 95px;
width: 180px;
background-color: #ee2e5d;
border-radius: 100px;
color: white;
text-decoration: none;
font-family: "Source Sans Pro", sans-serif;
padding: 25px 40px;
line-height: 69px;
height: 69px;
font-weight: 700;
}
@media (max-width: 1024px) {
.container,
.f1,
.cabecalho-1,
.conteudo-1 {
justify-content: center;
align-items: center;
}
}
/* FAIXA-2 */
.faixa-2 {
display: flex;
flex-direction: row;
padding-top: 10%;
padding-bottom: 10%;
margin-left: 30px;
margin-right: 30px;
justify-content: center;
}
.titulo-f2 {
font-size: 1em;
font-family: "Source Sans Pro", Roboto, Sans-serif;
font-weight: bold;
color: #666666;
line-height: 28px;
}
.texto1-f2 {
font-family: "Montserrat-bold", Helvetica, Sans-serif !important;
font-size: 2.5rem;
font-weight: 700;
max-width: 450px;
line-height: 35px;
}
.texto2-f2 {
font-family: 'Source Sans Pro',Roboto,Sans-serif;
max-width: 400px;
margin-left: 100px;
}
.t2-f2 {
margin-bottom: 20px;
}
@media (max-width: 1024px) {
.faixa-2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.texto1-f2 {
margin-bottom: 50px;
}
.texto2-f2 {
margin-left: 0px;
justify-content: center;
}
}
/* FAIXA-3 */
.faixa-3 {
display: flex;
flex-direction: row;
background-color: #f5f6fa;
padding-bottom: 100px;
padding-top: 100px;
justify-content: space-between;
}
@media (max-width: 1024px) {
.faixa-3 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.conteudo-2-f3 img {
margin-left: 50px;
}
}
.conteudo-1-f3 {
margin: 50px 0px 50px 100px;
}
.titulo-conteudo-f3 {
font-family: "Source Sans Pro", Roboto, Sans-serif;
font-weight: bold;
font-size: 16px;
color: #666666;
margin-left: 20px;
}
.subtitulo-conteudo-f3 {
font-family: "Montserrat-bold", Helvetica, Sans-serif !important;
font-weight: 700;
font-size: 40px;
margin-left: 20px;
}
.listas-faixa-3 {
font-family: "Source Sans Pro", Roboto, Sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 40px;
color: #2e2d33;
margin-right: 100px;
}
.conteudo-2-f3 img {
width: 80%;
}
/* faixa-4*/
.faixa-4 {
display: flex;
flex-direction: row;
background-color: #1c1b1f;
}
.text-pt1 {
display: flex;
flex-direction: column;
margin: 130px 70px;
}
.text-pequeno-f4 {
color: #666666;
font-family: "Source Sans Pro", Helvetica, Arial, Sans-Serif, sans-serif;
font-weight: bold;
}
.texto-rosa {
font-family: "Montserrat-bold", Helvetica, Sans-serif;
color: #ee2e5d;
font-size: 20px;
}
.texto-rosa span {
font-family: "Montserrat-bold", Helvetica, Sans-serif;
color: #fff;
margin-top: 0px;
}
.text-small {
font-family: 'Source Sans Pro',Roboto,Sans-serif;
color: #fff;
max-width: 380px;
margin-top: 200px;
margin-right: 260px;
}
@media (max-width: 1024px) {
.faixa4,
.total-text {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items: center;
}
.total-text {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
}
/* faixa-5 */
.faixa-5 {
background-color: #000;
color: #f5f6fa;
padding: 130px 50px 80px 50px;
align-items: center;
justify-content: center;
}
.conteudo-f5 {
align-items: center;
justify-content: center;
}
.texto-f5 {
font-family: "Source Sans Pro", Roboto, Sans-serif;
font-size: 1.2em;
align-items: center;
justify-content: center;
max-width: 600px;
text-align: center;
margin-left: 300px;
margin-bottom: 40px;
}
.subtexto-f5 {
margin-left: 465px;
font-family: 'Source Sans Pro',Roboto,Sans-serif;
}
@media (max-width: 0px) {
.texto-f5,
.subtexto-f5 {
margin: 0px 0px 0px 0px;
}
.texto-f5 {
margin-bottom: 30px !important;
}
}
/* faixa-6 */
.faixa-6{
display: flex;
flex-direction: column;
padding-top: 100px;
padding-bottom: 150px;
background-color: black;
background-image: url("https://f.hubspotusercontent20.net/hubfs/5032423/background-palestra-warren-educacao-incompany.png");
background-size: 100%;
background-attachment: fixed;
}
.itens{
display: flex;
flex-direction: row;
margin-left: 400px;
}
.item-1, .item-2, .item-3, .item-4{
color: white;
margin-right: 100px;
font-family: "Source Sans Pro", Helvetica, Arial, Sans-Serif, sans-serif;
font-weight: bold;
font-size: 26px;
padding: 50px 50px 0px 0px;
}
.item-1{
background-image: url("https://f.hubspotusercontent20.net/hubfs/5032423/educacao-financeira%201.png");
background-size: 70%;
background-repeat: no-repeat;
margin-bottom: 10px;
}
.item-2{
background-image: url("https://f.hubspotusercontent20.net/hubfs/5032423/investimento%201.png");
background-size: 70%;
background-repeat: no-repeat;
}
.item-3{
background-image: url("https://f.hubspotusercontent20.net/hubfs/5032423/planejamento-financeiro%201.png");
background-size: 70%;
background-repeat: no-repeat;
margin-bottom: 10px;
}
.item-4{
background-image: url("https://f.hubspotusercontent20.net/hubfs/5032423/cenario-macroeconomico%201.png");
background-size: 70%;
background-repeat: no-repeat;
}
/* faixa-7 */
.faixa-7 {
display: flex;
flex-direction: column;
padding: 140px 0px 160px 80px;
background-color: #f5f6fa;
}
@media (max-width: 1024px) {
.faixa-7{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.parte-1 {
padding-bottom: 160px;
}
.text-1 {
font-family: "Source Sans Pro", Roboto, Sans-serif;
font-weight: bold;
color: #666666;
}
.text-3, .text-2 {
display: flex;
flex-direction: row;
font-family: 'Montserrat-bold',Helvetica,Sans-serif;
font-size: 40px;
font-weight: 700;
}
.marcas {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 100px;
}
.marca {
margin-right: 120px;
}
.marcas-de-cima {
display: flex;
flex-direction: row;
}
.marcas-de-baixo {
margin-top: 50px;
display: flex;
flex-direction: row;
margin-left: 100px;
}
/* faixa-8 */
.faixa-8 {
background-color: #1c1b1f;
padding: 60px 50px;
justify-content: center;
}
.botao-f8 {
padding: 24px 40px;
border-radius: 35px;
margin-left: 400px;
justify-content: center;
background-color: #ee2e5d;
border: none;
color: white;
font-family: "Source Sans Pro", sans-serif !important;
font-weight: 700;
font-size: 1em;
}
@media (max-width: 1024px) {
.botao-f8,
.botao,
.faixa-8 {
justify-content: center;
align-items: center;
}
.botao {
padding-left: 0px !important;
}
}
/* faixa-9 */
.faixa-9{
display: flex;
flex-direction: column;
margin-top: 100px;
}
.titulo-f9{
font-weight: bold;
color: #666666;
font-size: 16px;
margin-bottom: 5px;
}
.subtitulo-f9{
font-family: 'Montserrat-bold',Helvetica,Sans-serif;
font-size: 40px;
font-weight: 700;
}
.setdebox-f9 {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 40px;
margin-bottom: 100px;
}
.box-f9{
max-width: 350px;
background-color: #F5F5F5;
padding: 20px 20px;
margin: 20px 15px;
border-radius: 10px;
}
.texto-box-f9{
font-size: 16px;
font-weight: 400;
font-family: 'Source Sans Pro',Roboto,Sans-serif;
margin-top: 25px;
margin-bottom: 20px;
}
.autor-box-f9{
font-size: 16px;
font-weight: bold;
font-family: 'Source Sans Pro',Roboto,Sans-serif;
padding-bottom: 10px;
}
.img-final-box-f9 img{
width: 80px;
height: 50px;
}
.textos-f9{
margin-left: 120px;
}
@media (max-width: 1024px){
.faixa-9, .setdebox-f9{
display: flex;
flex-direction: column;
}
.faixa-9{
align-items: center;
justify-content: center;
text-align: center;
}
}
/* faixa-10*/
.Faixa-10 {
display: flex;
flex-direction: row;
background-color: #ed2e5d;
padding: 50px 0px 50px 0px;
}
.text-1 {
display: flex;
flex-direction: column;
margin-left: 40px;
}
.text-pequeno {
font-size: 17px;
color: #e3e4eb;;
font-family: 'Source Sans Pro',Roboto,Sans-serif;
margin-top: 50px;
margin-left: 40px;
}
.title {
color: white;
margin-left: 40px;
}
.Conteudo {
font-size: 16px;
color: white;
font-family: 'Source Sans Pro',Roboto,Sans-serif;
font-weight: 400;
margin-left: 40px;
max-width: 700px;
}
.Conteudo-2-f10{
color: white;
font-family: 'Source Sans Pro',Roboto,Sans-serif;
font-weight: 400;
margin-left: 40px;
max-width: 1000px;
}
.img img{
width: 60%;
margin-top: 90px;
margin-left: 250px;
}
@media (max-width: 1024px) {
.faixa-10, .text-1, .img {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.text-pequeno {
margin-right: 40px;
}
.title {
margin-right: 30px;
}
.Conteudo {
margin-right: 40px;
}
.img img {
margin-left: 40px;
}
}
.faixa-11{
display: flex;
flex-direction: column;
padding: 100px 0px 100px 0px
}
.textos-f11{
text-align: center;
}
.conteudo-f11{
margin-left: 300px;
}
.titulo-f11{
font-family: 'Montserrat-bold',Helvetica,Sans-serif !important;
font-size: 2.5rem;
line-height: 2.5rem;
font-weight: 700;
margin-bottom: 30px;
font-weight: 700;
}
.texto-f11{
font-size: 16px;
font-weight: 400;
font-family: 'Source Sans Pro',Roboto,Sans-serif;
letter-spacing: 0px;
line-height: 28px;
color: #2e2d33;
padding: 20px;
margin-left: 280px;
width: 750px;
text-align: center !important;
}
.botao-f11 a{
background-color: #ee2e5d;
border-radius: 100px;
color: white;
text-decoration: none;
font-family: "Source Sans Pro", sans-serif;
padding: 25px 40px 30px 40px;
line-height: 69px;
height: 69px;
font-weight: 700;
margin-left: 250px;
}
.faixa-12 {
display: flex;
flex-direction: row;
background-color: #2e2d33;
justify-content: center;
}
.rodape {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 4em;
}
.logo {
margin-left: 1em;
justify-content: space-around;
}
.menu {
display: flex;
flex-direction:row;
margin-right: 200px;
margin-left: 200px;
}
.menu-item {
justify-content: center;
align-items: center;
margin-left: 30px;
}
.menu-item img {
margin-top: 30px;
width: 30px;
height: 30px;
}
.texto {
color: white;
font-family: 'Source Sans Pro',Roboto,Sans-serif;
font-weight: 400;
font-size: 14px;
text-align: center;
padding-bottom: 30px;
}
.faixa-12 p{
font-size: 11px;
}
@media (max-width: 1024px) {
.faixa-12, .rodape, .logo, .menu, .texto {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.menu {
flex-direction: row;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
}
```
Sign in with Wallet
Connect another wallet