Á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 QUE HÁ DE NOVO? </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 <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>Configuração de Desconto Máximo por Pipeline </h2>
        <br>
        <span class="badge badge-melhorianovo"><strong>MELHORIA<><strong>NOVO</strong></span>
        <p align="justify">Agora você terá ainda mais controle e precisão na aplicação de descontos em suas oportunidades. Com a novo recurso de parâmetro de desconto máximo por pipeline, você pode definir com precisão quais usuários, papéis ou grupos de usuários podem aplicar descontos em cada pipeline de Oportunidades e qual é o percentual máximo de desconto permitido. Isso significa que você terá mais confiança na gestão de descontos, o que pode levar a melhores resultados de vendas.  </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=752942595759937882'> <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-novo">
        <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> Novos Parâmetros de Permissões em Tabelas de Preço: Acesso por Regiões e Exclusivo para Leads</h2>
       <br> <br>
        <span class="badge badge-novomelhoria">NOVO<><strong>MELHORIA</strong></span>
        <p>Obtenha mais flexibilidade e controle sobre as tabelas de preços no TOTVS CRM! Agora, é possível configurar permissões com base em regiões geográficas, como país, estado e cidade. Isso significa que você pode decidir quais regiões terão acesso a cada tabela, tornando o processo mais dinâmico e eficiente. Além disso, foi disponibilizado um novo parâmetro que permite restringir o acesso às tabelas de preço exclusivamente para leads no módulo de Oportunidades. Com essa opção ativada, a tabela de preços estará disponível apenas para leads, garantindo que você direcione seus esforços de vendas de forma mais eficaz.</p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=753649009759943070'> <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=v" alt="NOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
      <h2> Adição de <h2>OtimizeCampos oda ProcessoTabela de GerenciamentoPreço deem: OportunidadesFiltros comAvançados, aWorkflow, InclusãoTags e Remoção em MassaColuna de ItensExibição </h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA</span>
      <p> Com a adição <p>Agora,do vocêrecurso podede simplificartabela ede acelerarpreço ono gerenciamentomódulo de oportunidadesOportunidades, inserindoforam erealizadas removendoatualizações váriosem itensdiferentes departes umada solução vez,para alémaproveitar deao ajustarmáximo osessa preços de venda em massa com apenas alguns cliques. Essa melhoria permite gerenciar grandes volumes de itens de maneira mais fácil e rápida, aumentando a produtividade e garantindo resultados ainda mais expressivos para o seu negócio.  </p>
        <div class="flexWrap">
          <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=753649178'> <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-novo">
        <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> Ajuste na API de Integração para Incluir e Alterar Responsáveis Automaticamente como Membros de Equipe</h2>
        <br>
        <span class="badge badge-manutencao">MANUTENÇÃO</span>
        <p>Com o objetivo de garantir um desempenho ainda melhor em nossas APIs de integrações de Oportunidade e Membros de equipe, realizamos ajustes importantes para corrigir inconsistências identificadas em cenários específicos de negócio. Essas alterações foram cuidadosamente projetadas para garantir que a integração opere de maneira confiável e consistente, atendendo às expectativas dos nossos clientes em relação a essa funcionalidade.</p>
        funcionalidade. Essas atualizações incluem a adição dos principais campos da tabela de preço na aplicação de filtro avançado, colunas de exibição na lista de oportunidades, tags para geração de documentos e condições do workflow para gatilhos ou ações. Essas melhorias permitem uma utilização mais completa e eficiente da tabela de preço em recursos relacionados.

 </p>
      <div class="flexWrap">
        <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=759948870'> <button class="button-2">SAIBA MAIS</button></a>

      </div>    
      </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>
  <ul>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>O que é Release Notes?</h2>
      <p>É o documento que agrupa e detalha todas as atualizações de um produto ao longo de uma versão ou período.</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>      <h2>Como identificar a nomenclatura dos releases?</h2>
      <p align="justify">O versionamento semântico é um conjunto de regras de como os números dos releases/versões são atribuídos e incrementados, com objetivo de manter a compatibilidade e integridade em novas liberações. Para cada lançamento deve ter um número único de liberação (release/versão) e, uma vez lançado, o código dessa liberação não pode mais ser alterado. Qualquer necessidade de alteração na solução, deverá ser lançado com um novo número de liberação. A padronização da nomenclatura de releases/versão dos produtos da marca TOTVS tem o propósito de facilitar a compreensão do ciclo de vida dos releases pelos nossos clientes e equipes internas, alinhado às melhores práticas de mercado. O padrão de nomenclatura dos produtos TOTVS seguirá o exemplo: 12.1 (versão). 2301 (Ano e mês). 0001 (Numeração sequencial opcional na nomenclatura utilizado quando houver uma liberação com correções e alterações legais no release corrente).</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Como faço para registrar sugestões de melhorias?</h2>
      <p> Sua ideia poderá ser compartilhada através do canal <a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics">Central Colaborativa</a>. Esta área foi criada para você sugerir novas funcionalidades para o TOTVS CRM - Gestão de Clientes. As sugestões de melhorias serão monitoradas pelo nosso time de inovação e avaliada a viabilidade para uma futura implementação.</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>