From 49076d2b1e024d8dc8abbe908800d295f97cc6d2 Mon Sep 17 00:00:00 2001
From: Nawar Bahaa ALAKABI <nawarbahaaalakabi@gmail.com>
Date: Mon, 2 Feb 2026 18:30:55 +0000
Subject: [PATCH] create wireframe page

---
 index.html | 35 ++++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 80aa49666..ffd817961 100644
--- a/index.html
+++ b/index.html
@@ -13,11 +13,36 @@
         --line: 1px solid;
       }
       body {
-        background: var(--paper);
-        color: var(--ink);
-        font: var(--font);
-        max-width: 1280px;
-        margin: 0 auto;
+        <header>
+  <h1>Wireframe to Web Code</h1>
+  <p>This page was built using a wireframe.</p>
+</header>
+
+<main>
+  <article>
+    <h2>What is a README file?</h2>
+    <p>
+      A README file explains what a project is about, how it works,
+      and how to use it.
+    </p>
+  </article>
+
+  <article>
+    <h2>What is a wireframe?</h2>
+    <p>
+      A wireframe is a simple visual guide that shows the layout
+      of a webpage before it is built.
+    </p>
+  </article>
+
+  <article>
+    <h2>Why wireframes are useful</h2>
+    <p>
+      Wireframes help developers plan structure and content
+      before writing code.
+    </p>
+  </article>
+</main>
       }
     </style>
   </head>