From 4969624972a6a351d5c91a7dd9c8cffd856a4119 Mon Sep 17 00:00:00 2001
From: tema0829 <funmi.moriyele@gmail.com>
Date: Sun, 13 Oct 2024 10:14:37 +0100
Subject: [PATCH 1/5] Skeleton page code, no styling added

---
 Wireframe/index.html | 39 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 67544158..d54f1e60 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -7,7 +7,42 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+    <h1>Page Title</h1>
+    <p>Add short description</p>
+
+    <!--Article 1-->
+    <article>
+      <header>
+        <img src="">
+        <h1>Article Title</h1>
+      </header>
+      <p>Article Summary</p>
+      <a href="url">link text</a>
+    </article> 
+
+    <!--Article 2-->
+    <article>
+      <header>
+        <img src="">
+        <h1>Article Title</h1>
+      </header>
+      <p>Article Summary</p>
+      <a href="url">link text</a>
+    </article> 
+
+    <!--Article 3-->
+    <article>
+      <header>
+        <img src="">
+        <h1>Article Title</h1>
+      </header>
+      <p>Article Summary</p>
+      <a href="url">link text</a>
+    </article> 
+
+    <footer>
+      <p>Add contant links and site info
+      <a href="mailto:abc@example.com">abc@example.com</a></p>
+    </footer> 
 </body>
 </html
\ No newline at end of file

From 21cadf3aad9ff06e3b241f6cda4797d9057b78b4 Mon Sep 17 00:00:00 2001
From: tema0829 <funmi.moriyele@gmail.com>
Date: Sun, 13 Oct 2024 15:00:55 +0100
Subject: [PATCH 2/5] Adding text information and images to the page title,
 articles and footer.

---
 Wireframe/index.html | 42 ++++++++++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index d54f1e60..9715eb5a 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -7,42 +7,52 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <h1>Page Title</h1>
-    <p>Add short description</p>
+    <!--Page Title and Introduction-->
+    <h1>What is Git and why is it so important?</h1>
+    <p>Git is an important part of coding. 
+      To understand what Git is and why it is important - read the articles below.</p>
 
     <!--Article 1-->
     <article>
       <header>
-        <img src="">
-        <h1>Article Title</h1>
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3w5v3NHCaW5Ig1eG2mWbruAG3_rk_4_tJtg&s">
+        <h1>What is Git?</h1>
       </header>
-      <p>Article Summary</p>
-      <a href="url">link text</a>
+      <p>Git is a modern version control system that is open source. 
+        It is able to track changes of a file system, keeping track of what files are in the repository during different versions of the project.
+      </p>
+      <button><a href="https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F">Read More</a></button>
+      
     </article> 
 
     <!--Article 2-->
     <article>
       <header>
-        <img src="">
-        <h1>Article Title</h1>
+        <img src="https://www.yarddiant.com/images/what-do-most-web-developers-use.jpg">
+        <h1>Why do developers need Git?</h1>
       </header>
-      <p>Article Summary</p>
-      <a href="url">link text</a>
+      <p>Developers can create repositories with branches, commits and code.
+        Git allows developers to collaborae on projects without it affecting the final project.
+      </p>
+      <button><a href="https://tripleten.com/blog/posts/why-knowing-git-as-a-developer-is-crucial">Read More</a></button>
     </article> 
 
     <!--Article 3-->
     <article>
       <header>
-        <img src="">
-        <h1>Article Title</h1>
+        <img src="https://uploads.sitepoint.com/wp-content/uploads/2019/06/155993572204-gitflow.png">
+        <h1>What is a branch in Git?</h1>
       </header>
-      <p>Article Summary</p>
-      <a href="url">link text</a>
+      <p>Git branches provide snapshots of changes made to your code, pointing to commits.
+        They can be used for small or large features you want to introduce to your code.
+        The local or remote branches can eventually be merged to the main branch, once you are happy with the features created.
+      </p>
+      <button><a href="https://www.atlassian.com/git/tutorials/using-branches">Read More</a></button>
     </article> 
 
     <footer>
-      <p>Add contant links and site info
-      <a href="mailto:abc@example.com">abc@example.com</a></p>
+      <p>This website was created by Funmi M. For more details, please email:
+      <a href="mailto:funmim@example.com">funmim@example.com</a></p>
     </footer> 
 </body>
 </html
\ No newline at end of file

From a11287decf17ea32f55ee7a319e936e1786f6ea0 Mon Sep 17 00:00:00 2001
From: tema0829 <funmi.moriyele@gmail.com>
Date: Sun, 13 Oct 2024 15:57:40 +0100
Subject: [PATCH 3/5] Flex-box container added for last two articles. Classes
 added for styling

---
 Wireframe/index.html | 84 ++++++++++++++++++++++++--------------------
 1 file changed, 45 insertions(+), 39 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 9715eb5a..683b5c91 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -4,51 +4,57 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
     <!--Page Title and Introduction-->
-    <h1>What is Git and why is it so important?</h1>
-    <p>Git is an important part of coding. 
-      To understand what Git is and why it is important - read the articles below.</p>
+    <div class="title-section">
+      <h1>What is Git and why is it so important?</h1>
+      <p>Git is an important part of coding. 
+        To understand what Git is and why it is important - read the articles below.</p>
+    </div>
 
-    <!--Article 1-->
-    <article>
-      <header>
-        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3w5v3NHCaW5Ig1eG2mWbruAG3_rk_4_tJtg&s">
-        <h1>What is Git?</h1>
-      </header>
-      <p>Git is a modern version control system that is open source. 
-        It is able to track changes of a file system, keeping track of what files are in the repository during different versions of the project.
-      </p>
-      <button><a href="https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F">Read More</a></button>
-      
-    </article> 
+    <div class="article-section">
+      <!--Article 1-->
+      <article>
+        <header>
+          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3w5v3NHCaW5Ig1eG2mWbruAG3_rk_4_tJtg&s">
+          <h1>What is Git?</h1>
+        </header>
+        <p class="text-wrap">Git is a modern version control system that is open source. 
+          It is able to track changes of a file system, keeping track of what files are in the repository during different versions of the project.
+        </p>
+        <button><a href="https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F">Read More</a></button>
+        
+      </article> 
 
-    <!--Article 2-->
-    <article>
-      <header>
-        <img src="https://www.yarddiant.com/images/what-do-most-web-developers-use.jpg">
-        <h1>Why do developers need Git?</h1>
-      </header>
-      <p>Developers can create repositories with branches, commits and code.
-        Git allows developers to collaborae on projects without it affecting the final project.
-      </p>
-      <button><a href="https://tripleten.com/blog/posts/why-knowing-git-as-a-developer-is-crucial">Read More</a></button>
-    </article> 
+      <div class="flex-box">
+        <!--Article 2-->
+        <article>
+          <header>
+            <img id="developers-img" src="https://www.yarddiant.com/images/what-do-most-web-developers-use.jpg">
+            <h1>Why do developers need Git?</h1>
+          </header>
+          <p class="text-wrap">Developers can create repositories with branches, commits and code.
+            Git allows developers to collaborae on projects without it affecting the final project.
+          </p>
+          <button><a href="https://tripleten.com/blog/posts/why-knowing-git-as-a-developer-is-crucial">Read More</a></button>
+        </article> 
 
-    <!--Article 3-->
-    <article>
-      <header>
-        <img src="https://uploads.sitepoint.com/wp-content/uploads/2019/06/155993572204-gitflow.png">
-        <h1>What is a branch in Git?</h1>
-      </header>
-      <p>Git branches provide snapshots of changes made to your code, pointing to commits.
-        They can be used for small or large features you want to introduce to your code.
-        The local or remote branches can eventually be merged to the main branch, once you are happy with the features created.
-      </p>
-      <button><a href="https://www.atlassian.com/git/tutorials/using-branches">Read More</a></button>
-    </article> 
+        <!--Article 3-->
+        <article>
+          <header>
+            <img id="branch-img" src="https://uploads.sitepoint.com/wp-content/uploads/2019/06/155993572204-gitflow.png">
+            <h1>What is a branch in Git?</h1>
+          </header>
+          <p class="text-wrap">Git branches provide snapshots of changes made to your code, pointing to commits.
+            They can be used for small or large features you want to introduce to your code.
+            The local or remote branches can eventually be merged to the main branch, once you are happy with the features created.
+          </p>
+          <button><a href="https://www.atlassian.com/git/tutorials/using-branches">Read More</a></button>
+        </article> 
+      </div>
+  </div>
 
     <footer>
       <p>This website was created by Funmi M. For more details, please email:

From be7a0f4f92552477721f94587161df41f35b873e Mon Sep 17 00:00:00 2001
From: tema0829 <funmi.moriyele@gmail.com>
Date: Sun, 13 Oct 2024 15:58:09 +0100
Subject: [PATCH 4/5] Styling added to page

---
 Wireframe/css/style.css | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css
index e69de29b..889d0d98 100644
--- a/Wireframe/css/style.css
+++ b/Wireframe/css/style.css
@@ -0,0 +1,40 @@
+.title-section {
+    margin-bottom: 70px;
+    text-align: center;
+}
+
+article {
+    margin-bottom: 50px;
+}
+.article-section:first-child {
+    width: 700px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+button {
+    width: 90px;
+    height: 30px;
+    padding: 3px 10px;
+}
+
+.text-wrap {
+    width: 400px;
+}
+
+#developers-img {
+    height: 250px;
+}
+
+#branch-img {
+    height: 270px;
+    margin: 12px 0;
+ 
+}
+
+.flex-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
\ No newline at end of file

From 03988efee587dc54441ae71ac99408fe673c555d Mon Sep 17 00:00:00 2001
From: tema0829 <funmi.moriyele@gmail.com>
Date: Sun, 13 Oct 2024 16:16:00 +0100
Subject: [PATCH 5/5] Fixing footer to bottom of viewport

---
 Wireframe/css/style.css | 5 +++++
 Wireframe/index.html    | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css
index 889d0d98..b5bde0d0 100644
--- a/Wireframe/css/style.css
+++ b/Wireframe/css/style.css
@@ -37,4 +37,9 @@ button {
     display: flex;
     align-items: center;
     justify-content: space-around;
+}
+
+#footer {
+    position: fixed;
+    bottom: 0;
 }
\ No newline at end of file
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 683b5c91..8c84a1b8 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -56,7 +56,7 @@ <h1>What is a branch in Git?</h1>
       </div>
   </div>
 
-    <footer>
+    <footer id="footer">
       <p>This website was created by Funmi M. For more details, please email:
       <a href="mailto:funmim@example.com">funmim@example.com</a></p>
     </footer> 
