fix #3 add fonts to be used for the header and the rest of the website.

src/components/Header.js

@@ -6,11 +6,13 @@ class Header extends React.Component {
   render() {
     const Logo = () => {
       return (
-        <nav>
+        <header>
           <img className="site-logo" src={require('../assets/images/logo.png')} alt="logo 858 "/>
           <br/>
           <img className="site-logo" src={require('../assets/images/byline.ar.png')} alt="logo 858 "/>
-        </nav>
+          <h1 >An archive of resistance</h1>
+          <h2 className="counter">٩٦٧ ساعة وبيزيدوا</h2>
+        </header>
       );
     }
     return (

src/stylesheets/style.css

@@ -1,4 +1,54 @@
-.site-logo{
+* {
-    max-width: 300px;
+    box-sizing: border-box;
-    padding-top: 2em;
+    margin: 0px;
+    border: 0px;
+}
+
+:root {
+    --858-light-gray-color: #ebebeb;
+}
+
+/* fonts */
+@font-face {
+    font-family: 'Fedra Arabic';
+    src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'bebas';
+    src: url('../assets/fonts/BEBAS___.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'majalla';
+    src: url('../assets/fonts/majalla 2.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'MyriadPro Regular';
+    src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf');
+}
+
+@font-face {
+    font-family: 'interstate';
+    src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'),
+    url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
+}
+
+/* header */
+header {
+    padding-top: 1em;
+}
+
+.site-logo {
+    max-width: 300px;
+    text-align: center;
+}
+
+.counter {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 2em;
+    font-family: majalla, serif;
 }