freezerList.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Freezers</title>
    <style>
        .freezerList {
            border: 1px solid black;
            padding: 10px;
            position: relative;
            top: 10px;
            display: flex;
            flex-direction: row;
            gap: 1rem;
        }

        .freezerButton {
            display: inline-block;
            width: 80px;

        }
    </style>
  </head>

  <body>
    <div class="global-navbar">
      <ul id="menubaritems">
          <li class="menubarblocks" ><a href="index.html">Home</a></li>
          <li class="menubarblocks" ><a href="fridgelist.html">Fridge List</a></li>
          <li class="menubarblocks" ><a href="freezerList.html">Freezer List</a></li>
          <li class="menubarblocks" ><a href="feedback.html">Feedback</a></li>
          <li class="menubarblocks"><a href="aboutUs.html">About Us</a></li>
      </ul>
          </div>

      <div class="freezerList">
            <button class="freezerButton" id="freezer"><a href="">Freezer 1</a></button>
            <button class="freezerButton" id="freezer2">Freezer 2</button>
                <button class="freezerButton" id="freezer3">Freezer 3</button>
                <button class="freezerButton"
                id="freezer4">Freezer 4</button>
                <button class="freezerButton" id="freezer5">Freezer 5</button>
        </div>
  </body>
</html>