Un code de ByBy.inc

1,583 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

12 October 2025

Animation de chargement CSS Structure HTML

20 February 2026

Modèle HTML de tableau de bord analytique avec graphiques

12 October 2025

Maquette de l'interface utilisateur Facebook - Exemple HTML

HTML

CSS

*{
            margin: 0;
            padding: 0;
        }
        body{
            background: rgb(0, 0, 0);
            width: 100vw;
            height: 100vh;
            box-sizing: border-box;
            font-family: monospace;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

}
        /* base do stick animado */
        .stickman {
        position: absolute;
        top: 290px;
        scale: 0.35;
        left: 24%;
        }
        /* cabeca do stick animado */
        .head {
        position: absolute;
        z-index: 25;
        top: 0;
        right: auto;
        bottom: auto;
        left: auto;
        height: 50px;
        width: 50px;
        background: #ffffff;
        border-radius: 50px;
        }
        /* coluna do stick animado */
        .torso {
        position: absolute;
        z-index: 0;
        top: 45px;
        right: auto;
        bottom: auto;
        left: 20px;
        height: 95px;
        width: 5px;
        background: #ffffff;
        border-radius: 5px;
        }
        /* braco esquerdo do stick animado */
        .left-arm {
        position: absolute;
        z-index: -10;
        top: -10px;
        right: -42px;
        bottom: auto;
        left: auto;
        height: 90px;
        width: 5px;
        background: #ffffff;
        border-radius: 5px;
        transform: rotate(275deg);
        }
        /* braco direito do stick animado */
        .right-arm {
        position: absolute;
        z-index: 20;
        top: -15px;
        right: auto;
        bottom: auto;
        left: 42px;
        height: 90px;
        width: 5px;
        background: #ffffff;
        border-radius: 5px;
        transform: rotate(275deg);
        }
        /* pe do stick animado */
        .foot {
        position: absolute;
        z-index: 0;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        height: 5px;
        width: 30px;
        border-top-right-radius: 15px;
        background:rgb(255, 255, 255);
        }
        /* perna esquerda do stick animado */
        .left-leg {
        position: absolute;
        z-index: -10;
        top: 85px;
        right: auto;
        bottom: auto;
        left: 30px;
        height: 125px;
        width: 5px;
        background: #ffffff;
        border-radius: 5px;
        transform: rotate(-30deg);
        animation: walk-left-leg 2s infinite;
        }
        /* perna direita do stick animado */
        .right-leg {
        position: absolute;
        z-index: 0;
        top: 85px;
        right: 30px;
        bottom: auto;
        left: auto;
        height: 125px;
        width: 5px;
        background: #ffffff;
        border-radius: 5px;
        transform: rotate(30deg);
        animation: walk-right-leg 2s infinite;
        }
        .cart {
            position: absolute;
            right: 70%;
            top: 30%;
            width: clamp(50px, 8vw, 80px);
            height: clamp(60px, 10vw, 95px);
            background: #666;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 15;
        }

/* Ícone do carrinho simplificado */
        .cart-icon {
            width: 70%;
            height: 70%;
            border: 2px solid white;
            border-radius: 4px;
            position: relative;
        }

.cart-icon::before {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 10%;
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
        }

.cart-icon::after {
            content: '';
            position: absolute;
            bottom: -8px;
            right: 10%;
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
        }

/* Produto dentro do carrinho */
        .cart::before {
            content: '';
            position: absolute;
            top: 30%;
            rotate: 5deg;
            border-radius: 1px;
            right: 25%;
            width: clamp(15px, 2.5vw, 25px);
            height: clamp(15px, 2.5vw, 25px);
            background: white;
            z-index: 10;
        }

/* Produto dentro do carrinho */
        .cart::after {
            content: '';
            position: absolute;
            top: 29%;
            left: 25%;
            border-radius: 1px;
            rotate: 50deg;
            width: clamp(15px, 2.5vw, 25px);
            height: clamp(15px, 2.5vw, 25px);
            background: white;
            z-index: 10;
        }

/* base da prateleira */
        .shelf{
            position: absolute;
            left: 16%;
            width: 499px;
            top: 0;
            height: 100vh;
            z-index: 2;

}
        /*piso 1 da prateleira */
        .floor1{
            position: absolute;
            left: 0;
            width: 499px;
            top: 250px;
            height: 3px;
            background: rgb(255, 255, 255);

}
        /*piso 2 da prateleira */
        .floor2{
            position: absolute;
            left: 0;
            width: 499px;
            top: 270px;
            height: 3px;
            background: rgb(255, 255, 255);

}
        /*produto animado da prateleira  */
        .shelf::before{
            content: '';
            position: absolute;
            top: 230px;
            border-radius: 1px;
            left: -30px;
            width: 20px;
            height: 20px;
            background: white;
            animation: 6s passItem linear infinite;
        }
        /*produto animado da prateleira (que cai sincronizado com a animação e o carrinho)  */
        .shelf::after{
            content: '';
            position: absolute;
            top: 250px;
            border-radius: 1px;
            left: 230px;
            width: 20px;
            height: 20px;
            background: white;
            animation: 6s passItem linear infinite;
        }
       /*animação que passa o produto e cai os dois mas o video mostra so 1 */
        @keyframes passItem{
            0%{
                transform: translateX(360px) translateY(0);
            }
            80%{
                transform: translateY(0)translateX(0);
            }
            90%{
                transform: translateY(15px) rotate(-85deg) translateX(-32px);
                visibility: hidden;
            }
            100%{
                visibility: hidden;

}
        }
        /*animacao da perna esquerda */
        @keyframes walk-left-leg {
        0% {
            transform: rotate(-30deg);
            left: 30px;
        }
        50% {
            transform: rotate(30deg);
            left: -30px;
        }
        100% {
            transform: rotate(-30deg);
            left: 30px;
        }
        }
        /*animacao da perna direita*/
        @keyframes walk-right-leg {
        0% {
            transform: rotate(30deg);
            right: 30px;
        }
        50% {
            transform: rotate(-30deg);
            right: -30px;
        }
        100% {
            transform: rotate(30deg);
            right: 30px;
        }
    }
    /* Media Queries para Responsividade */

/* Telas grandes (1441px - 1920px) */
@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .stickman {
        left: 27%;
        scale: 0.38;
    }
    
    .cart {
        right: 65%;
    }
    
    .shelf::after {
        left: 250px;
    }
}

/* Telas médias-grandes (1201px - 1440px) */
@media screen and (min-width: 1201px) and (max-width: 1440px) {
    .stickman {
        left: 28%;
        scale: 0.33;
    }
    
    .cart {
        right: 63%;
    }
    
    .shelf::after {
        left: 220px;
    }
}

/* Telas médias (993px - 1200px) */
@media screen and (min-width: 993px) and (max-width: 1200px) {
    .stickman {
        left: 28%;
        scale: 0.3;
    }
    
    .cart {
        right: 62%;
    }
    
    .shelf {
        width: 420px;
        left: 15%;
    }
    
    .floor1, .floor2 {
        width: 420px;
    }
    
    .shelf::after {
        left: 200px;
    }
}

/* Tablets landscape (769px - 992px) */
@media screen and (min-width: 769px) and (max-width: 992px) {
    .stickman {
        left: 26%;
        scale: 0.27;
        top: 310px;
    }
    
    .cart {
        right: 62%;
        top: 31%;
    }
    
    .shelf {
        width: 350px;
        left: 13%;
    }
    
    .floor1, .floor2 {
        width: 350px;
    }
    
    .floor1 {
        top: 270px;
    }
    
    .floor2 {
        top: 290px;
    }
    
    .shelf::before {
        top: 250px;
    }
    
    .shelf::after {
        top: 270px;
        left: 170px;
    }
}

/* Tablets portrait (577px - 768px) */
@media screen and (min-width: 577px) and (max-width: 768px) {
    .stickman {
        left: 26%;
        scale: 0.24;
        top: 330px;
    }
    
    .cart {
        right: 61%;
        top: 34%;
    }
    
    .shelf {
        width: 300px;
        left: 11%;
    }
    
    .floor1, .floor2 {
        width: 300px;
    }
    
    .floor1 {
        top: 290px;
    }
    
    .floor2 {
        top: 310px;
    }
    
    .shelf::before {
        top: 270px;
    }
    
    .shelf::after {
        top: 290px;
        left: 145px;
    }
}

/* Smartphones landscape (481px - 576px) */
@media screen and (min-width: 481px) and (max-width: 576px) {
    .stickman {
        left: 23%;
        scale: 0.21;
        top: 350px;
    }
    
    .cart {
        right: 63%;
        top: 36%;
    }
    
    .shelf {
        width: 250px;
        left: 9%;
    }
    
    .floor1, .floor2 {
        width: 250px;
    }
    
    .floor1 {
        top: 310px;
    }
    
    .floor2 {
        top: 330px;
    }
    
    .shelf::before {
        top: 290px;
    }
    
    .shelf::after {
        top: 310px;
        left: 120px;
    }
}

/* Smartphones portrait (361px - 480px) */
@media screen and (min-width: 280px) and (max-width: 480px) {
    .stickman {
        left: 22%;
        scale: 0.19;
        top: 370px;
    }
    
    .cart {
        right: 58%;
        top: 38%;
    }
    
    .shelf {
        width: 220px;
        left: 7%;
    }
    
    .floor1, .floor2 {
        width: 220px;
    }
    
    .floor1 {
        top: 330px;
    }
    
    .floor2 {
        top: 350px;
    }
    
    .shelf::before {
        top: 310px;
    }
    
    .shelf::after {
        top: 330px;
        left: 105px;
    }
}