Histórico da Página

HTML

<div id="myCarousel" style="max-width: 100%; overflow: hidden;">
  <div style="display: flex; transition: all 1s ease;">

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

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

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


<style>
  #myCarousel {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  #myCarousel > div {
    display: flex;
    animation: carousel-animation 3s infinite; /* Alterado para 3s */
  }

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

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

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

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;">
      <!-- Conteúdo do mural lateral aqui -->
      <div style="margin: 20px; text-align: center;">
        <div style="font-weight: bold; color: #007BFF;">Cronograma</div>
      </div>
      <div style="margin: 20px; text-align: left;">
        <div style="font-weight: bold; color: #007BFF;">08h30 - Abertura</div>
      </div>
      <div style="margin: 20px; text-align: left;">
        <div style="font-weight: bold; color: #007BFF;">09h20 - Time Fluig</div>
        <div style="margin-left: 20px;">
          <p>Suporte, Customer Success e Produto</p>
        </div>
      </div>
      <div style="margin: 20px; text-align: left;">
        <div style="font-weight: bold; color: #007BFF;">09h40 - Treinamento</div>
        <div style="margin-left: 20px;">
          <div>
            <ul>
              <li>Modelos de Ambiente
                <ul>
                  <li>On Premise, Cloud TOTVS ou Cloud Terceiro</li>
                </ul>
              </li>
              <!-- Outros itens do cronograma -->
            </ul>
          </div>
        </div>
      </div>
      <div style="margin: 20px; text-align: left;">
        <div style="font-weight: bold; color: #007BFF;">10:40 - Intervalo</div>
      </div>
      <div style="margin: 20px; text-align: left;">
        <div style="font-weight: bold; color: #007BFF;">10:50 - Processos</div>
        <div style="margin-left: 20px;">
          <p>Automatização de processos, Notação BPMN, Apresentação de processo pronto e integrado para demonstrar e explicar</p>
        </div>
        <div>
          <ul>
            <li>Fluig
              <ul>
                <li>O Fluig é customizável, Integrações (caminhos)</li>
              </ul>
            </li>
            <!-- Outros itens do cronograma -->
          </ul>
        </div>
      </div>
      <div style="margin: 20px; text-align: left;">
        <div style="font-weight: bold; color: #007BFF;">11:45 - Conclusão e Perguntas</div>
      </div>
      <div style="margin: 20px; text-align: left;">
        <div style="font-weight: bold; color: #007BFF;">12:00 - Fim</div>
      </div>
    </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;
        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">
        <img 
            class="card-image" 
            src="https://tdn.totvs.com/download/attachments/66618185/banner_512x258.png?" 
            alt=""
        >
        <div class="card-text-container">
            <p class="card-label card-text-margin-bottom">TOTVS Fluig Plataforma</p>
            <h2 id="card-title" class="card-text-margin-bottom">
                <a href="https://tdn.totvs.com/pages/releaseview.action?pageId=95617506" id="card-title-link">
                    Fique por dentro da Novidades!
                </a>
            </h2>
            <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.
            </p>
        </div>
    </div>

    <div class="card">
        <img 
            class="card-image" 
            src="https://a.imagem.app/oFM2xT.png"
            alt=""
        >
        <div class="card-text-container">
            <p class="card-label card-text-margin-bottom">FLOWS</p>
            <h2 id="card-title" 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>
            </h2>
            <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>
        </div>
    </div>

    <div class="card">
        <img 
            class="card-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>
            </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.</p>
        </div>
    </div>
</section>

Informações

icon	false
title	Links Úteis

HTML

<div 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;">
        <h3>TOTVS Store</h3>
        <div style="flex-grow: 1;">
            <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>
        </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 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;">
        <h3>Fluig Academy</h3>
        <div style="flex-grow: 1;">
            <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>
        <a 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 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;">
        <h3>TOTVS Fluig Developer</h3>
        <div style="flex-grow: 1;">
            <p>APIs, documentações técnicas, Style Guide.</p>
        </div>
        <a href="https://style.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 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;">
        <h3>Área do Cliente</h3>
        <div style="flex-grow: 1;">
            <p>Abertura de tickets, Download de Atualizações, Notícias</p>
        </div>
        <a href="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>

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

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 44

Nova versão 45

Chave

Workshop Fluig: Sua Jornada Personalizada para o Sucesso!