Header component

Now that you understand class components and JSX, implement the header component by following the next steps:

1. Create a new folder called /src/components/common/Header.
2. Create a new file called /src/components/common/Header/Header.css.
3. Write the following CSS in Header.css:

    .app-header {
      height: 200px;
      border-bottom: 1px solid black;
    }

    .app-header::after {
      content: "";
      height: 200px;
      opacity: 0.5;
      background: url('../../../assets/herobg.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: -1;   
    }

    .app-logo {
      height: 80px;
      margin-left: 50px;
    }

    .app-slogan {
      font-family: 'Comic Sans MS', 'Comic Sans', cursive;
      font-weight: bold;
      margin-left: 5px;
    }

4. Create a new file called /src/components/common/Header/Header.js.
5. Write the following...