index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Bison Mart</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./src/data.js"></script>
        <script src="src/script.js"></script>
        <script src="src/card.js"></script>
        <script src="src/cart.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="styles/styles.css">
        <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Roboto:wght@100&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="styles/cart.css">
        <link rel="stylesheet" href="styles/card.css">
        <link rel="stylesheet" href="styles/flyerstyles.css">
        <link rel="stylesheet" href="styles/checkout.css">
    </head>
    <body>

        <!-- top bar containing logo and search -->
        <div class="top-bar">
            <div class="logo" id="logo">
                    <img src = "./images/My project.png" alt="logo"/>
            </div>
            <div class="searchbar">
                <select name="search-type" id="search-type">
                    <option value="all" selected> All </option>
                    <option value="category"> By Category </option>
                    <option value="product">By Product</option>
                </select>
                <input type="text" class="search-bar" id="searchbar" placeholder="Search"></input>
            </div>
        </div>

        <!-- main content body: everything should fall under here except topBar and cart-->
        <div class="contentBody" id="contentBody">

        <nav class="container">
            <ul class="fixed" id="sidebar">
                <li class="side-menu-item" id="products-menu-item">
                    <div class="icon"></div>
                        <i class="material-icons" style="font-size: 3em;">menu_book</i>
                    <div class="name" data-text="Categories">PRODUCTS</div>
                </li>
                <li class="side-menu-item" id="categories-menu-item">
                    <div class="icon"></div>
                        <i class="material-icons" style="font-size: 3em;">category</i>
                    <div class="name" data-text="Categories">CATEGORIES</div>
                </li>
                <li class="side-menu-item" id="deals-menu-item">
                    <div class="icon"></div>
                        <i class="material-icons" style="font-size: 3em;">attach_money</i>
                    <div class="name" data-text="Deals">DEALS</div>
                </li>
                <li class="side-menu-item" id="recipes-menu-item">
                    <div class="icon"></div>
                        <i class="material-icons" style="font-size: 3em;">flatware</i>
                    <div class="name" data-text="Recipes">RECIPES</div>
                </li>
                <li class="side-menu-item" id="about-menu-item">
                    <div class="icon"></div>
                        <i class="material-icons" style="font-size: 3em;">person_pin_circle</i>
                    <div class="name" data-text="About Us">ABOUT US</div>
                </li>
            </ul>
        </nav>
        <div class="itemlist" id="main">
        </div>
    </div> <!-- end of contentBody -->

        <div class="cart">
            <div class="cart-button">CART</div>
            <div class="cart-container" id="cart-container">
            </div> <!-- place products added to cart here -->
            <div id="totals">
                <p>Subtotal: $0</p>
                <p>Tax $0</p>
                <p>Total $0</p>
            </div>
            <div class="payment" id="to-checkout">Proceed to Payment</div>
        </div>
    </body>
</html>