From f300c740c41b22bc87e8debd91b648ac14d2bae0 Mon Sep 17 00:00:00 2001
From: Sanjit Joseph <78522615+sm-joseph@users.noreply.github.com>
Date: Wed, 30 Nov 2022 17:31:47 -0800
Subject: [PATCH] Move filter bar to separate div

---
 source/index.html | 110 +++++++++++++++++++++++-----------------------
 1 file changed, 56 insertions(+), 54 deletions(-)
diff --git a/source/index.html b/source/index.html
index 1ecc5b6..0a3b4df 100644
--- a/source/index.html
+++ b/source/index.html
@@ -1,64 +1,66 @@
 <!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" />
-		<title>Food Journal</title>
 
-		<!--Add Favicon-->
-		<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
+<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" />
+	<title>Food Journal</title>
 
-		<!-- Recipe Card Custom Element -->
-		<script src="assets/scripts/ReviewCard.js" type="module"></script>
+	<!--Add Favicon-->
+	<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
 
-		<!-- Main Stylesheets & Scripts --> 
-		<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
-		<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
-		<link rel="stylesheet" href="./static/homepage.css" />
-		<script src="assets/scripts/main.js" type="module"></script>
-	</head>
-	<body>
-		<header>
-			<div class="top-bar">
-				<img src ="./assets/images/Logo.png" alt="logo" />
-				<h1> Food Journal </h1>
-				<img src ="./assets/images/Logo.png" alt="logo" />
-			</div>
-		</header>
-		<main>
-			<div class="body-container">
-				<div style="width: 20%;"></div>
-				<div style="width: 60%;">
-					<div class="search-bar">
-						<form id="form">
-							<input type="search" id="search-bar" name="searchBar" placeholder="Search tags...">
-							<!--- 
-								<button class="click" type="search"> Search </button>
-							--->
-							<div class="Filter-box">
-								
-							</div>
-						</form>
-						<img src ="./assets/images/search_button.png" alt="SEARCH BTN" id="search-btn"/>
-					</div>
-					<div class="center-display">		
-						<img src ="./assets/images/create_button.png" alt="CREATE" id="create-btn" title="Add an entry!" onclick="window.location.assign('./CreatePage.html')"/>
-						<h2 id="recent-reviews-text"> Recent Reviews </h2>
-						<img src ="./assets/images/create_button.png" id="create-btn-invis" draggable="false"/>
-						<label for="sort">Filtering Method:</label>
-						<select id="sort">
-							<option value="recent">Most Recent</option>
-							<option value="top">Top Rated</option>
-						</select>
+	<!-- Recipe Card Custom Element -->
+	<script src="assets/scripts/ReviewCard.js" type="module"></script>
+
+	<!-- Main Stylesheets & Scripts -->
+	<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
+	<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
+	<link rel="stylesheet" href="./static/homepage.css" />
+	<script src="assets/scripts/main.js" type="module"></script>
+</head>
+
+<body>
+	<header>
+		<div class="top-bar">
+			<img src="./assets/images/Logo.png" alt="logo" />
+			<h1> Food Journal </h1>
+			<img src="./assets/images/Logo.png" alt="logo" />
+		</div>
+	</header>
+	<main>
+		<div class="body-container">
+			<div style="width: 20%;"></div>
+			<div style="width: 60%;">
+				<div class="search-bar">
+					<form id="form">
+						<input type="search" id="search-bar" name="searchBar" placeholder="Search tags...">
 						<button id="clear-search">Clear Search</button>
-					</div>
+					</form>
+					<img src="./assets/images/search_button.png" alt="SEARCH BTN" id="search-btn" />
+				</div>
 
-					<div class="review-container" id="review-container"></div>
+				<div class="filter-bar">
+					<label for="sort">Filtering Method:</label>
+					<select id="sort">
+						<option value="recent">Most Recent</option>
+						<option value="top">Top Rated</option>
+					</select>
 				</div>
-				<div style="width: 20%;">
+				
+				<div class="center-display">
+					<img src="./assets/images/create_button.png" alt="CREATE" id="create-btn" title="Add an entry!"
+						onclick="window.location.assign('./CreatePage.html')" />
+					<h2 id="recent-reviews-text"> Recent Reviews </h2>
+					<img src="./assets/images/create_button.png" id="create-btn-invis" draggable="false" />
 				</div>
+
+				<div class="review-container" id="review-container"></div>
 			</div>
-		</main>
-	</body>
-</html>
+			<div style="width: 20%;">
+			</div>
+		</div>
+	</main>
+</body>
+
+</html>
\ No newline at end of file
