Á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  width: 0100%;
  0 100%; max-width: 100%; text-align
    overflow: centerhidden;">
  }

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


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

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

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

  #myCarousel > div > div {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  @keyframes carousel-animation {
    0%}
    50% {
      transform: translateX(-100%);

    100% {
      transform: translateX(0);
    }
    33.33% {
}
</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">
    .cards-container {
       transform width: translateX(-100%);
    }
    66.66% {height: auto;
      transform  margin: translateX(-200%)auto;
    }
    100%display: {flex;
      transform  flex-direction: translateX(0)column;
    }
  }
</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">
    .cards-container {  box-sizing: border-box;
        justify-items: center;
    }

    width: 100%;.card {
        heightwidth: auto100%;
        marginheight: auto;
        display: flex;
        flex-direction: columnmargin: auto auto 20px auto;
        box-sizingshadow: border-box0px 2px 4px #00000029;
        justifyborder-itemsradius: center10px;
    }

    .card-image {
        widthobject-fit: 100%cover;
        heightwidth: auto43%;
        displaymax-width: flex420px;
        margin: auto auto 20px auto;
        box-shadow: 0px 2px 4px #00000029border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .card-imagetext-container {
        objecttext-fitalign: coverleft;
        widthpadding: 43%30px;
    }

    max-width: 420px;

.card-label {
        color: orange;
        border-top-left-radiusfont-weight: 10pxbold;
        border-bottom-left-radiusfont-size: 10px13px;
    }

    .card#card-texttitle-containerlink {
        text-aligndecoration: leftnone;
        paddingcolor: 30px#0897E9;
    }

    .cardfont-labelweight: {bold;
        colorfont-size: orange17px;
    }

    font#card-weighttitle-link:hover bold;{
        fonttext-sizedecoration: 13pxunderline;
    }

    #card-title-link.card-desc {
        text-decorationmargin: none;
        color: #045B8F0 !important;
        font-weightsize: bold15px;
        font-sizeweight: 17px400;
    }

    #cardletter-title-linkspacing:hover {0px;
        text-decorationcolor: underline#494440;
    }

    .card-text-margin-descbottom {
        margin: 0 0 5px 0 !important;
        font-size: 15px;
        }
</style><section class="cards-container">
<div class="card">
<div class="card-text-container">
<h3 style="color: #0897E9; font-weight: 400bold;
 text-align: center;">Informações</h3>
<p></p>
<p style="font-family: 'Roboto',    letterjustify-spacingcontent: 0pxspace-between;">

Seja bem-vindo ao Fluig! Nosso workshop exclusivo (e  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); font-weight: bold; text-align: center;">Informações</h3>
<p class="card-desc" 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!

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
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>

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 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>Licenciamento
         <p>Desenvolvedor Fluig</p>

				<ul class="sub-events">
					<li>Modelos de Ambiente
						<ul class="sub-sub-events">
							<li>On Premise, Cloud TOTVS ou 
<li>Como Funciona o licenciamento do Fluig</li> </ul> </li> <li>WCMADMIN
Cloud Terceiro</li>
						</ul>
					</li>
					<li>Licenciamento
						<ul class="sub-sub-events">
							<li>Como Funciona o licenciamento do Fluig com a citação 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>Painel
 
de
 
Controle(ADM)
        
<li>Primeiro Login
						<ul class="sub-sub-events">
							<li>Login com 
<li>Painel de Controle, conceitos e boas práticas de usuário, papel e grupo</li> </ul> </li> <li>Documentos
usuário administrador e 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>
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
					<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 - Quiz <font-weight: 
<strong>11:45 - Conclusão e Perguntas</strong>
bold style="color: #0897E9">COM PREMIAÇÃO!</strong>
			</div>

<div class=
			<div class="event">
				<strong>12:00 - 
Fim<
Encerramento</strong>
			</div>
		</div>
	</div>
</div>
</section>
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;
 type="text/css">
    
margin: auto auto 20px auto;
.cards-container {
        
box-shadow
width: 
0px 2px 4px #00000029
100%;
        
border-radius
height: 
10px
auto;
    
}
    
.card-image { object-fit
margin: 
cover
auto;
        
width
display: 
43%
flex;
        
max
flex-
width
direction: 
420px
column;

        
border-top-left-radius
box-sizing: 
10px
border-box;
        
border-bottom-left-radius
justify-items: 
10px
center;
    }

    .card
-text-container
 {
        
text-align
width: 
left
100%;
        
padding
height: 
30px
auto;
    
}
    
.card-label {
display: flex;
        
color: orange
margin: auto auto 20px auto;
        
font
box-
weight
shadow:
bold
 0px 2px 4px #00000029;
        
font
border-
size
radius: 
13px
10px;
    }

    
#card-title-link {
.card-image {
        object-fit: cover;
        
text-decoration
width: 
none
43%;
        
color
max-width: 
#CB1959
420px;
        
font-weight
border-top-left-radius: 
bold
10px;
        
font-size
border-bottom-left-radius: 
17px
10px;
    }

    
#card
.card-
title
text-
link:hover
container {
        text-
decoration
align: left;
        padding: 
underline
30px;
    }

    .card-
desc
label {
        
margin
color: 
0 !important
#FEAC0E;
        font-weight: bold;
        font-size: 
15px
13px;
    }

    
font-weight: 400;
#card-title-link {
        
letter
text-
spacing
decoration: 
0px
none;
        color: 
#494440
#CB1959;
    
}
    
.card-text-margin-bottom {
font-weight: bold;
        
margin
font-size: 
0 0 5px 0 !important
17px;
    }
</style>


<section
 
class="cards-container">
   
<div class="card">
#card-title-link:hover {
        
<img
text-decoration: underline;
    
}

    
class="
.card-
image"
desc {
        margin: 0 
src="https://tdn.totvs.com/download/attachments/66618185/banner_512x258.png?"
!important;
        font-size: 15px;
      
alt=""
  font-weight: 400;
     
>
   
letter-spacing: 0px;
   
<div class="card-text-container">
     color: #494440;
    }

  
<p
 
class="card-label
 .card-text-margin-bottom
">TOTVS Fluig Plataforma</p>
 {
        margin: 0 0 
<h2 id="card-title" class="card-text-margin-bottom">
5px 0 !important;
    }
    
    .card-image {
       
<a href="https://tdn.totvs.com/pages/releaseview.action?pageId=95617506" id="card-title-link">
 max-width: 100%;
        height: auto;
    }
</style>

<section class="cards-container">
    <div class="card">
  
Fique
 
por
 
dentro
 
da
 
Novidades!
  <img 
            
</a>
class="card-image" 
            
</h2>
src="https://tdn.totvs.com/download/attachments/66618185/banner_512x258.png?" 
           
<p
 
class
alt="
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.
<div class="card-text-container">
            <p class="card-label card-text-margin-bottom">TOTVS Fluig 
<
Plataforma</p>
        
</div>
    
</div> <div
<h2 id="card-title" class="card-text-margin-bottom">
        
<img
 
       <a 
class
href="https://tdn.totvs.com/pages/releaseview.action?pageId=95617506" id="card-
image
title-link"
>
            
src="https://a.imagem.app/oFM2xT.png"
        Fique por dentro 
alt=""
da Novidades!
        
>
        
<div class="card-text-container">
</a>
           
<p class="card-label card-text-margin-bottom">FLOWS</p>
 </h2>
            
<h2
<p 
id
class="card-
title
desc"
class="card-text-margin-bottom"> <a href="https://tdn.totvs.com/display/fluig/TOTVS+FLOWS" id="card-title-link">TOTVS Flows: Processos prontos para impulsionar sua empresa.</a>
>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>
    </
h2>
div>

    <div class="card">
       
<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>
 <img 
            class="card-image" 
            src="https://a.imagem.app/oFM2xT.png"
            alt=""
        
</div>
>
    
</div>
    <div class="card-text-container">
            
<img
<p class="card-label card-text-margin-bottom">FLOWS</p>
            <h2 id="card-title" class="card
-image"
-text-margin-bottom">
                <a 
src
href="https://tdn.totvs.com/
download
display/
attachments/66618185/social.jpg" alt=""
fluig/TOTVS+FLOWS" id="card-title-link">TOTVS Flows: Processos prontos para impulsionar sua empresa.</a>
        
>
    
<div class="card-text-container">
</h2>
            <p class="card-
label card-text-margin-bottom">TOTVS Identity</p> <h2 id="card-title" class="card-text-margin-bottom"> <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=269063445#Identity|Produ%C3%A7%C3%A3o-Junho" id="card-title-link">Novas opções de provisionamento e autenticação</a>
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>
    </
h2>
div>

    <div class="card">
        <img 
           
<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.</p> </div> </div> </section> Informações
iconfalse
titleLinks Úteis
HTML<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 src="https://a.imagem.app/oTCBZ2.png" alt="Imagem do Card 1" style="width: 100%; max-height: 100px; object-fit: cover;"> <div style="flex-grow: 1;">
image" 
            src="https://tdn.totvs.com/download/attachments/66618185/social.jpg"
            alt=""
        >
        <div 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://tdn.totvs.com/pages/viewpage.action?pageId=269063445#Identity|Produ%C3%A7%C3%A3o-Junho" id="card-title-link">Novas opções de provisionamento e autenticação</a>
       
<p>Conheça
 
a
 
TOTVS
 
STORE:
 
a
 
loja
</h2>
 
virtual
 
da
 
maior
 
empresa
 
de
 
tecnologia
 
do
 
Brasil.
 
Acesse
 
e
 
confira
 
nossos produtos e serviços.</p> </div> <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
<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.</p>
        </div>
    </div>
</section>




Informações
iconfalse
titleLinks Úteis



HTML
<div class="card" style="border: 1px solid #ccc; display: inline-block; margin-right: 10px; width: 18rem;">
  <img src="https://a.imagem.app/
oTLjrv
oTCBZ2.png" class="card-img-top" alt="
Imagem do Card 1
..." style="
width
box-shadow: 2px 
100%; max-height: 100px
2px 5px #ccc; 
object
max-
fit
width: 
cover;">     <div style="flex-grow: 1
100%; max-height: 150px;">
  <div class="card-body" style="padding: 10px; height: 100%;">
    
<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> </div>
<h5 class="card-title">Conheça a TOTVS STORE</h5>
    <p class="card-text">A loja virtual da maior empresa de tecnologia do Brasil. Acesse e confira nossos produtos e serviços.</p>
    <a href="https://
academy.fluig.com/
totvs.store" 
style
class="
display: block; background-color: #007BFF; color: #fff; padding: 10px; text-align: center; text-decoration: none; border-radius: 5px; margin-top: 10px;
btn btn-primary">Acesse</a>
  
</div>
</div>

<div 
id
class="
card3
card" style="
width: 23%; max-width: 400px; padding: 10px;
border: 1px solid #ccc; 
border-radius
display: 
5px; text-align: center
inline-block; 
background
margin-
color
right: 
#f9f9f9
10px; 
display
width: 
flex; flex-direction: column; margin-bottom: 10px;">
18rem;">
  <img src="https://a.imagem.app/
oTrM32
oqFFHQ.png" class="card-img-top" alt="
Imagem do Card 1
..." style="
width
box-shadow:
100%
 2px 2px 5px #ccc; max-
height
width: 
100px
100%; 
object
max-
fit
height: 
cover
150px;">
   

  
       <div
<div class="card-body" style="
flex-grow
padding: 10px; height: 
1
100%;">
    <h5 class="card-title">Cursos e Treinamentos</h5>
    
<p>APIs, documentações técnicas, Style Guide.</p> </div>
<p class="card-text">Um portal completo com vários cursos para você dominar o TOTVS Fluig.</p>
    <a href="https://
style
academy.fluig.com/" 
style
class="
display: block; background-color: #007BFF; color: #fff; padding: 10px; text-align: center; text-decoration: none; border-radius: 5px; margin-top: 10px;
btn btn-primary">Acesse</a>
  </div>
</div>

<div 
id
class="
card4
card" style="
width: 23%; max-width: 400px; padding: 10px;
border: 1px solid #ccc; 
border-radius
display: 
5px; text-align: center
inline-block; 
background
margin-
color
right: 
#f9f9f9
10px; 
display
width: 
flex; flex-direction: column; margin-bottom: 10px;">
18rem;">
  <img src="https://a.imagem.app
/oTCjHV.png
/oqFlDr.png" class="card-img-top" alt="
Imagem do Card 1
..." style="
width
box-shadow: 
100%
2px 2px 5px #ccc; max-
height
width: 
100px
100%; 
object
max-
fit
height: 
cover
150px;">
   

  
       <div style
<div class="
flex-grow: 1;">            <p>Abertura de tickets, Download de Atualizações, Notícias</p>
card-body" style="padding: 10px; height: 100%;">
    <h5 class="card-title">APIs e documentações 
<
técnicas</
div>
h5>
 
 
 
 
 
 
 
 <a
<p 
href
class="
http://suporte.fluig.com/" style="display: block; background-color: #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;
card-text">Guia de Stilo 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 class="card" style="border: 1px solid #ccc; 
border-radius
display: 
5px; text-align: center
inline-block; 
background
margin-
color
right: 
#f9f9f9
10px; 
display
width: 
flex; flex-direction: column; margin-bottom: 10px
18rem;">
  
<img src="https://a.imagem.app/
oTtUxi
oqXzPP.png" class="card-img-top" alt="..." style="
Imagem do Card 1" style="
box-shadow: 2px 2px 5px #ccc; max-width: 100%; max-height: 
100px; object-fit: cover
150px;">
  <div class="card-body" style="padding: 10px; height: 100%;">
    <h5 class="card-title">Central 
   
do Cliente</h5>
  
 
 
 
 
 
<p 
 <div style
class="
flex-grow: 1;">            <p>Explore nosso canal exclusivo no YouTube, repleto de informações valiosas sobre o TOTVS Fluig.</p> </div>        <a href
card-text">Aqui você abre tickets para o suporte, acompanha o andamento e baixa releases novas.</p>
    <a href="https://suporte.totvs.com/portal/p/10098/suporte-fluig-home" 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://
www
a.
youtube
imagem.
com
app/
@fluigtv
oqFI1Z.png" 
style
class="
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>
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>