CodeYourFuture · Zadri415 · May 22, 2025 · May 22, 2025 · May 22, 2025 · May 22, 2025
diff --git a/Module-Onboarding b/Module-Onboarding
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,25 +8,44 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <h1>Project Essentials Explained</h1>
+      <p>Discover the roles of README files, wireframes, and Git branches in software development.</p>
     </header>
+
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="Github README editor with 'README' in green outline."/>
+        <h2>What is a README file?</h2>
+        <p>
+          A README file is an essential component of many software projects, especially those hosted on platforms like GitHub.
+        </p>
+        <a href="https://www.geeksforgeeks.org/what-is-readme-md-file/#what-is-a-readmemd-file">Read more</a>
+      </article>
+
+      <article>
+        <img src="https://cdn.sanity.io/images/599r6htc/regionalized/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.png?q=75&fit=max&auto=format&dpr=2" alt="what is a wireframe cover photo"/>
+        <h2>What is a Wireframe?</h2>
+        <p>
+          A wireframe is a visual blueprint of a website or application's layout, focusing on structure and functionality without the distraction of design elements.
+        </p>
+        <a href="https://balsamiq.com/learn/articles/what-are-wireframes">Read more</a>
+      </article>
+
+      <article>
+        <img src="https://i0.wp.com/digitalvarys.com/wp-content/uploads/2019/06/image-6.png?fit=640%2C257&ssl=1" alt="" />
+        <h2>What is a Branch in Git?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          In Git, a branch is an independent line of development that allows you to work on new features or fixes without affecting the main codebase.
         </p>
-        <a href="">Read more</a>
+        <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.
+        &copy; 2025 Project Essentials. All rights reserved.
       </p>
     </footer>
   </body>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -26,16 +26,54 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+
+
+
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+
 }
+
+
+
+header {
+  max-width: var(--container);
+  margin: var(--space)auto;
+  padding: var(--space);
+  text-align: centre;
+  border-bottom: var(--line);
+}
+
+header h1 {
+  margin: 0;
+
+  text-align: center;
+}
+
+header p {
+  opacity: 0.8;
+  text-align: center;
+}
+
 a {
   padding: var(--space);
   border: var(--line);
-  max-width: fit-content;
+  align-items: center;
+  gap: .5rem;
+  display: inline-flex;
+  text-decoration: none;
+   border-color: currentColor;;
+  border-radius: .5rem;
+  transition: transition: background-color .2s ease, border-color .2s ease, transform .1s ease;
+}
+
+a:hover {
+  background-color: color-mix(in oklab, var(--paper)90%, white);
+  transform: scale(1.02);
 }
+
 img,
 svg {
   width: 100%;
@@ -48,11 +86,17 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space);
 }
 footer {
-  position: fixed;
-  bottom: 0;
   text-align: center;
+  inset-inline: 0;
+  bottom: 0;
+  position: fixed;
+  background-color: rgb(148, 228, 228);
+
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -83,7 +127,11 @@ article {
   > * {
     grid-column: 2/3;
   }
+
   > img {
     grid-column: span 3;
+
   }
+
+
 }