CodeYourFuture · mo-omer · Feb 8, 2026 · Feb 16, 2026 · Feb 18, 2026 · Feb 18, 2026
diff --git a/Wireframe/README.md → Feature/Wireframe/README.md b/Wireframe/README.md → Feature/Wireframe/README.md
diff --git a/Feature/Wireframe/branch.png b/Feature/Wireframe/branch.png
diff --git a/Feature/Wireframe/git-branch.html b/Feature/Wireframe/git-branch.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Git Branches</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <main class="content">
+    <article>
+      <h1>What is a branch in Git?</h1>
+      <p>
+        A Git branch is a separate line of development within a repository.
+        It allows developers to work on features or fixes independently.
+      </p>
+      <p>
+        Once changes are complete, branches can be merged back into the
+        main branch, keeping the project stable and organized.
+      </p>
+      <a href="index.html" class="button">← Back to Home</a>
+    </article>
+  </main>
+</body>
+</html>
diff --git a/Feature/Wireframe/index.html b/Feature/Wireframe/index.html
@@ -0,0 +1,73 @@
+<<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>README, Wireframes, and Git Branches</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="page-header">
+    <h1>README Files, Wireframes, and Git Branches</h1>
+    <p class="subtitle">Core concepts used in modern web development</p>
+  </header>
+
+  <main class="content">
+    <!-- Featured Article -->
+    <article class="card featured">
+  <img
+    src="readme.png"
+    alt="Developer writing project documentation"
+    class="article-image"
+  />
+  <div class="card-body">
+    <h3>What is the purpose of a README file?</h3>
+    <p>
+      A README file introduces a project and explains how to install, use,
+      and understand it so others can quickly get started.
+    </p>
+    <a href="more-readme.html" class="button">Read More</a>
+  </div>
+</article>
+
+    <!-- Two Column Articles -->
+    <section class="card-grid">
+<article class="card">
+  <img
+    src="wireframe.png"
+    alt="Website wireframe sketches"
+    class="article-image"
+  />
+  <div class="card-body">
+    <h3>What is the purpose of a wireframe?</h3>
+    <p>
+      A wireframe is a low-fidelity layout used to plan the structure and
+      functionality of a webpage before visual design begins.
+    </p>
+    <a href="wireframe.html" class="button">Read More</a>
+  </div>
+</article>
+
+<article class="card">
+  <img
+    src="branch.png"
+    alt="Git branching diagram on screen"
+    class="article-image"
+  />
+  <div class="card-body">
+    <h3>What is a branch in Git?</h3>
+    <p>
+      A Git branch allows developers to work on new features or fixes
+      independently without impacting the main project.
+    </p>
+    <a href="git-branch.html" class="button">Read More</a>
+  </div>
+</article>
+    </section>
+  </main>
+
+  <footer class="page-footer">
+    <p>contact information will be added soon</p>
+  </footer>
+</body>
+</html>
diff --git a/Feature/Wireframe/more-readme.html b/Feature/Wireframe/more-readme.html
@@ -0,0 +1,22 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>README Files</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <main class="content">
+    <article>
+      <h1>What is the purpose of a README file?</h1>
+      <p>
+        README files help developers collaborate more effectively and allow
+        users to understand a project without reading the source code.
+      </p>
+      <a href="newpage.html" class="button">← Back to Home</a>
+    </article>
+  </main>
+</body>
+</html>
diff --git a/Feature/Wireframe/readme.png b/Feature/Wireframe/readme.png
diff --git a/Feature/Wireframe/style.css b/Feature/Wireframe/style.css
@@ -0,0 +1,104 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: #f4f4f4;
+  color: #222;
+  line-height: 1.6;
+}
+
+.page-header {
+  text-align: center;
+  padding: 2rem 1rem;
+}
+
+.page-header h1 {
+  margin-bottom: 0.5rem;
+}
+
+.subtitle {
+  color: #555;
+}
+
+.content {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.card {
+  background-color: #fff;
+  border: 2px solid #000;
+  margin-bottom: 2rem;
+}
+
+.featured {
+  width: 100%;
+}
+
+.article-image {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.card-body {
+  padding: 1rem;
+}
+
+.card-body h3 {
+  margin-top: 0;
+}
+
+.button {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border: 2px solid #000;
+  text-decoration: none;
+  color: #000;
+  font-weight: bold;
+}
+
+.button:focus,
+.button:hover {
+  background-color: #000;
+  color: #fff;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2rem;
+}
+
+.page-footer {
+  position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: #918d8d;
+    color: rgb(39, 37, 37);
+    text-align: center;
+    padding: 1rem;
+}
+
+@media (max-width: 768px) {
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/Feature/Wireframe/wireframe.html b/Feature/Wireframe/wireframe.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Wireframes</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <main class="content">
+    <article>
+      <h1>What is the purpose of a wireframe?</h1>
+      <p>
+        Wireframes are simple visual guides that represent the structure of
+        a webpage or application.
+      </p>
+      <p>
+        They allow designers and developers to plan layout, navigation,
+        and functionality before writing code or applying visual styles.
+      </p>
+      <a href="index.html" class="button">← Back to Home</a>
+    </article>
+  </main>
+</body>
+</html>
diff --git a/Wireframe/wireframe.png → Feature/Wireframe/wireframe.png b/Wireframe/wireframe.png → Feature/Wireframe/wireframe.png