London ITP January | Khalil Ali | Module-Onboarding | Week1

Wireframe/index.html

@@ -10,23 +10,41 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Wireframes are simple visual guides that represent the skeletal framework of a website.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="/Module-Onboarding/Wireframe/images/readme.webp" alt="readme" />
+        <h2>README file</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A file that provides important information about a project.
+          It usually contains details like the project's purpose and version.
+        </p>
+        <a href="">Read more</a>
+      </article>
+      <article>
+        <img src="/Module-Onboarding/Wireframe/images/wireframe.png" alt="wireframe" id="img2" />
+        <h2>wireframe</h2>
+        <p>
+          A visual guide used to design the layout and structure of a website or application.
+          It shows the basic arrangement of elements and text.
+        </p>
+        <a href="">Read more</a>
+      </article>
+      <article >
+        <img src="/Module-Onboarding/Wireframe/images/branch.webp" alt="Git Branch" id="img3"/>
+        <h2>Git Branch</h2>
+        <p>
+          A branch in Git is like a parallel version of a repository. It allows you to
+          work on different features or bug fixes independently
         </p>
         <a href="">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        &copy; 2025 Wireframe. All rights reserved.
       </p>
     </footer>
   </body>

Wireframe/style.css

@@ -30,7 +30,10 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  margin: 0%;
+  background:gray;
 }
+
 a {
   padding: var(--space);
   border: var(--line);
@@ -49,10 +52,15 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+header{
+  text-align: center;
+}
 footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  background: rgb(99, 97, 97);
+  width: 100%;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -74,8 +82,13 @@ Setting the rules for how elements are placed in the article.
 Now laying out just the INSIDE of the repeated card/article design.
 Keeping things orderly and separate is the key to good, simple CSS.
 */
+#img2,#img3{
+  height: 420px;
+}
 article {
   border: var(--line);
+  border-radius: 15px;
+  overflow: hidden;
   padding-bottom: var(--space);
   text-align: left;
   display: grid;
@@ -87,3 +100,4 @@ article {
     grid-column: span 3;
   }
 }
+