From 8a04e40cb95d982233396b8756348b5f8564c5ec Mon Sep 17 00:00:00 2001
From: Roman Matej <matej.roman@webcom.cz>
Date: Sat, 6 Jun 2026 14:51:16 +0200
Subject: [PATCH 1/6] fix: correct spacing in article paragraph text

---
 src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 71951ebcd..a0cc637f8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,7 +25,7 @@ function App() {
       <article className="article">
         <h2 className="article__title">Headline</h2>
         <p className="article__paragraph">
-          In elementum lorem eget est euismod ornare. Phasellus sit amet
+          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

From 85a2a385ac3a50e7f05b2ccb403b7112ed28f1ea Mon Sep 17 00:00:00 2001
From: Roman Matej <matej.roman@webcom.cz>
Date: Sat, 6 Jun 2026 15:36:59 +0200
Subject: [PATCH 2/6] feat: implement article, header, and welcome components
 with styles

---
 src/App.css                        | 77 ------------------------------
 src/components/Article/Article.css | 32 ++++++++++++-
 src/components/Article/Article.jsx | 13 +++++
 src/components/Header/Header.css   | 44 ++++++++++++++++-
 src/components/Header/Header.jsx   | 13 ++++-
 src/components/Welcome/Welcome.css | 16 ++++++-
 src/components/Welcome/Welcome.jsx | 11 ++++-
 7 files changed, 124 insertions(+), 82 deletions(-)

diff --git a/src/App.css b/src/App.css
index cfaa88809..d66f2c4b2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -18,89 +18,12 @@ 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/components/Article/Article.css b/src/components/Article/Article.css
index 56e2e0542..ff9d698e7 100644
--- a/src/components/Article/Article.css
+++ b/src/components/Article/Article.css
@@ -1 +1,31 @@
-/* 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: 800px) {
+  .article {
+    margin: 3.5em auto;
+  }
+}
+
+@media (min-width: 500px) {
+    .article {
+        margin: 3.5em auto 0;
+        padding: 2em;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx
index 073476529..ee925e0e6 100644
--- a/src/components/Article/Article.jsx
+++ b/src/components/Article/Article.jsx
@@ -1,5 +1,18 @@
 // import a css file containig article styles
+import "./Article.css" 
+
 
 // Create an Article function returning the HTML of article block
+const Article = () => {
+    return(
+        <article className="article">
+            <h2>Headline</h2>
+            <p className="article__paragraph">
+                This is a sample article paragraph text.
+            </p>
+        </article>
+    );
+};
 
 // Add a default export statement for Article component to use it in the other files
+export default Article;
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 0b160f66f..b9dbae698 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -1 +1,43 @@
-/* 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;
+}
+
+@media (min-width: 500px) {
+  .header {
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.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..0e636dbd0 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,5 +1,16 @@
 // import a css file containig header styles
-
+import './Header.css'
 // Create a Header function returning the HTML of header block
+const Header = () =>{
+    return(
+        <header className='header'>
+            <h1 className='header__title'>Site Name</h1>
+            <a className='navigation__link' href='#about'>About</a>
+            <a className='navigation__link' href='#services'>Services</a>
+            <a className='navigation__link' href='#contact'>Contact</a>
+        </header>
+    );
+}
 
 // Add a default export statement for Header component to use it in the other files
+export default Header;
\ No newline at end of file
diff --git a/src/components/Welcome/Welcome.css b/src/components/Welcome/Welcome.css
index 564ff918a..b786ae464 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..d52e49677 100644
--- a/src/components/Welcome/Welcome.jsx
+++ b/src/components/Welcome/Welcome.jsx
@@ -1,5 +1,14 @@
 // import a css file containig welcome styles
-
+import './Welcome.css'
 // Create a Welcome function returning the HTML of welcome block
 
+const Welcome = () => {
+    return(
+        <welcome className='welcome'>
+            <h1 className='welcome__text'>Sticky Header!</h1>
+        </welcome>
+    );
+}
+
 // Add a default export statement for Welcome component to use it in the other files
+export default Welcome;
\ No newline at end of file

From 8dd44a8ad1c62cebe45def9ea40f07e8aa6ff394 Mon Sep 17 00:00:00 2001
From: Roman Matej <matej.roman@webcom.cz>
Date: Sat, 6 Jun 2026 15:43:42 +0200
Subject: [PATCH 3/6] feat: update article component with detailed paragraphs

---
 src/components/Article/Article.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx
index ee925e0e6..e3a859f26 100644
--- a/src/components/Article/Article.jsx
+++ b/src/components/Article/Article.jsx
@@ -7,9 +7,11 @@ const Article = () => {
     return(
         <article className="article">
             <h2>Headline</h2>
-            <p className="article__paragraph">
-                This is a sample article paragraph text.
-            </p>
+                <p className="article__paragraph">First paragraph with simple text.</p>
+                <p className="article__paragraph">Second paragraph continuing the idea.</p>
+                <p className="article__paragraph">Third paragraph adds more detail here.</p>
+                <p className="article__paragraph">Fourth paragraph for extra context.</p>
+                <p className="article__paragraph">Fifth paragraph concludes the section.</p>
         </article>
     );
 };

From 4ef33001c89914fa2454d0660bc5f447ae8477b7 Mon Sep 17 00:00:00 2001
From: Roman Matej <matej.roman@webcom.cz>
Date: Sat, 6 Jun 2026 15:48:46 +0200
Subject: [PATCH 4/6] fix: adjust padding and margin for article component on
 medium screens

---
 src/components/Article/Article.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Article/Article.css b/src/components/Article/Article.css
index ff9d698e7..d6174abe0 100644
--- a/src/components/Article/Article.css
+++ b/src/components/Article/Article.css
@@ -26,6 +26,8 @@
 @media (min-width: 500px) {
     .article {
         margin: 3.5em auto 0;
-        padding: 2em;
+        padding-left: 44.8px;
+        padding-right: 44.8px;
+        margin-bottom: 78.4px;
     }
 }
\ No newline at end of file

From 133333be3935587b7a3b301e737fa2a73279f00e Mon Sep 17 00:00:00 2001
From: Roman Matej <matej.roman@webcom.cz>
Date: Sat, 6 Jun 2026 16:02:19 +0200
Subject: [PATCH 5/6] fix: correct typo in article paragraph text

---
 src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index a0cc637f8..71951ebcd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -25,7 +25,7 @@ function App() {
       <article className="article">
         <h2 className="article__title">Headline</h2>
         <p className="article__paragraph">
-          In  elementum lorem eget est euismod ornare. Phasellus sit amet
+          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

From 58820e0d6e692f4ac6dc93a9b9b770ffd53b1548 Mon Sep 17 00:00:00 2001
From: Roman Matej <matej.roman@webcom.cz>
Date: Sat, 6 Jun 2026 16:07:10 +0200
Subject: [PATCH 6/6] fix: replace semantic elements with divs in Article,
 Header, and Welcome components

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

diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx
index e3a859f26..8c020552d 100644
--- a/src/components/Article/Article.jsx
+++ b/src/components/Article/Article.jsx
@@ -5,14 +5,14 @@ import "./Article.css"
 // Create an Article function returning the HTML of article block
 const Article = () => {
     return(
-        <article className="article">
+        <div className="article">
             <h2>Headline</h2>
                 <p className="article__paragraph">First paragraph with simple text.</p>
                 <p className="article__paragraph">Second paragraph continuing the idea.</p>
                 <p className="article__paragraph">Third paragraph adds more detail here.</p>
                 <p className="article__paragraph">Fourth paragraph for extra context.</p>
                 <p className="article__paragraph">Fifth paragraph concludes the section.</p>
-        </article>
+        </div>
     );
 };
 
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 0e636dbd0..b43a177b8 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -3,12 +3,12 @@ import './Header.css'
 // Create a Header function returning the HTML of header block
 const Header = () =>{
     return(
-        <header className='header'>
+        <div className='header'>
             <h1 className='header__title'>Site Name</h1>
             <a className='navigation__link' href='#about'>About</a>
             <a className='navigation__link' href='#services'>Services</a>
             <a className='navigation__link' href='#contact'>Contact</a>
-        </header>
+        </div>
     );
 }
 
diff --git a/src/components/Welcome/Welcome.jsx b/src/components/Welcome/Welcome.jsx
index d52e49677..ccc7dbdbf 100644
--- a/src/components/Welcome/Welcome.jsx
+++ b/src/components/Welcome/Welcome.jsx
@@ -4,9 +4,9 @@ import './Welcome.css'
 
 const Welcome = () => {
     return(
-        <welcome className='welcome'>
+        <div className='welcome'>
             <h1 className='welcome__text'>Sticky Header!</h1>
-        </welcome>
+        </div>
     );
 }