CodeYourFuture · LesyaLyan · May 26, 2026 · May 27, 2026 · May 27, 2026 · May 27, 2026
diff --git a/Wireframe/images/m_Web_Developer_-_Programmer_-_Programming.jpg b/Wireframe/images/m_Web_Developer_-_Programmer_-_Programming.jpg
diff --git a/Wireframe/images/s_1867746.jpg b/Wireframe/images/s_1867746.jpg
diff --git a/Wireframe/images/yancy-min-842ofHC6MaI-unsplash.jpg b/Wireframe/images/yancy-min-842ofHC6MaI-unsplash.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,98 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
+    <meta
+      name="description"
+      content="Webpage explaining the purposes of a README file, Wireframe and Git Branches."
+    />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Webpage explaining the purposes of a README file, Wireframe and Git
+        Branches.
       </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>
+      <section>
+        <article>
+          <img
+            src="images/m_Web_Developer_-_Programmer_-_Programming.jpg"
+            alt="web-developer"
+            width="970"
+            height="538"
+            fetchpriority="high"
+          />
+          <h2>README file</h2>
+          <p>
+            A README file is a document that provides information about a
+            project, such as its purpose, how to use it, and any other relevant
+            details. It is usually the first thing people read to understand the
+            project.
+          </p>
+          <a
+            href="https://en.wikipedia.org/wiki/README"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Read More about README files</a
+          >
+        </article>
+      </section>
+      <section>
+        <article>
+          <img
+            src="images/s_1867746.jpg"
+            alt="website wireframe"
+            width="640"
+            height="426"
+            loading="lazy"
+          />
+          <h2>Wireframe</h2>
+          <p>
+            A wireframe is a visual guide that represents the skeletal structure
+            of a website or application. It outlines the layout, content, and
+            functionality without the final design elements.
+          </p>
+          <a
+            href="https://en.wikipedia.org/wiki/Website_wireframe"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Read more about Website Wireframes</a
+          >
+        </article>
+      </section>
+      <section>
+        <article>
+          <img
+            src="images/yancy-min-842ofHC6MaI-unsplash.jpg"
+            alt="branches in development project"
+            width="640"
+            height="424"
+            loading="lazy"
+          />
+          <h2>Branch in Git</h2>
+          <p>
+            A branch in Git is a separate line of development that allows you to
+            work on different features. It enables multiple developers to
+            collaborate on a project without interfering with each other's work.
+          </p>
+          <a
+            href="https://en.wikipedia.org/wiki/Branching_(version_control)"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Read more about Git branches</a
+          >
+        </article>
+      </section>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>&copy; 2026 Semantic HTML Wireframe Project</p>
+      <p>Made by Lesya Lyaisyan.</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -31,15 +31,23 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+header {
+  text-align: center;
+  padding: var(--space);
+}
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  display: inline-block;
+  margin-top: auto;
+  margin-bottom: var(--space);
 }
 img,
 svg {
   width: 100%;
   object-fit: cover;
+  aspect-ratio: 16 / 9;
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
@@ -52,7 +60,11 @@ main {
 footer {
   position: fixed;
   bottom: 0;
+  width: 100%;
   text-align: center;
+  background: white;
+  border-top: var(--line);
+  padding: 2px;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -65,8 +77,12 @@ main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
+  align-items: stretch;
+  margin-bottom: 100px;
+  gap: 20px;
   > *:first-child {
     grid-column: span 2;
+    margin-bottom: var(--space);
   }
 }
 /* ====== Article Layout ====== 
@@ -78,7 +94,9 @@ article {
   border: var(--line);
   padding-bottom: var(--space);
   text-align: left;
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   grid-template-columns: var(--space) 1fr var(--space);
   > * {
     grid-column: 2/3;
@@ -87,3 +105,8 @@ article {
     grid-column: span 3;
   }
 }
+article h2,
+article p,
+article a {
+  margin: var(--space);
+}