Folgen Sie uns auf Instagram: https://www.instagram.com/webstreet_code/

    *{
        Rand: 0;
        Polsterung: 0;
        Boxgröße: border-box;
        Schriftfamilie: „Poppins“, serifenlos;
    }

    Körper {
            Hintergrundfarbe: #141625;
            Anzeige: Flex;
            align-items: center;
            rechtfertigen-Inhalt: Flex-Start;
            Höhe: 100 Vh;
            Überlauf: versteckt;
        }
        .Hamburger{
            Position: absolut;
            oben: 20px;
            links: 18px;
            Cursor: Zeiger;
            Z-Index: 10;
        }

        .hamburger .line{
            Breite: 35px;
            Höhe: 4px;
            Hintergrundfarbe: #f0a500;
            Rand:6px 0;
            Randradius: 2px;
            Übergang: alle 0,4 Sekunden erleichtern;
        }

        .menu-bar {
            Position: fest;
            oben: 0;
            links: 0;
            Breite: 80px;
            Höhe: 100 %;
            Hintergrundfarbe: #1f2235;
            Box-Shadow: 2px 0 15px rgba(0, 0, 0, 0,6);
            Überlauf: versteckt;
            Übergang: Breite 0,4 s Leichtigkeit;

        }

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

        .menu-bar ul {
            Listenstil: keiner;
            Polsterung: 80px 10px;
        }
        .menu-bar ul li {
            Anzeige: Flex;
            align-items: center;
            Polsterung: 15px;
            Farbe: #b2becd;
            Cursor: Zeiger;
            Übergang: Hintergrundfarbe 0,3 s Leichtigkeit;
            Rand links: 4 Pixel durchgehend transparent;
        }

        .menu-bar ul li i {
            Schriftgröße: 24px;
            Rand rechts: 20px;
            Übergang: Transformation 0,3 Sekunden Leichtigkeit;
        }
        .menu-bar ul li span {
            Deckkraft: 0;
            Schriftgröße: 16px;
            Übergang: Deckkraft 0,4 Sekunden;
            Leerraum: nowrap;
        }

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

        .menu-bar ul li:hover {
            Hintergrundfarbe: #282a40;
            Box-Shadow: 0 4px 8px rgba(0, 0, 0, 0,2);
        }

        .menu-bar ul li:hover i {
            transformieren: Skala(1.2);
        }

        .menu-bar ul li.active {
            Hintergrundfarbe: #f0a500;
            Randradius: 20px;
            Farbe: #1f2235;
            Rand links: 4 Pixel fest #f0a500;
        }

        .menu-bar ul li.active i {
            Farbe: #1f2235;
        }

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