Síguenos en instagram: https://www.instagram.com/webstreet_code/

Cajónítulo>
    

    *{
        margen: 0;
        relleno: 0;
        tamaño de caja: cuadro de borde;
        familia de fuentes: 'Poppins',sans-serif;
    }

    cuerpo {
            color de fondo: #141625;
            pantalla: flexible;
            alinear elementos: centro;
            justificar contenido: inicio flexible;
            altura: 100vh;
            desbordamiento: oculto;
        }
        .hamburguesa{
            posición: absoluta;
            arriba: 20px;
            izquierda: 18px;
            cursor: puntero;
            índice z: 10;
        }

        .hamburguesa .línea{
            ancho: 35px;
            altura: 4px;
            color de fondo: #f0a500;
            margen:6px 0;
            radio del borde: 2px;
            transición: todos 0,4 s de facilidad;
        }

        .barra de menú {
            posición: fija;
            arriba: 0;
            izquierda: 0;
            ancho: 80px;
            altura: 100%;
            color de fondo: #1f2235;
            sombra de cuadro: 2px 0 15px rgba(0, 0, 0, 0.6);
            desbordamiento: oculto;
            transición: ancho 0,4 s facilidad;

        }

        .barra de menú.abierta {
            ancho: 220px;
        }

        .barra de menú ul {
            estilo de lista: ninguno;
            relleno: 80px 10px;
        }
        .barra de menú ul li {
            pantalla: flexible;
            alinear elementos: centro;
            relleno: 15px;
            color: #b2becd;
            cursor: puntero;
            transición: color de fondo 0,3 s de facilidad;
            borde izquierdo: 4px sólido transparente;
        }

        .barra de menú ul li i {
            tamaño de fuente: 24px;
            margen derecho: 20px;
            transición: transformar 0,3 s de facilidad;
        }
        .barra de menú ul li span {
            opacidad: 0;
            tamaño de fuente: 16px;
            transición: opacidad 0,4 s facilidad;
            espacio en blanco: nowrap;
        }

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

        .barra de menú ul li: hover {
            color de fondo: #282a40;
            sombra de cuadro: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .barra de menú ul li: hover i {
            transformar: escala (1.2);
        }

        .barra de menú ul li.activa {
            color de fondo: #f0a500;
            radio del borde: 20px;
            color: #1f2235;
            borde izquierdo: 4px sólido #f0a500;
        }

        .barra de menú ul li.activa i {
            color: #1f2235;
        }

        .barra de menú ul li.active span {
            color: #1f2235;
        }