make Card UI

src/app/components/bars/bars.component.css

+.logo-img {
+	height: 60px;
+	width: 60px;
+}
+
+.row-container {
+	display: flex;
+	flex-flow: row nowrap;
+	padding: 2px;
+}
+
+.center {
+	justify-content: center;
+	align-items: center;
+}
+
+.card {
+	background-color: #DCDCDC;
+	border-radius: 5px;
+	border: 1px #222222 solid;
+	margin: 5px 15px;
+}
+
+.card-header, .card-actions {
+	background-color: inherit;
+	border: 0;
+	flex-grow: 0;
+	margin: 0;
+	padding: 0;
+}
+
+.card-actions {
+	flex-grow: 1;
+}
+
+.card-content {
+	flex-grow: 100;
+	text-align: start;
+}
+
+.card-content > p {
+	font-size: 0.9em;
+	font-weight: bold;
+	color: #6E2424;
+}
+
+
+.card-content > div {
+	font-size: 0.8em;
+}
+
+.card-action {
+	flex-grow: 1;
+}
\ No newline at end of file

src/app/components/bars/bars.component.html

-<p>bars works!</p>
 <p>
 	<button mat-raised-button routerLink="/profile" color="primary">profile</button>
-	<button mat-raised-button routerLink="/photos" color="accent">photos</button>
 </p>
-<ul>
-	<li *ngFor="let bar of (bars$ | async)">{{ bar.shortname }} - {{ bar.longname }}</li>
-</ul>
\ No newline at end of file
+<mat-icon>store_mall_directory</mat-icon>
+<p>Choisis ton lieu de beuverie.
+	Tu pourras ensuite accéder à la carte des boissons.</p>
+<section>
+	<div *ngFor="let bar of (bars$ | async)" class=" card row-container center">
+		<div class="card-header">
+			<img class="logo-img" src="https://fakeimg.pl/300/" alt="fake-img">
+		</div>
+		<div class="card-content">
+			<p>{{ bar.longname }}</p>
+			<div>{{ bar.address }}</div>
+		</div>
+		<div class="card-action">
+			<button mat-raised-button color='accent'>choisir</button>
+		</div>
+	</div>
+</section>

src/styles.css

@@ -2,7 +2,7 @@
 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 
 html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; background-color: #f1f1f1; text-align: center;}
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; background-color: #f1f1f1; text-align: center; color: #222222}
 
 .link {
 	outline: 0;
@@ -20,11 +20,17 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; background-
 
 
 .column-container {
-	flex-direction: column;
+	flex-flow: column nowrap;
+	padding: 5px;
+}
+
+.row-container {
+	display: flex;
+	flex-flow: row nowrap;
 	padding: 5px;
 }
 
-.column-container > * {
+.column-container > *, .row-container > * {
 	margin: 5px;
 }