Frontpage and authentication mockups, login

src/app/authentication/authentication.component.css

@@ -0,0 +1,10 @@
+a
+{
+	text-decoration: none;
+	color: white;
+}
+.login
+{
+	box-shadow: 1px 1px 1px 1px grey;
+	padding: 20px;
+}

src/app/authentication/authentication.component.html

@@ -1 +1,24 @@
 <button type="button" class="btn btn-dark m-4 "><a routerLink = "/generator-search">Generator</a></button>
+<div class = "container ">
+	<div class = "row">
+		<div class = "col-md-4 mx-auto login well">
+			<h2 class = "text-center mb-3">Log In</h2>
+			<form>
+			  <div class="form-group">
+			    <label for="exampleInputEmail1">Email address</label>
+			    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">   
+			  </div>
+			  <div class="form-group">
+			    <label for="exampleInputPassword1">Password</label>
+			    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+			  </div>
+			  <!--<div class="form-check">
+			    <input type="checkbox" class="form-check-input" id="exampleCheck1">
+			    <label class="form-check-label" for="exampleCheck1">Check me out</label>
+			  </div>-->
+			  <button type="submit" class="btn btn-primary mt-2"><a routerLink = "/generator-search">Submit</a></button>
+			</form>
+		</div>
+	</div>
+
+</div>

src/app/frontpage/frontpage.component.css

@@ -0,0 +1,5 @@
+a
+{
+	text-decoration: none;
+	color: white;
+}

src/app/frontpage/frontpage.component.html

@@ -1 +1,20 @@
-<button type="button" class="btn btn-dark m-4"><a routerLink = "/authentication">Login</a></button>
+<div class = "container">
+	<div class = "row">
+		<div class = "col-md">
+			<button type="button" class="btn btn-dark mt-3 btn-md btn-block"><a routerLink = "/authentication">Login</a></button>			
+		</div>
+		<div class = "col-md">
+			<button type="button" class="btn btn-dark mt-3 btn-md btn-block"><a routerLink = "/">Sign Up</a></button>			
+		</div>		
+	</div>
+	<div class = "row" >
+		<div class = "col-md mt-5">
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas, lorem ut blandit elementum, sem leo viverra ipsum, bibendum interdum dui ex a quam. Curabitur scelerisque non ante nec elementum. Nunc vestibulum neque eu lacus ullamcorper vehicula. Nunc velit dolor, sodales at dolor vel, imperdiet tempus lacus. Mauris eget fringilla lacus. Aenean sit amet maximus purus. Phasellus vel bibendum ipsum, nec venenatis ipsum. Fusce lorem justo, dapibus ut justo eu, convallis porttitor leo. Integer gravida velit id est tristique, eu ullamcorper neque dictum. Nullam egestas sed ipsum ornare laoreet. Praesent gravida, justo dictum porttitor convallis, massa purus vehicula nibh, nec elementum nunc massa sed dolor. Nulla at risus sit amet dolor pretium fermentum. Ut ut nisl non magna vulputate rutrum eget a risus. Duis pretium leo purus, eu cursus dui volutpat sit amet.</p>		
+		</div>
+	</div>
+	<div class = "row" >
+		<div class = "col-md mt-3">
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas, lorem ut blandit elementum, sem leo viverra ipsum, bibendum interdum dui ex a quam. Curabitur scelerisque non ante nec elementum. Nunc vestibulum neque eu lacus ullamcorper vehicula. Nunc velit dolor, sodales at dolor vel, imperdiet tempus lacus. Mauris eget fringilla lacus. Aenean sit amet maximus purus. Phasellus vel bibendum ipsum, nec venenatis ipsum. Fusce lorem justo, dapibus ut justo eu, convallis porttitor leo. Integer gravida velit id est tristique, eu ullamcorper neque dictum. Nullam egestas sed ipsum ornare laoreet. Praesent gravida, justo dictum porttitor convallis, massa purus vehicula nibh, nec elementum nunc massa sed dolor. Nulla at risus sit amet dolor pretium fermentum. Ut ut nisl non magna vulputate rutrum eget a risus. Duis pretium leo purus, eu cursus dui volutpat sit amet.</p>		
+		</div>
+	</div>
+</div>