update content

Author: bbandydd

src/containers/Home/Content.js

@@ -3,8 +3,9 @@ import React, { Component } from 'react';
 export default class Content extends Component {
   render() {
     return (
-      <div>
-        this is content
+      <div className="content">
+        <h1>Hello, We are ReactMaker!</h1>
+        <h2>This is Content Component!</h2>
       </div>
     );
   }

src/containers/Home/Header.js

@@ -1,13 +1,23 @@
 import React, { Component } from 'react';
-import logo from './logo7.png';
+import logo from './logo.png';
+import github from './github.png';
+import facebook from './facebook.png';
 
 export default class Header extends Component {
   render() {
     return (
       <div className="header">
-        <a href="https://facebook.com/reactmaker">
+        <div className="logo">
           <img alt="logoHeader" src={logo} />
-        </a>
+        </div>
+        <div className="link">
+          <a target="_blank" rel="noopener noreferrer" href="https://github.com/ReactMaker">
+            <img alt="github" src={github} />
+          </a>
+          <a target="_blank" rel="noopener noreferrer" href="https://facebook.com/reactmaker">
+            <img alt="facebook" src={facebook} />
+          </a>
+        </div>
       </div>
     );
   }

src/containers/Home/Home.less

@@ -3,15 +3,29 @@
  .header{
    height: 80px;
    display: flex;
-   justify-content: flex-start;
+   justify-content: space-between;
    align-items: center;
    flex-direction: row;
    background-color: #333;
    padding: 0 10px;
-   img{
-    height: 70px;
-    animation: rotate 15s infinite;
+   .logo {
+      img {
+        height: 70px;
+        animation: rotate 15s infinite;
+      }
    }
+   .link {
+     img {
+       height: 30px;
+       margin-right: 20px;
+     }
+   }
+ }
+
+ .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
  }
 }
 
@@ -25,4 +39,4 @@
   100%{
     transform: rotateY(360deg);
   }
-}
+}