Add search bar in search card

src/app/search-card/search-card.component.css

@@ -0,0 +1,38 @@
+.search-bar {
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  padding: 10px 0 10px 20px;
+  border: 1px solid rgba(183, 183, 183, .3);
+  -webkit-border-radius: 25px;
+  border-radius: 25px;
+  font: normal 20px/normal Verdana, Geneva, sans-serif;
+  color: #37474f;
+  -o-text-overflow: clip;
+  text-overflow: clip;
+  background-color: #f2f2f2;
+  height: 52px;
+}
+
+.search-bar input[type=text] {
+  vertical-align: top;
+  width: calc(100% - 30px);
+  height: 28px;
+  border: none;
+  background-color: #f2f2f2;
+}
+
+.search-bar input[type=text]:focus {
+  outline: none;
+}
+
+.search-bar .search-button {
+  border-left: 1px solid rgba(183, 183, 183, .3);
+  padding: 0 10px;
+  cursor: pointer;
+}
+
+.search-bar .search-button .material-icons {
+  font-size: 30px;
+  color: #37474f;
+}

src/app/search-card/search-card.component.html

@@ -1,4 +1,21 @@
 <app-card position="{{ position }}">
+
   <div title>Search Your Trip</div>
-  <div desc>Here search bar</div>
+
+  <div desc>
+
+    <div class="search-bar">
+
+      <input placeholder="Search Your Trip" type="text"/>
+
+      <div class="search-button">
+
+        <i class="material-icons">search</i>
+
+      </div>
+
+    </div>
+
+  </div>
+
 </app-card>