Criando interface da aplicação - Header

Author: Lucas-RM

public/index.html

@@ -4,6 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&family=Secular+One&display=swap" rel="stylesheet">
     <meta
       name="description"
       content="Web site created using create-react-app"

src/assets/background.png

@@ -0,0 +1,11 @@
+import "./styles.css";
+
+const Header = () => {
+  return (
+    <header>
+        <h1>GitFind</h1>
+    </header>
+  );
+};
+
+export { Header };

src/components/Header/index.js

@@ -0,0 +1,14 @@
+header {
+    align-items: center;
+    background-color: #2D333B;
+    display: flex;
+    height: 52px;
+    justify-content: center;
+    width: 100%;
+}
+
+h1 {
+    color: #FFFFFF;
+    font-family: 'Inter, Roboto, Arial';
+    font-size: 24px;
+}

src/components/Header/styles.css

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import "./styles.css";
 import App from './pages/Home';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));

src/index.js

@@ -1,7 +1,9 @@
+import { Header } from '../../components/Header';
+
 function App() {
   return (
     <div className="App">
-      
+      <Header />
     </div>
   );
 }

src/pages/Home/index.js

@@ -0,0 +1,13 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: #1D2128;
+}
+
+hr {
+    background-color: rgba(229, 229, 229, 0.2);
+    border: 1px solid rgba(229, 229, 229, 0.2);
+}