From fb8bbba1d7cb8c08be0d966f3fef232b18a209c3 Mon Sep 17 00:00:00 2001
From: Skoulskiy <ogurethcs@gmail.com>
Date: Wed, 8 Jul 2026 14:22:53 +0300
Subject: [PATCH 1/3] Added solution

---
 src/App.css                        | 68 -------------------------
 src/App.jsx                        | 82 +++---------------------------
 src/components/Article/Article.css | 18 +++++++
 src/components/Article/Article.jsx | 63 +++++++++++++++++++++++
 src/components/Header/Header.css   | 34 +++++++++++++
 src/components/Header/Header.jsx   | 18 +++++++
 src/components/Welcome/Welcome.css | 14 +++++
 src/components/Welcome/Welcome.jsx |  7 +++
 8 files changed, 160 insertions(+), 144 deletions(-)

diff --git a/src/App.css b/src/App.css
index cfaa88809..5cf1aaf7a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -18,74 +18,6 @@ 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;
diff --git a/src/App.jsx b/src/App.jsx
index 71951ebcd..24a5942ae 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 (
     <main className="app">
-      <section className="welcome">
-        <span className="welcome__text">Sticky Header!</span>
-      </section>
-      <header className="header">
-        <h1 className="header__title">Site Name</h1>
-        <nav className="navigation">
-          <a className="navigation__link" href="#about">
-            About
-          </a>
-          <a className="navigation__link" href="#services">
-            Services
-          </a>
-          <a className="navigation__link" href="#contact">
-            Contact
-          </a>
-        </nav>
-      </header>
-      <article className="article">
-        <h2 className="article__title">Headline</h2>
-        <p className="article__paragraph">
-          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.
-        </p>
-        <p className="article__paragraph">
-          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.
-        </p>
-        <p className="article__paragraph">
-          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.
-        </p>
-        <p className="article__paragraph">
-          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.
-        </p>
-        <p className="article__paragraph">
-          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.
-        </p>
-      </article>
+      <Welcome />
+      <Header />
+      <Article />
     </main>
   );
 }
diff --git a/src/components/Article/Article.css b/src/components/Article/Article.css
index 56e2e0542..7f7f4b711 100644
--- a/src/components/Article/Article.css
+++ b/src/components/Article/Article.css
@@ -1 +1,19 @@
 /* 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;
+}
+
diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx
index 073476529..5e9c1fdf6 100644
--- a/src/components/Article/Article.jsx
+++ b/src/components/Article/Article.jsx
@@ -3,3 +3,66 @@
 // 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 = () => (
+  <article className="article">
+    <h2 className="article__title">Headline</h2>
+    <p className="article__paragraph">
+      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.
+    </p>
+    <p className="article__paragraph">
+      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.
+    </p>
+    <p className="article__paragraph">
+      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.
+    </p>
+    <p className="article__paragraph">
+      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.
+    </p>
+    <p className="article__paragraph">
+      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.
+    </p>
+  </article>
+)
\ No newline at end of file
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 0b160f66f..67be63ba2 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -1 +1,35 @@
 /* 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;
+}
\ No newline at end of file
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 3f2fea103..bb6c80baa 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -3,3 +3,21 @@
 // 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 = () => (
+  <header className="header">
+    <h1 className="header__title">Site Name</h1>
+    <nav className="navigation">
+      <a className="navigation__link" href="#about">
+        About
+      </a>
+      <a className="navigation__link" href="#services">
+        Services
+      </a>
+      <a className="navigation__link" href="#contact">
+        Contact
+      </a>
+    </nav>
+  </header>
+)
\ No newline at end of file
diff --git a/src/components/Welcome/Welcome.css b/src/components/Welcome/Welcome.css
index 564ff918a..41cb888c8 100644
--- a/src/components/Welcome/Welcome.css
+++ b/src/components/Welcome/Welcome.css
@@ -1 +1,15 @@
 /* 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;
+}
\ No newline at end of file
diff --git a/src/components/Welcome/Welcome.jsx b/src/components/Welcome/Welcome.jsx
index fbaaa3c4d..0972db23a 100644
--- a/src/components/Welcome/Welcome.jsx
+++ b/src/components/Welcome/Welcome.jsx
@@ -3,3 +3,10 @@
 // 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 = () => (
+  <section className="welcome">
+    <span className="welcome__text">Sticky Header!</span>
+  </section>
+)
\ No newline at end of file

From 6b18ecd8e7df326dc8fddc30f6105e74e0847b79 Mon Sep 17 00:00:00 2001
From: Skoulskiy <ogurethcs@gmail.com>
Date: Wed, 8 Jul 2026 14:30:27 +0300
Subject: [PATCH 2/3] add fixes

---
 src/components/Article/Article.jsx | 87 +++++++++++++++---------------
 src/components/Header/Header.jsx   |  4 +-
 src/components/Welcome/Welcome.jsx |  4 +-
 3 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx
index 5e9c1fdf6..29f460573 100644
--- a/src/components/Article/Article.jsx
+++ b/src/components/Article/Article.jsx
@@ -10,59 +10,58 @@ export const Article = () => (
     <h2 className="article__title">Headline</h2>
     <p className="article__paragraph">
       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.
+      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.
     </p>
     <p className="article__paragraph">
-      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.
+      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.
     </p>
     <p className="article__paragraph">
-      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.
+      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.
     </p>
     <p className="article__paragraph">
       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.
+      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.
     </p>
     <p className="article__paragraph">
-      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.
+      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.
     </p>
   </article>
-)
\ No newline at end of file
+);
+
+export default Article;
\ No newline at end of file
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index bb6c80baa..8972be4a7 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -20,4 +20,6 @@ export const Header = () => (
       </a>
     </nav>
   </header>
-)
\ No newline at end of file
+);
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/Welcome/Welcome.jsx b/src/components/Welcome/Welcome.jsx
index 0972db23a..34b4f24d4 100644
--- a/src/components/Welcome/Welcome.jsx
+++ b/src/components/Welcome/Welcome.jsx
@@ -9,4 +9,6 @@ export const Welcome = () => (
   <section className="welcome">
     <span className="welcome__text">Sticky Header!</span>
   </section>
-)
\ No newline at end of file
+);
+
+export default Welcome;
\ No newline at end of file

From ba5d04db5698451a3795f7d5e267b91a30d12a16 Mon Sep 17 00:00:00 2001
From: Skoulskiy <ogurethcs@gmail.com>
Date: Wed, 8 Jul 2026 14:34:55 +0300
Subject: [PATCH 3/3] added media queries to the correct files

---
 src/App.css                        | 19 -------------------
 src/components/Article/Article.css | 12 ++++++++++++
 src/components/Article/Article.jsx |  2 +-
 src/components/Header/Header.css   |  9 +++++++++
 src/components/Header/Header.jsx   |  2 +-
 src/components/Welcome/Welcome.jsx |  2 +-
 6 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/App.css b/src/App.css
index 5cf1aaf7a..241ccafaf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -17,22 +17,3 @@ body {
   margin: 0;
   background: #eee;
 }
-
-@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.css b/src/components/Article/Article.css
index 7f7f4b711..6823be8aa 100644
--- a/src/components/Article/Article.css
+++ b/src/components/Article/Article.css
@@ -17,3 +17,15 @@
   margin-top: 0.7em;
 }
 
+@media (min-width: 500px) {
+  .article {
+    margin: 3.5em auto 0;
+    padding: 2em;
+  }
+}
+
+@media (min-width: 800px) {
+  .article {
+    margin: 3.5em auto;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx
index 29f460573..82bfbc737 100644
--- a/src/components/Article/Article.jsx
+++ b/src/components/Article/Article.jsx
@@ -64,4 +64,4 @@ export const Article = () => (
   </article>
 );
 
-export default Article;
\ No newline at end of file
+export default Article;
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 67be63ba2..edf0ef944 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -32,4 +32,13 @@
 .navigation__link:hover,
 .navigation__link:focus {
   opacity: 1;
+}
+
+
+@media (min-width: 500px) {
+  .header {
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 8972be4a7..6942f5900 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -22,4 +22,4 @@ export const Header = () => (
   </header>
 );
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/components/Welcome/Welcome.jsx b/src/components/Welcome/Welcome.jsx
index 34b4f24d4..2e3b5aa60 100644
--- a/src/components/Welcome/Welcome.jsx
+++ b/src/components/Welcome/Welcome.jsx
@@ -11,4 +11,4 @@ export const Welcome = () => (
   </section>
 );
 
-export default Welcome;
\ No newline at end of file
+export default Welcome;