CodeYourFuture · Yonatanteklemariam · May 22, 2026 · May 22, 2026 · May 27, 2026 · May 27, 2026
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,92 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <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>
-    <main>
-      <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>
-      </article>
-    </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </footer>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="description"
+    content="This is a wireframe design for a web development project, showcasing the basics of README files, wireframes, and Git branches. It includes a header, hero image, main article, small articles section, and footer with contact information. The design is responsive and styled with CSS for a clean and organized layout.">
+  <title>My Wireframe Design</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <!-- header -->
+  <header class="page-header">
+    <h1>Basics of Web Development Designs</h1>
+    <p>README files, wireframes, and Git branches explained clearly</p>
+  </header>
+
+  <!-- Hero Image Placeholder -->
+  <div class="hero">
+    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1-768.png" alt="readme diagram"
+      class="placeholder">
+  </div>
+
+  <!-- Main Article -->
+  <main class="main-article">
+    <h2>What is the purpose of a README file?</h2>
+    <p>A <strong>README</strong> file explains what a project is, how it works, and how to use it. It usually includes
+      installation
+      steps, usage instructions, and important notes. The purpose is to help anyone understand the project quickly
+      without reading the entire codebase.
+      A README.md is an important document in a repository that introduces the project and explains its purpose, setup,
+      and usage to help users and developers understand and contribute to it.
+      Uses Markdown (.md) for formatted documentation and is usually the first file users read in a project.
+      Provides a project overview, installation instructions, configuration details, and usage examples such as code or
+      command-line commands.
+      May include license information, contributor credits, and appears well-formatted on platforms like GitHub.
+      A README file is meant to act as the front door to a project, giving anyone who encounters it a clear and
+      immediate understanding of what the project is about and how to interact with it. It explains the project’s
+      purpose, its goals, and the problems it aims to solve, while also guiding users through installation, usage, and
+      any important requirements. A strong README also helps future contributors by documenting decisions, structure,
+      and expectations, making collaboration smoother and reducing confusion. It becomes a reference point that keeps
+      the project understandable even months or years later, ensuring that the work remains accessible not only to
+      others but also to the original creator when returning after a long break.
+    </p>
+    <br><br>
+    <a href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/" aria-label="Read more about readme files"
+      class="btn">More on README Files</a>
+  </main>
+
+  <!-- Small Articles Section -->
+  <div class="small-articles">
+
+    <article class="small-article">
+      <img
+        src="https://cdn.logojoy.com/wp-content/uploads/20220823141611/hand-drawn-website-wireframe-example-600x450.jpeg"
+        alt="wireframe diagram" class="placeholder-small">
+      <h3>What is the purpose of a wireframe?</h3>
+      <p>A <strong>wireframe</strong> is a simple visual layout that shows the structure of a webpage before design or
+        coding begins. It helps developers and designers plan where elements should go and how the page should flow.</p>
+      <a href="https://www.geeksforgeeks.org/blogs/what-is-wireframing/" aria-label="Read more about wireframes"
+        class="btn">More on Wireframing</a>
+    </article>
+
+
+    <article class="small-article">
+      <img
+        src="https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0d19837bbaf82a71ab35b2a62c5f8776af8e900a.png"
+        alt="git branching diagram" class="placeholder-small">
+      <h3>What is the reason behind having a branch in Git?</h3>
+      <p>A <strong>Git branch</strong> is a separate version of your project where you can work on new features without
+        affecting the
+        main code. Branches allow safe experimentation and make collaboration easier. Therefore.</p>
+      <a href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/" aria-label="Read more about Git branching"
+        class="btn">More on Git Branching</a>
+    </article>
+
+  </div>
+  <!-- footer -->
+  <footer>
+    <div class="footer-note">
+      <p>For more information, please contact us at: Email: <a href="mailto:jante26uk@gmail.com"
+          target="_blank">jante26uk@gmail.com</a></p>
+      <p>Telephone: <a href="tel:07350989507" target="_blank">07350989507</a></p>
+      <p>Address: 27 Broadwalk, Dusntable, UK</p><br>
+    </div>
+    <p>&copy; 2026 My Wireframe Design. All rights reserved.</p>
+  </footer>
+</body>
+
+</html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,8 +1,198 @@
-/*
-  (Suggestion) Use a top-down approach when applying CSS:
-  1. Lay out the top-level elements: <header>, <main>, <footer>
-  2. Lay out the articles within <main>
-  3. Style individual elements
-
-  Please REMOVE this comment before submitting your work.
-*/
+:root {
+  --paper: oklch(100% 0 0);
+  --ink: oklch(20% 0 0);
+  --font: 100%/1.5 system-ui;
+  --space: clamp(10px, 1vw + 10px, 40px);
+  --line: 1px solid;
+  --container: 1280px;
+  --base: linear-gradient(
+    90deg,
+    rgba(2, 0, 36, 1) 0%,
+    rgba(9, 9, 121, 1) 39%,
+    rgba(0, 212, 255, 1) 100%
+  );
+  --cards: radial-gradient(
+    circle,
+    rgba(227, 233, 241, 1) 0%,
+    rgba(227, 233, 241, 1) 12%,
+    rgba(227, 233, 241, 1) 5%,
+    rgba(226, 233, 240, 1) 36%,
+    rgba(202, 219, 238, 1) 53%,
+    rgba(191, 212, 237, 1) 60%,
+    rgba(200, 217, 238, 1) 75%,
+    rgba(215, 226, 239, 1) 100%,
+    rgba(148, 187, 233, 1) 100%,
+    rgba(242, 242, 242, 1) 100%
+  );
+  --text-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
+  --text-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+  --text-p: clamp(0.91rem, 0.61vw + 1.1rem, 1rem);
+  --text-h2: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
+  --text-h3: clamp(1rem, 8vw + 1rem, 2rem);
+  --title: clamp(1rem, 6vw + 1rem, 3rem);
+  --footer-h3: #f18930;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Arial", sans-serif;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  background-color: #3c3f72;
+  color: #080000;
+
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-header {
+  background-color: #d0bee3;
+  color: #1a082c;
+  text-align: center;
+  text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982);
+  margin-bottom: 40px;
+  padding: 30px;
+  font-size: 1.5em;
+}
+
+.page-header h1 {
+  font-size: 2em;
+  margin-bottom: 1%;
+}
+
+.hero .placeholder {
+  width: 100%;
+  height: 600px;
+  border: 2px dashed #1a082c;
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
+
+.hero {
+  margin-right: 20px;
+  margin-left: 20px;
+}
+
+.main-article {
+  flex: 1;
+  background: white;
+  padding-top: 45px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 10px;
+  border: 2px solid #000;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  text-align: justify;
+  margin-right: 20px;
+  margin-left: 20px;
+}
+
+.main-article p,
+.small-article p {
+  font-size: 1.2em;
+}
+
+.small-article h3 {
+  font-size: 1em;
+  color: #350763;
+  margin-bottom: 15px;
+  text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982);
+}
+
+.main-article h2 {
+  color: #350763;
+  margin-bottom: 15px;
+  text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982);
+}
+
+.btn {
+  display: inline-block;
+  padding: 4px 14px;
+  background-color: #350763;
+  color: white;
+  text-decoration: none;
+  border-radius: 5px;
+  margin-top: 15px;
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.btn:hover {
+  background-color: #c3e7fb;
+  color: #1a082c;
+}
+
+.small-articles {
+  display: flex;
+  gap: 20px;
+  margin: 0 20px 20px 20px;
+  padding-bottom: 125px;
+  text-align: justify;
+}
+
+.small-article {
+  flex: 1;
+  background: white;
+  padding: 15px;
+  border: 2px solid #000;
+  border-radius: 10px;
+}
+
+.small-article h3 {
+  color: #350763;
+  margin-bottom: 10px;
+  font-size: 1.2em;
+}
+
+.placeholder-small {
+  width: 100%;
+  height: 450px;
+  background-color: #d0bee3;
+  border: 2px dashed #1a082c;
+  border-radius: 10px;
+  margin-bottom: 15px;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background-color: #d0bee3;
+  color: #1a082c;
+  text-align: center;
+  text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982);
+  line-height: 1.2;
+  margin-top: auto;
+  width: 100%;
+  clear: both;
+}
+
+footer p {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.footer-note {
+  font-size: 16px;
+  color: #1a082c;
+  margin-bottom: 5px;
+  text-shadow: 2px 2px 4px rgba(210, 213, 244, 0.982);
+  padding-top: 5px;
+  border-bottom: none;
+  border-radius: 10px;
+}
+
+.footer-note a:hover {
+  color: #c6e9e9;
+  text-shadow: 2px 2px 4px rgba(25, 32, 112, 0.982);
+}