Added card layout and styles, homepage

parkinglot/app/assets/stylesheets/application.css

@@ -2,9 +2,24 @@
 	font-family: 'Raleway';
 }
 
+.eighteen {
+	padding: 20px;
+	background: black;
+	color: white;
+	display: inline-block;
+	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+	text-align: center;
+	margin: 0 auto;
+}
+
+.eighteen:hover {
+	color: black;
+	background: #fe9900;
+	text-decoration: none;
+}
 
 .new-log {
-	position:absolute;
+	position:fixed;
     bottom:0;
     right:0;
     box-sizing: border-box;
@@ -18,12 +33,41 @@
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }
 
+
+
 .new-log:hover {
 	cursor: pointer;
 	background: black;
 	color: white !important;
 }
 
+#plus {
+	background: #fe9900;
+	border: none;
+	text-decoration: none;
+	color: black;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-content: center;
+	vertical-align: middle;
+	padding-top: 1.7em;
+	font-size: 3em;
+	font-weight: bold;
+	box-sizing: border-box;
+	transition: 0.2s linear;
+}
+
+#plus:hover {
+	cursor: pointer;
+	background: black;
+	color: white !important;
+}
+
+.orange {
+	border-right: #e7e7e7 1px solid;
+	padding-right: 13px;
+}
 nav {
 	padding: 20px;
 	display: flex;
@@ -38,12 +82,19 @@ body {
 	
 }
 
-.card {
+.card-container {
+	display: flex;
+	flex-wrap: wrap;
+	align-content: center;
+	justify-content: center;
+}
 
+.card {
+	min-height: 207px;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
-	max-width: 400px;
+	min-width: 390px;
     border: solid 1px;
     padding: 20px;
     margin: 10px;

parkinglot/app/views/carlogs/index.html.erb

 
 <nav>
 	<div class="logo">
-	<div style="font-size:50px; font-weight: bold; color:white;">
+	<div style="font-size:50px; font-weight: bold; color:white; text-align: center;">
 	Park <div style="display:inline;  color:black; background:#fe9900; border-radius:5px; font-size:50px; padding:1px 5px;">hub</div>
 	</div>
 	</div>
@@ -10,11 +10,15 @@
 </nav>
 <a class="new-log" href="/carlogs/new"><span class="glyphicon glyphicon-plus"></span></a>
 
-<hr>
+<div class="card-container">
 <% @cars.each do |car|%>
+
+
+
+
 <div class="card">
 
-<div class="column">
+<div class="column orange">
 <label>Brand</label><%=car.brand=%>
 <label>Plate Number</label><%=car.plate_number=%>
 
@@ -27,7 +31,15 @@
 <label>Time Out</label><%=car.created_at=%>
 </div>
 
-<a href="/carlogs/delete/<%=car.id=%>" style="color:black; margin: 10px;">Delete</a>
+
+
+<a href="/carlogs/delete/<%=car.id=%>" style="color:black; margin: 10px;"><span class="glyphicon glyphicon-trash"></span></a>
+
 </div>
 <%end%>
+<a id="plus" href="/carlogs/new" class="card">
+Add More
+</a>
+</div>
+
 

parkinglot/app/views/pages/index.html.erb

-Hello World
\ No newline at end of file
+<nav>
+	<h1 style="color: white; text-align: center;">Welcome to</h1>
+	<div class="logo">
+	<div style="font-size:50px; font-weight: bold; color:white; text-align: center;">
+	Park <div style="display:inline;  color:black; background:#fe9900; border-radius:5px; font-size:50px; padding:1px 5px;">hub</div>
+	</div>
+	<p style="color: white; text-align: center;
+	font-size: 2em; margin-top: 1em;">Only those who are 18 or above are eligible to drive.</p>
+	<center><a href="carlogs" class="eighteen" style="margin-top:1em;">Yes, I am 18 or above.</a></center>
+	</div>
+	
+</nav>
\ No newline at end of file