Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

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/164003874/Mist%20%28menor%29.png?api=v2" 
            alt=""
        >
        <div class="card-text-container">
            <p class="card-label card-text-margin-bottom">TOTVS Fluig Platform</p>
            <h2 id="card-title" class="card-text-margin-bottom">
                <a href="https://tdn.totvs.com/x/lj7_K" id="card-title-link">Mist Update - 1.8</a>
            </h2>
            <p class="card-desc">Stay on top of all the news on the latest major update of the TOTVS Fluig Platform to add value to your business.</p>
        </div>
    </div>

    <div class="card">
        <img 
            class="card-image" 
            src="https://tdn.totvs.com/download/attachments/66618185/duplicar.png"
            alt=""
        >
        <div class="card-text-container">
            <p class="card-label card-text-margin-bottom">TOTVS Fluig No-Code</p>
            <h2 id="card-title" class="card-text-margin-bottom">
                <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=484703987#Tasks|Oqueh%C3%A1denovo?-Atualiza%C3%A7%C3%B5es" id="card-title-link">Duplicate steps and task lists in TOTVS Tasks!</a><b>*</b></h2>
            <p class="card-desc">Did you know that you can now duplicate steps and task lists? That's right! Check out this new feature to facilitate the organization of your daily tasks.</p>
        </div>
    </div>

    <div class="card">
        <img 
            class="card-image" 
            src="https://tdn.totvs.com/download/attachments/66618185/mfasocial.pngjpg"
            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">New provisioning and authentication options
</a><b>*</b></h2>
            <p class="card-desc">You can now allow login with social networks (Linkedin, Google, Facebook, etc.) for your company's users. Also check out the new Security screen, which is much more organized and easier to use.</p>
        </div>
    </div>
</section>

...