product.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="product.css">
    <title>Product Page</title>
</head>

<body>
    <!-- navbar -->
    <div id="navbar_1">
        <div id="navbar">
            <div class="nav_1">
                <div>
                    <a href="index.html">
                        <img src="./logo.jpg" alt="Error">
                    </a>
                </div>
            </div>
            <div class="nav_2">
                <input type="text" type="number" id="search_00" type="password"
                    placeholder="Search for a product or brand">
                <button id="btn"> <img src="https://th.bing.com/th/id/OIP.bHiX4UYr5iIQjDqWNpPL6AAAAA?pid=ImgDet&rs=1"
                        alt="Error" /></button>
            </div>
            <div class="nav_3">
                <div>
                    <div>
                        <img src="https://www.nicepng.com/png/detail/501-5010656_my-account-comments-my-account-icon-vector.png"
                            alt="">
                        <a href="login_1.html">Account</a>
                    </div>
                    <div>
                        <img src="https://p7.hiclipart.com/preview/493/81/168/shopping-bags-trolleys-computer-icons-recycling-reusable-shopping-bag-bag.jpg"
                            alt="Error">
                        <a href="cart.html">Cart</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="a"></div>

        <div class="items">
            <div>Brands</div>
            <div>Holiday</div>
            <div>Sale</div>
            <div>Skin Care</div>
            <div>Hair</div>
            <div>Makeup</div>
            <div>Bath&Body</div>
            <div>Fragrance</div>
            <div>Self Care</div>
            <div>Tools</div>
            <div>New & Trending</div>
            <div>Build a routine</div>
            <div>Blog</div>
        </div>
    </div>

    <label for="">Sort By Price</label>
    
    <label class="lab" for="">Filter By Category</label>
    <br>
    
    <div id="nam">
        <select id="selected">
            <option value="">Select</option>
            <option value="asc">Low to High</option>
            <option value="dsc">High to Low</option>
        </select>
    
        <select id="val">
            <option value="">Select</option>
            <option value="ESPA">ESPA</option>
            <option value="Estee Lauder">Estee Lauder</option>
        </select>
    </div>

    <div id="container">
        <!-- append here -->
    </div>


</body>

</html>
<script src="product.js"></script>