post

Grade com Informações de pagamento e frete em HTML e CSS para loja virtual

Publicado em: 20/06/2024 / Atualizado em: 20/06/2024

Categorias: BlogCSSHTMLLoja virtual

Grade em HTML e CSS com informações de pagamento, frete e segurança, para sites e lojas virtuais.

image
grade para loja virtual
<div class="informacoes-loja container">
    <div class="itens" id="item-1">
        <div class="imagem">
            <img src="https://cdn-app.workleads.com.br/static-s3/@drive/client/2023/10/31015743/icones-zeeloo-02.svg" alt="frete zee.loo">
        </div>
        <div class="info">
            <p class="titulo">Frete Gratis</p>
            <p class="texto">Compras acima de <strong>R$149,90</strong></p>
        </div>
    </div>
    
    <div class="itens" id="item-2">
        <div class="imagem">
            <img src="https://cdn-app.workleads.com.br/static-s3/@drive/client/2023/10/31015746/icones-zeeloo-04.svg" alt="pix zee.loo">
        </div>
        <div class="info">
            <p class="titulo">PIX</p>
            <p class="texto"><strong>5%</strong> de desconto</p>
        </div>
    </div>
    
    <div class="itens" id="item-3">
        <div class="imagem">
            <img src="https://cdn-app.workleads.com.br/static-s3/@drive/client/2023/10/31015741/icones-zeeloo-01.svg" alt="segurança zee.loo">
        </div>
        <div class="info">
            <p class="titulo">Segurança</p>
            <p class="texto">Loja com <strong>certificado SSL</strong></p>
        </div>
    </div>
    
    <div class="itens" id="item-4">
        <div class="imagem">
            <img src="https://cdn-app.workleads.com.br/static-s3/@drive/client/2023/10/31015745/icones-zeeloo-03.svg" alt="parcelamento zee.loo">
        </div>
        <div class="info">
            <p class="titulo">Parcelamento</p>
            <p class="texto">Em até <strong>12x</strong> no cartão</p>
        </div>
    </div>
</div>

<style>
.informacoes-loja {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid #eaeaea;
}

.informacoes-loja .itens {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.informacoes-loja img {
    width: 40px;
}

.informacoes-loja .imagem {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-right: 16px;
}

.informacoes-loja .titulo {
    font-weight: bold;
    margin-bottom: -4px;
    font-size: 18px;
    color: #503B66;
}
@media (max-width: 767px) {
.informacoes-loja {
    display: flex;
    flex-direction: column;
    padding: 24px 50px;
}
}
</style>

Publicações recomendadas:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/5412

ID de Referência: 5412

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários