**NOME** Joâo Gabriel Camargo Ramos **TURMA** INFO C **NUMERO** 23 # LINGUAGENS PROGAMENTAIS ```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 = "index.css"/> <link rel = "stylesheet" href = "../comum/comum.css"/> <link rel = "stylesheet" href = "responsivo.css"/> <title>WARREN</title> </head> <body> <div class = "geral"> <div class="primeira-faixa"> <div class="f1-parte1"> <img src = "../../assets/images/F1-LOGO1.webp"> </div> <div class="f1-parte2"> <div class="f1-titulo">Educação <br> Financeira para <br> seus colaboradores</div> <div class="f1-botao"> <button>Agende uma conversa</button> </div> </div> </div> <div class="segunda-faixa"> <div class="f2-parte1"> <div class="f2-quems">QUEM SOMOS</div> <div class="f2-titulo">Levamos educação financeira para os mais diversos momentos de vida do colaborador <br> e da empresa</div> </div> <div class="f2-parte2"> <div class="f2-p1">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-p2">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-p3">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="terceira-faixa"> <div class="f3-parte1"> <div class="f3-subt">O QUE FAZEMOS</div> <div class="f3-titulo">Nossos serviços</div> <div class="f3-lista"> <li class="f3-l1">Webinars Personalizados</li> <li class="f3-l1">Cursos Online para Plataformas Corporativas</li> <li class="f3-l1">Consultoria de Planejamento Financeiro</li> <li class="f3-l1">Programas de Educação Financeira</li> <li class="f3-l1">Campanhas Personalizadas (online e offline)</li> </div> </div> <div class="f3-parte2"> <img src = "../../assets/images/f3-image.webp"> </div> </div> <div class="quarta-faixa"> <div class = "f4-parte1"> <div class="f4-subt">PARA QUEM</div> <span class = f4-titulo> <span class = "f4-titulo1">Empresas que já compreenderam:</span> o bem-estar do colaborador é investimento </span> </div> <div class="f4-parte2"> <div class="f4-p1">Entendemos que problemas financeiros podem impactar profundamente na vida do colaborador.</div> <div class="f4-p2">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="quinta-faixa"> <div class="f5-textos"> <div class="f5-porcentagem">83% dos profissionais de RH afirmam que o estresse financeiro prejudica o desempenho dos colaboradores.</div> <div class="f5-nomezin">Society for Human Resources Management</div> </div> </div> <div class="sexta-faixa"> <div class="f6-coluna"> <div class="f6-faix1"> <div class="f6-b1"> Organização<br>Financeira </div> </div> <div class="f6-faix2"> <div class="f6-b2"> Planejamento<br>Financeiro </div> </div> </div> <div class="f6-coluna"> <div class="f6-faix3"><div class="f6-b3">Investimentos</div></div> <div class="f6-faix4"><div class="f6-b4"> Cenário<br>Macroeconômico </div></div> </div> </div> <div class="setima-faixa"> <div class="f7-parte1"> <div class="f7-subt">QUEM FAZ PARTE DESTE MOVIMENTO</div> <span class = "f7-titulo"> <span>Mais de</span> <span class = "f7-titulo1"> 100 empresas<br>e 20 mil </span> <span class = "f7-titulo1">colaboradores</span> <span>impactados</span> </span> </div> <div class="f7-parte2"> <div class="f7-coluna"> <div class="f7-item1"> <img src = "../../assets/images/f7-img1.png"> </div> <div class="f7-item2"> <img src = "../../assets/images/f7-img2.png"> </div> <div class="f7-item"> <img src = "../../assets/images/f7-img3.png"> </div> <div class="f7-item"> <img src = "../../assets/images/f7-img4.png"> </div> </div> <div class="f7-coluna2"> <div class="f7-item3"> <img src = "../../assets/images/f7-img5.png"> </div> <div class="f7-item4"> <img src = "../../assets/images/f7-img6.png"> </div> <div class="f7-item4"> <img src = "../../assets/images/f7-img7.png"> </div> </div> </div> </div> <div class="oitava-faixa"> <div class="f8-botao"> <button>AGENDE UMA CONVERSA</button> </div> </div> <div class="nona-faixa"> <div class="f9-parte1"> <div class="f9-subt">DEPOIMENTOS</div> <div class="f9-titulo">O que dizem sobre nós</div> </div> <div class="f9-parte2"> <div class="f9-conteiner"> <div class="f9-co"> <div class="f9-imagem"> <img src = "../../assets/images/f9-aspas.png"> </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-logo"> <img src = "../../assets/images/f9-c1.png"> </div> </div> </div> <div class="f9-conteiner"> <div class="f9-co"> <div class="f9-imagem"> <img src = "../../assets/images/f9-aspas.png"> </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-logo"> <img src = "../../assets/images/f9-c2.png"> </div> </div> </div> <div class="f9-conteiner"> <div class="f9-co"> <div class="f9-imagem"> <img src = "../../assets/images/f9-aspas.png"> </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-logo"> <img src = "../../assets/images/f9-c3.png"> </div> </div> </div> </div> </div> <div class="decima-faixa"> <div class="f10-ger"> <div class="f10-parte1"> <div class="f10-subt">QUEM SOMOS</div> <div class="f10-titulo">Sobre a Warren</div> <div class="f10-paragrafo"> <div class="f10-par1">Somos uma plataforma completa de investimentos com sede em Porto Alegre em outras 6 cidades. Temos mais de 100 mil clientes e 250 colaboradores.</div> <div class="f10-par2">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> <div class="f10-parte2"> <img src = "../../assets/images/f10-celular.png"> </div> </div> </div> <div class="decima-primeira-faixa"> <div class="f11-parte1"> <div class="f11-titulo">Agende uma conversa</div> <div class="f11-texto">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-parte2"> <div class="f11-conteiner"> <div class="f11-nome">Nome*</div> <input type="text" class="f11-nome1"> </div> <div class="f11-meio"> <div class="f11-conteiner1"> <div class="f11-nome">E-mail*</div> <input type="text" class="f11-nome4"> </div> <div class="f11-conteiner"> <div class="f11-nome">Telefone*</div> <input type="text" class="f11-nome2"> </div> </div> <div class="f11-outros"> <div class="f11-conteiner1"> <div class="f11-nome">Cargo*</div> <input type="text" class="f11-nome3"> </div> <div class="f11-conteiner1"> <div class="f11-nome">Empresa*</div> <input type="text" class="f11-nome3"> </div> <div class="f11-conteiner"> <div class="f11-nome">Quantidade de funcionários*</div> <div class = "f11-selecione"> <select> <option value="0">Selecione</option> <option value="1">0 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> </div> </div> </div> <div class="f11-mensagem"> <div class="f11-d">Deixe sua mensagem</div> <textarea class="f11-deixeaqui"></textarea> </div> <div class="f11-botao"> <button>Enviar</button> </div> </div> </div> <div class="decima-segunda-faixa"> <div class="f12-parte1"> <img src = "../../assets/images/f12-logo.png"> </div> <div class="f12-parte2"> <div class="f12-logo"> <img src = "../../assets/images/f12-icon-youtube.png"> </div> <div class="f12-logo"> <img src = "../../assets/images/f12-icon-instagram.png"> </div> <div class="f12-logo"> <img src = "../../assets/images/f12-icon-facebook.png"> </div> <div class="f12-logo"> <img src = "../../assets/images/f12-icon-twitter.png"> </div> </div> <div class="f12-parte3"> <div class="f12-duvida">Tem alguma dúvida?</div> <div class="f12-mande-email">Mande um email para</div> <div class="f12-email">meajuda@warrenbrasil.com.br</div> <div class="f12-cnpj">CNPJ: 24.176.946/0001-71</div> </div> </div> </div> </body> </html> ``` ## CSS ```css= * {box-sizing: border-box;} body { margin: 0px; } .geral { display: flex; flex-direction: column; } .primeira-faixa { display: flex; flex-direction: column; background-image: url("../../assets/images/F1-P1.png"); background-size: 100%; background-repeat: no-repeat; background-attachment: fixed; height: 100vh; } .f1-parte1 img { width: 15%; cursor: pointer; } .f1-parte2 { display: flex; flex-direction: column; margin-left: 100px; } .f1-titulo { font-size: 50px; line-height: 50px; letter-spacing: -1px; color: #fff; font-family: F4; margin-top: 120px; margin-bottom: 30px; } .f1-botao button { border: none; border-radius: 2em; background-color: #ee2e5d; color: #fff; font: 16px F1; text-transform: uppercase; cursor: pointer; padding: 1.5em 2.5em; } .f1-botao { margin-bottom: 12.5em; } .segunda-faixa { display: flex; flex-direction: row; padding: 6.5em 6.5em; } .f2-parte1 { display: flex; flex-direction: column; padding-right: 4em; padding-left: 1em; } .f2-quems { font: 16px F1; color: #666666; } .f2-titulo { color: #171717; font: 2.5em F4; line-height: 2.5rem; width: 500px; } .f2-parte2 { font: 16px F3; width: 450px; color: #171717; padding-top: 2em; } .f2-p1 { margin-bottom: 20px; } .f2-p2 { margin-bottom: 20px; } .terceira-faixa { display: flex; flex-direction: row; justify-content: center; padding: 10% 0 10% 0; background-color: #F5F6FA; } .f3-parte1 { display: flex; flex-direction: column; padding-left: 10%; } .f3-subt { color: #666666; font: 16px F1; } .f3-titulo { color: #171717; font: 2.5em F4; } .f3-lista { font: 16px F3; color: #2E2D33; } .f3-l1 { margin-bottom: 20px; } .f3-parte2 img{ width: 80%; } .f3-parte2 { margin-left: 15em; } .quarta-faixa { display: flex; flex-direction: row; justify-content: space-evenly; background-color: #1c1b1f; padding: 8em; } .f4-parte1 { width: 340px; margin-right: 12em; } .f4-subt { color: #666666; font: 16px F1; } .f4-titulo1 { color: #ee2e5d; } .f4-titulo { color: #fff; font: 2.5em F4; } .f4-parte2 { width: 330px; color: #fff; font: 16px F3; line-height: 20px; margin-top: 2em; } .f4-p1 { margin-bottom: 20px; } .quinta-faixa { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #000000; background-image: url('../../assets/images/f4-aspas.webp'); background-repeat: no-repeat; background-position: 34.3% 30%; background-size: 5%; color: #fff; padding: 7em; } .f5-textos { font: 20px F3; width: 460px; text-align: center; } .f5-porcentagem { margin-bottom: 3em; } .f5-nomezin { font-size: 16px; } .sexta-faixa { display: flex; flex-direction: column; align-items: center; background-color: #000000; background-image: url('../../assets/images/f6-fundo.webp'); background-size: 100%; background-attachment: fixed; padding: 7em; } .f6-coluna { display: flex; flex-direction: row; color: #fff; font: 1.7rem F1; line-height: 1.7rem; } .f6-faix1 { background-image: url('../../assets/images/f6-c1.webp'); background-size: 50%; background-repeat: no-repeat; background-position: -18% 0%; height: 150px; width: 340px; } .f6-b1 { text-align: left; margin: 10% 0% 10% 20%; } .f6-faix2 { background-image: url('../../assets/images/f6-c2.png'); background-size: 50%; background-repeat: no-repeat; background-position: -18% 0%; height: 150px; width: 340px; } .f6-b2 { text-align: left; margin: 10% 0% 10% 20%; } .f6-faix3 { background-image: url('../../assets/images/f6-c3.webp'); background-size: 50%; background-repeat: no-repeat; background-position: -18% 0%; height: 150px; width: 340px; } .f6-b3 { text-align: left; margin: 10% 0% 10% 20%; } .f6-faix4 { background-image: url('../../assets/images/f6-c4.webp'); background-size: 50%; background-repeat: no-repeat; background-position: -18% 0%; height: 150px; width: 340px; } .f6-b4 { text-align: left; margin: 10% 0% 10% 20%; } .setima-faixa { display: flex; flex-direction: column; padding: 7em; background-color: #F5F6FA; } .f7-subt { font: 16px F1; color: #666666; } .f7-titulo { font: 2.5rem F4; line-height: 2.5rem; } .f7-titulo1 { color: #ee2e5d; } .f7-parte2 { display: flex; flex-direction: column; justify-content: space-around; align-self: center; margin-top: 10em; } .f7-coluna { display: flex; flex-direction: row; margin-bottom: 8em; } .f7-coluna2 { display: flex; flex-direction: row; align-self: center; margin-bottom: 2em; } .f7-item img { width: 150px; } .f7-item1 img { width: 160px; } .f7-item2 img { width: 100px; } .f7-item3 img { width: 120px; } .f7-item4 img { width: 100px; } .f7-item, .f7-item2 { margin-left: 9em; } .f7-item4 { margin-left: 4em; } .oitava-faixa { display: flex; flex-direction: column; align-items: center; background-color: #1c1b1f; padding: 3em; } .f8-botao button { border: none; border-radius: 2em; background-color: #ee2e5d; color: #fff; font: 16px F1; cursor: pointer; padding: 1.5em 2.5em; } .nona-faixa { display: flex; flex-direction: column; padding: 7em; } .f9-parte1 { margin-bottom: 5em; } .f9-subt { font: 16px F1; color: #666666; } .f9-titulo { font: 2.5rem F4; line-height: 2.5rem; color: #171717; } .f9-parte2 { display: flex; flex-direction: row; margin-bottom: 2em; } .f9-conteiner { background-color: #F5F6FA; margin-left: 2em; border-radius: 0.8em; } .f9-co { width: 340px; padding: 2em; } .f9-imagem img { width: 15%; } .f9-imagem { margin-bottom: 1em; } .f9-texto { font: 16px F3; line-height: 20px; color: #2E2D33; margin-bottom: 1em; } .f9-nome { font: 16px F1; margin-bottom: 1em; } .f9-logo img { width: 25%; } .decima-faixa { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #EE2E5D; padding: 8em 0em 0em 8em; } .f10-ger { display: flex; flex-direction: row; } .f10-parte1 { margin-right: 8em; margin-left: 2em; } .f10-subt { font: 16px F1; color: #e3e4eb; } .f10-titulo { font: 2.5rem F4; color: #fff; margin-bottom: 0.8em; } .f10-paragrafo { width: 30em; font: 16px F3; color: #fff; } .f10-par1 { margin-bottom: 1em; } .f10-parte2 img { width: 60%; } .decima-primeira-faixa { display: flex; flex-direction: column; align-items: center; padding: 7em; } .f11-parte1 { text-align: center; width: 670px; } .f11-titulo { font: 2.5rem F4; color: #171717; line-height: 2.5rem; margin-bottom: 1.5em; } .f11-texto { line-height: 28px; color: #2e2d33; font: 16px F3; margin-bottom: 1em; } .f11-parte2 { display: flex; flex-direction: column; align-items: center; } .f11-meio,.f11-outros { display: flex; flex-direction: row; } .f11-conteiner1 { margin-right: 30px; } .f11-conteiner, .f11-conteiner1, .f11-mensagem { font: 14px F3; color: #2E2D33; margin-bottom: 10px; } input, select, textarea { border: none; background-color: #F5F6FA; padding: 12px 15px; resize: none; } .f11-nome1 { width: 50em; } .f11-nome4 { width: 25.5em; } .f11-nome2 { width: 22em; } .f11-nome3, select { width: 14em; } select { appearance: none; cursor: pointer; font: 16px F3; color: #2E2D33; } textarea { width: 50.5em; height: 8em; } .f11-botao { margin-top: 1em; } .f11-botao button { border: none; border-radius: 2.5em; background-color: #ee2e5d; color: #fff; font: 16px F1; cursor: pointer; text-transform: uppercase; padding: 1.5em 3em; } .decima-segunda-faixa { display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; background-color: #2e2d33; padding: 4em; } .f12-parte1 img { width: 60%; } .f12-parte2 { display: flex; flex-direction: row; } .f12-logo img { width: 35%; } .f12-logo { margin: 0px -25px 0px -25px; } .f12-parte3 { display: flex; flex-direction: column; font: 16px F3; color: #fff; text-align: center; } .f12-cnpj {font-size: 13px;} .f12-duvida, .f12-mande-email, .f12-email { margin-bottom: 0.5em; } ``` ## CSS ```css= @media (max-width: 1024px) { .primeira-faixa, .f1-parte1, .f1-parte2 { padding: 0; margin: 0; } .primeira-faixa { background-image: url("../../assets/images/f1-amigo.webp"); background-size: 144%; background-position: 92% 0%; width: 100%; height: 480px; padding: 1em 2.5em; } .f1-parte1 img { width: 60%; } .f1-titulo { font-size: 30px; line-height: normal; margin-top: 100px; } .f1-botao button { padding: 1.5em 2em; } .segunda-faixa, .f2-parte1, .f2-parte2 { margin: 0px; padding: 0px; flex-direction: column; } .segunda-faixa { padding: 2em; } .f2-titulo { font-size: 1.5em; line-height: normal; width: 340px; margin-bottom: 2em; } .f2-parte2 { width: 330px; } .terceira-faixa, .f3-parte1, .f3-parte2 { margin: 0px; padding: 0px; flex-direction: column; } .terceira-faixa { padding: 2em; } .f3-parte1 { margin-bottom: 1.2em; } .f3-titulo { font-size: 1.5em; line-height: normal; margin-bottom: 1em; } .f3-parte2 img { width: 100%; } .quarta-faixa, .f4-parte, .f4-parte2 { margin: 0px; padding: 0px; flex-direction: column; } .quarta-faixa { padding: 2.2em 2.5em; } .f4-titulo { font-size: 1.5em; line-height: normal; } .f4-parte2 { margin-top: 2em; } .quinta-faixa, .f5-textos { margin: 0px; padding: 0px; width: 100%; } .quinta-faixa { padding: 3em; background-size: 15%; background-position: 10% 17%; } .f5-porcentagem { margin-bottom: 2em; } .sexta-faixa, .f6-coluna { flex-direction: column; margin: 0px; padding: 0em; } .setima-faixa, .f7-parte1, .f7-parte2, .f7-coluna, .f7-coluna2, .f7-item, .f7-item1, .f7-item2, .f7-item3, .f7-item4 { flex-direction: column; align-self: center; margin: 0px; padding: 0em; } .setima-faixa { padding: 2em; } .f7-titulo { font-size: 24px; line-height: normal; } .f7-item, .f7-item1, .f7-item2, .f7-item3, .f7-item4 { margin-bottom: 2em; margin-top: 5em; } .oitava-faixa { padding: 1em; flex-direction: column; } .nona-faixa, .f9-parte1, .f9-parte2, .f9-conteiner { margin: 0px; padding: 0px; flex-direction: column; } .nona-faixa { padding: 2em; } .f9-parte1 { margin-bottom: 2em; } .f9-titulo { font-size: 24px; } .f9-conteiner { margin-bottom: 1em; } .decima-faixa, .f10-parte1, .f10-parte2, .f10-ger { margin: 0; padding: 0; flex-direction: column; } .decima-faixa { padding: 2em; } .f10-paragrafo{ width: 20.5em; margin-bottom: 3em; } .f10-parte2 img { width: 100%; } .decima-primeira-faixa, .f11-parte1, .f11-parte2, .f11-meio, .f11-outros, .f11-conteiner, .f11-conteiner1, .f11-mensagem { flex-direction: column; margin: 0px; padding: 0px; } .decima-primeira-faixa {padding: 2em;} .f11-titulo { font-size: 1.5em; line-height: normal; } .f11-texto { text-align: center; font-size: 16px; line-height: 28px; } .f11-parte1 { width: 100%; } .f11-nome1, .f11-nome2, .f11-nome3, .f11-nome4, textarea { width: 20em; margin: 0; margin-bottom: 10px; } select { width: 16.5em; margin-bottom: 10px; } .decima-segunda-faixa, .f12-parte1, .f12-parte3 { flex-direction: column; margin: 0; padding: 0; } .decima-segunda-faixa { padding: 2em; } .f12-parte1 { margin-left: 4em; margin-bottom: 3em; } .f12-parte2 { margin-bottom: 2em; margin-left: 3em; } } ``` ```css= @font-face { font-family: F1; src: url("../../assets/fonts/fonte12.woff2"); } @font-face { font-family: F2; src: url("../../assets/fonts/fonte22.woff2"); } @font-face { font-family: F3; src: url("../../assets/fonts/fonte32.woff2"); } @font-face { font-family: F4; src: url("../../assets/fonts/Montserrat-Bold.woff"); }
{"metaMigratedAt":"2023-06-16T03:27:00.436Z","metaMigratedFrom":"Content","title":"LINGUAGENS PROGAMENTAIS","breaks":true,"contributors":"[{\"id\":\"b186730d-b9e4-4a77-8f97-f67305b05247\",\"add\":24948,\"del\":0}]"}
Expand menu