CodeYourFuture · ihortar · Jan 17, 2026 · Jan 17, 2026 · Jan 17, 2026 · Jan 23, 2026
diff --git a/Wireframe/git_branch.png b/Wireframe/git_branch.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,25 +8,88 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Wireframe exercise</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This page will contain the information to complete the task.
       </p>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+      <main>
+      <article class="acticle-top">
+        <img src="readme.png" alt="" />
+        <h2>What Is the Purpose of a README File?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          <section>
+          A README file is a document that introduces and explains a project. It is usually the first thing someone sees when they open a repository on GitHub.
+
+The purpose of a README file is to:
+<ul>
+<li>Describe what the project does and why it exists</li>
+
+<li>Explain how to install, run, or use the project</li>
+
+<li>Provide instructions for contributors</li>
+
+<li>Share important information such as dependencies, licenses, or contact details</li>
+</ul>
+A well-written README helps users quickly understand the project without needing to explore the entire codebase. It also makes projects more professional and accessible to others.
+</section>
         </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">Read more</a>
       </article>
     </main>
+<main>
+
+      <article>
+        <img src="wireframe.png" alt="" />
+        <h2>What Is the Purpose of a Wireframe?</h2>
+        <p>
+          <section>
+          A wireframe is a visual blueprint of a website or application. It focuses on structure and layout rather than colors, images, or detailed design.
+
+The purpose of a wireframe is to:
+<ul>
+<li>Plan the layout of content and features</li>
+
+<li>Show where elements like buttons, text, and images will appear</li>
+
+<li>Help teams agree on functionality before development begins</li>
+
+<li>Save time and reduce errors by identifying issues early</li>
+</ul>
+Wireframes act as a guide for designers, developers, and stakeholders, ensuring everyone has a shared understanding of how the final product should work.
+</section>
+        </p>
+        <a href="https://www.nngroup.com/articles/wireframes/">Read more</a>
+</article>
+    </main>
+       <main>
+<article>
+        <img src="git_branch.png" alt="" />
+        <h2>What Is a Branch in Git?</h2>
+        <p>
+          <section>
+          A branch in Git is a separate version of a project where changes can be made independently from the main codebase.
+
+The purpose of using branches is to:
+<ul>
+<li>Work on new features without affecting the main project</li>
+
+<li>EFix bugs safely</li>
+
+<li>Experiment with ideas without risk</li>
+
+<li>Allow multiple people to work on the same project at the same time</li>
+</ul>
+A well-written README helps users quickly understand the project without needing to explore the entire codebase. It also makes projects more professional and accessible to others.
+</section>
+        </p>
+        <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read more</a>
+</article>
+    </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This specific page is created by Ihor Taradaiko.
       </p>
     </footer>
   </body>

diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg
diff --git a/Wireframe/readme.png b/Wireframe/readme.png
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -18,7 +18,8 @@ As well as useful links to learn more */
 ====== Design Palette ====== */
 :root {
   --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
+  --background-color: grey;
+  --ink: color-mix(in oklab, var(--color) 10%, black);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
@@ -52,6 +53,11 @@ main {
 footer {
   position: fixed;
   bottom: 0;
+  margin: auto 0;          
+  width: 100%;             
+  text-align: center;
+  color: whitesmoke;
+  background-color: grey;
   text-align: center;
 }
 /* ====== Articles Grid Layout ====

diff --git a/Wireframe/wireframe.png b/Wireframe/wireframe.png