creating the page based on the wireframe

Author: Dagim-Daniel

Wireframe/index.html

@@ -10,24 +10,54 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Wireframe is low-fidelity, Visual Blueprint of a webpage or app interface.
       </p>
     </header>
+   
     <main>
+       <!-- what is the purpose of README article -->
       <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>
+        <img src="https://www.makeareadme.com/images/open-graph-logo.png?v=20181203" alt="README image" />
+        <h2>README file</h2>
+        
+        <details> <summary>The purpose of README file is to give information about the project  and how to use it 
+           </summary>
+            <p> A README file is the "front door" of your project. it is typically a text file (usuallyREADME.md using Markdown) located in the root directory of your code</p>   
+          </details>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
       </article>
+
+  <!--purpose of wireframe article-->
+  <article>
+    <img src="https://github.com/Dagim-Daniel/Module-Onboarding/blob/main/Wireframe/wireframe.png?raw=true" alt="">
+    <h2>Purpose of Wireframe</h2>
+    <details> 
+      <summary> 
+        It establish the basic Structure of a page. 
+         </summary>
+    <p>Wireframing is the perfect way for the designers to gauge how the user would interact with the interface. Before adding visual considerations like color or images, they serve as an outline to get the team on the same page early.</p>
+    </details>
+    <a href="https://medium.com/design-bootcamp/wireframes-5d63f9d760a8">Read more</a>
+  </article>
+
+  <!-- what is branch git article -->
+  <article>
+    <img src="https://cdn.iconscout.com/icon/free/png-256/free-git-branch-logo-icon-svg-download-png-1982843.png" alt="">
+    <h2>Branch in Git</h2>
+    <details>
+      <summary>
+        In Git, branch a pointer to a snapshot of your changes.
+        </summary>
+      
+    <p>Branch is like a separate working copy of your project in Git. It allows you to make changes without affecting the main branch (often called "main" or "master").</p>
+    </details>
+    <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
+  </article>
+
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>Author: Dagim Daniel :  <a href= "mailto:dagimdan19@gmail.com">dagimdan19@gmail.com</a></p>
     </footer>
   </body>
 </html>

Wireframe/style.css

@@ -36,6 +36,14 @@ a {
   border: var(--line);
   max-width: fit-content;
 }
+footer a 
+{
+   padding: var(--space);
+   border: none; 
+   text-align: center;
+  max-width: fit-content;
+
+}
 img,
 svg {
   width: 100%;
@@ -45,6 +53,10 @@ svg {
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+header {  
+  text-align: center; 
+  padding: var(--space); 
+}
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
@@ -53,6 +65,8 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  background-color: blanchedalmond;
+  width:100%;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.