diff --git a/src/App.js b/src/App.js
index a443c11..46e3ea5 100644
--- a/src/App.js
+++ b/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
+
);
}
diff --git a/src/App.test.js b/src/App.test.js
index bb45998..5987aa3 100644
--- a/src/App.test.js
+++ b/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();
+ const linkElement = screen.getByText(/Biology Today:/i);
+ expect(linkElement).toBeInTheDocument();
+});
\ No newline at end of file
diff --git a/src/components/biologyToday/biologyToday.css b/src/components/biologyToday/biologyToday.css
new file mode 100644
index 0000000..b2480c2
--- /dev/null
+++ b/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%;
+}
\ No newline at end of file
diff --git a/src/components/biologyToday/index.js b/src/components/biologyToday/index.js
new file mode 100644
index 0000000..f3685b0
--- /dev/null
+++ b/src/components/biologyToday/index.js
@@ -0,0 +1,18 @@
+import './biologyToday.css';
+
+function BiologyToday() {
+ return (
+
+
+
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.
+
+ );
+}
+
+export default BiologyToday;