From 60b1ffd82fb2819f84870abdb449dc3a89b40a03 Mon Sep 17 00:00:00 2001
From: eyuell21 <abrahameyuel4@gmail.com>
Date: Sat, 11 Jan 2025 18:58:25 +0000
Subject: [PATCH 1/3] first commit- added the bottom images

---
 Wireframe/index.html | 25 +++++++++++++++++++++++++
 Wireframe/style.css  | 16 ++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e53..9681ec08 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -24,6 +24,31 @@ <h2>Title</h2>
         <a href="">Read more</a>
       </article>
     </main>
+    <div class="side-images">
+      <div class="bottom-side1">
+        <article>
+          <img src="placeholder.svg" alt="" />
+          <h2>Title</h2>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            voluptates. Quisquam, voluptates.
+          </p>
+          <a href="">Read more</a>
+        </article>
+      </div>
+
+      <div class="bottom-side2">
+        <article>
+          <img src="placeholder.svg" alt="" />
+          <h2>Title</h2>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            voluptates. Quisquam, voluptates.
+          </p>
+          <a href="">Read more</a>
+        </article>
+      </div>
+    </div>
     <footer>
       <p>
         This is the default, provided code and no changes have been made yet.
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c..f31d1952 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -87,3 +87,19 @@ article {
     grid-column: span 3;
   }
 }
+.side-images{
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 10px;
+  
+}
+.side-images .bottom-side1{
+
+  flex-grow: 1;
+}
+.side-images .bottom-side2{
+
+  flex-grow: 1;
+}
+

From 51705b282fed60898e243e10c3ba78d3d282c6ab Mon Sep 17 00:00:00 2001
From: eyuell21 <abrahameyuel4@gmail.com>
Date: Sat, 11 Jan 2025 20:16:34 +0000
Subject: [PATCH 2/3] Added the articles

---
 Wireframe/index.html | 75 ++++++++++++++++++++++++++++++++++----------
 Wireframe/style.css  | 14 ++++-----
 2 files changed, 65 insertions(+), 24 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 9681ec08..a781d7d1 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -16,39 +16,80 @@ <h1>Wireframe</h1>
     <main>
       <article>
         <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <h2>Purpose of a wire frame</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A wireframe is a basic, simplified visual representation or blueprint of a website, app, or digital product. It shows the layout and structure of a page, without focusing on design elements like colors, fonts, or images. Think of it as a skeleton or map of the website.
+
+Wireframes are used in the early stages of design to:<br>
+<br>
+<span class="paraBold">Plan the structure:</span> Show where things like text, buttons, navigation menus, and images will go.<br>
+<span class="paraBold"> Help user flow:</span> Help designers and developers see how users will navigate the site or app. <br>
+<span class="paraBold"> Test ideas quickly:</span> Experiment with different layouts and features before investing time in detailed design.<br>
+<br>
+Wireframes can range from low-fidelity (simple sketches) to high-fidelity (detailed mockups), but they all focus on the layout and functionality rather than the visual design.
+<br>
+<br>
+In simple terms, wireframes are visual representations of a web page or app interface, stripped down to its bare bones. Think of it as the architectural blueprint of your design project. They outline the structure and functionality of your product without getting caught up in colors, visuals, or specific content.
         </p>
-        <a href="">Read more</a>
+        <a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/#:~:text=A%20wireframe%20is%20a%20two,are%20kept%20to%20a%20minimum." target="_blank">Read more</a>
       </article>
     </main>
-    <div class="side-images">
-      <div class="bottom-side1">
+    <section class="side-images">
+      <div class="bottom-side">
         <article>
           <img src="placeholder.svg" alt="" />
-          <h2>Title</h2>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptates. Quisquam, voluptates.
+          <h2>Branch in Git</h2>
+          <p>In Git, a branch is a new/separate version of the main repository. A branch in Git is like a separate version of your project where you can work on changes      without affecting the main codebase. It allows you to experiment, develop new features, or fix bugs independently, and later you can merge those changes back into the main project.
+            <br>
+            <br>
+            You always create a branch from an existing branch. Typically, you might create a new branch from the default branch of your repository. You can then work on this new branch in isolation from changes that other people are making to the repository. A branch you create to build a feature is commonly referred to as a feature branch or topic branch. For more information, see Creating and deleting branches within your repository.
+            <br>
+            <br>
+            You can also use a branch to publish a GitHub Pages site. For more information, see About GitHub Pages.
+            <br>
+            You must have write access to a repository to create a branch, open a pull request, or delete and restore branches in a pull request. For more information, see Access permissions on GitHub.
+            <br>
+            <br>
+            In summary, branches in Git allow developers to work on different tasks in isolation, organize development, and merge changes in an efficient and controlled way. They help manage multiple versions of a project simultaneously, making it easier to collaborate and experiment.
+            <br>
+            <br>
           </p>
-          <a href="">Read more</a>
+             
+          <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches" target="_blank">Read more
+
+          </a>
         </article>
       </div>
 
-      <div class="bottom-side2">
+      <div class="bottom-side">
         <article>
           <img src="placeholder.svg" alt="" />
-          <h2>Title</h2>
+          <h2>Readme file</h2>
           <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptates. Quisquam, voluptates.
+            A README file in Git (usually named README.md) is a documentation file that provides essential information about a project. It’s typically the first thing a person sees when they visit a repository and serves as a guide to understand what the project is, how to use it, and how to contribute to it.
+            <br>
+            <br>
+            You can add a README file to a repository to communicate important information about your project. A README, along with a repository license, citation file, contribution guidelines, and a code of conduct, communicates expectations for your project and helps you manage contributions.
+            <br>
+            <br>
+            Why a README is Important:
+            <br>
+            <br>
+            <strong>Clarifies Purpose:</strong>It explains what the project does, helping users quickly understand its purpose.
+            <br>
+            <strong>Guides Users:</strong> It provides instructions on installation, usage, and configuration.
+            <br>
+            <strong>Helps Contributions:</strong> It gives clear guidelines for people who want to contribute to the project.
+            <br>
+            <strong>Improves Accessibility:</strong> It makes the project more approachable and easier to use for both developers and non-developers.
+            <br>
+            <br>
+            In summary, a README file in Git is essential for documenting a project. It helps developers and other users understand the project’s purpose, how to use it, and how to contribute. It's a key part of every repository, especially for open-source projects.
           </p>
-          <a href="">Read more</a>
+          <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes#about-readmes">Read more</a>
         </article>
       </div>
-    </div>
+    </section>
     <footer>
       <p>
         This is the default, provided code and no changes have been made yet.
diff --git a/Wireframe/style.css b/Wireframe/style.css
index f31d1952..ef6f2db4 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -91,15 +91,15 @@ article {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
-  gap: 10px;
+  gap: 5px;
   
 }
-.side-images .bottom-side1{
-
-  flex-grow: 1;
+.side-images .bottom-side{
+  max-width: 50%;
+  
 }
-.side-images .bottom-side2{
 
-  flex-grow: 1;
-}
 
+.paraBold{
+  font-weight: bold;
+}
\ No newline at end of file

From ed9497d32ef000cd2150624c6b7389e9ad206e30 Mon Sep 17 00:00:00 2001
From: eyuell21 <abrahameyuel4@gmail.com>
Date: Sat, 11 Jan 2025 20:34:57 +0000
Subject: [PATCH 3/3] centered the footer

---
 Wireframe/index.html | 30 ++++++++++++++++--------------
 Wireframe/style.css  | 16 +++++++++++++++-
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index a781d7d1..58fef969 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -10,7 +10,7 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Wireframing is a practice most commonly used by UX designers. This process allows all stakeholders to agree on where the information will be placed before the developers build the interface out with code.t.
       </p>
     </header>
     <main>
@@ -20,16 +20,16 @@ <h2>Purpose of a wire frame</h2>
         <p>
           A wireframe is a basic, simplified visual representation or blueprint of a website, app, or digital product. It shows the layout and structure of a page, without focusing on design elements like colors, fonts, or images. Think of it as a skeleton or map of the website.
 
-Wireframes are used in the early stages of design to:<br>
-<br>
-<span class="paraBold">Plan the structure:</span> Show where things like text, buttons, navigation menus, and images will go.<br>
-<span class="paraBold"> Help user flow:</span> Help designers and developers see how users will navigate the site or app. <br>
-<span class="paraBold"> Test ideas quickly:</span> Experiment with different layouts and features before investing time in detailed design.<br>
-<br>
-Wireframes can range from low-fidelity (simple sketches) to high-fidelity (detailed mockups), but they all focus on the layout and functionality rather than the visual design.
-<br>
-<br>
-In simple terms, wireframes are visual representations of a web page or app interface, stripped down to its bare bones. Think of it as the architectural blueprint of your design project. They outline the structure and functionality of your product without getting caught up in colors, visuals, or specific content.
+          Wireframes are used in the early stages of design to:<br>
+          <br>
+          <span class="paraBold">Plan the structure:</span> Show where things like text, buttons, navigation menus, and images will go.<br>
+          <span class="paraBold"> Help user flow:</span> Help designers and developers see how users will navigate the site or app. <br>
+          <span class="paraBold"> Test ideas quickly:</span> Experiment with different layouts and features before investing time in detailed design.<br>
+          <br>
+          Wireframes can range from low-fidelity (simple sketches) to high-fidelity (detailed mockups), but they all focus on the layout and functionality rather than the visual design.
+          <br>
+          <br>
+          In simple terms, wireframes are visual representations of a web page or app interface, stripped down to its bare bones. Think of it as the architectural blueprint of your design project. They outline the structure and functionality of your product without getting caught up in colors, visuals, or specific content.
         </p>
         <a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/#:~:text=A%20wireframe%20is%20a%20two,are%20kept%20to%20a%20minimum." target="_blank">Read more</a>
       </article>
@@ -91,9 +91,11 @@ <h2>Readme file</h2>
       </div>
     </section>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <div>
+        <p>
+          Code your future 2024.
+        </p>
+      </div>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index ef6f2db4..dd239574 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -92,6 +92,7 @@ article {
   justify-content: space-evenly;
   align-items: center;
   gap: 5px;
+  margin-top: -40px;
   
 }
 .side-images .bottom-side{
@@ -102,4 +103,17 @@ article {
 
 .paraBold{
   font-weight: bold;
-}
\ No newline at end of file
+}
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  color: black;
+  padding: 10px;
+  text-align: center;
+  max-height: 50px;
+  margin-top: 20px;
+}
+footer p {
+  padding-top: 20px;
+}