Now that you understand class components and JSX, implement the header component by following the next steps:
- Create a new folder called
/src/components/common/Header. - Create a new file called
/src/components/common/Header/Header.css. - 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;
}- Create a new file called
/src/components/common/Header/Header.js. - Write the following...