From 09318b24b0dcaa2bddfd498ab48008adae38d0f8 Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Fri, 4 Sep 2020 14:22:35 +0200
Subject: [PATCH] [frontend] Add description to hoods page

---
 .../src/app/hoodspage/hoodspage.component.html    | 12 +++++++++---
 .../src/app/hoodspage/hoodspage.component.scss    | 15 +++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/kibicara-frontend/src/app/hoodspage/hoodspage.component.html b/kibicara-frontend/src/app/hoodspage/hoodspage.component.html
index e9613d4..b4fcd87 100644
--- a/kibicara-frontend/src/app/hoodspage/hoodspage.component.html
+++ b/kibicara-frontend/src/app/hoodspage/hoodspage.component.html
@@ -1,8 +1,14 @@
-<!-- <div class="banner">
-  <h1>Discover hoods</h1>
-</div> -->
 <app-heading-one [title]="title"></app-heading-one>
 <div class="page">
+  <div class="description">
+    <p class="text">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat.
+    </p>
+    <div class="banner"></div>
+  </div>
   <mat-form-field class="searchbar">
     <mat-label> <mat-icon>search</mat-icon> Search for hoods</mat-label>
     <input matInput type="search" [(ngModel)]="searchText" autocomplete="off" />
diff --git a/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss b/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss
index 7dcd757..652b82f 100644
--- a/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss
+++ b/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss
@@ -13,6 +13,7 @@
   padding-left: 10%;
   padding-right: 10%;
   margin-bottom: 5%;
+  margin-top: 50px;
 }
 
 .list {
@@ -35,3 +36,17 @@ h1 {
   background-size: 100%;
   width: 100%;
 }
+
+.description {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.text {
+  padding-top: 20px;
+  padding-bottom: 10px;
+  color: gray;
+  font-size: 1.4375rem;
+  line-height: 1.875rem;
+}