Un código de ByBy.inc

1,679 byby.createsite

Abrir en el editor Publica tu código

Recomendado

19 November 2024

Código de revisión del iPhone 16

19 March 2025

Luces de estudio

13 June 2025

Un código de Metehan

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