step 3

first-app/src/app/app.html

@@ -1 +1,8 @@
-<h1>Hello world!</h1>
+<main>
+    <header class="brand-name">
+        <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true" />
+    </header>
+    <section class="content">
+        <app-home></app-home>
+    </section>
+</main>

first-app/src/app/app.ts

@@ -1,8 +1,9 @@
 import {Component} from '@angular/core';
+import {Home} from './home/home';
 
 @Component({
   selector: 'app-root',
-  imports: [],
+  imports: [Home],
   templateUrl: './app.html',
   styleUrls: ['./app.css'],
 })

first-app/src/app/home/home.css

@@ -0,0 +1,36 @@
+.results {
+    display: grid;
+    column-gap: 14px;
+    row-gap: 14px;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 400px));
+    margin-top: 50px;
+    justify-content: space-around;
+}
+input[type="text"] {
+    border: solid 1px var(--primary-color);
+    padding: 10px;
+    border-radius: 8px;
+    margin-right: 4px;
+    display: inline-block;
+    width: 30%;
+}
+button {
+    padding: 10px;
+    border: solid 1px var(--primary-color);
+    background: var(--primary-color);
+    color: white;
+    border-radius: 8px;
+}
+@media (min-width: 500px) and (max-width: 768px) {
+    .results {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    input[type="text"] {
+        width: 70%;
+    }
+}
+@media (max-width: 499px) {
+    .results {
+        grid-template-columns: 1fr;
+    }
+}

first-app/src/app/home/home.html

@@ -0,0 +1,6 @@
+<section>
+    <form>
+        <input type="text" placeholder="Filter by city" />
+        <button class="primary" type="button">Search</button>
+    </form>
+</section>

first-app/src/app/home/home.ts

@@ -2,14 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-home',
-  imports: [],
-  template: `
-    <p>
-      home works!
-    </p>
-  `,
-  styles: ``
+  templateUrl: './home.html',
+  styleUrls: ['./home.css'],
 })
-export class Home {
 
-}
+export class Home {}