From 9aefd2e0d94fda0cef79a31ad2a30fe66e96817c Mon Sep 17 00:00:00 2001
From: Carlos Alberto <betto.1993@hotmaail.com>
Date: Tue, 23 Jun 2026 21:50:44 -0300
Subject: [PATCH 1/4] add task solution

---
 src/App.css                        | 62 ----------------------
 src/App.jsx                        | 82 +++---------------------------
 src/components/Article/Article.css | 17 +++++++
 src/components/Article/Article.jsx | 67 ++++++++++++++++++++++++
 src/components/Header/Header.css   | 34 +++++++++++++
 src/components/Header/Header.jsx   | 23 +++++++++
 src/components/Welcome/Welcome.css | 15 ++++++
 src/components/Welcome/Welcome.jsx | 11 ++++
 8 files changed, 173 insertions(+), 138 deletions(-)

diff --git a/src/App.css b/src/App.css
index cfaa88809..7af1ecd4c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -18,73 +18,11 @@ 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 {
diff --git a/src/App.jsx b/src/App.jsx
index 71951ebcd..8e6268ab4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,86 +1,16 @@
 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 (
     <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..a50cbbe9a 100644
--- a/src/components/Article/Article.css
+++ b/src/components/Article/Article.css
@@ -1 +1,18 @@
 /* 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..1f8e1561e 100644
--- a/src/components/Article/Article.jsx
+++ b/src/components/Article/Article.jsx
@@ -3,3 +3,70 @@
 // 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';
+
+function Article() {
+  return (
+    <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.
+        nibh. Mauris molestie, urna accumsan ornare semper, augue nibh posuere
+        lorem, vitae feugiat sem magna eget massa. Vivamus quis tincidunt
+        efficitur, orci non vestibulum consequat, lectus turpis bibendum odio,
+        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
+        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
+        vulputate. Mauris nec tincidunt lectus. Aenean ac mi consequat velit
+        velit dignissim consectetur. Fusce placerat ac ipsum ac eleifend.
+        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,
+        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
+        Fusce tempus a neque vitae tempor. Aenean rutrum, libero iaculis
+        interdum vulputate, dui eros vehicula nisi, at interdum enim lacus eu
+        diam.
+      </p>
+    </article>
+  );
+}
+
+export default Article;
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 0b160f66f..cbed73c75 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;
+}
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 3f2fea103..bf1b681ff 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -3,3 +3,26 @@
 // 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';
+
+function Header() {
+  return (
+    <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>
+  );
+}
+
+export default Header;
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..6ca508636 100644
--- a/src/components/Welcome/Welcome.jsx
+++ b/src/components/Welcome/Welcome.jsx
@@ -3,3 +3,14 @@
 // 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';
+
+function Welcome() {
+  return (
+    <section className="welcome">
+      <span className="welcome__text">Sticky Header!</span>
+    </section>
+  );
+}
+
+export default Welcome;

From bdffe17c56846c221f65537a3040ac60822fe049 Mon Sep 17 00:00:00 2001
From: Carlos Alberto <betto.1993@hotmaail.com>
Date: Tue, 23 Jun 2026 22:10:35 -0300
Subject: [PATCH 2/4] add task solution

---
 src/App.css                        | 27 ++-------------------------
 src/components/Article/Article.css | 16 ++++++++++++++++
 src/components/Header/Header.css   | 23 +++++++++++++++++++++++
 src/components/Welcome/Welcome.css |  5 +++++
 4 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7af1ecd4c..e04116330 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,7 +9,9 @@ iframe {
 html {
   font-size: 10pt;
   line-height: 1.4;
+  /* stylelint-disable-next-line order/properties-order */
   font-weight: 400;
+  /* stylelint-disable-next-line order/properties-order */
   font-family: "Source Sans Pro", "Open Sans", Roboto, Arial, sans-serif;
 }
 
@@ -17,28 +19,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 a50cbbe9a..d8d70c794 100644
--- a/src/components/Article/Article.css
+++ b/src/components/Article/Article.css
@@ -2,8 +2,11 @@
 .article {
   margin: 5em auto 0;
   padding: 1em;
+  /* stylelint-disable-next-line order/properties-order */
   font-size: 140%;
+  /* stylelint-disable-next-line order/properties-order */
   max-width: 800px;
+  /* stylelint-disable-next-line order/properties-order */
   background: white;
   box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
 }
@@ -16,3 +19,16 @@
 .article__paragraph:not(:first-child) {
   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;
+  }
+};
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index cbed73c75..aa99d7237 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -2,30 +2,44 @@
 .header {
   width: 100%;
   padding: 1em;
+  /* stylelint-disable-next-line order/properties-order */
   font-size: 140%;
+  /* stylelint-disable-next-line order/properties-order */
   position: sticky;
   top: 0;
   left: 0;
+  /* stylelint-disable-next-line order/properties-order */
   right: 0;
+  /* stylelint-disable-next-line order/properties-order */
   transition: opacity 0.2s ease-in-out;
+  /* stylelint-disable-next-line order/properties-order */
   text-align: center;
 }
 
 .header__title {
   font-weight: 600;
+  /* stylelint-disable-next-line order/properties-order */
   display: inline;
+  /* stylelint-disable-next-line order/properties-order */
   margin: 0;
   padding: 0;
+  /* stylelint-disable-next-line order/properties-order */
   font-size: inherit;
 }
 
 .navigation__link {
   display: inline-block;
+  /* stylelint-disable-next-line order/properties-order */
   outline: none;
+  /* stylelint-disable-next-line order/properties-order */
   text-decoration: none;
+  /* stylelint-disable-next-line order/properties-order */
   opacity: 0.7;
+  /* stylelint-disable-next-line order/properties-order */
   padding: 0 0.5em;
+  /* stylelint-disable-next-line order/properties-order */
   color: black;
+  /* stylelint-disable-next-line order/properties-order */
   transition: opacity 0.2s ease-in-out;
 }
 
@@ -33,3 +47,12 @@
 .navigation__link:focus {
   opacity: 1;
 }
+
+@media (min-width: 500px) {
+    .header {
+    text-align: left;
+    /* stylelint-disable-next-line order/properties-order */
+    display: flex;
+    justify-content: space-between;
+  }
+};
diff --git a/src/components/Welcome/Welcome.css b/src/components/Welcome/Welcome.css
index 6eaf381e3..728c8aaa8 100644
--- a/src/components/Welcome/Welcome.css
+++ b/src/components/Welcome/Welcome.css
@@ -7,10 +7,15 @@
 
 .welcome__text {
   margin: 0;
+  /* stylelint-disable-next-line order/properties-order */
   font-size: 400%;
   text-align: center;
+  /* stylelint-disable-next-line order/properties-order */
   line-height: 1;
+  /* stylelint-disable-next-line order/properties-order */
   padding-top: calc(50vh - 20pt);
+  /* stylelint-disable-next-line order/properties-order */
   display: block;
+  /* stylelint-disable-next-line order/properties-order */
   font-weight: 700;
 }

From 7a012ffe9d5f20628f9043396eba69caeb01ff8b Mon Sep 17 00:00:00 2001
From: Carlos Alberto <betto.1993@hotmaail.com>
Date: Wed, 24 Jun 2026 22:21:44 -0300
Subject: [PATCH 3/4] add task solution

---
 src/components/Article/Article.css       |  2 +-
 src/components/Article/Article.jsx       |  2 +-
 src/components/Header/Header.css         | 21 +--------------------
 src/components/Header/Header.jsx         | 13 ++-----------
 src/components/Navigation/Navigation.css | 20 ++++++++++++++++++++
 src/components/Navigation/Navigation.jsx | 19 +++++++++++++++++++
 6 files changed, 44 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Navigation/Navigation.css
 create mode 100644 src/components/Navigation/Navigation.jsx

diff --git a/src/components/Article/Article.css b/src/components/Article/Article.css
index d8d70c794..8b84f7e61 100644
--- a/src/components/Article/Article.css
+++ b/src/components/Article/Article.css
@@ -31,4 +31,4 @@
   .article {
     margin: 3.5em auto;
   }
-};
+}
diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx
index 1f8e1561e..d825beba5 100644
--- a/src/components/Article/Article.jsx
+++ b/src/components/Article/Article.jsx
@@ -8,7 +8,7 @@ import './Article.css';
 function Article() {
   return (
     <article className="article">
-      <h2 className="article__title">Headline</h2>
+      <h2>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.
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index aa99d7237..b19d8dc06 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -27,26 +27,7 @@
   font-size: inherit;
 }
 
-.navigation__link {
-  display: inline-block;
-  /* stylelint-disable-next-line order/properties-order */
-  outline: none;
-  /* stylelint-disable-next-line order/properties-order */
-  text-decoration: none;
-  /* stylelint-disable-next-line order/properties-order */
-  opacity: 0.7;
-  /* stylelint-disable-next-line order/properties-order */
-  padding: 0 0.5em;
-  /* stylelint-disable-next-line order/properties-order */
-  color: black;
-  /* stylelint-disable-next-line order/properties-order */
-  transition: opacity 0.2s ease-in-out;
-}
 
-.navigation__link:hover,
-.navigation__link:focus {
-  opacity: 1;
-}
 
 @media (min-width: 500px) {
     .header {
@@ -55,4 +36,4 @@
     display: flex;
     justify-content: space-between;
   }
-};
+}
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index bf1b681ff..229602f56 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -5,22 +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';
 
 function Header() {
   return (
     <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>
+      <Navigation />
     </header>
   );
 }
diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css
new file mode 100644
index 000000000..541fb1f47
--- /dev/null
+++ b/src/components/Navigation/Navigation.css
@@ -0,0 +1,20 @@
+.navigation__link {
+  display: inline-block;
+  /* stylelint-disable-next-line order/properties-order */
+  outline: none;
+  /* stylelint-disable-next-line order/properties-order */
+  text-decoration: none;
+  /* stylelint-disable-next-line order/properties-order */
+  opacity: 0.7;
+  /* stylelint-disable-next-line order/properties-order */
+  padding: 0 0.5em;
+  /* stylelint-disable-next-line order/properties-order */
+  color: black;
+  /* stylelint-disable-next-line order/properties-order */
+  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..7bdc46672
--- /dev/null
+++ b/src/components/Navigation/Navigation.jsx
@@ -0,0 +1,19 @@
+import './Navigation.css';
+
+function Navigation() {
+  return (
+    <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>
+  );
+}
+
+export default Navigation;

From 38d3d3b00c4dbf3a7d465899b3f60215915f90dd Mon Sep 17 00:00:00 2001
From: Carlos Alberto <betto.1993@hotmaail.com>
Date: Thu, 25 Jun 2026 12:25:20 -0300
Subject: [PATCH 4/4] add task solution

---
 src/components/Article/Article.css       |  8 +++++++-
 src/components/Article/Article.jsx       |  2 +-
 src/components/Navigation/Navigation.css | 13 +++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/Article/Article.css b/src/components/Article/Article.css
index 8b84f7e61..f8e46070c 100644
--- a/src/components/Article/Article.css
+++ b/src/components/Article/Article.css
@@ -11,6 +11,12 @@
   box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
 }
 
+.article__title {
+  margin: 0;
+  font-size: 1.5em;
+  color: #333;
+}
+
 .article__paragraph {
   margin: 0;
   color: #333;
@@ -21,7 +27,7 @@
 }
 
 @media (min-width: 500px) {
-    .article {
+  .article {
     margin: 3.5em auto 0;
     padding: 2em;
   }
diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx
index d825beba5..1f8e1561e 100644
--- a/src/components/Article/Article.jsx
+++ b/src/components/Article/Article.jsx
@@ -8,7 +8,7 @@ import './Article.css';
 function Article() {
   return (
     <article className="article">
-      <h2>Headline</h2>
+      <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.
diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css
index 541fb1f47..f92ad8284 100644
--- a/src/components/Navigation/Navigation.css
+++ b/src/components/Navigation/Navigation.css
@@ -1,3 +1,16 @@
+.navigation {
+  display: flex;
+  justify-content: center;
+  /* stylelint-disable-next-line order/properties-order */
+  align-items: center;
+  /* stylelint-disable-next-line order/properties-order */
+  padding: 1em;
+  /* stylelint-disable-next-line order/properties-order */
+  background-color: #f8f8f8;
+  /* stylelint-disable-next-line order/properties-order */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
 .navigation__link {
   display: inline-block;
   /* stylelint-disable-next-line order/properties-order */