London | 26-ITP-Jan | Xuanming Hu | Sprint 1 | Wireframe

Wireframe/index.html

@@ -10,19 +10,35 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This page talks about wireframe.
       </p>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
-      </article>
+
+      <!-- Article 1: Questions 1 -->
+       <article>
+          <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="GitHub README image" />
+          <h2>1. What is the purpose of a README file?</h2>
+          <p>A README file provides essential information about a project, including its purpose, usage instructions, and setup requirements.</p>
+          <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank">Read more</a>
+        </article>
+
+       <!-- Article 2: Question 2 -->
+        <article>
+          <img src="https://images.prismic.io/prismic-main/Zoa6gh5LeNNTwzHJ_web_design_wireframe.jpeg?auto=format,compress" alt="Wireframe example image" />
+          <h2>2. What is the purpose of a wireframe?</h2>
+          <p>A wireframe is a visual guide that represents the skeletal framework of a website or application, used to plan layout and functionality.</p>
+          <a href="https://balsamiq.com/blog/what-are-wireframes/" target="_blank">Read more</a>
+        </article>
+
+        <!-- Article 3: Question 3 -->
+        <article>
+          <img src="https://miro.medium.com/v2/1*K9scAx1Ezd-KJFabaYseCw.jpeg" alt="GitHub Branch explanation image" />
+          <h2>3. What is a branch in Git?</h2>
+          <p>A branch in Git is a separate line of development that allows you to work on different versions of a project simultaneously without affecting the main codebase.</p>
+          <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches" target="_blank">Read more</a>
+        </article>
+
     </main>
     <footer>
       <p>

Wireframe/style.css

@@ -87,3 +87,26 @@ article {
     grid-column: span 3;
   }
 }
+
+article:nth-of-type(2) img,
+article:nth-of-type(3) img {
+  height: 400px;
+  width: 100%;
+  object-fit: cover;
+}
+
+header {
+  text-align: center;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  text-align: center;
+  font-weight: 500;
+  border: solid black 2px;
+  left: 0;
+  right: 0;
+  background-color: white;
+  color: black;
+}