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: ...

Get Hands-On Full-Stack Web Development with ASP.NET Core now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial