KMaina · KMaina · Sep 3, 2018 · Sep 3, 2018 · Sep 3, 2018 · Sep 4, 2018
diff --git a/UI/admin-add-food.html b/UI/admin-add-food.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<link href="https://fonts.googleapis.com/css?family=Mukta" rel="stylesheet">
+	<link rel="stylesheet" href="css/reset.css">
+	<link rel="stylesheet" href="css/style.css">
+	<title>Admin- Add Food Item</title>
+</head>
+<body>
+	<div class="main-wrapper">
+		<nav id="menu">
+			<div class="toggle-btn" onclick="toggleSidebar()">
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>
+			<ul>
+				<li>
+					<div><img src="img/admin.jpg" class="avi"></div>
+					<p>Hello, Ken <span class="copyright">(Admin)</span></p>
+					<p><a href="log-out.html">Log out</a></p>
+				</li>
+				<ul>
+					<li><a href="admin-orders.html" class="">Orders</a></li>
+					<li><a href="admin-order-edit.html" class="sublink">Accept/Decline Orders</a></li>
+					<li><a href="admin-order-delivered" class="sublink">Order Status</a></li>
+				</ul>
+				<ul>
+					<li><a href="admin-food.html">Food Items</a></li>
+					<li><a href="admin-add-food.html" class="sublink">Add Food Item</a></li>
+				</ul>
+			</ul>
+		</nav>
+		<div class="admin-order-edit">
+			<div class="admin-add-food">
+				<h1>Add a Food Item</h1>
+				<p>Add a food item to your catalog</p>
+				<form>
+					<p>Add a beautiful image for your food item.</p>
+					<p><input type="file" name=""></p>
+					<p>Give a short description of the meal you want to add.</p>
+					<p><textarea rows='5' cols='50'></textarea></p>
+					<p><input type="submit" class="submit" value="Add"></p>
+				</form>
+			</div>
+		</div>
+	</div>
+	<footer id="index-footer">
+		<div class="footer-content">
+			<small>&copy;2018 Developed by: <span>Ken Maina</span></small>
+		</div>
+	</footer>
+	<script src="js/script.js"></script>
+</body>
+</html>
diff --git a/UI/css/reset.css b/UI/css/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/UI/css/style.css b/UI/css/style.css
@@ -0,0 +1,147 @@
+/* General styles */
+body{
+	font-family: 'Mukta', sans-serif;
+	line-height: 1.5rem;
+}
+
+a {
+	text-decoration: none;
+}
+
+.name{
+	color: #0545ad;
+}
+
+/* Sliding Menu*/
+#menu{
+	position: fixed;
+	width: 200px;
+	height: 100%;
+	background-color: #0a0416;
+	left: -200px;
+	transition: all 0.3s ease;
+}
+
+#menu.open{
+	left:0px;
+}
+
+#menu ul li{
+	padding: 15px 10px;
+	border-bottom: 1px solid white;
+}
+
+#menu ul li a{
+	color: white;
+} 
+
+#menu ul li a:hover{
+	color: #47fff2;
+} 
+
+#menu ul li a:active{
+	color: #ff84a5;
+} 
+
+
+#menu .toggle-btn{
+	position: absolute;
+	left: 230px;
+	top: 20px;
+}
+
+#menu .toggle-btn span{
+	display: block;
+	width: 30px;
+	height: 5px;
+	background-color: #47fff2;
+	margin: 5px 0px;
+}
+
+.avi{
+	width: 150px;
+	height: 150px;
+	background-color: pink;
+}
+
+.avi img {
+	width:100%;
+	max-height:auto;
+}
+
+.sublink{
+	padding-left: 10px;
+	font-size: 0.8rem;
+}
+
+#index-footer{
+	height: 10vh;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: #e2e2e2;
+}
+
+.footer-content {
+	text-align: center;
+}
+
+.footer-content small{
+	font-size: 0.75rem;
+}
+
+.submit{
+	width: 100%;
+	padding: 13px 0px;
+	border: 1px solid #fff;
+	cursor: pointer;
+	background-color: #0545ad;
+	color: #fff;
+}
+
+.submit:hover{
+	border: 1px solid #0545ad;
+	background-color: #fff;
+	color: #0545ad;
+}
+
+/* user-order.html */
+.main-wrapper{
+	background-color: #fff;
+}
+
+/*admin-order-edit.html styles*/
+.admin-order-edit{
+	height: 90vh;
+	text-align: center;
+	justify-content: center;
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+}
+
+.admin-add-food{
+	border-radius: 5px;
+    background-color: #e2e2e2;
+	padding: 20px 40px; 
+}
+
+.admin-add-food p{
+	padding-bottom: 20px;
+	color: #000;
+
+}
+
+.admin-add-food h1{
+	padding-bottom: 10px;
+	font-size: 2.5rem;
+	color: #000;
+}
+
+textarea {
+	padding: 10px;
+    line-height: 1.5;
+    border-radius: 5px;
+    border: 1px solid rgba(0,0,0,0.3);
+}
diff --git a/UI/img/admin.jpg b/UI/img/admin.jpg
diff --git a/UI/img/burger.jpg b/UI/img/burger.jpg
diff --git a/UI/img/chicken wing.jpg b/UI/img/chicken wing.jpg
diff --git a/UI/img/french fries.jpg b/UI/img/french fries.jpg
diff --git a/UI/img/landing.jpg b/UI/img/landing.jpg
diff --git a/UI/img/mario.jpg b/UI/img/mario.jpg
diff --git a/UI/img/pizza.jpg b/UI/img/pizza.jpg
diff --git a/UI/img/sandwich.jpg b/UI/img/sandwich.jpg
diff --git a/UI/js/script.js b/UI/js/script.js
@@ -0,0 +1,3 @@
+function toggleSidebar(){
+	document.getElementById("menu").classList.toggle('open');
+}