Siga-nos no Instagram: https://www.instagram.com/webstreet_code/

    *{
        margem: 0;
        preenchimento: 0;
        dimensionamento de caixa: caixa de borda;
        família de fontes: 'Poppins', sem serifa;
    }

    corpo {
            cor de fundo: #141625;
            exibição: flexível;
            alinhar itens: centro;
            justificar-conteúdo: flex-start;
            altura: 100vh;
            estouro: oculto;
        }
        .hamburger{
            posição: absoluta;
            superior: 20px;
            esquerda: 18px;
            cursor: ponteiro;
            índice z: 10;
        }

        .hamburger .line{
            largura: 35px;
            altura: 4px;
            cor de fundo: #f0a500;
            margem:6px 0;
            raio da borda: 2px;
            transição: todos os 0,4s facilitam;
        }

        .barra de menu {
            posição: fixa;
            superior: 0;
            esquerda: 0;
            largura: 80px;
            altura: 100%;
            cor de fundo: #1f2235;
            sombra da caixa: 2px 0 15px rgba (0, 0, 0, 0,6);
            estouro: oculto;
            transição: largura 0,4s facilidade;

        }

        .menu-bar.open {
            largura: 220px;
        }

        .barra de menu ul {
            estilo de lista: nenhum;
            preenchimento: 80px 10px;
        }
        .barra de menu ul li {
            exibição: flexível;
            alinhar itens: centro;
            preenchimento: 15px;
            cor: #b2becd;
            cursor: ponteiro;
            transição: facilidade de 0,3s da cor de fundo;
            borda esquerda: 4px sólido transparente;
        }

        .barra de menu ul li i {
            tamanho da fonte: 24px;
            margem direita: 20px;
            transição: transformação com facilidade de 0,3s;
        }
        .barra de menu ul li span {
            opacidade: 0;
            tamanho da fonte: 16px;
            transição: opacidade 0,4s facilidade;
            espaço em branco: nowrap;
        }

        .menu-bar.open ul li span {
            opacidade: 1;
        }

        .menu-bar ul li:hover {
            cor de fundo: #282a40;
            sombra da caixa: 0 4px 8px rgba(0, 0, 0, 0,2);
        }

        .menu-bar ul li: passe o mouse sobre {
            transformar: escala(1,2);
        }

        .barra de menu ul li.active {
            cor de fundo: #f0a500;
            raio da borda: 20px;
            cor: #1f2235;
            borda esquerda: 4px sólido #f0a500;
        }

        .barra de menu ul li.active i {
            cor: #1f2235;
        }

        .menu-bar ul li.active span {
            cor: #1f2235;
        }