From e71430c11e162d685d9a00c30680a95bbd50ba3d Mon Sep 17 00:00:00 2001 From: Oleksandra Zarubina Date: Fri, 26 Jun 2026 21:11:41 +0300 Subject: [PATCH 1/2] add task solution --- README.md | 2 +- src/App.jsx | 82 +++--------------------------- src/components/Article/Article.css | 14 +++++ src/components/Article/Article.jsx | 68 +++++++++++++++++++++++++ src/components/Header/Header.css | 18 +++++++ src/components/Header/Header.jsx | 24 +++++++++ src/components/Welcome/Welcome.css | 7 +++ src/components/Welcome/Welcome.jsx | 13 +++++ 8 files changed, 151 insertions(+), 77 deletions(-) diff --git a/README.md b/README.md index acd4587e2..b00c404d6 100644 --- a/README.md +++ b/README.md @@ -9,4 +9,4 @@ Split the `App.js` into components based on CSS blocks. CSS code should be split - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save. - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline) - Open one more terminal and run tests with `npm test` to ensure your solutions is correct -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_decompose/) and add it to the PR description +- Replace `` with your Github username in the [DEMO LINK](https://zarubina20.github.io/react_decompose/) and add it to the PR description diff --git a/src/App.jsx b/src/App.jsx index 71951ebcd..f1029f1c9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,86 +1,16 @@ import React from 'react'; import './App.css'; // Move each BEM block to a separate component (file) and import them here +import Welcome from './components/Welcome/Welcome'; +import Header from './components/Header/Header'; +import Article from './components/Article/Article'; function App() { return (
-
- Sticky Header! -
-
-

Site Name

- -
-
-

Headline

-

- In elementum lorem eget est euismod ornare. Phasellus sit amet - pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam - nibh. Mauris molestie, urna accumsan ornare semper, augue nibh posuere - lorem, vitae feugiat sem magna eget massa. Vivamus quis tincidunt - dolor. Fusce efficitur, orci non vestibulum consequat, lectus turpis - bibendum odio, in efficitur leo felis sed justo. Fusce commodo iaculis - orci, quis imperdiet urna. Sed mollis facilisis lacus non condimentum. - Nunc efficitur massa non neque elementum semper. Vestibulum lorem - arcu, tincidunt in quam et, feugiat venenatis augue. Donec sed - tincidunt tellus, a facilisis magna. Proin sit amet viverra nibh, - bibendum gravida felis. Vivamus ut nunc id mauris posuere - pellentesque. Praesent tincidunt id odio id feugiat. -

-

- In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae, - fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et - cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien - ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit - molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor - congue magna, sit amet bibendum libero nisi id massa. -

-

- Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor. - Cras congue, massa nec sagittis mollis, dui felis ultrices magna, - tincidunt finibus lorem quam in sem. Morbi odio turpis, pulvinar sit - amet vulputate quis, ultricies eu libero. Donec ac maximus neque, nec - maximus nibh. Morbi rhoncus convallis urna, accumsan porta lorem - hendrerit in. Cras eget nisl dui. Morbi faucibus nisi eget ipsum - semper vulputate. Mauris nec tincidunt lectus. Aenean ac mi consequat - velit dignissim consectetur. Fusce placerat ac ipsum ac eleifend. - Aenean quis faucibus ex. -

-

- Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla - facilisi. In at elit id leo tristique condimentum. Donec at est nulla. - Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit - vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna - nibh, blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo. - Praesent in ullamcorper est. -

-

- Pellentesque habitant morbi tristique senectus et netus et malesuada - fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam - convallis faucibus ante sed porta. Nullam ut convallis elit, quis - venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et - orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo - dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae - turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur - consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt - quis sodales vitae, ornare a turpis. Proin sit amet finibus enim. - Fusce tempus a neque vitae tempor. Aenean rutrum, libero iaculis - interdum vulputate, dui eros vehicula nisi, at interdum enim lacus eu - diam. -

-
+ +
+
); } diff --git a/src/components/Article/Article.css b/src/components/Article/Article.css index 56e2e0542..3867fa9cb 100644 --- a/src/components/Article/Article.css +++ b/src/components/Article/Article.css @@ -1 +1,15 @@ /* Put article styles here */ +.article { + max-width: 800px; +} + +.article__paragraph { + color: rgb(51, 51, 51); +} + +@media (min-width: 768px) { + .article { + margin-bottom: 78.4px; + padding-left: 44.8px; + } +} \ No newline at end of file diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx index 073476529..e34af3939 100644 --- a/src/components/Article/Article.jsx +++ b/src/components/Article/Article.jsx @@ -3,3 +3,71 @@ // Create an Article function returning the HTML of article block // Add a default export statement for Article component to use it in the other files + +import React from 'react'; +import './Article.css'; + +function Article() { + return ( +
+

Headline

+

+ In elementum lorem eget est euismod ornare. Phasellus sit amet + pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam nibh. + Mauris molestie, urna accumsan ornare semper, augue nibh posuere lorem, + vitae feugiat sem magna eget massa. Vivamus quis tincidunt dolor. Fusce + efficitur, orci non vestibulum consequat, lectus turpis bibendum odio, + in efficitur leo felis sed justo. Fusce commodo iaculis orci, quis + imperdiet urna. Sed mollis facilisis lacus non condimentum. Nunc + efficitur massa non neque elementum semper. Vestibulum lorem arcu, + tincidunt in quam et, feugiat venenatis augue. Donec sed tincidunt + tellus, a facilisis magna. Proin sit amet viverra nibh, bibendum gravida + felis. Vivamus ut nunc id mauris posuere pellentesque. Praesent + tincidunt id odio id feugiat. +

+

+ In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae, + fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et + cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien + ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit + molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor + congue magna, sit amet bibendum libero nisi id massa. +

+

+ Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor. Cras + congue, massa nec sagittis mollis, dui felis ultrices magna, tincidunt + finibus lorem quam in sem. Morbi odio turpis, pulvinar sit amet + vulputate quis, ultricies eu libero. Donec ac maximus neque, nec maximus + nibh. Morbi rhoncus convallis urna, accumsan porta lorem hendrerit in. + Cras eget nisl dui. Morbi faucibus nisi eget ipsum semper vulputate. + Mauris nec tincidunt lectus. Aenean ac mi consequat velit dignissim + consectetur. Fusce placerat ac ipsum ac eleifend. Aenean quis faucibus + ex. +

+

+ Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla + facilisi. In at elit id leo tristique condimentum. Donec at est nulla. + Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit + vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna nibh, + blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo. + Praesent in ullamcorper est. +

+

+ Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam + convallis faucibus ante sed porta. Nullam ut convallis elit, quis + venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et + orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo + dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae + turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur + consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt + quis sodales vitae, ornare a turpis. Proin sit amet finibus enim. Fusce + tempus a neque vitae tempor. Aenean rutrum, libero iaculis interdum + vulputate, dui eros vehicula nisi, at interdum enim lacus eu diam. +

+
+ ); +} + +export default Article; diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 0b160f66f..2bf3a625b 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1 +1,19 @@ /* Put header styles here */ +.header { + position: sticky; + display: flex; +} + +.header__title { + font-weight: 600; +} + +.navigation__link { + opacity: 0.7; +} + +@media (min-width: 768px) { + .header { + display: flex; + } +} \ No newline at end of file diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 3f2fea103..2101406e0 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -3,3 +3,27 @@ // Create a Header function returning the HTML of header block // Add a default export statement for Header component to use it in the other files + +import React from 'react'; +import './Header.css'; + +function Header() { + return ( +
+

Site Name

+ +
+ ); +} + +export default Header; diff --git a/src/components/Welcome/Welcome.css b/src/components/Welcome/Welcome.css index 564ff918a..2c14b459c 100644 --- a/src/components/Welcome/Welcome.css +++ b/src/components/Welcome/Welcome.css @@ -1 +1,8 @@ /* Put welcome styles here */ +.welcome { + background-color: rgb(255, 127, 80); +} + +.welcome__text { + text-align: center; +} \ No newline at end of file diff --git a/src/components/Welcome/Welcome.jsx b/src/components/Welcome/Welcome.jsx index fbaaa3c4d..63947021a 100644 --- a/src/components/Welcome/Welcome.jsx +++ b/src/components/Welcome/Welcome.jsx @@ -3,3 +3,16 @@ // Create a Welcome function returning the HTML of welcome block // Add a default export statement for Welcome component to use it in the other files + +import React from 'react'; +import './Welcome.css'; + +function Welcome() { + return ( +
+ Sticky Header! +
+ ); +} + +export default Welcome; From 0796b7858207910a8ea5005915391d53e2febd98 Mon Sep 17 00:00:00 2001 From: Oleksandra Zarubina Date: Fri, 26 Jun 2026 21:35:10 +0300 Subject: [PATCH 2/2] Fix task solution, add Navigation into the components --- src/components/Header/Header.css | 4 ---- src/components/Header/Header.jsx | 13 ++----------- src/components/Navigation/Navigation.css | 3 +++ src/components/Navigation/Navigation.jsx | 20 ++++++++++++++++++++ 4 files changed, 25 insertions(+), 15 deletions(-) create mode 100644 src/components/Navigation/Navigation.css create mode 100644 src/components/Navigation/Navigation.jsx diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 2bf3a625b..2d3ff945e 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -8,10 +8,6 @@ font-weight: 600; } -.navigation__link { - opacity: 0.7; -} - @media (min-width: 768px) { .header { display: flex; diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 2101406e0..5aa3e6a24 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -6,22 +6,13 @@ import React from 'react'; import './Header.css'; +import Navigation from '../Navigation/Navigation'; function Header() { return (

Site Name

- +
); } diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css new file mode 100644 index 000000000..901cca289 --- /dev/null +++ b/src/components/Navigation/Navigation.css @@ -0,0 +1,3 @@ +.navigation__link { + opacity: 0.7; +} \ No newline at end of file diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx new file mode 100644 index 000000000..2d0a2c424 --- /dev/null +++ b/src/components/Navigation/Navigation.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import './Navigation.css'; + +function Navigation() { + return ( + + ); +} + +export default Navigation;