From de7a352a247e5148c9ca4de0f600bf6add1b492f Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 12 Feb 2026 19:30:27 +0200 Subject: [PATCH 1/3] completed tasks --- README.md | 2 +- src/App.css | 84 ------------------------------ src/App.jsx | 83 +++-------------------------- src/components/Article/Article.css | 38 ++++++++++++++ src/components/Article/Article.jsx | 61 ++++++++++++++++++++++ src/components/Header/Header.css | 35 +++++++++++++ src/components/Header/Header.jsx | 19 +++++++ src/components/Welcome/Welcome.css | 15 ++++++ src/components/Welcome/Welcome.jsx | 8 +++ 9 files changed, 184 insertions(+), 161 deletions(-) diff --git a/README.md b/README.md index acd4587e2..6fc916386 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://qlaudy.github.io/react_decompose/) and add it to the PR description diff --git a/src/App.css b/src/App.css index cfaa88809..4b6fedc8a 100644 --- a/src/App.css +++ b/src/App.css @@ -18,89 +18,5 @@ body { background: #eee; } -.welcome { - height: 100vh; - background: coral; -} - -.welcome__text { - margin: 0; - font-size: 400%; - text-align: center; - line-height: 1; - padding-top: calc(50vh - 20pt); - display: block; - font-weight: 700; -} - -.header { - width: 100%; - padding: 1em; - font-size: 140%; - position: sticky; - top: 0; - left: 0; - right: 0; - transition: opacity 0.2s ease-in-out; - text-align: center; -} -.header__title { - font-weight: 600; - display: inline; - margin: 0; - padding: 0; - font-size: inherit; -} - -.navigation__link { - display: inline-block; - outline: none; - text-decoration: none; - opacity: 0.7; - padding: 0 0.5em; - color: black; - transition: opacity 0.2s ease-in-out; -} - -.navigation__link:hover, -.navigation__link:focus { - opacity: 1; -} -.article { - margin: 5em auto 0; - padding: 1em; - font-size: 140%; - max-width: 800px; - background: white; - box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px; -} - -.article__paragraph { - margin: 0; - color: #333; -} - -.article__paragraph:not(:first-child) { - margin-top: 0.7em; -} - -@media (min-width: 500px) { - .header { - text-align: left; - display: flex; - justify-content: space-between; - } - - .article { - margin: 3.5em auto 0; - padding: 2em; - } -} - -@media (min-width: 800px) { - .article { - margin: 3.5em auto; - } -} diff --git a/src/App.jsx b/src/App.jsx index c97808216..e873dfab5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,86 +1,17 @@ import React from 'react'; import './App.css'; +import { Welcome } from './components/Welcome/Welcome'; +import { Header } from './components/Header/Header'; +import { Article } from './components/Article/Article'; + // Move each BEM block to a separate component (file) and import them here 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..df38de18b 100644 --- a/src/components/Article/Article.css +++ b/src/components/Article/Article.css @@ -1 +1,39 @@ /* Put article styles here */ + +.article { + margin: 5em auto 0; + padding: 1em; + font-size: 140%; + max-width: 800px; + background: white; + box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px; +} + +.article__paragraph { + margin: 0; + color: #333; +} + +.article__paragraph:not(:first-child) { + margin-top: 0.7em; +} + +@media (min-width: 500px) { + .header { + text-align: left; + display: flex; + justify-content: space-between; + } + + .article { + margin: 3.5em auto 0; + padding: 2em; + } +} + +@media (min-width: 800px) { + .article { + margin: 3.5em auto; + } +} + diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx index 073476529..bcd49d39b 100644 --- a/src/components/Article/Article.jsx +++ b/src/components/Article/Article.jsx @@ -3,3 +3,64 @@ // 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 './Article.css'; + +export const Article = () => ( +
+

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/Header/Header.css b/src/components/Header/Header.css index 0b160f66f..0c0a3fc10 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1 +1,36 @@ /* Put header styles here */ + +.header { + width: 100%; + padding: 1em; + font-size: 140%; + position: sticky; + top: 0; + left: 0; + right: 0; + transition: opacity 0.2s ease-in-out; + text-align: center; +} + +.header__title { + font-weight: 600; + display: inline; + margin: 0; + padding: 0; + font-size: inherit; +} + +.navigation__link { + display: inline-block; + outline: none; + text-decoration: none; + opacity: 0.7; + padding: 0 0.5em; + color: black; + transition: opacity 0.2s ease-in-out; +} + +.navigation__link:hover, +.navigation__link:focus { + opacity: 1; +} diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 3f2fea103..e8351e5ad 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -3,3 +3,22 @@ // 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 './Header.css'; + +export const Header = () => ( +
+

Site Name

+ +
+); diff --git a/src/components/Welcome/Welcome.css b/src/components/Welcome/Welcome.css index 564ff918a..6eaf381e3 100644 --- a/src/components/Welcome/Welcome.css +++ b/src/components/Welcome/Welcome.css @@ -1 +1,16 @@ /* Put welcome styles here */ + +.welcome { + height: 100vh; + background: coral; +} + +.welcome__text { + margin: 0; + font-size: 400%; + text-align: center; + line-height: 1; + padding-top: calc(50vh - 20pt); + display: block; + font-weight: 700; +} diff --git a/src/components/Welcome/Welcome.jsx b/src/components/Welcome/Welcome.jsx index fbaaa3c4d..bcb318125 100644 --- a/src/components/Welcome/Welcome.jsx +++ b/src/components/Welcome/Welcome.jsx @@ -3,3 +3,11 @@ // 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 './Welcome.css'; + +export const Welcome = () => ( +
+ Sticky Header! +
+); From b7e2f7401301eaabaeefb972cfaedd1a2b086f25 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 12 Feb 2026 19:43:14 +0200 Subject: [PATCH 2/3] fix bugs --- src/App.jsx | 10 +++++----- src/components/Article/Article.css | 7 ------- src/components/Article/Article.jsx | 4 +++- src/components/Header/Header.css | 19 ++++++------------- src/components/Header/Header.jsx | 17 +++++------------ src/components/Navigation/Navigation.css | 14 ++++++++++++++ src/components/Navigation/Navigation.jsx | 15 +++++++++++++++ src/components/Welcome/Welcome.jsx | 4 +++- 8 files changed, 51 insertions(+), 39 deletions(-) create mode 100644 src/components/Navigation/Navigation.css create mode 100644 src/components/Navigation/Navigation.jsx diff --git a/src/App.jsx b/src/App.jsx index e873dfab5..6a1c40b6c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,17 +1,17 @@ import React from 'react'; import './App.css'; -import { Welcome } from './components/Welcome/Welcome'; -import { Header } from './components/Header/Header'; -import { Article } from './components/Article/Article'; +import Welcome from './components/Welcome/Welcome'; +import Header from './components/Header/Header'; +import Article from './components/Article/Article'; // Move each BEM block to a separate component (file) and import them here function App() { return (
- , +
-
, +
); } diff --git a/src/components/Article/Article.css b/src/components/Article/Article.css index df38de18b..a0bb44658 100644 --- a/src/components/Article/Article.css +++ b/src/components/Article/Article.css @@ -19,12 +19,6 @@ } @media (min-width: 500px) { - .header { - text-align: left; - display: flex; - justify-content: space-between; - } - .article { margin: 3.5em auto 0; padding: 2em; @@ -36,4 +30,3 @@ margin: 3.5em auto; } } - diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx index bcd49d39b..bc5325ecf 100644 --- a/src/components/Article/Article.jsx +++ b/src/components/Article/Article.jsx @@ -6,7 +6,7 @@ import './Article.css'; -export const Article = () => ( +const Article = () => (

Headline

@@ -64,3 +64,5 @@ export const Article = () => (

); + +export default Article; diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 0c0a3fc10..b26da5fe5 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -20,17 +20,10 @@ font-size: inherit; } -.navigation__link { - display: inline-block; - outline: none; - text-decoration: none; - opacity: 0.7; - padding: 0 0.5em; - color: black; - transition: opacity 0.2s ease-in-out; -} - -.navigation__link:hover, -.navigation__link:focus { - opacity: 1; +@media (min-width: 500px) { + .header { + text-align: left; + display: flex; + justify-content: space-between; + } } diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index e8351e5ad..dcb9a0611 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -5,20 +5,13 @@ // Add a default export statement for Header component to use it in the other files import './Header.css'; +import Navigation from '../Navigation/Navigation'; -export const Header = () => ( +const Header = () => (

Site Name

- +
); + +export default Header; diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css new file mode 100644 index 000000000..a67620c16 --- /dev/null +++ b/src/components/Navigation/Navigation.css @@ -0,0 +1,14 @@ +.navigation__link { + display: inline-block; + outline: none; + text-decoration: none; + opacity: 0.7; + padding: 0 0.5em; + color: black; + transition: opacity 0.2s ease-in-out; +} + +.navigation__link:hover, +.navigation__link:focus { + opacity: 1; +} diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx new file mode 100644 index 000000000..40966245e --- /dev/null +++ b/src/components/Navigation/Navigation.jsx @@ -0,0 +1,15 @@ +const Navigation = () => ( + +); + +export default Navigation; diff --git a/src/components/Welcome/Welcome.jsx b/src/components/Welcome/Welcome.jsx index bcb318125..cf99ce033 100644 --- a/src/components/Welcome/Welcome.jsx +++ b/src/components/Welcome/Welcome.jsx @@ -6,8 +6,10 @@ import './Welcome.css'; -export const Welcome = () => ( +const Welcome = () => (
Sticky Header!
); + +export default Welcome; From 01ae0cc5499883855831755fa2cdcf1491a55632 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 12 Feb 2026 19:44:25 +0200 Subject: [PATCH 3/3] fix bugs 2 --- src/components/Navigation/Navigation.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index 40966245e..e041c39ba 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -1,3 +1,5 @@ +import './Navigation.css'; + const Navigation = () => (