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 ( +
+
+

+ Biology Today: The New Future +

+
+

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;