CodeYourFuture
diff --git a/‎Wireframe/index.html‎
Lines changed: 36 additions & 8 deletions b/‎Wireframe/index.html‎
Lines changed: 36 additions & 8 deletions
diff --git a/‎Wireframe/style.css‎
Lines changed: 22 additions & 2 deletions b/‎Wireframe/style.css‎
Lines changed: 22 additions & 2 deletions
@@ -4,52 +4,80 @@
     <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>
-        Webpage explaining the purposes of a README file, wireframe and a branch
-        in Git.
+        Webpage explaining the purposes of a README file, Wireframe and Git
+        Branches.
       </p>
     </header>
     <main>
       <section>
         <article>
-          <img src="placeholder.svg" alt="" />
+          <img
+            src="https://freerangestock.com/thumbnail/119557/web-developer--web-development--programmer--programming.jpg"
+            alt="web-developer"
+            width="200"
+            height="350"
+            loading="lazy"
+          />
           <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">Read More </a>
+          <a href="https://en.wikipedia.org/wiki/README"
+            >Read More about README files</a
+          >
         </article>
       </section>
       <section>
         <article>
-          <img src="placeholder.svg" alt="" />
+          <img
+            src="https://freerangestock.com/thumbnail/130564/website-wireframe.jpg"
+            alt="wireframe example"
+            width="200"
+            height="250"
+            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="">Read more</a>
+          <a href="https://en.wikipedia.org/wiki/Wireframe"
+            >Read more about Wireframes</a
+          >
         </article>
       </section>
       <section>
         <article>
-          <img src="placeholder.svg" alt="" />
+          <img
+            src="https://images.unsplash.com/photo-1556075798-4825dfaaf498?q=80&w=1476&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D.jpg"
+            alt="branches in development project"
+            width="200"
+            height="250"
+            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/Git_branch">Read more</a>
+          <a href="https://en.wikipedia.org/wiki/Branching_(version_control)"
+            >Read more about Git branches</a
+          >
         </article>
       </section>
     </main>
 
@@ -31,10 +31,18 @@ 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 {
@@ -50,9 +58,11 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
+  position: center;
   bottom: 0;
   text-align: center;
+  border-top: var(--line);
+  padding: var(--space);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -65,8 +75,11 @@ main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
+  align-items: stretch;
+  gap: 20px;
   > *:first-child {
     grid-column: span 2;
+    margin-bottom: var(--space);
   }
 }
 /* ====== Article Layout ====== 
@@ -78,7 +91,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 +102,8 @@ article {
     grid-column: span 3;
   }
 }
+article h2,
+article p,
+article a {
+  margin: var(--space);
+}