Scribd Logo
Carregar

Bem-vindo(a) ao Scribd!

  • 7 visualizações

    Códigos HTML - 20240325 - 004248 - 0000

    Enviado por

    jubileu adventure

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd

    Códigos HTML - 20240325 - 004248 - 0000

    Enviado por

    jubileu adventure
    7 visualizações4 páginas

    Título original

    Códigos html_20240325_004248_0000

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Fazer download em pdf ou txt
    7 visualizações4 páginas

    Códigos HTML - 20240325 - 004248 - 0000

    Enviado por

    jubileu adventure

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Fazer download em pdf ou txt
    de 4

    CÓDIGOS

    HTML
    CARD DE VENDAS

    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="design.css"
    </head>
    <body>
    <div class="container">
    <div class="card">
    <img src="18658-3-tres-300Wx300H-productCard.png"alt="produto">
    <h2>Samsung Galaxy Z Flip 5 Verde</h2>
    <p>256GB de Memória Interna e 8GB RAM <br>
    Bateria de 3700mAh <br>
    Câmera Dupla Traseira de 12MP (Dual Pixel, OIS) + 12MP (Ultra Wide) + Câmera
    Frontal de 10MP <br>
    Tela Infinita de 6.7"<br>
    AMOLED Dinâmico 2x (Interno) e 3.4" AMOLED (Externo)<br>
    Wireless Power Share</p>
    <p class="price">R$ 3.599</p>
    <button>Adicionar ao Carrinho</button>
    </div>
    </div>

    </body>
    </html>
    html,body{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background-color: azure;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    }

    .container{
    text-align: center;
    }
    .card{
    background-color: rgb(241, 238, 238);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(red, green, blue, alpha);
    padding: 20px;
    text-align: center;
    }
    img{
    max-width: 25%;
    border-radius: 50px;
    }
    h2{
    color: #666;
    }
    .price{
    color: green;
    font-weight: bold;
    margin-top: auto;
    }
    button{
    background-color: tomato;
    padding: 10px;
    border: none;
    border-radius: 4px;
    margin-top: 10px;
    }
    CARD DE VENDAS

    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeria</title>
    <link rel="stylesheet" href="design.css">
    </head>
    <body>
    <div class="galeria">
    <div class="imagem-com-descricao">
    <img
    src="https://i.pinimg.com/564x/3c/2c/56/3c2c564cc1e2f740b86ab2fac00bbdb2.jpg"
    alt="Imagem 1">
    <div class="descricao">
    <p>Evie</p>
    <button class="botao-mais">+</button>
    </div>
    </div>
    <div class="imagem-com-descricao">
    <img src="https://assetsio.gnwcdn.com/assassins-creed-valhalla-female-eivor-art-
    a.jpg?
    width=1200&height=1200&fit=crop&quality=100&format=png&enable=upscale&auto=web
    p" alt="Imagem 2">
    <div class="descricao">
    <p>Eivor</p>
    <button class="botao-mais">+</button>
    </div>
    </div>
    <div class="imagem-com-descricao">
    <img
    src="https://pm1.aminoapps.com/6415/c9f838fbfe0f4218e1994ef2d932df5c4e42dc1b_hq.
    jpg" alt="Imagem 3">
    <div class="descricao">
    <p>Arnor</p>
    <button class="botao-mais">+</button>
    </div>
    </div>
    </div>
    </body>
    </html>
    .galeria {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 50px;
    }

    .imagem-com-descricao {
    text-align: center;
    margin: 0 10px;
    position: relative;
    }

    .imagem-com-descricao img {
    width: 100%;
    max-width: 200px; /* Defina o tamanho máximo desejado */
    height: auto;
    border-radius: 10px;
    }

    .descricao {
    background-color: green;
    color: #fff;
    padding: 2cap; /* Aumenta o padding para o quadrado ficar maior */
    border-bottom-left-radius: 20px;
    position: absolute;
    bottom: -40px; /* Ajuste conforme necessário */
    left: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Altera o layout para coluna */
    align-items: center;
    }

    .descricao p {
    margin: 10px; /* Remove o espaço entre o texto e o borda do quadrado */
    }

    .botao-mais {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px; /* Adiciona espaço entre o texto e o botão */
    margin-left: 100px;
    }

    Você também pode gostar