# Session Three: It's always time to restart | Ling. Programação
>[color=red]**Autor:** Letícia Rodrigues da Silva
**Turma:** IndoD
**Número:** 25
[toc]
>Site: https://shxcn.csb.app/src/pages/home/index.html
>Link CodeSandbox: https://codesandbox.io/s/investimentos-shxcn?file=/src/pages/home/responsivo.css:0-5100
## Códigos do site:
### 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="index.css" />
<title>Educação financeira</title>
</head>
<body>
<div class="container">
<div class="faixa1">
<div class="cabecalho">
<div class="img-logo">
<img src="../../assets/images/logof1.png"/></div>
</div>
<div class="titulof1">Educação Financeira para seus colaboradores</div>
<div class="botaof1"><button>AGENDE UMA CONVERSA</button></div>
</div>
<div class="faixa2">
<div class="box1">
<div class="quem">QUEM SOMOS</div>
<div class="texto1">Levamos educação financeira para os mais diversos momentos de vida do colaborador e da empresa</div>
</div>
<div class="box2">
<div class="text2">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="text2">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="text2">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="faixa3">
<div class="boxf3">
<div class="oque">O QUE FAZEMOS</div>
<div class="titulof3">Nossos serviços</div>
<ul class="lista">
<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 class="imgf3"><img src="../../assets/images/pessoas.png"/></div>
</div>
<div class="faixa4">
<div class="box4">
<div class="textof4">
<div class="quem2">PARA QUEM</div>
<div class="titulo4"><font color="#ee2d5d">Empresas que já compreenderam:</font><font color= "white">o bem-estar do colaborador é investimento</font></div>
</div>
</div>
<div class="boxf4">
<div class="text1">Entendemos que problemas financeiros podem impactar profundamente na vida do colaborador.</div>
<div class="text1">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="faixa5">
<div class="back-img"><img src="../../assets/images/aspass.png"/></div>
<div class="ds-texto">83% dos profissionais de RH afirmam que o estresse financeiro prejudica o desempenho dos colaboradores.</div>
<div class="ds">Society for Human Resources Management</div>
</div>
<div class="faixa6">
<div class="t-box1">
<div class="mat-back"><img src="../../assets/images/mat.png"/></div>
<div class="t1">Organização Financeira</div>
<div class="t-box2">
<div class="moeda-back"><img src="../../assets/images/moeda.png"/></div>
<div class="t2">Investimentos</div>
</div>
</div>
<div class="t-box3">
<div class="planejamento-back"><img src="../../assets/images/planejamento.png"/></div>
<div class="t1">Planejamento Financeiro</div>
<div class="cenario"><img src="../../assets/images/cenario.png"/></div>
<div class="t2">Cenário Macroeconômico</div>
</div>
</div>
<div class="faixa7">
<div class="boxf7">
<div class="quem3">QUEM FAZ PARTE DESTE MOVIMENTO</div>
<div class="titulof7">Mais de<font color="#ee2d5d">100 empresas e 20 mil colaboradores</font> impactados</div>
</div>
<div class="box-logo">
<div class="logo-l1">
<div class="hospital"><img src="../../assets/images/hospital.png"></div>
<div class="vivo"><img src="../../assets/images/vivo.png"></div>
<div class="piccadilly"><img src="../../assets/images/piccadilly.png"></div>
<div class="loreal"><img src="../../assets/images/loreal.png"></div>
</div>
<div class="logo-l2">
<div class="mrv"><img src="../../assets/images/mrv.png"></div>
<div class="leroy"><img src="../../assets/images/leroy.png"></div>
<div class="sap"><img src="../../assets/images/sap.png"></div>
</div>
</div>
</div>
<div class="faixa8">
<div class="botaof8"><button>AGENDE UMA CONVERSA</button></div>
</div>
<div class="faixa9">
<div class="textf9">
<div class="depoimentos">DEPOIMENTOS</div>
<div class="titulof9">O que dizem sobre nós</div>
</div>
<div class="box9">
<div class="b1">
<div class="b-text9">
<div class="aspasf9"><img src="../../assets/images/aspas.png"></div>
<div class="ds-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="nome">Stephany Lopes</div>
<div class="logo-f9"><img src="../../assets/images/neo.png"></div>
</div>
</div>
<div class="b1">
<div class="b-text9">
<div class="aspasf9"><img src="../../assets/images/aspas.png"></div>
<div class="ds-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="nome">Emily</div>
<div class="logo-f9"><img src="../../assets/images/asaas.png"></div>
</div>
</div>
<div class="b1">
<div class="b-text9">
<div class="aspasf9"><img src="../../assets/images/aspas.png"></div>
<div class="ds-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="nome">Cícero</div>
<div class="logo-f9"><img src="../../assets/images/azul.png"></div>
</div>
</div>
</div>
<div class="faixa10">
<div class="boxf10">
<div class="quem4">QUEM SOMOS</div>
<div class="titulof10">Sobre a Warren</div>
<div class="ds-f10">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="ds-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="imgf10"><img src="../../assets/images/celular.png"></div>
</div>
<div class="faixa11">
<div class="textf11">
<div class="titulo-f11">Agende uma conversa</div>
<div class="ds-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="inputs">
<label for="nome">Nome*
<div class="nome-i"><input id="firstname" class="hs-input" type="text"/></div>
</label>
<div class="input-l">
<label for="email">Email*
<div class="email"><input id="email" class="hs-input" type="email"/></div>
</label>
<div class="l-tel">
<label id="telefonee">Telefone*
<div class="telefone"><input id="mobilephone" class="hs-input" type="tel"/></div>
</label>
</div>
</div>
<div class="input-l1">
<label for="cargo">Cargo*
<div class="cargo"><input id="cargo" class="hs-input" type="text"/></div>
</label>
<div class="l-emp">
<label for="cargo">Empresa*
<div class="cargo"><input id="empresa" class="hs-input" type="text"/></div>
</label>
</div>
<div class="quantidade">
<div class="l-qntd">
<label for="quant">Quantidade de funcionários*
<select>
<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="500 a 1000">1000 a 5000</option>
</select>
</label>
</div>
</div>
</div>
<div class="box-input">
<label for="msg">Deixe sua mensagem
<div class="t-f11">
<textarea id="mensagem" class="hs-input"></textarea> </div>
</label>
</div>
</div>
<div class="botaof11"><button>ENVIAR</button></div>
</div>
<div class="faixa12">
<div class="logof12"><img src="../../assets/images/logo-img.png"/></div>
<div class="logosf12">
<div class="logof"><img src="../../assets/images/icon-youtube.png"/></div>
<div class="logof"><img src="../../assets/images/icon-instagram.png"/></div>
<div class="logof"><img src="../../assets/images/icon-facebook.png"/></div>
<div class="logof"><img src="../../assets/images/icon-twitter.png"/></div>
</div>
<div class="boxf12">
<div class="texto-f12">Tem alguma dúvida? Mande um email para meajuda@warrenbrasil.com.br</div>
<div class="cnpj">CNPJ: 24.176.946/0001-71</div>
</div>
</div>
</div>
</body>
</html>
```
### index.css
```css=
body {
margin: 0px;
font-family: "Montserrat-bold", Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
}
.faixa1 {
display: flex;
flex-direction: column;
background-image: url("../../assets/images/background.png");
background-attachment: fixed;
background-size: 100% auto;
}
.cabecalho {
display: flex;
flex-direction: row;
margin: 1em 0em 0em 2em;
}
.img-logo img {
max-width: 12.5em;
max-height: 5em;
}
.titulof1 {
color: white;
font-size: 3.5em;
font-weight: 700;
max-width: 9.5em;
max-height: 2em;
line-height: 1em;
margin: 2.5em 0em 0em 3.5em;
}
.botaof1 button {
width: 19.5em;
height: 5.5em;
font-weight: 800;
border-radius: 5em;
border: 0em;
margin: 6.5em 0em 23em 15em;
color: white;
background-color: #ee2e5d;
cursor: pointer;
}
.faixa2 {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 5em;
justify-content: space-evenly;
}
.box1 {
margin-left: 15em;
}
.quem {
font-weight: 700;
color: #666666;
}
.texto1 {
max-width: 11.5em;
max-height: 5em;
font-size: 2.5em;
line-height: 1em;
font-weight: 700;
}
.box2 {
width: 400px;
height: 230px;
margin: 5em 20em 0em 0em;
}
.text2 {
width: 500px;
height: 90px;
line-height: 1.5em;
color: black;
font-size: 1em;
}
.faixa3 {
display: flex;
flex-direction: row;
background-color: #f5f6fa;
width: 100%;
height: 700px;
margin-top: 8em;
justify-content: center;
align-items: center;
}
.oque {
color: #666666;
font-weight: 700;
}
.titulof3 {
font-size: 2.5em;
font-weight: 700;
margin-bottom: 0.5em;
}
ul {
padding-left: 20px;
}
.lista li {
padding-bottom: 20px;
}
.imgf3 img {
width: 530px;
height: 340px;
margin-left: 10em;
}
.faixa4 {
background-color: rgb(28, 27, 31);
width: 100%;
height: 38em;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box4 {
margin-right: 150px;
width: 340px;
}
.quem2 {
color: #666666;
font-weight: 700;
}
.boxf4 {
width: 350px;
}
.text1 {
color: white;
height: 58px;
}
.titulo4 {
font-size: 2.3em;
font-weight: 700;
}
.faixa5 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
background-color: black;
width: 100%;
height: 340px;
}
.back-img img {
position: relative;
top: 30px;
right: 14.3em;
}
.ds-texto {
text-align: center;
width: 500px;
font-size: 20px;
line-height: 1.4em;
}
.ds {
margin-top: 30px;
}
.faixa6 {
background-image: url("../../assets/images/background-pessoas.webp");
background-attachment: fixed;
width: 100%;
height: 600px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: black;
}
.t-box1 {
font-size: 1.7em;
font-weight: 700;
color: white;
margin-right: 8em;
}
.mat-back img {
width: 165px;
position: relative;
right: 95px;
top: 130px;
}
.t1 {
width: 100px;
line-height: 1em;
margin-top: 2em;
}
.t-box2 {
font-size: 1em;
font-weight: 700;
color: white;
}
.moeda-back img {
width: 165px;
position: relative;
top: 80px;
right: 90px;
}
.t2 {
width: 100px;
line-height: 1em;
margin-bottom: 3em;
}
.t-box3 {
font-size: 1.7em;
font-weight: 700;
color: white;
}
.planejamento-back img {
width: 165px;
position: relative;
top: 135px;
right: 100px;
}
.cenario img {
width: 165px;
position: relative;
top: 3em;
right: 3.5em;
}
.faixa7 {
background-color: #f5f6fa;
width: 100%;
height: 750px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.boxf7 {
display: flex;
flex-direction: column;
margin: 20em 0em 10em 0em;
padding-right: 30em;
}
.quem3 {
color: #666666;
font-weight: 700;
}
.titulof7 {
font-size: 40px;
font-weight: 700;
width: 650px;
text-align: left;
}
.box-logo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20em;
}
.logo-l1 {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 1080px;
margin-bottom: 8em;
}
.hodspital img {
width: 180px;
}
.vivo img {
width: 103px;
}
.piccadilly img {
width: 150px;
}
.loreal img {
width: 103px;
}
.logo-l2 {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 1000px;
}
.mrv img {
width: 130px;
}
.leroy img {
width: 103px;
}
.sap img {
width: 103px;
}
.faixa8 {
background-color: #1c1b1f;
width: 100%;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
}
.botaof8 button {
background-color: #ee2e5d;
color: white;
width: 270px;
height: 69px;
border-radius: 3em;
border: 0px;
cursor: pointer;
font-weight: 700;
font-size: 1em;
}
.faixa9 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.textf9 {
margin: 15em 40em 2em 0em;
}
.depoimentos {
color: #666666;
font-weight: 700;
}
.titulof9 {
font-size: 2.5em;
font-weight: 700;
}
.box9 {
display: flex;
flex-direction: row;
margin: 50px 0px 200px 0px;
}
.b1 {
background: #f5f6fa;
width: 350px;
height: 380px;
border-radius: 1em;
margin-left: 30px;
}
.b-text9 {
display: flex;
flex-direction: column;
width: 320px;
padding: 40px 10px 30px 40px;
}
.aspasf9 img {
margin-bottom: 20px;
}
.ds-f9 {
color: #2e2d33;
line-height: 20px;
margin-bottom: 20px;
}
.nome {
color: #2e2d33;
font-weight: 700;
}
.logo-f9 img {
width: 70px;
height: 42px;
margin-top: 20px;
}
.faixa10 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: #ee2e5d;
width: 100%;
height: 800px;
}
.boxf10 {
display: flex;
flex-direction: column;
color: white;
}
.quem4 {
font-weight: 700;
margin-bottom: 15px;
}
.titulof10 {
font-size: 2.5em;
font-weight: 700;
margin-bottom: 25px;
}
.ds-f10 {
width: 440px;
height: 90px;
}
.imgf10 img {
width: 380px;
height: 540px;
margin: 60em 0em 50em 5em;
}
.faixa11 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 900px;
}
.textf11 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 5em;
}
.titulo-f11 {
font-size: 2.5em;
font-weight: 700;
margin-bottom: 1em;
}
.ds-f11 {
color: #2e2d33;
width: 680px;
text-align: center;
line-height: 1.8em;
}
.inputs {
margin-top: 1em;
font-size: 14px;
color: #2e2d33;
}
.nome-i input {
width: 684px;
height: 40px;
background-color: #f5f6fa;
border: 0px;
cursor: pointer;
}
.input-l {
display: flex;
flex-direction: row;
margin: 1em 0em 1em 0em;
}
.input-l1 {
display: flex;
flex-direction: row;
max-width: 715px;
height: 60px;
}
.cargo input {
width: 210px;
height: 40px;
background-color: #f5f6fa;
border: 0px;
cursor: pointer;
}
.quantidade select {
width: 210px;
height: 40px;
background-color: #f5f6fa;
border: 0px;
cursor: pointer;
}
.box-input {
margin-top: 20px;
}
textarea {
width: 684px;
height: 100px;
background-color: #f5f6fa;
border: 0px;
cursor: pointer;
}
.botaof11 button {
background-color: #ee2e5d;
color: white;
width: 160px;
height: 69px;
border-radius: 3em;
border: 0px;
cursor: pointer;
font-weight: 700;
font-size: 1em;
margin-top: 1.5em;
}
.email input {
width: 330px;
height: 40px;
background-color: #f5f6fa;
border: 0px;
cursor: pointer;
}
.l-tel,
.l-emp,
.l-qntd {
margin-left: 25px;
}
.telefone input {
width: 330px;
height: 40px;
background-color: #f5f6fa;
border: 0px;
cursor: pointer;
}
.faixa12 {
display: flex;
flex-direction: row;
width: 100%;
height: 230px;
background-color: #2e2d33;
align-items: center;
color: white;
justify-content: center;
}
.logof12 img {
width: 120px;
margin-right: 15em;
}
.logosf12 {
display: flex;
flex-direction: row;
width: 200px;
margin-right: 15em;
}
.logof img {
margin-left: 1em;
}
.texto-f12 {
text-align: center;
line-height: 28px;
width: 160px;
cursor: pointer
}
.cnpj {
font-size: 0.7em;
margin-top: 10px;
text-align: center;
}
```
## Códigos site responsivo:
### responsivo.css
```css=
@media (max-width: 400px) {
.img-logo,
.titulof1,
.botaof1,
.faixa2,
.faixa3,
.faixa4,
.faixa6,
.faixa7,
.logo-l1,
.logo-l2,
.faixa9,
.textf9,
.box9,
.faixa10,
.faixa11,
.faixa12 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
.faixa1:nth-child(2) img {
content: url("../../assets/images/back-responsive.png");
}
.faixa1 {
background-image: url("../../assets/images/back-responsive.png");
height: 30em;
background-attachment: fixed;
background-repeat: no-repeat;
}
.img-logo img {
margin-left: 1em;
width: 199px;
height: 27px;
}
.titulof1 {
font-size: 24px;
width: 320px;
margin: 4em 0em 0em 2em;
line-height: 25px;
}
.botaof1 button {
margin: 3em 6em 0em 1.5em;
width: 255px;
height: 65px;
}
.box1 {
width: 275px;
height: 130px;
}
.quem {
align-items: left;
font-size: 14px;
}
.texto1 {
font-size: 24px;
}
.box2 {
margin: 4em 0em 0em 7em;
}
.text2 {
width: 300px;
height: 7em;
font-size: 14px;
color: #171717;
}
.boxf3 {
width: 290px;
font-size: 14px;
}
.oque {
font-size: 14px;
margin-bottom: 7px;
}
.titulof3 {
font-size: 1.5em;
}
.imgf3 img {
width: 300px;
height: 188px;
margin-right: 80px;
}
.faixa4 {
height: 400px;
}
.box4 {
margin: 0px 30px 0px 0px;
}
.boxf4 {
margin: 2em 0em 0em 4.5em;
}
.text1 {
width: 290px;
font-weight: 400;
font-size: 14px;
margin-bottom: 1em;
}
.textof4 {
margin-left: 3em;
}
.quem2 {
margin-bottom: 10px;
}
.titulo4 {
width: 320px;
height: 120px;
font-size: 24px;
}
.t-box1 {
font-size: 24px;
}
.faixa5 {
width: 100%;
height: 240px;
}
.back-img img {
width: 60px;
height: 40px;
margin: 2em 0em 0.3em 15em;
}
.ds-texto {
font-size: 18px;
width: 300px;
height: 140px;
font-weight: 500;
}
.ds {
margin-bottom: 2em;
font-size: 14px;
}
.boxes {
display: flex;
flex-direction: column;
margin-bottom: 10em;
}
.mat-back img,
.moeda-back img,
.planejamento-back img,
.cenario img {
width: 130px;
}
.faixa7 {
height: 1130px;
}
.boxf7 {
margin: 1em 0em 0em 35em;
}
.quem3 {
font-size: 14px;
width: 332px;
height: 28px;
}
.titulof7 {
font-size: 24px;
width: 290px;
}
.logo-l1 {
width: 332px;
height: 450px;
justify-content: space-evenly;
position: relative;
top: 60px;
}
.logo-l2 {
width: 332px;
height: 450px;
justify-content: space-evenly;
margin: 5px auto 0px;
}
.faixa8 {
justify-content: left;
align-items: left;
height: 110px;
}
.botaof8 button {
margin-left: 40px;
}
.faixa9 {
max-height: 2600px;
}
.textf9 {
width: 332px;
height: 82px;
margin: 55em 0em 0em 0em;
}
.depoimentos {
font-size: 14px;
padding: 0em 11em 0.5em 0em;
}
.titulof9 {
font-size: 24px;
}
.b1 {
margin-bottom: 15px;
max-width: 310px;
height: 380px;
position: relative;
}
.b-text9 {
width: 300px;
height: 409px;
}
.ds-f9 {
font-size: 16px;
}
.faixa10 {
width: 100%;
height: 1000px;
}
.f-10 {
display: flex;
flex-direction: column;
max-width: 300px;
height: 785px;
margin-top: 50px;
}
.quem4 {
font-size: 14px;
}
.titulof10 {
font-size: 24px;
}
.ds-f10 {
font-size: 14px;
width: 280px;
height: 90px;
}
.imgf10 img {
width: 290px;
height: 410px;
margin-top: 4em;
}
.titulo-f11 {
font-size: 24px;
}
.ds-f11 {
color: #2e2d33;
font-size: 14px;
width: 240px;
height: 170px;
}
.inputs {
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
}
.nome-i input {
width: 272px;
height: 38px;
}
.input-l {
display: flex;
flex-direction: column;
align-items: center;
}
.email input,
.telefone input,
.cargo input {
width: 272px;
}
.l-tel {
margin: 7px 0px 0px 0px;
}
.input-l1 {
display: flex;
flex-direction: column;
align-items: center;
}
.l-emp {
margin: 1em 0em 0em 0em;
}
.l-qntd {
margin: 1em 0em 0em 5.3em;
}
.l-qntd select {
width: 272px;
}
.box-input {
margin-top: 11.5em;
}
textarea {
width: 272px;
height: 100px;
}
.botaof11 button {
margin-bottom: 4em;
}
.faixa12 {
height: 285px;
}
.logof12 img {
margin: 2em 0em 2.5em 0em;
}
.logosf12 {
width: 100px;
height: 70px;
margin: 0em 0em 0em 0em;
justify-content: center;
}
.logof img {
width: 30px;
height: 30px;
margin-left: 0.5em;
}
.texto-f12 {
font-size: 14px;
margin-top: 1em;
}
.cnpj {
font-size: 11px;
}
}
```
{"metaMigratedAt":"2023-06-16T00:25:50.201Z","metaMigratedFrom":"Content","title":"Session Three: It's always time to restart | Ling. Programação","breaks":true,"contributors":"[{\"id\":\"f2f98191-1ff5-4afd-8e66-66ff77c4c5b1\",\"add\":26757,\"del\":0}]"}