Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
 <div>
    <img src="https://tdn.totvs.com/download/attachments/731904073/CAPA4.png?version=1&modificationDate=1673616255015&api=v2" alt=""> </div>
HTML
<style>
img {
  max-width: 100%;
}
</style>
HTML
<p class="texto">O>¿QUÉ QUEHAY DE NOVONUEVO? </p>
  
HTML
<style> 

 #title-text {
	display: none !important;} 

.grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.texto {
  position: relative;
  text-align: center;
  color: #353535;
  font-size: 30px;
  font-family: "lato", serif;
  font-weight: 800;
}

h3 {
  margin-right: 20px;
  background-color: #fff;
  border: 2px solid #0397e9;
  padding: 15px;
  margin: 0px;
  border-radius: 40px;
  text-align: center;
  font-family: LATO;
  color: #0397e9;
  font-size: 16px;
  box-shadow: 2px #636363;
  cursor: pointer;
text-decoration: none; }

a {
  text-decoration: none;
}


       </style>
HTML
   
  <div id="cd-timeline" class="cd-container">
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="NOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2> ExclusãoBorrado lógicalógico (AtividadesActividades)</h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA<>MEJORA</span>
        <p align="justify">Obtenha>Obtenga maismás controlecontrol ey organizaçãoorganización sobre asu sua lista de atividadesactividades. Con Comel o novonuevo recurso de exclusãoborrado de lógica, agoraahora vocêusted podepuede deletarborrar dade suasu lista, aquelasaquellas atividadesactividades desnecessáriasinnecesarias. ¡Haga Experimentela hojeprueba ey sintasienta ala diferençadiferencia!  </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733191298'> <button class="button-2">SAIBA>MÁS MAIS<INFORMACIÓN</button></a>
        </div>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="NOVONUEVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Importação<h2>Importación de dadosdatos emen massamasa para forecast<forecastt</h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA<>MEJORA</span>
        <p>Está<p>Est¿Está cansado de inseririncluir dadosdatos manualmente noen el módulo de PlanejamentoPlanificación? NãoNo se preocupe maismás, temos¡tenemos umauna novidadenovedad que ole ajudaráayudará ey otimizaráoptimizará oel processoproceso! A partir de agoraahora, vocêtiene temla aopción opção de importar dadosdatos por atravésmedio de arquivosarchivos CSV, tornandodejando oel lançamentoregistro de dadosdatos ema larga escala muitomucho maismás rápido ey eficiente.</p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733190747'> <button class="button-2">SAIBA>MÁS MAIS<INFORMACIÓN</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v" alt="NOVONUEVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>TOTVS CRM WhatsApp Extension: envioenvío de áudiosaudios para oal CRM </h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA<>MEJORA</span>
        <p>E<p>¿Y sesi vocêpudiera pudessetener ter todos oslos áudiosaudios dosde seussus clientes, salvosgrabados ey organizados noen seusu CRM? Com¡Con ala extensãoextensión dodel TOTVS CRM, issoesto ées possívelposible! AgoraAhora, comcon oel TOTVS CRM WhatsApp Extension, vocêusted podepuede enviaradjuntar áudiosaudios comoy anexoenviar para oal CRM. EY olo melhormejor, tudo¡todo dentro dodel contexto! Por medio Atravésde desseeste recurso, será possívelposible acompanharacompañar ala datafecha dode envioenvío dodel registro ey reproduzi-loreproducirlo semsin anecesidad necessidade de fazerhacer oel download. Incrível,Increíble ¿verdad? </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733191420'> <button class="button-2">SAIBA>MÁS MAIS<INFORMACIÓN</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="NOVONUEVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Regras<h2>Reglas comcon multiníveismultiniveles de ocultación ocultaçãoy eedición ediçãocondicionales condicionaisen nala telapantalla de Atividades<Actividades</h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA<>MEJORA</span>
        <p>Com<p>¡Con oel novonuevo recurso de regrasreglas comcon múltiníveismultiniveles, vocêusted temtiene total controlecontrol sobre osu seu formulárioformulario de atividadesactividades! AgoraAhora ées possívelposible exibirmostrar, ocultar, marcar como somentesolamente leituralectura ouo definir oslos elementos dodel formulárioformulario de actividades atividadesutilizando usandola regraregla condicional. </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733191203'> <button class="button-2">SAIBA>MÁS MAIS<INFORMACIÓN</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MELHORIAMEJORA">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Desativar<h2>Desactivar/AtivarActivar aslas etapas de ganhasganadas, perdidas ey descartadas dodel pipeline de oportunidades </h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA<>MEJORA</span>
        <p>Mais<p>M¡Más flexibilidadeflexibilidad para adaptar oslos pipelines a àslas necessidadesnecesidades específicas dode seusu negócionegocio! AgoraAhora, atravéspor medio dodel construtorconstructor de pipelines, vocêusted podepuede ativaractivar ouo desativardesactivar aslas etapas: ganhasganadas, perdidas ey descartadas. 

EssaEsta melhoriamejora permitirá la aconfiguración configuraçãode daslas etapas de encerramentofinalización, para que oslos pipelines sejamsean aderentesadherentes a qualquercualquier jornada dodel cliente. </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=732674154'> <button class="button-2">SAIBA>MÁS MAIS<INFORMACIÓN</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MELHORIA">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Inclusão<h2>Inclusión de dala UnidadeUnidad de Medidamedida en nala OrdemOrden de Vendaventa (Mobile)</h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA<>MEJORA</span>
        <p>Chega<p>¡Basta de confusión confusãoa nala hora de incluir produtosproductos en nala OrdemOrden de Vendaventa! ALa melhoriamejora permite que ala sigla de dala unidadeunidad de medida del doproducto produto,se sejavisualice visualizadaen noslos campos “Estoque”“Stock” ey “Preço“Precio de Venda”venta”, concedendoconcediendo aoal vendedor, ala clarezaclaridad necessárianecesaria para fazerhacer ala melhormejor negociaçãonegociación.</p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=732664978'> <button class="button-2">SAIBA>MÁS MAIS<INFORMACIÓN</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MELHORIAMEJORA">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Integração<h2>Integración de Leads: reformulaçãoreformulación de dala integraçãointegración DataHub </h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA<>MEJORA</span>
        <p>  SeSi vocêdesea quer importar leads de outrasotras ferramentasherramientas para oel TOTVS CRM, entãoentonces, esta¡esta ées ala novidadenovedad que vocêestaba esperavaesperando! En Nestaesta versãoversión, reestruturamosreestructuramos ey repensamos ala integraçãointegración DataHub para exploraraprovechar todos oslos recursos disponibles disponíveisen nala plataforma: validaçõesvalidaciones de duplicidadeduplicación ey oel mapeamentomapeo de campos personalizados. RenomeamosTambién tambémrenombramos oel DataHub paracomo "IntegraçãoIntegración de Leads" ey olo transformamos emen umun geradorgenerador de token para que ferramentasherramientas terceirasterceras possampuedan seautenticarse autenticaren emnuestras nossas APIsAPI. IncrívelIncreíble, não é¿verdad? </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733190964'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhoria">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MELHORIAMEJORA">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Reflejar <h2>Refletiren nola aplicativoaplicación móvelmóvil, regrasreglas de exibiçãoexhibición a partir de campos personalizados </h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA<>MEJORA</span>
        <p>Estamos empolgadosmuy entusiasmados emen trazerpoder maisofrecer facilidademás parafacilidad oa seusu diadía a diadía. AssimAsí como noen el ambienteentorno web, agoraahora oel ambienteentorno mobile refleterefleja regrasreglas de exibiçãoexhibición a partir de campos personalizados. EssasEstas regrasreglas pré-definidas previamente pelopor el administrador, condicionamcondicionan oel estadoestatus dosde los campos, tornando-osdejándolo: ocultos, visíveisvisibles, editáveiseditables ouo somentesolamente leituralectura. ComCon essaesta melhoriamejora, vocêusted tendrá terámás maismovilidad mobilidadey eeficiencia eficiênciaen nala gestãogestión dodel CRM.CRM.</p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733188343'> <button class="button-2">SAIBA>MÁS MAIS<INFORMACIÓN</button></a>
        </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-manutencao">
        <img src="https://tdn.totvs.com/download/attachments/731904073/manutencao.png?version=1&modificationDate=1673215850828&api=v2" alt="MANUTENÇÃOMANTENIMIENTO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2> ExportaçãoExportación de dadosdatos comcon filtros ativadosactivados </h2>
        <br>
        <span class="badge badge-manutencao">MANUTENÇÃO<>MANTENIMIENTO</span>
        <p>Ajustamos oel mecanismo de exportaçãoexportación para que oslos filtros aplicados nasen las colunascolumnas de visualizaçãovisualización de indicadores, sejam considerados na geração dos arquivos se consideren en la generación de los archivos csv ey xlsx. </p>
        
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-manutencao">
        <img src="https://tdn.totvs.com/download/attachments/731904073/manutencao.png?version=1&modificationDate=1673215850828&api=v2" alt="MANUTENÇÃOMANTENIMIENTO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>No <h2>Nãose permite salvargrabar umun contatocontacto sesi ala contacuenta está inativa<inactiva</h2>
        <br>
        <span class="badge badge-manutencao">MANUTENÇÃO<>MANTENIMIENTO</span>
        <p> AlteramosModificamos ala lógica de validaçõesvalidaciones dodel formulárioformulario, permitindopermitiendo editar contatoscontactos de contascuentas inativasinactivas.</p>
       
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
  </div> <!-- cd-timeline -->
HTML
<style>  #title-text {
	display: none !important;}       body {
  font-size: 100%;
  font-family: "lato", serif;
  color: #363636;
  background-color: #ffffff;
}

a {
  color: #acb7c0;
  text-decoration: none;
  font-family: "lato";
  font-size: 16px;
}

img {
  max-width: 100%;
}

p {
  text-align:justify;
  font-family: "Lato", sans-serif;
}

h2
h5 {
  font-family: "lato", sans-serif;
  font-size: 90px ;
  font-weight: bold;
  
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}

/* -------------------------------- 

xnugget info 

-------------------------------- */
.cd-nugget-info {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  line-height: 50px;
  top: 0;
  left: 0;
}
.cd-nugget-info a {
  position: relative;
  font-size: 14px;
  color: #718ca1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
  opacity: 0.8;
}
.cd-nugget-info span {
  vertical-align: middle;
  display: inline-block;
}
.cd-nugget-info span svg {
  display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
  fill: #718ca1;
}

/* -------------------------------- 

Main components 

-------------------------------- */


#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }
  .cd-timeline-block:first-child {
    margin-top: 0;
  }
  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08),
    0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
  display: block;
  width: 32px;
  height: 32px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -16px;
  margin-top: -16px;
}
.cd-timeline-img.cd-novo {
  background: #363636;
}
.cd-timeline-img.cd-melhoria {
  background: #363636;
}
.cd-timeline-img.cd-manutencao {
  background: #363636;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 60px;
    height: 60px;
    left: 50%;
    margin-left: -30px;
  }
  .cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
    -moz-animation: cd-bounce-1 0.6s;
    animation: cd-bounce-1 0.6s;
  }
}

@-webkit-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -moz-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -moz-transform: scale(1.2);
  }

  100% {
    -moz-transform: scale(1);
  }
}
@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.cd-timeline-content {
  position: relative;
  margin-left: 50px;
  background: #f5f5fa;
  border-radius: 0.25em;
  max-width: 400px;
  padding: 1em;
  box-shadow: 0 3px 0 #363636;
}
.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-content h2 {
  color: #363636;
  font-weight: bold;
}
.cd-timeline-content p,

.cd-timeline-content .cd-date {
  font-size: 13px;
  font-size: 0.8125rem;

}

.cd-timeline-content .cd-date {
  display: inline-block;
}
.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
  float: right;
  padding: 0.8em 1em;
  background: #5596e6;
  color: white;
  border-radius: 0.25em;
  text-decoration: none;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
  background-color: #ffffff;
}
.cd-timeline-content .cd-date {
  float: left;
  padding: 0.8em 0;
  opacity: 0.7;
}
.cd-timeline-content::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #bfcdd6;
}
@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
    font-weight: bold ;
  }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-content .cd-read-more,
  .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    margin-left: 0;
    padding: 1.6em;
    width: 45%;
  }
  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: #d7e4ed;
  }
  .cd-timeline-content .cd-read-more {
    float: left;
  }
  .cd-timeline-content .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #d7e4ed;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }

  .button-2 {
    padding: 8px 9px;
    font-size: 12px;
    color: #fff;
    background-color: #FDAB0E;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .button-2:hover {
    background-color: #0897E9;
  }
  
  .button-2:active {
    background-color: #FDAB0E;
  }
  
  
  #wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
  .flexWrap {
    display: flex;
    gap: 2px;
    width: 50px;
  }
  #disclaimer {
    font-family: Tahoma;
    color: #333333;
    position: fixed;
    top: 5%;
    right: 5%;
    width: 5%;
  }
  
  
  
  .button-2 {
    padding: 8px 9px;
    font-size: 12px;
      color: #fff;
    background-color: #363636;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .button-2:hover {
    background-color: #feac0e;
  }
  
  .button-2:active {
    background-color: #feac0e;
  }
  
  
  #wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
  }
  .flexWrap {
    display: flex;
    gap: 2px;
    width: 110px;
  }
  #disclaimer {
    font-family: sans-serif;
    color: #333333;
    position: fixed;
    top: 5%;
    right: 5%;
    width: 5%;
  } 

  .badge-primary {
    color: #8686FF;
    background-color: #F3F3FF;
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold  }
 
 .badge-secondary{
    color: #ebeef0;
    background-color: #2abe74;
      border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold 
 
 }
 
 .badge-novo {
    color: #fff;
    background-color: #20d691;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold  }
 
 .badge-danger{
    color: #ebeef0;
    background-color: #e93e9c;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold }
 
 .badge-manutencao {
    color: #FFF;
    background-color: #FEAC0E;
    border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 
 .badge-melhoria {
    color: #FFF;
    background-color: #6f60f6;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 .badge-light {
    color: #8686FF;
    background-color: #F3F3FF
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold;
 }
 .badge-dark {
    color: #ebeef0;
    background-color: #064118;
     border-radius: 10px;
    padding: 6px 7px;
   font-size: 9px;
 font-weight: bold }
  </style> 
HTML
<div id="faq">
  <h1>RESPOSTAS ÀS PERGUNTAS
MAIS FREQUENTES<<h1>RESPUESTAS A LAS PREGUNTAS MÁS FRECUENTES</h1>
  <ul>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>O<h2>¿Qué que ées Release Notes?</h2>
      <p>É<p>Es oel documento que agrupa ey detalhadetalla todas aslas atualizaçõesactualizaciones de umun producto produtoa aolo longolargo de umauna versãoversión ouo período.</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>      <h2>Como<h2>¿Cómo identificar ala nomenclatura de doslos releases?</h2>
      <p align="justify">O>La versionamentoversión semânticosemántica ées umun conjunto de regrasreglas desobre comocómo oslos números dosde los releases/versõesversiones sãose atribuídosatribuyen e incrementadosincrementan, comcon el objetivo de mantermantener ala compatibilidadecompatibilidad e integridadeintegridad emen novasnuevas liberaçõesliberaciones. Para cada registro lançamentose devedebe tertener umun número único de liberaçãoliberación (release/versãoversión) ey, umadespués vezde lançadoregistrarlo, oel código dessade liberaçãoesta nãoliberación podeya maisno serpuede alteradomodificarse. QualquerCualquier necessidadenecesidad de modificación alteraçãoen nala soluçãosolución, deverádebe serregistrarse lançadocon comun um novonuevo número de liberaçãoliberación. La Aestandarización padronizaçãode dala nomenclatura de releases/versão dos produtos daversión de los productos de la marca TOTVS temtiene ocomo propósito de facilitar ael compreensãoentendimiento dodel ciclo de vida de doslos releases pelospor nossosnuestros clientes ey equipesequipos internasinternos, alineado alinhadocon àslas melhoresmejores práticasprácticas de mercado. OEl padrãoestándar de nomenclatura de doslos produtosproductos TOTVS seguirá oeste exemploejemplo: 12.1 (versãoversión). 2301 (AnoAño ey mêsmes). 0001 (NumeraçãoNumeración sequencialsecuencial opcional en nala nomenclatura utilizadoutilizada cuando quandoexista houveruna umaliberación liberaçãocon comcorrecciones correçõesy emodificaciones alteraçõeslegales legaisen noel release correnteactual).</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Como<h2>¿Cómo faço para registrar sugestõesregistro sugerencias de melhoriasmejoras?</h2>
      <p> SuaSu ideiaidea poderápodrá sercompartirse compartilhadapor atravésmedio dodel canal <a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics">Central Colaborativa</a>Central de colaboración. Esta área foise criadacreó para que usted vocêpueda sugerir novasnuevas funcionalidades para oel TOTVS CRM - GestãoGestión de Clientesclientes. AsLas sugestõessugerencias de melhoriasmejoras serãoserán monitoradasmonitoreadas pelopor nossonuestro timeequipo de inovaçãoinnovación, eque avaliadaevaluará ala viabilidadeprobabilidad parade umauna futura implementaçãoimplementación.</p>
    </li>
  </ul>
</div>
HTML
<style>
body {
  background: #f4f4f4;
  display: flex;
}

#faq {
  max-width: 700px;
  margin: auto;
  padding: 0 15px;
  text-align: center;
}

section.faq {
  padding-top: 2em;
  padding-bottom: 3em;
}

#faq ul {
  text-align: left;
}
.transition, p, ul li i:before, ul li i:after {
  transition: all 0.3s;
}

#faq .no-select, #faq h2 {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

#faq h1 {
  color: #393939;
  margin-bottom: 20px;
  margin-top: 0;
font-size: 25px; }

#faq h2 {
  color: #5596E6;
  font-family: Tahoma, sans-serif;
  font-size: 16px;
  line-height: 34px;
  text-align: left;
  padding: 15px 15px 0;
  text-transform: none;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
  transition: .2s;
}

#faq p {
  color: #333;
  text-align: justify-all;
  font-family: 'hm_light', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  position: relative;
  overflow: hidden;
  max-height: 250px;
  will-change: max-height;
  contain: layout;
  display: inline-block;
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 5px;
  margin-bottom: 15px;
  padding: 0 50px 0 15px;
  transition: .3s opacity, .6s max-height;
  hyphens: auto;
  z-index: 2;
}

#faq ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
#faq ul li {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  /*padding-bottom: 4px;*/
  /*padding-top: 18px;*/
  background: #fff;
  box-shadow: 1px 2px 10px -2px rgba(114,114,158, 21%);
  -webkit-tap-highlight-color: transparent;
}
#faq ul li + li {
  margin-top: 15px;
}
#faq ul li:last-of-type {
  padding-bottom: 0;
}
#faq ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 28px;
  right: 15px;
}
#faq ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #5596E6;
  width: 3px;
  height: 9px;
}
#faq ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
#faq ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
#faq ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  touch-action: manipulation;
}
#faq ul li input[type=checkbox]:checked ~ h2 {
  color: #393939;
}
#faq ul li input[type=checkbox]:checked ~ p {
  /*margin-top: 0;*/
  max-height: 0;
  transition: .3s;
  opacity: 0;
  /*transform: translate(0, 50%);*/
}
#faq ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
#faq ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}











* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

a,
a:visited,
a:focus,
a:active,
a:link {
  text-decoration: none;
  outline: 0;
}

a {
  color: currentColor;
  transition: .2s ease-in-out;
}

h1, h2, h3, h4 {
  margin: .3em 0;
}

ul {
  padding: 0;
  list-style: none;
}

</style>