インスタグラムでフォローしてください: https://www.instagram.com/webstreet_code/

    

    *{
        マージン: 0;
        パディング: 0;
        ボックスのサイズ設定: ボーダーボックス;
        フォントファミリー: 'ポピンズ'、サンセリフ;
    }

    体 {
            背景色: #141625;
            ディスプレイ: フレックス;
            整列項目: 中央;
            justify-content: flex-start;
            高さ: 100vh;
            オーバーフロー: 非表示;
        }
        。ハンバーガー{
            位置: 絶対;
            上: 20ピクセル;
            左: 18ピクセル;
            カーソル: ポインタ;
            z インデックス: 10;
        }

        .ハンバーガー.ライン{
            幅: 35ピクセル;
            高さ: 4px;
            背景色: #f0a500;
            マージン:6px 0;
            境界半径: 2px;
            トランジション: すべて 0.4 秒の緩和。
        }

        .menu-bar {
            位置: 固定;
            トップ: 0;
            左: 0;
            幅: 80ピクセル;
            高さ: 100%;
            背景色: #1f2235;
            ボックスシャドウ: 2px 0 15px rgba(0, 0, 0, 0.6);
            オーバーフロー: 非表示;
            トランジション: 幅 0.4 秒の緩和。

        }

        .menu-bar.open {
            幅: 220ピクセル;
        }

        .menu-bar ul {
            リストスタイル: なし;
            パディング: 80px 10px;
        }
        .menu-bar ul li {
            ディスプレイ: フレックス;
            整列項目: 中央;
            パディング: 15px;
            色: #b2becd;
            カーソル: ポインタ;
            トランジション: 背景色 0.3 秒の容易さ。
            境界左: 4 ピクセルの実線透明。
        }

        .menu-bar ul li i {
            フォントサイズ: 24px;
            マージン右: 20px;
            トランジション: トランスフォーム 0.3 秒の容易さ。
        }
        .menu-bar ul lispan {
            不透明度: 0;
            フォントサイズ: 16px;
            トランジション: 不透明度 0.4 秒の緩和。
            ホワイトスペース: ナラップ;
        }

        .menu-bar.open ul li span {
            不透明度: 1;
        }

        .menu-bar ul li:hover {
            背景色: #282a40;
            ボックスシャドウ: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .menu-bar ul li:hover i {
            変換: スケール(1.2);
        }

        .menu-bar ul li.active {
            背景色: #f0a500;
            境界半径: 20px;
            色: #1f2235;
            ボーダー左: 4px ソリッド #f0a500;
        }

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

        .menu-bar ul li.active スパン {
            色: #1f2235;
        }

















   スタイル>