Ein Code von ByBy.inc

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

13 June 2025

Portfolio allgemein (Schritt für Schritt)

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

Ein Code von ByBy.inc

Empfohlen

Ein Code von Metehan

Ein Code des Textes

Portfolio allgemein (Schritt für Schritt)

HTML

CSS

JS

Empfohlen

Ein Code von Metehan

Ein Code des Textes

Portfolio allgemein (Schritt für Schritt)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS