LONDON | MAY | KOKUL | WIREFRAME

Wireframe/index.html

@@ -10,24 +10,39 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A wireframe is a basic, two-dimensional visual representation of a web page, app interface, or product layout. You can think of it as a low-fidelity, functional sketch.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="wire.png" alt="" />
+        <h2>Purpose of Wireframe</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          The primary purpose of a wireframe is to outline the basic structural design and user experience of a website or application before any detailed design work is done. It's a visual representation of the layout, content, and functionality, helping designers, developers, and stakeholders understand the overall structure and flow. 
         </p>
         <a href="">Read more</a>
       </article>
+      <article>
+        <img src="Github.png" alt="" />
+        <h2>GitHub</h2>
+        <p>
+          GitHub is a cloud-based platform where you can store, share, and work together with others to write code. Storing your code in a "repository" on GitHub allows you to: Showcase or share your work. Track and manage changes to your code over time. Let others review your code, and make suggestions to improve it.
+        </p>
+        <a href="">Read more</a>
+      </article>
+      <article>
+        <img src="Re.jpeg" alt="" />
+        <h2>ReadMe</h2>
+        <p>
+          A README file is a text file, often named "README.txt" or "README.md", included in a folder or repository to provide essential information about the project or data it contains.
+        </p>
+          <a href="">Read more</a>
+      </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+          @2025 All rights reserved.
       </p>
     </footer>
-  </body>
+  </body>
 </html>

Wireframe/style.css

@@ -31,6 +31,7 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+
 a {
   padding: var(--space);
   border: var(--line);
@@ -41,18 +42,42 @@ svg {
   width: 100%;
   object-fit: cover;
 }
+article {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  /* padding: 1rem; */
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+article h2 {
+  margin-top: 1rem;
+  font-size: 1.25rem;
+}
+
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+header {
+  text-align: center;
+  padding: 1.5rem;
+  font-size: 0.875rem;
+  background-color: #f0f0f0;
+  margin-bottom: 2rem;
+}
+
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
 footer {
-  position: fixed;
-  bottom: 0;
   text-align: center;
+  padding: 1.5rem;
+  font-size: 0.875rem;
+  background-color: #f0f0f0;
+  margin-top: 2rem;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -86,4 +111,4 @@ article {
   > img {
     grid-column: span 3;
   }
-}
+}