CodeYourFuture · hackertainment · Jul 27, 2026 · Jul 27, 2026 · Jul 27, 2026 · Jul 27, 2026
diff --git a/Wireframe/image/article_mermaid.png b/Wireframe/image/article_mermaid.png
diff --git a/Wireframe/image/article_readme.png b/Wireframe/image/article_readme.png
diff --git a/Wireframe/image/article_wireframe.png b/Wireframe/image/article_wireframe.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -7,24 +7,45 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <header>
+    <header class="header">
       <h1>Wireframe</h1>
       <p>
         This is the default, provided code and no changes have been made yet.
       </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>
+    <main class="main">
+      <section class="content">
+        <article class="article">
+          <img src="image/article_readme.png" alt="a readme file" />
+          <h2>The purpose of a README file</h2>
+          <p>
+            You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it...
+          </p>
+          <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
+        </article>
+      </section>
+
+      <section class="content">
+        <article class="article">
+          <img src="image/article_wireframe.png" alt="a wireframe" />
+          <h2>The purpose of a wireframe</h2>
+          <p>
+            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>
+          <a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
+        </article>
+
+        <article class="article">
+          <img src="image/article_mermaid.png" alt="a git branch" />
+          <h2>A branch in Git</h2>
+          <p>
+            In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code...
+          </p>
+          <a href="https://www.w3schools.com/git/git_branch.asp?remote=github">Read more</a>
+        </article>
+      </section>
     </main>
-    <footer>
+    <footer class="footer">
       <p>
         This is the default, provided code and no changes have been made yet.
       </p>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -3,6 +3,130 @@
   1. Lay out the top-level elements: <header>, <main>, <footer>
   2. Lay out the articles within <main>
   3. Style individual elements
-
-  Please REMOVE this comment before submitting your work.
 */
+
+ :root {
+   --grey-dark: #292b2c;
+   --grey-light: #e4e4e4;
+   --white: #fff;
+ }
+
+body {
+  margin: 0;
+  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  color: var(--grey-dark);
+  font-size: 1rem;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.header,
+.main,
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+
+/* Header */
+
+.header {
+  align-items: center;
+}
+
+
+/* Main */
+
+.main {
+  margin-bottom: 3rem;
+}
+
+
+/* Session */
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+
+/* Article */
+
+.article {
+  border-style: solid;
+  border-width: medium;
+  border-color: var(--grey-light);
+  padding: 1rem;
+  flex: 1;
+}
+
+.article img {
+  width: 100%;
+}
+
+.article h2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+}
+
+.article p {
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.article a {
+  background-color: var(--grey-light);
+  color: var(--grey-dark);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--grey-dark);
+  border-radius: 4px;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+}
+
+.article a:hover {
+  background-color: var(--grey-dark);
+  color: var(--grey-light);
+  border-color: var(--grey-light);
+}
+
+
+/* Footer */
+
+.footer {
+  background-color: var(--white);
+  border-top: 2px solid var(--grey-dark);
+  text-align: center;
+  font-size: 0.85rem;
+  position: fixed;
+  bottom: 0;
+  min-width: 100%;
+}
+
+
+/* Media queries */
+
+@media screen and (min-width: 992px) {
+  .content {
+    flex-direction: row;
+  }
+
+  .main {
+    padding-right: 2rem;
+  }
+}