KMaina · KMaina · Sep 3, 2018 · Sep 3, 2018 · Sep 4, 2018 · Sep 4, 2018
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,78 @@
+/* General styles */
+body{
+	font-family: 'Mukta', sans-serif;
+	line-height: 1.5rem;
+}
+
+a {
+	text-decoration: none;
+}
+
+
+/* index.html styles */
+.body-wrapper{
+	height: 100%;
+	width: 100%;
+}
+
+#index-main{
+	height: 90vh;
+	background-image: url("../img/landing.jpg");
+
+    /* Full height */
+    /*height: 100%; */
+
+    /* Center and scale the image nicely */
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+}
+
+.landing{
+	position: relative;
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+.landing h1, p {
+	color: #fff;
+}
+
+.landing h1{
+	font-size: 2.5rem;
+	padding-bottom: 20px;
+}
+
+.landing p{
+	padding-bottom: 10px;
+}
+
+.button{
+	text-decoration: none;
+	color: #fff;
+	padding: 2px 40px 2px 40px;
+	border: 1px solid #fff;
+	margin-right: 30px;
+}
+
+.button:hover{
+	background-color: white;
+	color: black;
+}
+
+#index-footer{
+	height: 10vh;
+	width: 100%;
+}
+
+.footer-content {
+	text-align: center;
+	position: relative;
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+.footer-content small{
+	font-size: 0.75rem;
+}
diff --git a/UI/img/landing.jpg b/UI/img/landing.jpg
diff --git a/UI/index.html b/UI/index.html
@@ -0,0 +1,31 @@
+<!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>Welcome To Fasty Food Fast</title>
+</head>
+<body>
+	<div class="body-wrapper">
+		<main id="index-main">
+			<div class="landing">
+				<h1>Welcome to Tasty Food Fast</h1>
+				<p>Here at Tasty Food Fast we aim to get you finger lickin' dishes wherever you are at the touch of a button. All you need to do is place an order for yor dish and await it wherever you are.</p>
+				<p>What are you waiting for? Sign up with us if you haven't already and leave the rest to us!</p>
+				<div class="ghost-buttons">
+					<a class="button" href="sign-up.html">Sign Up</a>
+					<a class="button" href="sign-in.html">Sign In</a>
+				</div>
+			</div>
+		</main>
+	</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>