diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..77f7fbe32 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -31,3 +31,46 @@ <h2>Title</h2>
     </footer>
   </body>
 </html>
+
+<!DOCTYPE html> 
+<html lang="en"> 
+<head> <meta charset="UTF-8"> 
+<title>Wireframe Layout</title> 
+<link rel="stylesheet" href="styles.css"> 
+</head> 
+<body> <!-- Top Half --> 
+<div class="section top-half"> 
+<div class="title-block"> 
+<h1>WIREFRAME IMPLEMENTATION</h1> 
+<p class="subtitle">This is a sample of wireframe implementation</p> 
+</div> 
+<div class="text-block"> 
+<p>WHAT IS THE PURPOSE OF A README FILE?</p> 
+<p>A README file exists to explain what a project is, why it matters, and how to use it. It’s the first place someone looks when they encounter your repository, dataset, or codebase.</p> 
+<!-- <p>Line of text number three</p> -->
+  <p><a class="read-more" href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">READ MORE</a></p>
+</div> </div> 
+<!-- Bottom Half --> 
+<div class="bottom-half"> 
+<div class="column"> 
+<p>WHAT IS THE PURPOSE OF A WIREFRAME?</p> 
+<p>A wireframe exists to map out the structure and functionality of a page or product before any visual design or coding begins. Think of it as the architectural blueprint of a digital experience.</p> 
+<!--  <p>Left column text line three</p> -->
+  <p><a class="read-more" href="https://www.productplan.com/glossary/wireframe/">READ MORE</a></p>
+</div> <div class="column"> 
+<p>WHAT IS A BRANCH IN GIT?</p> 
+<p>A branch in Git is essentially a lightweight, movable pointer to a specific line of development. It lets you work on new features, experiments, or fixes without affecting the main codebase.
+</p> 
+<!--  <p>Right column text line three</p> -->
+  <p><a class="read-more" href="https://www.w3schools.com/git/git_branch.asp">READ MORE</a></p>
+</div> 
+</div> 
+  <footer>
+      <p>
+        This is footer information.
+      </p>
+    </footer>
+</body> 
+</html>
+
+
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..d8d1a303e 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -87,3 +87,53 @@ article {
     grid-column: span 3;
   }
 }
+
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+} /* Generic wireframe box */
+.section,
+.column {
+  border: 2px dashed #999;
+  padding: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+} /* Single-line spacing */
+h1 { font-weight: bold; }
+
+p {
+  line-height: 1;
+  margin: 4px 0;
+} /* Top half layout */
+.top-half {
+  height: 50vh;
+  text-align: center;
+} /* Title + subtitle block */
+.title-block {
+  margin-bottom: auto; /* keeps title at the top */
+}
+.subtitle {
+  font-size: 0.9rem;
+  margin-top: 4px;
+  color: #555;
+} /* Text block under title */
+.top-half .text-block {
+  text-align: left;
+  margin: 0 auto;
+  width: 60%;
+} 
+/* Bottom half layout */
+.bottom-half {
+  height: 50vh;
+  display: flex; 
+ /* font-weight: bold; */
+}
+.column {
+  flex: 1;
+  margin: 10px;
+  text-align: left;
+  
+}
+
