Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
<div id="myCarousel" style="max-width: 100%; overflow: hidden;">
  <div style="display: flex; transition: all 1s10s ease;">

    <div style="flex: 0 0 100%; max-width: 100%; text-align: center;">
      <img src="https://a.imagem.app/oX6ZGZoTjEXS.jpeg" alt="Imagem 12" style="max-width: 100%;">
    </div>

     <div style="flex: 0 0 100%; max-width: 100%; text-align: center;">
      <img src="https://a.imagem.app/oTjEXSoqEK5Q.jpeg" alt="Imagem 23" style="max-width: 100%;">
    </div>    </div>
</div>  


<style>
  #myCarousel {
   <div style="flex: 0 0 100%;width: 100%;
    max-width: 100%; text-align
    overflow: centerhidden;">
  }

  #myCarousel > div <img src="https://a.imagem.app/oX6ZGZ.jpeg" alt="Imagem 3" style="max-width: 100%;">{
    display: flex;
    </div>    </div>
</div>  


<style>
  #myCarousel animation: carousel-animation 15s infinite; /* Alterado para 3s */
  }

  #myCarousel > div > div {
    widthflex: 0 0 100%;
    max-width: 100%;
    overflowtext-align: hiddencenter;
  }

  #myCarousel@keyframes >carousel-animation div {
    display:0% flex;{
    animation: carousel-animation 15s infinite; /* Alterado para 3s */
transform: translateX(0);
    }

  #myCarousel > div50% > div {
    flex: 0 0 100%;
  transform:  max-width: 100%;
    text-align: center;translateX(-100%);

  }

  @keyframes100% carousel-animation {
    0% {
      transform: translateX(0);
    }
    33.33% {
      transform: translateX(-100%);
    }}
</style>  


Informações

Para os clientes Fluig que queiram participar do Workshop, basta manifestar interesse em [email protected] informando o CodT da sua empresa no e-mail.

HTML
<style type="text/css">
    66.66%cards-container {
       transform width: translateX(-200%)100%;
    }
    100%height: {auto;
      transform  margin: translateX(0)auto;
    }
  }
</style>  
Informações

A participação em nosso evento de Workshop pode ser solicitada através do e-mail: [email protected].

HTML
<style type="text/css">
  display: flex;
      .cards-container {  flex-direction: column;
        widthbox-sizing: 100%border-box;
        heightjustify-items: autocenter;
    }

    margin: auto;.card {
        displaywidth: flex100%;
        flex-directionheight: columnauto;
        box-sizing: border-box;
        justify-items: center;
    }

    .card {display: flex;
        width: 100%;
        height: auto;
        display: flex;
        margin: auto auto 20px auto;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 10px;
    }

    .card-image {
        object-fit: cover;
        width: 43%;
        max-width: 420px;

        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .card-text-container {
        text-align: left;
        padding: 30px;
    }

    .card-label {
        color: orange;
        font-weight: bold;
        font-size: 13px;
    }

    #card-title-link {
        text-decoration: none;
        color: #045B8F#0897E9;
        font-weight: bold;
        font-size: 17px;
    }

    #card-title-link:hover {
        text-decoration: underline;
    }

    .card-desc {
        margin: 0 !important;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0px;
        color: #494440;
    }

    .card-text-margin-bottom {
        margin: 0 0 5px 0 !important;
    }
</style><section class="cards-container">
<div class="card">
<div class="card-text-container">
<h3 style="color: rgb(203, 25, 89)#0897E9; font-weight: bold; text-align: center;">Informações</h3>
<p class="card-desc"<p></p>
<p style="font-family: 'Roboto',  justify-content: space-between;">Entre em contato pelo E-mail <a
href="https://totvscst.zendesk.com/hc/pt-br/#home" target="_blank">[email protected]</a>. A
equipe de atendimento do TOTVS Fluig estará pronta para lhe ajudar.</p>
<p style="font-family: 'Roboto',  justify-content: space-between;">Nosso Workshop tem como objetivo proporcionar uma imersão completa
nas soluções da TOTVS Fluig. Esteja preparado para adquirir um profundo conhecimento de nossa plataforma e
descobrir as melhores abordagens para implementá-la em sua empresa. Abordaremos todos os aspectos da plataforma,
com uma visão detalhada que inclui as atualizações mais recentes. O evento contará com a participação de nossos
especialistas de diversas áreas para garantir a abordagem abrangente de todos os temas, proporcionando uma visão
completa do TOTVS Fluig. Além disso, ofereceremos treinamento ministrado pelos especialistas do Fluig Academy.
Segue cronograma abaixo:</p>

</div>
</div>
</section>

Workshop Fluig: Sua Jornada Personalizada para o Sucesso!

>

Seja bem-vindo ao Fluig! Nosso workshop exclusivo (e ao vivo!), foi pensado especialmente para novos clientes ansiosos para explorar todas as potencialidades do Fluig, bem como para os clientes fiéis que desejam ficar por dentro das mais recentes inovações.
<p></p>
Nosso objetivo é simples, porém ambicioso: dar as boas-vindas calorosas aos novos membros da nossa comunidade Fluig e proporcionar a todos os participantes os melhores caminhos para explorar e utilizar nosso produto de forma eficiente. Mais do que isso, queremos que todos tenham uma manhã enriquecedora, repleta de aprendizado e troca de conhecimentos sobre as inúmeras possibilidades que o Fluig oferece.
<p></p>
Durante o workshop, os participantes terão a oportunidade de conhecer o time por trás da Solução, além de ter uma manhã de treinamento com um Desenvolvedor Fluig, à disposição para orientar e esclarecer dúvidas, garantindo que cada pessoa saia do evento com uma compreensão profunda e prática do produto.
<p></p>
Além disso, o workshop será uma excelente ocasião para conhecer outros usuários, compartilhar experiências e descobrir novas formas de otimizar processos e aumentar a produtividade com o Fluig. Acreditamos que a colaboração entre os membros da comunidade é fundamental para impulsionar a inovação e promover o crescimento mútuo.
<p></p>
Prepare-se para uma manhã estimulante, repleta de insights e descobertas que irão revolucionar a maneira como você enxerga e utiliza o Fluig. Estamos ansiosos para recebê-lo neste evento imperdível, onde juntos, vamos explorar todas as possibilidades e potencialidades que o Fluig tem a oferecer.
<p></p>
Solicite sua inscrição* gratuita e junte-se a nós nessa jornada emocionante rumo ao futuro da colaboração e produtividade!
<p></p>
*Vagas limitidas.

</p>

</div>
</div>
</section>




Workshop Fluig: Sua Jornada Personalizada para o Sucesso!

HTML
<div class="container-fluid">
	<div class="row">
		<div class="col-12" style="height: 100%; background-color: #f9f9f9; padding: 20px;">
			<h2 style="color: #0897E9; font-weight: bold; font-size: 24px;">Cronograma</h2>
			<hr style="border: 1px solid #0897E9; margin: 10px 0;">

			<div class="event">
				<strong>08h30 - Abertura</strong>
			</div>

HTML
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-3" style="width: 100%; height: 100%; background-color: #f9f9f9; border-right: 1px solid #007BFF; padding: 20px;">
      <h2 style="color: #007BFF; font-weight: bold; font-size: 24px;">Cronograma</h2>
      <hr style="border: 1px solid #007BFF; margin: 10px 0;">

      <div class="event">
        <strong>08h30 - Abertura</strong>
      </div>

      <div class="event">
        <strong>09h20 - Time Fluig</strong>
        <p>Suporte, Customer Success e Produto</p>
      </div>

      <div class="event">
        <strong>09h40 - Treinamento</strong>
        <ul class="sub-events">
          <li>Modelos de Ambiente
            <ul class="sub-sub-events">
              <li>On Premise, Cloud TOTVS ou Cloud Terceiro</li>
            </ul>
          </li>
  <div class="event">
				<strong>08h40 - Introdução: o    <li>Licenciamento
            <ul class="sub-sub-events">
              <li>Como Funciona o licenciamento do Fluig</li>
            </ul>
          </li>Fluig</strong>
				<p>Especialista Fluig</p><br>
			</div>

			<div class="event">
				<strong>09h20 - Time Fluig</strong>
				<p>Customer Support, Customer Success, Product Owner</p><br>
			</div>

			<div class="event">
				<strong>09h40 - Treinamento</strong>

          <li>WCMADMIN
            <p>Desenvolvedor Fluig</p>

				<ul class="sub-sub-events">
					<li>Modelos de Ambiente
						<ul class="sub-sub-events">
							<li>On Premise,          <li>Apresentação do usuário WCMADMIN e o TOTVS Fluig é Multi tenant</li>
            </ul>
          </li>
          <li>Painel de Controle(ADM)
            Cloud TOTVS ou Cloud Terceiro</li>
						</ul>
					</li>
					<li>Licenciamento
						<ul class="sub-sub-events">
							<li>Como Funciona o licenciamento do Fluig com a citação      <li>Painel de Controle, conceitos e boas práticas de usuário, papel e grupo</li>
            </ul>
          de exemplos</li>
						</ul>
					</li>
					<li>WCMADMIN
						<ul class="sub-sub-events">
							<li>Apresentação do usuário WCMADMIN e o TOTVS Fluig é Multi tenant</li>
						</ul>
					</li>
          <li>Documentos
            <li>Primeiro Login
						<ul class="sub-sub-events">
							<li>Login com usuário administrador e          <li>Gestão Eletrônica de Documentos, Taxonomia, Permissionamento, Controle de versão</li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="event">
        <strong>10:40 - Intervalo</strong>
      </div>

      <div class="event">
        <strong>10:50 - Processos</strong>
        <p>Automatização de processos, Notação BPMN, Apresentação de processo pronto e integrado para demonstrar e explicar</p>
        <ul class="sub-events">
          <li>Fluig
            <ul class="sub-sub-events">
              <li>O Fluig é usuário comum</li>
						</ul>
					</li>
					<li>Painel de Controle(ADM)
						<ul class="sub-sub-events">
							<li>Painel de Controle, conceitos e boas práticas de usuário, papel e grupo</li>
						</ul>
					</li>
					<li>Documentos
						<ul class="sub-sub-events">
							<li>Gestão Eletrônica de Documentos, Taxonomia, Permissionamento, Controle de versão</li><br>
						</ul>
					</li>
				</ul>
			</div>

			<div class="event">
				<strong>10:40 - Intervalo</strong>
			</div>

			<div class="event">
				<strong>10:50 - Processos</strong>
				<p>Automatização de processos, Notação BPMN, Apresentação de processo pronto e integrado para demonstrar
					e explicar</p>
				<ul class="sub-events">
					<li>Fluig
						<ul class="sub-sub-events">
							<li>O Fluig é customizável, Integrações (caminhos)</li>
            						</ul>
          					</li>
					<li>Pontos          <li>Apoio
            de Apoio
						<ul class="sub-sub-events">
              							<li>Portal Academy, Central de ajuda/Documentação, Central Colaborativa</li>
            li><br>
						</ul>
          					</li>
        				</ul>
      </div>

      <div class="event">
        <strong>11:45 - Conclusão e Perguntas</strong>
      </div>

      <div class="event">
        <strong>12:00 - Fim</strong>
      </div>
    </div>
  </div>
</div>

			</div>

			<div class="event">
				<strong>11:45 - Quiz <font-weight: bold style="color: #0897E9">COM PREMIAÇÃO!</strong>
			</div>

			<div class="event">
				<strong>12:00 - Encerramento</strong>
			</div>
		</div>
	</div>
</div>
</section>
<div id="card1"style="display: flex; flex-wrap: wrap; justify-content: space-between;"> <div style="width: 23%; max-width: 400px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; text-align: center; background-color: #f9f9f9; display: flex; flex-direction: column; margin-bottom: 10px;"> <img


    <div class="card">
        <img 
            class="card-image" 
            src="https://a.imagem.app/
oTCBZ2
oFM2xT.png"
            alt=
"Imagem do Card 1" style="width: 100%; max-height: 100px; object-fit: cover;">
""
        >
        <div class="card-text-container">
            <p class="card-label card-text-margin-bottom">FLOWS</p>
       
     <h2 
<div style="flex-grow: 1;
id="card-title" class="card-text-margin-bottom">
            
<p>Conheça a TOTVS STORE: a loja virtual da maior empresa de tecnologia do Brasil. Acesse e confira nossos produtos e serviços.</p>
    <a href="https://tdn.totvs.com/display/fluig/TOTVS+FLOWS" id="card-title-link">TOTVS Flows: Processos prontos para impulsionar sua empresa.</a>
            </h2>
     
</div>
       <p 
<a href="https://totvs.store/" style="display: block; background-color: #007BFF; color: #fff; padding: 10px; text-align: center; text-decoration: none; border-radius: 5px; margin-top: 10px;">Acesse</a> </div> <div id="card2" style="width: 23%; max-width: 400px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; text-align: center; background-color: #f9f9f9; display: flex; flex-direction: column; margin-bottom: 10px;"> <img src="https://a.imagem.app/oTLjrv.png" alt="Imagem do Card 1" style="width: 100%; max-height: 100px; object-fit: cover;">
class="card-desc">O TOTVS Flows é uma solução de processos pré-definidos e configurados pelo time TOTVS Fluig que estão prontos para uso. Ele pode atender a diversos segmentos, tais como tecnologia da informação, suprimentos, financeiro, recursos humanos, dentre outros.</p>
        </div>
    </div>

    <div class="card">
        <img 
 

  
 
 
        
<div
 
style
class="
flex
card-
grow: 1;">
image" 
            
<p>Aprenda programação, integrações com ERP, instalação de sistema, KPIs e muito mais no portal oficial de treinamentos do TOTVS Fluig.</p>
src="https://tdn.totvs.com/download/attachments/66618185/social.jpg"
            alt=""
        
</div>
>
        
<a
<div 
href="https://academy.fluig.com/" style="display: block; background-color: #007BFF; color: #fff; padding: 10px; text-align: center; text-decoration: none; border-radius: 5px; margin-top: 10px;">Acesse</a> </div> <div id="card3" style="width: 23%; max-width: 400px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; text-align: center; background-color: #f9f9f9; display: flex; flex-direction: column; margin-bottom: 10px;"> <img src
class="card-text-container">
            <p class="card-label card-text-margin-bottom">TOTVS Identity</p>
            <h2 id="card-title" class="card-text-margin-bottom">
                <a href="https://
a
tdn.
imagem
totvs.
app
com/pages/
oTrM32.png
viewpage.action?pageId=269063445#Identity|Produ%C3%A7%C3%A3o-Junho" 
alt
id="
Imagem do Card 1" style="width: 100%; max-height: 100px; object-fit: cover;">
card-title-link">Novas opções de provisionamento e autenticação</a>
            </h2>
     
 
 
 
 
  
 
 
 
 
 
 
 <div
<p 
style
class="
flex-grow: 1;"> <p>APIs, documentações técnicas, Style Guide. Tudo o que o Dev precisa para colocar a mão na massa.</p>
card-desc">Agora você pode permitir o login com redes sociais (Linkedin, Google, Facebook, etc) para os usuários de sua empresa. Aproveite e confira também a nova tela de Segurança, muito mais organizada e fácil de usar.</p>
        </div>
    </div>
</section>
HTML
<style type="text/css">
    .cards-container {
HTML
<style type="text/css">
    .cards-container {
        width: 100%;
        height: auto;
        margin: auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        justify-items: center;
    }

    .card {
        width: 100%;
        height: auto;
        display: flex;
        margin: auto auto 20px auto;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 10px;
    }

    .card-image {
        object-fit: cover;
        width: 43%;
        max-width: 420px;

        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .card-text-container {
        text-align: left;
        padding: 30px;
    }

    .card-label {
        color: orange;
        font-weight: bold;
        font-size: 13px;
    }

    #card-title-link {
        text-decoration: none;
        color: #CB1959;
        font-weight: bold;
        font-size: 17px;
    }

    #card-title-link:hover {
        text-decoration: underline;
    }

    .card-desc {
        margin: 0 !important;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0px;
        color: #494440;
    }

    .card-text-margin-bottom {
        margin: 0 0 5px 0 !important;
    }
</style>

<section class="cards-container">
    <div class="card">
        <imgwidth: 100%;
            class="card-image" height: auto;
            src="https://tdn.totvs.com/download/attachments/66618185/banner_512x258.png?" margin: auto;
        display: flex;
   alt=""
        >flex-direction: column;
        <div class="card-text-container">box-sizing: border-box;
        justify-items: center;
   <p class="card-label card-text-margin-bottom">TOTVS Fluig Plataforma</p>
 }

    .card {
        width: 100%;
       <h2 id="card-title" class="card-text-margin-bottom"> height: auto;
        display: flex;
       <a href="https://tdn.totvs.com/pages/releaseview.action?pageId=95617506" id="card-title-link">margin: auto auto 20px auto;
        box-shadow: 0px 2px 4px #00000029;
        Fique por dentro da Novidades!border-radius: 10px;
    }

    .card-image {
        object-fit: cover;
  </a>
      width: 43%;
     </h2>
   max-width: 420px;
        <p class="card-desc">Fique por dentro de todas as novidades da última grande atualização do TOTVS Fluig Plataforma para agregar valor ao seu negócio.
  border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .card-text-container {
        text-align:  </p>
left;
         </div>padding: 30px;
    </div>}

    <div class="card">.card-label {
        <imgcolor: #FEAC0E;
        font-weight: bold;
   class="card-image" 
    font-size: 13px;
    }

   src="https://a.imagem.app/oFM2xT.png"
   #card-title-link {
          alt=""text-decoration: none;
        >color: #CB1959;
        <div class="card-text-container">font-weight: bold;
        font-size: 17px;
   <p class="card-label card-text-margin-bottom">FLOWS</p>
 }

    #card-title-link:hover {
        text-decoration: underline;
    }

  <h2 id="card-title" class="card-text-margin-bottom"> .card-desc {
        margin: 0 !important;
      <a href="https://tdn.totvs.com/display/fluig/TOTVS+FLOWS" id="card-title-link">TOTVS Flows: Processos prontos para impulsionar sua empresa.</a>
  font-size: 15px;
        font-weight: 400;
        letter-spacing: 0px;
    </h2>
    color: #494440;
    }

   <p class="card-desc">O TOTVS Flows é uma solução de processos pré-definidos e configurados pelo time TOTVS Fluig que estão prontos para uso. Ele pode atender a diversos segmentos, tais como tecnologia da informação, suprimentos, financeiro, recursos humanos, dentre outros.</p>
.card-text-margin-bottom {
        margin: 0 0 5px 0 !important;
    }
    
    .card-image {
        max-width: 100%;
         </div>height: auto;
    }
</div>
style>

<section class="cards-container">
    <div class="card">
        <img 
            class="card-image" 
            src="https://tdn.totvs.com/download/attachments/66618185/social.jpg"banner_512x258.png?" 
            alt=""
        >
        <div class="card-text-container">
            <p class="card-label card-text-margin-bottom">TOTVS Fluig Identity<Plataforma</p>
            <h2 id="card-title" class="card-text-margin-bottom">
                <a href="https://tdn.totvs.com/pages/viewpagereleaseview.action?pageId=269063445#Identity|Produ%C3%A7%C3%A3o-Junho" id="card-title-link">Novas opções de provisionamento e autenticação<95617506" id="card-title-link">
                    Fique por dentro da Novidades!
                </a>
            </h2>
            <p class="card-desc">Agora você pode permitir o login com redes sociais (Linkedin, Google, Facebook, etc) para os usuários de sua empresa. Aproveite e confira também a nova tela de Segurança, muito mais organizada e fácil de usar.>Fique por dentro de todas as novidades da última grande atualização do TOTVS Fluig Plataforma para agregar valor ao seu negócio.
            </p>
        </div>
    </div>
</section>
Informações
iconfalse
titleLinks Úteis
HTML




Informações
iconfalse
titleLinks Úteis



HTML
<div class="card" style="border: 1px solid #ccc; display:  <a hrefinline-block; margin-right: 10px; width: 18rem;">
  <img src="https://style.fluig.com/a.imagem.app/oTCBZ2.png" class="card-img-top" alt="..." style="displaybox-shadow: block 2px 2px 5px #ccc; backgroundmax-colorwidth: #007BFF100%; colormax-height: #fff150px;">
  <div class="card-body" style="padding: 10px; text-alignheight: center100%; text-decoration: none; border-radius: 5px; margin-top: 10px;">Acesse</a>
    </div>


">
    <h5 class="card-title">Conheça a TOTVS STORE</h5>
    <p <div idclass="card4card-text">A style="width: 23%; max-width: 400px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; text-align: center; background-color: #f9f9f9; display: flex; flex-direction: column; margin-bottom: 10px;">    
<img srcloja virtual da maior empresa de tecnologia do Brasil. Acesse e confira nossos produtos e serviços.</p>
    <a href="https://a.imagem.app/oTCjHV.pngtotvs.store" alt="Imagem do Card 1class="btn btn-primary">Acesse</a>
  </div>
</div>

<div class="card" style="widthborder: 100%; max-height: 100px; object-fit: cover;">             
         <div style="flex-grow: 11px solid #ccc; display: inline-block; margin-right: 10px; width: 18rem;">
            <p>Abertura de tickets, Download de Atualizações, Notícias</p>
        </div>
        <a href="http://suporte.fluig.com/<img src="https://a.imagem.app/oqFFHQ.png" class="card-img-top" alt="..." style="box-shadow: 2px 2px 5px #ccc; max-width: 100%; max-height: 150px;">
  <div class="card-body" style="displaypadding: block10px; background-colorheight: #007BFF; color: #fff; padding: 10px; text-align; text-decoration: none; border-radius: 5px; margin-top: 10px;">Acesse</a>
    </div> 

 <div id="card4" style="width: 23%; max-width: 400px; padding: 10px; 100%;">
    <h5 class="card-title">Cursos e Treinamentos</h5>
    <p class="card-text">Um portal completo com vários cursos para você dominar o TOTVS Fluig.</p>
    <a href="https://academy.fluig.com/" class="btn btn-primary">Acesse</a>
  </div>
</div>

<div class="card" style="border: 1px solid #ccc; border-radiusdisplay: 5px; text-align: centerinline-block; backgroundmargin-colorright: #f9f9f910px; displaywidth: flex; flex-direction: column; margin-bottom: 10px;">    
18rem;">
  <img src="https://a.imagem.app/oTtUxioqFlDr.png" class="card-img-top" alt="Imagem do Card 1..." style="widthbox-shadow: 100% 2px 2px 5px #ccc; max-heightwidth: 100px100%; objectmax-fitheight: cover150px;">             
         <div style="flex-grow: 1<div class="card-body" style="padding: 10px; height: 100%;">
            <p>Explore nosso canal exclusivo no YouTube, repleto de informações valiosas sobre o TOTVS Fluig.</p><h5 class="card-title">APIs e documentações técnicas</h5>
    <p class="card-text">Guia de Stilo  </div>
        <a href="https://www.youtube.com/@fluigtv" style="display: block; background-color: #007BFF; color: #fff; padding: 10px; text-align; text-decoration: none; border-radius: 5px; margin-top: 10px;completo, Style Guide. Tudo o que o Dev precisa para colocar a mão na massa.</p>
    <a href="https://style.fluig.com/components.html" class="btn btn-primary">Acesse</a>
    </div>
</div>    

  <div idclass="card5card" style="width: 23%; max-width: 400px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; text-align: center; background-color: #f9f9f9"border: 1px solid #ccc; display: flexinline-block; flexmargin-directionright: column10px; margin-bottomwidth: 10px18rem;"> 
   
<img src="https://a.imagem.app/oTtDseoqXzPP.png" class="card-img-top" alt="Imagem do Card 1..." style="widthbox-shadow: 2px 100%; max-height: 100px2px 5px #ccc; objectmax-fitwidth: cover;">             100%; max-height: 150px;">
         <div<div class="card-body" style="flex-growpadding: 10px; height: 1100%;">
            <p>Fórum construído pela própria comunidade de Desenvolvedores Fluig. Obs: Não é um canal oficial TOTVS.</p>
        </div>
        <a<h5 class="card-title">Central do Cliente</h5>
    <p class="card-text">Aqui você abre tickets para o suporte, acompanha o andamento e baixa releases novas.</p>
    <a href="https://fluiggerssuporte.totvs.com.br//portal/p/10098/suporte-fluig-home" style="display: block; background-color: #007BFF; color: #fff; padding: 10px; text-align; text-decoration: none; border-radius: 5px; margin-top: 10px;">Acesse</a>
    </div>     



<style>
@media (max-width: 986px) {
    div[style*="width: 23%"] {
        width: calc(50% - 10px);
    }
}

@media (max-width: 500px) {
    div[style*="width: 23%"] {
        width: 100%;
    }
    div[style*="flex-direction: column"] {
        flex-direction: row;
    }
}
</style>



class="btn btn-primary">Acesse</a>
  </div>
</div>

<div class="card" style="border: 1px solid #ccc; display: inline-block; margin-right: 10px; width: 18rem;">
  <img src="https://a.imagem.app/oqFI1Z.png" class="card-img-top" alt="..." style="box-shadow: 2px 2px 5px #ccc; max-width: 100%; max-height: 150px;">
  <div class="card-body" style="padding: 10px; height: 100%;">
    <h5 class="card-title">Fórum construído pela comunidade</h5>
    <p class="card-text">Todo Dev adora um Fórum para compartilhar conhecimento, esse foi contruido pela comunidade.</p>
    <a href="https://fluiggers.com.br/" class="btn btn-primary">Acesse</a>
  </div>
</div>





HTML
<div style="text-align: center;>
<h1 style="text-align: center;" id="Plataforma|Oquehádenovo?-AtualizaçãoSilverMist(1.8.1)"><span style="color: rgb(23,43,77);"><strong><a href="https://tdn.totvs.com/x/hCFzL" rel="nofollow">Atualização Silver Mist (1.8.1)</a></strong></span></h1><p></p>
<iframe width="800" height="450" src="https://www.youtube.com/embed/UrBKSOalubI" title="Novidades TOTVS Fluig 1.8.1 | Silver Mist" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>



HTML
<style type="text/css">
    .cards-container {
        width: 100%;
        height: auto;
        margin: auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        justify-items: center;
    }

    .card {
        width: 100%;
        height: auto;
        display: flex;
        margin: auto auto 20px auto;
        box-shadow: 0px 2px 4px #00000029;
        border-radius: 10px;
    }

    .card-image {
        object-fit: cover;
        width: 43%;
        max-width: 420px;

        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .card-text-container {
        text-align: left;
        padding: 30px;
    }

    .card-label {
        color: orange#FEAC0E;
        font-weight: bold;
        font-size: 13px;
    }

    #card-title-link {
        text-decoration: none;
        color: #CB1959#0897E9;
        font-weight: bold;
        font-size: 17px;
    }

    #card-title-link:hover {
        text-decoration: underline;
    }

    .card-desc {
        margin: 0 !important;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0px;
        color: #494440;
    }

    .card-text-margin-bottom {
        margin: 0 0 5px 0 !important;
    }
</style>

<section class="cards-container">
    <div class="card">
        
        <div class="card-text-container">
            <p class="card-label card-text-margin-bottom">Suporte</p>
            <h2 id="card-title" class="card-text-margin-bottom">
                <a href="https://suporte.totvs.com/portal/p/10098/suporte-fluig-home" id="card-title-link" target="blank">Precisa de ajuda e não encontrou por aqui?</a>
            </h2>
            <p class="card-desc">Entre em contato pelo <a href="https://suporte.totvs.com/portal/p/10098/suporte-fluig-home" target="blank">Portal de clientes</a> ou por nosso canal telefônico <b>(11) 3003 5559</b>. A equipe de atendimento do TOTVS Fluig estará pronta para lhe ajudar.</p>
        </div>
    </div>
</section>