Combined Components

public/index.html

@@ -8,7 +8,10 @@
   <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:[email protected]&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/db-logo.png" />
-
+
+    <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=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet">
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-1S5BF4RKRZ"></script>
     <script>

src/App.js

@@ -11,6 +11,9 @@ import Quad from './components/Quad';
 import Multimedia from './components/Multimedia';
 import Prime from './components/Prime';
 
+import Issue from './components/Issue';
+import NavBar from './components/NavBar';
+
 
 function App() {
   const [ data, setData ] = useState(null);
@@ -28,6 +31,8 @@ function App() {
   return data && (
     <div className="App">
       <Header/>
+      {/*<NavBar/>*/}
+      <Issue/>
       <div><News articles={data.news}/></div>
       <div><Sports articles={data.sports}/></div>
       <div><Arts articles={data.arts}/></div>

src/components/About.js

@@ -0,0 +1,84 @@
+import styled from "styled-components";
+import { mediaQueries } from "../shared/config";
+
+const OuterContainer = styled.div`
+    background: #7F5D43;
+    width: 100%;
+    height: fit-content;
+    ${mediaQueries.mobile} {
+      padding-bottom: 10%;
+    }
+`;
+
+
+
+const Title = styled.div`
+    color: #FFF1E2;
+    font-family: "Inter", sans-serif;
+    font-size: 70px;
+    font-style: normal;
+    font-weight: 600; /* Semi-bold */
+    text-transform: uppercase;
+    padding-bottom: 1%;
+
+    ${mediaQueries.mobile} {
+        font-size: 30px;
+        padding-bottom: 0;
+      }
+`;
+
+const Container = styled.div`
+  position: relative;
+  margin: 2em auto 0 auto;
+  width: 60%;
+  height: fit-content;
+  block-size: fit-content;
+  border: 1px solid black;
+  background: #3F2B1B;
+  font-family: "Oswald", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: light;
+  font-style: normal;
+  box-sizing: border-box;
+  padding-bottom: 1%;
+
+  ${mediaQueries.mobile} {
+    width: 80%;
+  }
+`;
+
+const Text = styled.div`
+  padding: 1em 3em;
+  ${mediaQueries.movile} {
+    padding: 1em 1em;
+  }
+`;
+
+
+const Content = styled.div`
+  margin: 5%;
+  margin-top: 7%;
+  margin-bottom: 7%;
+  font-family: "Oswald", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: light;
+  font-style: normal;
+  font-size: 18px;
+  line-height: 21.1px;
+  text-align: justify;
+  color: white;
+  ${mediaQueries.mobile} {
+    font-size: 14px;
+  }
+`;
+
+
+const Aboout = ({about}) => {
+  return (
+    <>
+    <Title>ABOUT</Title>
+    </>
+  );
+}
+
+export default About;

src/components/Header.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 
 const DBHeader = styled("div")`
-  z-index: 2001;
+  z-index: 10;
   position: -webkit-sticky;
   position: sticky;
   top: 0;

src/components/Issue.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components'
+
+
+const Container = styled.div`
+    width: 100%;
+    height: 30em;
+    left: -2px;
+    background: #D3D7C6;
+    display: flex;
+    justify-content: center;
+    align-items: flext-start;
+    padding-top: 3em;
+`
+
+const Title = styled.div`
+    width: 15em;
+    height: 94px;
+    left: 10em;
+    font-family: "Cinzel Decorative", serif;
+    font-size: 70px;
+    font-weight: 700;
+    line-height: 94.36px;
+    text-align: center;
+    color: #4C6953;
+`
+
+const Issue = (props) => {
+    return(
+        <>
+        <Container>
+            <Title>What is in this issue?</Title>
+        </Container>
+        </>
+    )
+}
+
+export default Issue;