Histórico da Página

HTML
<div> <img src="https://tdn.totvs.com/download/attachments/731894522/capa-release-notes2.png?version=5&modificationDate=1673206069780&api=v2" alt=""> </div>

HTML
<style> img { max-width: 100%; } </style>

HTML

   <div style="text-align:center"><h1>O>
    <h1>O QUE HÁ DE NOVO NO TOTVS CRM?</h1>
    <h5>Descubra os recursos, melhorias e manutenções mais recentes do TOTVS CRM - Gestão de Clientes</h5><h5>
  </div>

  <div id="cd-timeline" class="cd-container">
    <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-melhorianovo">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhorianovo.png?version=32&modificationDate=16732164978261673215696155&api=v2" alt="MelhoriaNOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Title<h2> ofExclusão section 1</h2>lógica (Atividades)</h2>
        <br>
        <span class="badge badge-novo">NOVO RECURSO</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
        <a href="#0"<div class="cd-read-moreflexWrap"> more</
          <a href='https://www.totvs.com/'> <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-melhorianovo">
        <img src="https://tdn.totvs.com/download/attachments/731904073/melhorianovo.png?version=32&modificationDate=16732164978261673215696155&api=v2" alt="MelhoriaNOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Title of section 1<<h2>Importação de dados em massa para forecast</h2>
        <p>Lorem<br>
 ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum <span class="badge badge-novo">NOVO RECURSO</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
</p>
        <div class="flexWrap">
          <a href="#0"'https://www.totvs.com/'> <button class="cdbutton--more2">>SAIBA more<MAIS</button></a>
         </div>    
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

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

      <div class="cd-timeline-content">
        <h2>Title<h2>Whatsapp of- sectiondisponibilizar 2</h2>audio</h2>
        <br>
        <span class="badge badge-novo">NOVO RECURSO</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. IustoExcepturi, optioobcaecati, dolorumquisquam providentid rerummolestias auteaque hicasperiores quasivoluptatibus placeatcupiditate iureerror temporaassumenda laudantiumdelectus ipsaodit adsimilique debitis unde?</p>
        <a href="#0" class="cd--more"> more</a>
            </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
        <div class="cd-timeline-img cd-manutencaoflexWrap">
          <img<a srchref="'https://codyhousewww.totvs.co/demo/vertical-timeline/img/cd-icon-picture.svg" alt="Picture">
com/'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-imgcontent -->

      </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-contentblock">
      <div  <h2>Title of section 3</h2>class="cd-timeline-img cd-novo">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
        <a href="#0" class="cd--more"> more</a>
        <span class="cd-date">Jan 24</span>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

<img src="https://tdn.totvs.com/download/attachments/731904073/novo.png?version=2&modificationDate=1673215696155&api=v2" alt="NOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Regras com multiníveis de Ocultação e Edição condicionais na tela de Atividades</h2>
        <br>
        <span class="badge badge-novo">NOVO RECURSO</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
        <div class="cd-timeline-blockflexWrap">
      <div class="cd-timeline-img cd-novo">
        <img src="<a href='https://tdnwww.totvs.com/download/attachments/731904073/novo.png?version=2&modificationDate=1673215696155&api=v2" alt="Location">'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-imgcontent -->

    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-contentblock">
      <div  <h2>Title of section 4</h2>class="cd-timeline-img cd-novo">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
        <a href="#0" class="cd--more"> more</a><img src="https://tdn.totvs.com/download/attachments/731904073/novo.png?version=2&modificationDate=1673215696155&api=v2" alt="NOVO RECURSO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Desativar/Ativar as etapas de ganho, perda e descarte do pipeline de oportunidades </h2>
        <br>
     </div> <!-- cd-timeline-content -->   <span class="badge badge-novo">NOVO RECURSO</span>
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
        <div class="cd-timeline-img cd-melhoriaflexWrap">
        <img  <a srchref="'https://codyhousewww.totvs.co/demo/vertical-timeline/img/cd-icon-location.svg" alt="Location">com/'> <button class="button-2">SAIBA MAIS</button></a>
        </div>    
      </div> <!-- cd-timeline-imgcontent -->

      </div> <!-- cd-timeline-block -->
    <div class="cd-timeline-contentblock">
      <div  <h2>Title of section 5</h2>class="cd-timeline-img cd-melhoria">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
   <img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MELHORIA">
      </div> <!-- cd-timeline-img -->

     <a href="#0"<div class="cd-readtimeline-more">Read more</a>content">
        <span class="cd-date">Feb 18</span>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

    <div class="cd-timeline-block"><h2>Inclusão da Unidade de Medida na Ordem de Venda (Mobile)</h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA</span>
      <div class="cd-timeline-img cd-movie">
        <img src="https://codyhouse.co/demo/vertical-timeline/img/cd-icon-movie.svg" alt="Movie">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
        <div class="flexWrap">
          <a href='https://www.totvs.com/'> <button class="button-2">SAIBA MAIS</button></a>
        <h2>Final Section</h2>
  </div>    
      <p>This is the content of the last section</p>
        <span class="cd-date">Feb 26</span>
      </</div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->
   </div> <!--  <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>InBound Leads v1 - Reformular integração de leads através do Datahub </h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
        <div class="flexWrap">
          <a href='https://www.totvs.com/'> <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="MELHORIA">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Criar regras de exibição condicional utilizando campos BTB</h2>
        <br>
        <span class="badge badge-melhoria">MELHORIA</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
        <div class="flexWrap">
          <a href='https://www.totvs.com/'> <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-manutencao">
        <img src="https://tdn.totvs.com/download/attachments/731904073/manutencao.png?version=1&modificationDate=1673215850828&api=v2" alt="MANUTENÇÃO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Filtros aplicados nas colunas da visão não são aplicados ao exportar para csv e xlsx</h2>
        <br>
        <span class="badge badge-manutencao">MANUTENÇÃO</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
        <div class="flexWrap">
          <a href='https://www.totvs.com/'> <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-manutencao">
        <img src="https://tdn.totvs.com/download/attachments/731904073/manutencao.png?version=1&modificationDate=1673215850828&api=v2" alt="MANUTENÇÃO">
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content">
        <h2>Não permite salvar um contato se a conta está inativa</h2>
        <br>
        <span class="badge badge-manutencao">MANUTENÇÃO</span>
        <p>This is the content of the last section</p>
        <div class="flexWrap">
          <a href='https://www.totvs.com/'> <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: "Open Sans", sans-serif;
}

img {
  max-width: 100%;
}


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: 90%;
  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: 48px;
  height: 48px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -24px;
  margin-top: -24px;
}
.cd-timeline-img.cd-novo {
  background: #20d691;
}
.cd-timeline-img.cd-melhoria {
  background: #6f60f6;
}
.cd-timeline-img.cd-manutencao {
  background: #efc307;
}
@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

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: "Open Sans", sans-serif;
}

img {
  max-width: 100%;
}


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

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

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: 90%;
  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;
  fontmargin-sizeleft: 14px50px;
  colorbackground: #718ca1#f5f5fa;
  border-webkit-transitionradius: all 0.2s25em;
  max-moz-transition: all 0.2swidth: 400px;
  padding: 1em;
  transitionbox-shadow: 0 all3px 0.2s #5596e6;
}
.no-touch .cd-nugget-info a:hover {timeline-content:after {
  content: "";
  display: table;
  opacityclear: 0.8both;
}
.cd-nuggettimeline-infocontent spanh2 {
  vertical-aligncolor: middle#363636;
  displayfont-weight: inline-blockbold;
}
.cd-nuggettimeline-info span svg {
  display: block;
}
.cd-nugget-info .cd-nugget-info-arrowcontent p,

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

}

.cd-timeline-content .cd-date {
  filldisplay: #718ca1inline-block;
}


#cd.cd-timeline-content p {
  positionmargin: relative;
  padding: 2em1em 0;
  marginline-topheight: 2em1.6;
  margin-bottom: 2em;
}
#cd.cd-timeline::before {
  /* this is the vertical line */
  content: "";
  position: absolute-content .cd-read-more {
  float: right;
  toppadding: 0.8em 1em;
  leftbackground: 18px#5596e6;
  heightcolor: 100%white;
  widthborder-radius: 4px0.25em;
  backgroundtext-decoration: #d7e4ednone;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #cd-timeline.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: "";
  leftposition: 50%absolute;
  top: 16px;
  margin-leftright: -2px100%;
  }
}

.cd-timeline-block {height: 0;
  positionwidth: relative0;
  marginborder: 7px 2emsolid 0transparent;
}
.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
  border-right: 7px solid #bfcdd6;
}
@media only screen and (min-width: 768px) {
  .cd-timeline-block:first-childcontent h2 {
    marginfont-topsize: 020px;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {    font-size: 1.25rem;
    font-weight: bold ;
  }
  .cd-timeline-content p {
    font-size: 16px;
    marginfont-size: 4em 01rem;
  }
  .cd-timeline-block:first-child {-content .cd-read-more,
    margin-top: 0;.cd-timeline-content .cd-date {
  }
  .cd-timeline-block:last-child {font-size: 14px;
    marginfont-bottomsize: 0.875rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
  position: absolute;content {
  top: 0;
  margin-left: 0;
    widthpadding: 40px1.6em;
    heightwidth: 40px45%;
  border-radius: 50%;}
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08),.cd-timeline-content::before {
    top: 24px;
    left: 100%;
    0 3px 0 4px rgba(0, 0, 0, 0.05);
}
border-color: transparent;
    border-left-color: #d7e4ed;
  }
  .cd-timeline-img imgcontent .cd-read-more {
   display float: blockleft;
  }
  width: 48px;
  height: 48px .cd-timeline-content .cd-date {
    position: absolute;
  position  width: relative100%;
    left: 50%122%;
    top: 50%6px;
  margin-left: -24px;
  margin-top: -24px;
}
.cd-timeline-img.cd-novo {
  background: #20d691;
}
 font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-imgblock:nth-child(even) .cd-melhoriatimeline-content {
    backgroundfloat: #6f60f6right;
  }
  .cd-timeline-img-block:nth-child(even) .cd-manutencao-timeline-content::before {
  background: #efc307;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img { top: 24px;
    widthleft: 60pxauto;
    heightright: 60px100%;
    leftborder-color: 50%transparent;
    marginborder-right-leftcolor: -30px#d7e4ed;
  }
  .cssanimationscd-timeline-block:nth-child(even) .cd-timeline-img.is-hiddencontent .cd-read-more {
    visibilityfloat: hiddenright;
  }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;block:nth-child(even) .cd-timeline-content .cd-date {
    -moz-animation: cd-bounce-1 0.6sleft: auto;
    animationright: cd-bounce-1 0.6s 122%;
    text-align: right;
  }
}

@-webkit-keyframes cd-bounce-1 {
  0% {  .button-2 {
    padding: 8px 9px;
    font-size: 12px;
    opacitycolor: 0#fff;
    background-webkit-transformcolor: scale(0.5)#0897E9;
  }

  60%border: {none;
    opacityborder-radius: 14px;
    -webkit-transformcursor: scale(1.2)pointer;
  }
  
  100%.button-2:hover {
    background-webkit-transformcolor: scale(1)#0897E9;
  }
}
@-moz-keyframes cd-bounce-1 {
  0%.button-2:active {
    opacitybackground-color: 0#6B48FF;
  }
  -moz-transform: scale(0.5);
  }

  60%#wrapper {
    opacitydisplay: 1flex;
    -moz-transform: scale(1.2)flex-direction: column;
    gap: 20px;
  }

  100%position: {absolute;
    -moz-transforminset: scale(1)0;
  }
}
@keyframes cd-bounce-1 {
  0% {  justify-content: center;
    opacityalign-items: 0center;
    -webkit-transformmargin: scale(0.5);
  }
  -moz-transform: scale(0.5);.flexWrap {
    -ms-transformdisplay: scale(0.5)flex;
    -o-transformgap: scale(0.5)2px;
    transformwidth: scale(0.5)50px;
  }

  60%#disclaimer {
    opacityfont-family: 1Tahoma;
    -webkit-transformcolor: scale(1.2)#333333;
    -moz-transformposition: scale(1.2)fixed;
    -ms-transformtop: scale(1.2)5%;
    -o-transformright: scale(1.2)5%;
    transformwidth: scale(1.2)5%;
  }
  
  
  
  100%.button-2 {
    -webkit-transform: scale(1)padding: 8px 9px;
    font-moz-transformsize: scale(1)12px;
    -ms-transform  color: scale(1)#fff;
    background-o-transformcolor: scale(1)#0897E9;
    transformborder: scale(1)none;
  }
}
.cd-timeline-content {
  positionborder-radius: relative6px;
  margin-left  cursor: 50pxpointer;
  }
 background: #f5f5fa;
  border.button-radius2:hover 0.25em;
{
    max-width: 400px;
  paddingbackground-color: 1em#0897E9;
  box-shadow: 0 3px 0 #5596e6;
}
.cd-timeline-content:after}
  
  .button-2:active {
   content background-color: ""#6B48FF;
  }
 display: table;
  clear: both;
}
.cd-timeline-content h2
  #wrapper {
  color  display: #363636flex;
}
.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 {
     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: 20px9px;
    font-sizeweight: bold 1.25rem;
 
 }
 
 .cd-timeline-content pbadge-novo {
    font-sizecolor: 16px#fff;
    fontbackground-sizecolor: 1rem#20d691;
  }
  .cd-timeline-content .cd-read-more,
  .cd-timeline-content .cd-date { border-radius: 10px;
    font-sizepadding: 6px 14px7px;
    font-size: 0.875rem9px;
 font-weight: bold  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
 
 .badge-danger{
    color: #ebeef0;
    background-color: #e93e9c;
    margin border-leftradius: 010px;
    padding: 6px 1.6em7px;
    width: 45%;
 font-size: 9px;
 font-weight: bold }
 
 .cd-timeline-content::beforebadge-manutencao {
    topcolor: 24px#FFF;
    leftbackground-color: 100%#efc307;
    border-colorradius: transparent10px;
    border-left-color: #d7e4edpadding: 6px 7px;
  }
  .cd-timeline-content .cd-read-more {
    float: left;
 font-size: 9px;
 font-weight: bold;
 }
 
 .cd-timeline-content .cd-datebadge-melhoria {
    positioncolor: absolute#FFF;
    widthbackground-color: 100%#6f60f6;
     leftborder-radius: 122%10px;
    toppadding: 6px 7px;
    font-size: 16px9px;
    font-sizeweight: 1rembold;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-contentbadge-light {
    floatcolor: right#8686FF;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
background-color: #F3F3FF
     topborder-radius: 24px10px;
    leftpadding: auto;
    right: 100%6px 7px;
    borderfont-colorsize: transparent9px;
    borderfont-right-colorweight: #d7e4edbold;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more badge-dark {
    floatcolor: right#ebeef0;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: autobackground-color: #064118;
     border-radius: 10px;
    rightpadding: 6px 122%7px;
    textfont-alignsize: right9px;
 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>

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 14

Nova versão 15

Chave