Construindo um website em React

26. Aplicando CSS ao Header

O código CSS do componente Header será adicionado agora:

.masthead {
  height: 100vh;
  min-height: 500px;
  background-image: url('/header.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

3$ tut-add src/Header.css

Assim como a imagem utilizada nesse Header:

3$ tut-add public/header.png

Precisamos, também, atualizar o código do componente:

patch/ai.diff:

diff --git a/src/Header.js b/src/Header.js
index 6a7fa99..0068438 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,13 +1,18 @@
 import React from 'react'
 import { Container, Row, Col } from 'react-bootstrap'
+import './Header.css'

 const Header = _ =>
-  <header>
+  <header className="masthead">
     <Container>
-      <Row>
+      <Row className="text-center">
         <Col>
-          <h1>Inteligência Artificial e Blockchain</h1>
-          <h2>Aplicadas a Bem Estar, Saúde e Esportes</h2>
+          <h1 className="text-white text-uppercase font-weight-bold">
+            Inteligência Artificial e Blockchain
+          </h1>
+          <h2 className="text-white">
+            Aplicadas a Bem Estar, Saúde e Esportes
+          </h2>
         </Col>
       </Row>
     </Container>

3$ git-apply ai.diff src/Header.js