CodeYourFuture · Pretty548 · May 7, 2025 · May 7, 2025 · May 8, 2025 · May 15, 2025
diff --git a/Wireframe/branch.png b/Wireframe/branch.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,31 +3,54 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="An article about README fies, wireframes and Git branches with Illustrations and helpful links."/>
     <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="styles.css">
   </head>
   <body>
-    <header>
-      <h1>Wireframe</h1>
+    <div class="header">
+      <h1>My Wireframe</h1>
+      <p>An article about wireframe,readme file and branch on what they are and how they work.</p>
+    </div>
+
+    <div class="article1">
+      <img src="./readme.png" alt="README file illustration" />
+      <h2>README File</h2>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A README file provides key information about a project. It explains what
+        the project does, how to install and use it, any required tools or
+        libraries, and how others can contribute. It helps new users or
+        developers understand the project quickly.
       </p>
-    </header>
-    <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+      <a href="https://en.wikipedia.org/wiki/README" class="btn">Learn more about README files</a>
+    </div>
+
+    <div class="flex-container">
+      <div class="article2">
+        <img src="./mywireframe.png" alt="Wireframe layout example"/>
+        <h2>Wireframe</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A wireframe is a simple visual layout that outlines the structure of a
+          webpage or app. It focuses on content placement and user flow rather
+          than design. Wireframes help teams plan, communicate, and test ideas
+          before moving to detailed design or development
         </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>
+        <a href="https://adamfard.com/blog/wireframes" class="btn">Explore more about wireframes</a
+        >
+      </div>
+      <div class="article3">
+        <img src="./branch.png" alt="Git branch diagram" />
+        <h2>Branch in Git</h2>
+        <p>
+          A branch in Git is a separate workspace used to develop new features
+          or fix issues without changing the main code. It allows developers to
+          work independently, test safely, and later merge changes into the main
+          project when ready.
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp" class="btn">Understand Git branches</a
+        >
+      </div>
+    </div>
+    <footer>Designed by Pretty Taruvinga</footer>
   </body>
 </html>
diff --git a/Wireframe/mywireframe.png b/Wireframe/mywireframe.png
diff --git a/Wireframe/readme.png b/Wireframe/readme.png
diff --git a/Wireframe/style.css b/Wireframe/style.css
diff --git a/Wireframe/styles.css b/Wireframe/styles.css
@@ -0,0 +1,75 @@
+body {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  background-color: #fafafa;
+}
+
+.flex-container {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.flex-container > div {
+  background-color: #f1f1f1;
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  flex: 1;
+  min-width: 300px;
+}
+
+.article1 {
+  padding: 20px;  
+}
+
+.article1 img {
+  width: 100%;
+}
+
+.article1 p,
+.article1 h2 {
+  text-align: left;
+}
+
+.article2 img,
+.article3 img {
+  max-width: 100%;
+  height: auto;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+footer {
+  padding: 40px;
+  text-align: center;
+  background: #333;
+  color: #f1f1f1;
+}
+
+.btn {
+  display: inline-block;
+  padding: 12px 20px;
+  font-size: 16px;
+  margin-top: 16px;
+  text-decoration: none;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+  background-color: grey;
+  color: black;
+  font-weight: bold;
+}
+
+.btn:hover {
+  background-color: #0056b3;
+  color: white;
+  font-weight: bold;
+
+}