henriquedafonte / mineirissimo

Henrique da Fonte

   hello, world!
   WebDev

  

about me

Junior Web developer with experience in HTML, CSS, JavaScript, Typescript, React, and Node.js. Recent graduate with a background in logistics, seeking to transition into a career in web development. Strong problem-solving skills and a passion for creating dynamic, user-friendly websites. Excited to continue learning and growing in the tech industry.

🎓 business administrator graduated in 2008
🔭 changing carrer paths
🌱 studying Web development 💻
💡 interested to know more about computer science
🏅 Karting, tennis
🎵 heavy metal, rock, regae

tech stacks (learning)

mineirissimo's Issues

Fumaça pão de queijo

Meu discord não tá entrando!

Dá uma olhada nesse vídeo.

O HTML ficaria assim:

<div class="vapour">
                <span style="--v:1;"></span>
                <span style="--v:2;"></span>
                <span style="--v:5;"></span>
                <span style="--v:4;"></span>
                <span style="--v:6;"></span>
                <span style="--v:19;"></span>
                <span style="--v:7;"></span>
                <span style="--v:8;"></span>
                <span style="--v:9;"></span>
                <span style="--v:10;"></span>
                <span style="--v:11;"></span>
                <span style="--v:18;"></span>
            </div>

e o CSS assim:

.vapour {
    position: relative;
    display: flex;
    z-index: 1;
    padding: 0 20px;
    justify-content: center;
}

.vapour span {
    position: relative;
    bottom: 50px;
    display: block;
    margin: 0 2px 50px;
    min-width: 8px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
    animation: animate 5s linear infinite;
    opacity: 0;
    filter: blur(10px);
    animation-delay: calc(var(--v) * -0.5s);
}

@keyframes animate {
    0% {
        transform: translateY(0) scaleX(1);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: translateY(-150px) scaleX(5);
    }
    95% {
        opacity: 0;
    }
    100% {
        transform: translateY(-300px) scaleX(10);
    }
}

Testa aí depois fecha essa issue!