Histórico da Página
Versões comparadas
comparado com
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
| HTML |
|---|
<style>
h1#title-text {
display: block;
text-align: center;
font-size: 36px;
font-weight: bold;
color: #FFF#0a97e8; /* Cor do texto */
font-family: 'Lato', sans-serif; /* Fonte Lato */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
}
#breadcrumb-section :not(.aui-button, .aui-dialog2-header-close) {
color: #0897E9 !important;
}
</style>
<div style="position: relative;">
<img src="https://tdn.totvs.com/download/attachments/831836705/capa-final.png?version=1&modificationDate=1710524198425&api=v2" width="100%" alt="Título H1">
<h1 id="title-text">Perguntas frequentes</h1>
</div>
|
| HTML |
|---|
<style>.expand-control-text {
vertical-align: top;
color: #182a4e!important;
font-size: 20px!important; }
</style> |
| HTML |
|---|
<style>
summary {
font-size: 17px;
background-color: #fff;
padding: 1.1rem 0rem;
font-weight: 300;
outline: none;
border-radius: 0.25rem;
text-align: left;
cursor: pointer;
position: relative;
padding-left: 8px;
border-color: #f7f7f7;
border-bottom-style: solid;
}
details[open] summary ~ * {
animation: sweep .5s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0; margin-top: -10px}
100% {opacity: 1; margin-top: 0px}
}
details > summary::after {
position: absolute;
content: "+";
right: 20px;
color: #0a97e8; /* Cor do sinal de adição (azul) */
background: transparent; /* Fundo transparente */
}
details[open] > summary::after {
position: absolute;
content: "-";
right: 20px;
color: #0a97e8; /* Cor do sinal de adição (azul) */
background: transparent; /* Fundo transparente */
}
details > summary::-webkit-details-marker {
display: none;
}
summary:hover {
color: #0a97e8!important;
border-color: #c6c6c6!important;
transition: 0.3s;
}
.conteudo {
margin-bottom: 24px !important;
padding: 16px 16px !important;
border-style: solid!important;
border-radius: 1px 1px 8px 8px!important;
border-color: #f7f7f7!important;
border-top-width: 0px!important;
text-align: left; /* Alinhamento do texto à esquerda */
}
</style>
<main>
<!-- detalhes omitidos para brevidade -->
</main>
<style>
details > summary::after {
margin: 0 auto!important;
position: absolute!important;
content: "+"!important;
right: 20px!important;
font-size: 29px!important;
margin-top: -10px!important;
font-weight: 100!important;
}
summary {
details[open] summary ~ * {
animation: sweep .5s ease-in-out;
}
summary:hover {
background: #ededed!important;
}
details[open] > summary {
border-color: #f7f7f7!important;
}
details[open] > summary::after {
background: #000!important;
}
}
</style>
<main>
<details>
<summary class="colorana">Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor suscipit, iure tenetur eveniet, vero tempore delectus? Perferendis, quisquam ullam consequuntur?</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana">Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana">Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor suscipit, iure tenetur eveniet, vero tempore delectus? Perferendis, quisquam ullam consequuntur?</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana">Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana">Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor suscipit, iure tenetur eveniet, vero tempore delectus? Perferendis, quisquam ullam consequuntur?</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana">Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
<details>
<summary class="colorana"> Qual o tempo médio de duração dos vídeos?</summary>
<div class="conteudo">
<p>Fugiat quo voluptas nulla pariatur? Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
</div>
</details>
</main>
<style>
details > summary::after {
margin-bottom: 0 auto!important;
position: absolute!important;
content: "+"!important;
right: 20px!important;
font-size: 29px!important;
margin-top: -10px!important;
font-weight: 100!important;
summary {
details[open] summary ~ * {
animation: sweep .5s ease-in-out;
}
summary:hover {
background: #ededed!important;
}
} </style>
|
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas