CodeYourFuture · kbtesfu · Jan 26, 2025 · Jan 26, 2025 · Jan 26, 2025 · Jan 26, 2025
diff --git a/Wireframe/gitt.jpg b/Wireframe/gitt.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,31 +3,60 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Discover the essential steps to build wireframes for your website" />
     <title>Wireframe</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
       <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </header>
+      <p> It's a graphic representation of a website, 
+        mobile app or other digital interface that highlights the overall structure and 
+        layout of the design without going into specifics like colors, fonts or images.</p>
+      </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="readme.png" alt="image with a caption says make a Readme" />
+        <h2>What is the purpose of README.md file? </h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+         A README.md file provides essential information about a project, 
+         including its purpose, installation instructions, usage guidelines, 
+         contribution details, licensing and contact information, 
+         helping users and developers understanding and engage with the project effectively.
         </p>
-        <a href="">Read more</a>
+        <a href="https://google.github.io/styleguide/docguide/READMEs.html">Read more</a>
       </article>
-    </main>
+      <section> 
+        <article>
+          <img src="wf.jpg" alt="Wireframe drawing on ipad and book" />
+          <h3> What is the purpose of wireframe?</h3>
+          <p>
+            A wireframe is commonly used to layout content and functionality
+            on on a page which it takes into account user needs and user journeys. 
+            Wireframe is used early in the development process to establish 
+            the basic structure of a page before visual design and content is added.
+          </p>
+           <a href="https://www.geeksforgeeks.org/purpose-of-wireframing-in-web-design-process/">Read more </a>
+           </article>
+        </section>
+      <section>
+<article>
+     <img src="gitt.jpg" alt="git branch illustration diagram">
+      <h4> What is a Branch in Git? </h4>
+    <p> 
+    Git Branches allow us to work on different versions of our code simultaneously. 
+    Think of branches as alternative timelines. 
+    Git Branches allow us to create separate contexts where we can try new things or 
+    even work on multiple ideas in parallel without risking the codebase.
+    </p>
+    <a href="https://codeinstitute.net/global/blog/git-branches/">Read more</a>
+  </article>
+</section>
+</main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+        
+    <p style="margin: 0;">© 2025 Kebrom Gebretinsay. All rights reserved.</p>
+        
     </footer>
   </body>
 </html>
diff --git a/Wireframe/readme.png b/Wireframe/readme.png
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -30,6 +30,7 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  background-color: rgb(229, 226, 212);
 }
 a {
   padding: var(--space);
@@ -53,6 +54,8 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  font-weight: 500;
+  color: rgb(25, 23, 23);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.

diff --git a/Wireframe/wf.jpg b/Wireframe/wf.jpg
diff --git a/wframe.png b/wframe.png