feat: add Biology Today article

src/App.js

@@ -1,4 +1,5 @@
 import './App.css';
+import BiologyToday from './components/biologyToday'
 
 function App() {
   return (
@@ -9,6 +10,7 @@ function App() {
           My really cool blog site
         </p>
       </header>
+      <BiologyToday/>
     </div>
   );
 }

src/App.test.js

@@ -6,3 +6,9 @@ test('renders My really cool blog site logo', () => {
   const linkElement = screen.getByText(/My really cool blog site/i);
   expect(linkElement).toBeInTheDocument();
 });
+
+test('renders Biology Today article', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/Biology Today:/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/components/biologyToday/biologyToday.css

@@ -0,0 +1,24 @@
+.biologyToday {
+ border: black 7px solid;
+border-radius: 10px;
+margin: 5px 0px;
+padding: 0px 10px;
+display: inherit;
+width: 25%;
+flex-direction: inherit;
+align-items: inherit;
+}
+
+.articleHeader{
+margin: 15px 0px;
+display: flex;
+background: #272c35;
+padding: 0px 10px;
+font-size: calc(5px + 2vmin);
+color: white;
+text-shadow: 0 0 black;
+}
+
+.articleParagraph {
+margin: 3% 0%;
+}

src/components/biologyToday/index.js

@@ -0,0 +1,18 @@
+import './biologyToday.css';
+
+function BiologyToday() {
+  return (
+    <div className="biologyToday">
+      <header className="articleHeader">
+        <p>
+          Biology Today: The New Future
+        </p>
+      </header>
+      <p className="articleParagraph">Meanwhile, the field of biology itself keeps expanding—see, for example, synthetic biology,
+      the new subfield that uses the combined insights of molecular biology, engineering, and chemistry to construct biological
+      parts and processes.</p>
+    </div>
+  );
+}
+
+export default BiologyToday;