HTML |
---|
<div> <img src="https://tdn.totvs.com/download/attachments/731894522/capa-release-notes2731904073/CAPA4.png?version=51&modificationDate=16732060697801673616255015&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; } p { font-family: "Lato", sans-serif; font-weight: 300; text-align: center; font-size: 20px; color: #676767; } </style> |
HTML |
---|
<div id="cd-timeline" class="cd-container"> <div class="cd-timeline-block"> <div class="cd-timeline-img cd-novomelhoria"> <img src="https://tdn.totvs.com/download/attachments/731904073/novomelhoria.png?version=23&modificationDate=16732156961551673216497826&api=v2" alt="NOVO RECURSO"> </div> <!-- cd-timeline-img --> <div class="cd-timeline-content"> <h2> Exclusão lógica (Atividades)</h2> <br> <span class="badge badge-novomelhoria">NOVO RECURSO<>MELHORIA</span> <p align="justify">Lorem>Obtenha mais ipsumcontrole dolore sitorganização amet,sobre consectetura adipisicingsua elit.lista Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui utd.de atividades. Com o novo recurso de exclusão de lógica, agora você pode deletar da sua lista, aquelas atividades desnecessárias. Experimente hoje e sinta a diferença! </p> <div class="flexWrap"> <a href='https://wwwtdn.totvs.com/pages/viewpage.action?pageId=733191298'> <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-novomelhoria"> <img src="https://tdn.totvs.com/download/attachments/731904073/novomelhoria.png?version=23&modificationDate=16732156961551673216497826&api=v2" alt="NOVO RECURSO"> </div> <!-- cd-timeline-img --> <div class="cd-timeline-content"> <h2>Importação de dados em massa para forecast</h2> <br> <span class="badge badge-novomelhoria">NOVO RECURSO<>MELHORIA</span> <p>Lorem<p>Está ipsumcansado dolorde sitinserir amet,dados consecteturmanualmente adipisicingno elit.módulo Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?de Planejamento? Não se preocupe mais, temos uma novidade que o ajudará e otimizará o processo! A partir de agora, você tem a opção de importar dados através de arquivos CSV, tornando o lançamento de dados em larga escala muito mais rápido e eficiente.</p> <div class="flexWrap"> <a href='https://wwwtdn.totvs.com/pages/viewpage.action?pageId=733190747'> <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-novomelhoria"> <img src="https://tdn.totvs.com/download/attachments/731904073/novomelhoria.png?version=23&modificationDate=16732156961551673216497826&api=v2v" alt="NOVO RECURSO"> </div> <!-- cd-timeline-img --> <div class="cd-timeline-content"> <h2>TOTVS CRM WhatsApp <h2>Whatsapp - disponibilizar audio<Extension: envio de áudios para o CRM </h2> <br> <span class="badge badge-novomelhoria">NOVO RECURSO<>MELHORIA</span> <p>E <p>Loremse ipsumvocê dolorpudesse sitter amet,todos consecteturos adipisicingáudios elit.dos Excepturi,seus obcaecaticlientes, quisquamsalvos ide molestiasorganizados eaqueno asperioresseu voluptatibusCRM? cupiditateCom errora assumendaextensão delectusdo oditTOTVS similiqueCRM, earumisso voluptatemé doloremquepossível! doloremAgora, ipsamcom quaeo rerumTOTVS quis.CRM Odit,WhatsApp itaqueExtension, 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.você pode enviar áudios como anexo para o CRM. E o melhor, tudo dentro do contexto! Através desse recurso, será possível acompanhar a data do envio do registro e reproduzi-lo sem a necessidade de fazer o download. Incrível, né? </p> <div class="flexWrap"> <a href='https://wwwtdn.totvs.com/pages/viewpage.action?pageId=733191420'> <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-novomelhoria"> <img src="https://tdn.totvs.com/download/attachments/731904073/novomelhoria.png?version=23&modificationDate=16732156961551673216497826&api=v2" alt="NOVO RECURSO"> </div> <!-- cd-timeline-img --> <div class="cd-timeline-content"> <h2>Regras com multiníveis de Ocultaçãoocultação e Ediçãoedição condicionais na tela de Atividades</h2> <br> <span class="badge badge-novomelhoria">NOVO RECURSO<>MELHORIA</span> <p>Com <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.o novo recurso de regras com múltiníveis, você tem total controle sobre o seu formulário de atividades! Agora é possível exibir, ocultar, marcar como somente leitura ou definir os elementos do formulário de atividades usando regra condicional. </p> <div class="flexWrap"> <a href='https://wwwtdn.totvs.com/pages/viewpage.action?pageId=733191203'> <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-novomelhoria"> <img src="https://tdn.totvs.com/download/attachments/731904073/novomelhoria.png?version=23&modificationDate=16732156961551673216497826&api=v2" alt="NOVO RECURSOMELHORIA"> </div> <!-- cd-timeline-img --> <div class="cd-timeline-content"> <h2>Desativar/Ativar as etapas de ganhoganhas, perdaperdidas e descartedescartadas do pipeline de oportunidades </h2> <br> <span class="badge badge-novomelhoria">NOVO RECURSO<>MELHORIA</span> <p>Mais flexibilidade para adaptar os pipelines às necessidades <p>Loremespecíficas ipsumdo dolorseu sitnegócio! ametAgora, consecteturatravés adipisicingdo elit.construtor Iusto,de optiopipelines, dolorumvocê provident rerum.</p> <div class="flexWrap"> <a href='https://www.totvs.com/pode ativar ou desativar as etapas: ganhas, perdidas e descartadas. Essa melhoria permitirá a configuração das etapas de encerramento, para que os pipelines sejam aderentes a qualquer jornada do cliente. </p> <div class="flexWrap"> <a href='https://tdn.totvs.com/pages/viewpage.action?pageId=732674154'> <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>Inclusão da Unidade de Medida na Ordem de Venda (Mobile)</h2> <br> <span class="badge badge-melhoria">MELHORIA</span> <p>Chega de confusão na hora de incluir produtos na Ordem de Venda! A melhoria permite que a sigla da unidade de medida do produto, seja visualizada nos campos “Estoque” e “Preço de Venda”, concedendo ao vendedor, a clareza necessária para fazer a melhor negociação.</p> <div class="flexWrap"> <a href='https://wwwtdn.totvs.com/pages/viewpage.action?pageId=732664978'> <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>InBound<h2>Integração de Leads: v1reformulação - Reformularda integração de leads através do Datahub DataHub </h2> <br> <span class="badge badge-melhoria">MELHORIA</span> <p>Lorem<p> ipsum dolorSe sitvocê amet,quer consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.importar leads de outras ferramentas para o TOTVS CRM, então esta é a novidade que você esperava! Nesta versão, reestruturamos e repensamos a integração DataHub para explorar todos os recursos disponíveis na plataforma: validações de duplicidade e o mapeamento de campos personalizados. Renomeamos também o DataHub para "Integração de Leads" e o transformamos em um gerador de token para que ferramentas terceiras possam se autenticar em nossas APIs. Incrível, não é? </p> <div class="flexWrap"> <a href='https://wwwtdn.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="MELHORIA"> </div> <!-- cd-timeline-img --> <div class="cd-timeline-content"> <h2>Refletir no aplicativo móvel, regras de exibição a partir de campos personalizados </h2> <br> --> <span class="badge badge-melhoria">MELHORIA</span> <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>Estamos empolgados em trazer mais facilidade para o seu dia a dia. Assim como no ambiente web, agora o ambiente mobile reflete regras de exibição a partir de campos personalizados. Essas regras pré-definidas pelo administrador, condicionam o estado dos campos, tornando-os: ocultos, visíveis, editáveis ou somente leitura. Com essa melhoria, você terá mais mobilidade e eficiência na gestão do CRM.</p> <div class="flexWrap"> <a href='https://wwwtdn.totvs.com/pages/viewpage.action?pageId=733188343'> <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<h2> aplicadosExportação nasde colunasdados dacom visãofiltros não são aplicados ao exportar para csv e xlsx<ativados </h2> <br> <span class="badge badge-manutencao">MANUTENÇÃO</span> <p>Lorem<p>Ajustamos ipsumo dolormecanismo sitde amet,exportação 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> para que os filtros aplicados nas colunas de visualização de indicadores, sejam considerados na geração dos arquivos csv e xlsx. </p> </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<p> isAlteramos thea contentlógica ofde thevalidações last section</p> <div class="flexWrap"> <a href='https://www.totvs.com/'> <button class="button-2">SAIBA MAIS</button></a>do formulário, permitindo editar contatos de contas inativas.</p> </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"Open; Sans", sans-seriffont-size: 16px; } img { max-width: 100%; } p { text-align:justify; color: #363636; font-family: "Lato", sans-serif; font-size: 16px;} }h2 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: #20d691#363636; } .cd-timeline-img.cd-melhoria { background: #6f60f6#363636; } .cd-timeline-img.cd-manutencao { background: #efc307#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 #5596e6#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: #0897E9#FDAB0E; border: none; border-radius: 4px; cursor: pointer; } .button-2:hover { background-color: #0897E9; } .button-2:active { background-color: #6B48FF#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: #0897E9#363636; border: none; border-radius: 6px; cursor: pointer; } .button-2:hover { background-color: #0897E9#feac0e; } .button-2:active { background-color: #6B48FF#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: #efc307#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> |