<header>

        <div class="col-sm-11 col-10 header-container">

            <div class="header-hb" id="header-hb" onclick="showNav()">

                <span></span>

                <span></span>

                <span></span>

            </div>

            <a href="index.html" class="header-logo">

                <img src="mockuppic\logo-2-w.png" />

            </a>

            <nav class="header-main-nav" id="header-main-nav">

                <div class="search">

                    <input type="text" id="search" placeholder="SEARCH PRODUCTS">

                    <svg fill="#2A2825" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="auto" height="auto"

                        viewBox="0 0 30 30">

                        <path

                            d="M 13 3 C 7.4886661 3 3 7.4886661 3 13 C 3 18.511334 7.4886661 23 13 23 C 15.396652 23 17.59741 22.148942 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148942 17.59741 23 15.396652 23 13 C 23 7.4886661 18.511334 3 13 3 z M 13 5 C 17.430666 5 21 8.5693339 21 13 C 21 17.430666 17.430666 21 13 21 C 8.5693339 21 5 17.430666 5 13 C 5 8.5693339 8.5693339 5 13 5 z">

                        </path>

                    </svg>

                </div>

                <a href="product.html">

                    ALL

                    <label id="sublist-btn1">

                        ▲

                    </label>

                    <ul class="header-sub-nav">

                        <li>

                            SKINCARE

                        </li>

                        <li>

                            CLEANSING

                        </li>

                        <li>

                            HAIR

                        </li>

                        <li>

                            FRAGRANCE

                        </li>

                        <li>

                            SET

                        </li>

                    </ul>

                </a>

                <a href="product.html">BEST</a>

                <a>ABOUT</a>

                <a href="blog.html">BLOG</a>

            </nav>

            <div class="header-icon">

                <a class="search">

                    <svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="auto" height="auto"

                        viewBox="0 0 30 30">

                        <path

                            d="M 13 3 C 7.4886661 3 3 7.4886661 3 13 C 3 18.511334 7.4886661 23 13 23 C 15.396652 23 17.59741 22.148942 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148942 17.59741 23 15.396652 23 13 C 23 7.4886661 18.511334 3 13 3 z M 13 5 C 17.430666 5 21 8.5693339 21 13 C 21 17.430666 17.430666 21 13 21 C 8.5693339 21 5 17.430666 5 13 C 5 8.5693339 8.5693339 5 13 5 z">

                        </path>

                    </svg>

                </a>

                <a href="checkout.html" class="cart">

                    <svg width="auto" height="auto" viewBox="0 -1 32 32" version="1.1"

                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

                        xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">

                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>

                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>

                        <g id="SVGRepo_iconCarrier">

                            <title>cart</title>

                            <desc>Created with Sketch Beta.</desc>

                            <defs> </defs>

                            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"

                                sketch:type="MSPage">

                                <g id="Icon-Set-Filled" sketch:type="MSLayerGroup"

                                    transform="translate(-466.000000, -726.000000)" fill="#ffffff">

                                    <path

                                        d="M475.97,734 L473.475,726 L467,726 C466.447,726 466,726.448 466,727 C466,727.553 466.447,728 467,728 L472,728 L474.011,734 L474,734 L476,746 C476,748.209 477.791,750 480,750 L491,750 C493.209,750 495,748.209 495,746 L498,734 L475.97,734 L475.97,734 Z M490,752 C488.896,752 488,752.896 488,754 C488,755.104 488.896,756 490,756 C491.104,756 492,755.104 492,754 C492,752.896 491.104,752 490,752 L490,752 Z M480,752 C478.896,752 478,752.896 478,754 C478,755.104 478.896,756 480,756 C481.104,756 482,755.104 482,754 C482,752.896 481.104,752 480,752 L480,752 Z"

                                        id="cart" sketch:type="MSShapeGroup"> </path>

                                </g>

                            </g>

                        </g>

                    </svg>

                </a>

                <a href="login.html" class="member">

                    <svg fill="#ffffff" width="auto" height="auto" viewBox="0 0 1000.00 1000.00"

                        xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">

                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>

                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>

                        <g id="SVGRepo_iconCarrier">

                            <path

                                d="M738 756q-45-77-131-205-6-8-14-15-2-2-1.5-4.5t2.5-3.5q60-29 97-83 40-58 40-124 0-63-31-116t-84-84-116-31-116 31-84 84-31 116q0 66 40 124 37 54 97 83 2 1 2.5 3.5T407 536q-8 7-14 15-88 130-131 205-18 32-18 52 0 27 34.5 50.5t93 37.5T500 910t128.5-14 93-37.5T756 808q0-21-18-52z">

                            </path>

                        </g>

                    </svg>

                </a>

            </div>

        </div>

    </header>