part-3

src/app/app.component.html

@@ -1,10 +1,14 @@
-<div id="app-base-container">
-  <h1>Tutorial Angular</h1>
-  <h4>By Asmen</h4>
-  <p>Part 2</p>
-  <ul>
-    <li>
-      Sesuaikan letak Component yang telah dibuat
-    </li>
-  </ul>
+<div class="pure-g">
+  <div id="app-header" class="pure-u-24-24">
+    <app-header></app-header>
+  </div>
+  <div id="app-side-bar" class="pure-u-1-5">
+    <app-side-bar></app-side-bar>
+  </div>
+  <div id="app-main" class="pure-u-4-5">
+    <app-main></app-main>
+  </div>
 </div>
+<div id="app-footer">
+  <app-footer></app-footer>
+</div>

src/app/app.component.scss

@@ -1,3 +0,0 @@
-#app-base-container{
-    padding: 30px;
-}

src/app/layout/footer/footer.component.html

@@ -1 +1 @@
-<p>footer works!</p>
+<span>Tutorial angular by Asmen &copy; 2019</span>

src/app/layout/header/header.component.html

@@ -1 +1 @@
-<p>header works!</p>
+<h1>Tutorial Angular <span>By Asmen</span></h1>

src/app/layout/main/main.component.html

@@ -1 +1,8 @@
-<p>main works!</p>
+<div id="app-base-container">
+    <p>Part 3</p>
+    <ul>
+        <li>
+            Keluarkan semua konten di app component dengan <code>ng-content</code>
+        </li>
+    </ul>
+</div>

src/app/layout/main/main.component.scss

@@ -0,0 +1,3 @@
+#app-base-container{
+    padding: 30px;
+}

src/styles.scss

@@ -1,2 +1,26 @@
 /* You can add global styles to this file, and also import other style files */
-@import "../node_modules/purecss/build/pure-min.css";
+@import "../node_modules/purecss/build/pure-min.css";
+
+#app-footer{
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    background-color: black;
+    color: silver;
+    display: block;
+    text-align: center;
+    font-size: 80%;
+    padding: 5px;
+}
+
+#app-header{
+    background-color: aqua;
+}
+
+#app-header h1{
+    font-size: 120%;
+}
+
+#app-side-bar{
+    background-color: #ccc;
+}