final commit

Author: vmoratti

Wireframe/index.html

@@ -12,13 +12,10 @@
   <header>
     <h1>Wireframe</h1>
     <p>
-      This page will show:
+      This page will show you the purpose of README file, the purpose of
+      Wireframe and what is branch in Git. It will include images and links to read more about each topic.
     </p>
-    <ul>
-      <li>Purpose of README file</li>
-      <li>Purpose of Wireframe</li>
-      <li>What is branch in Git</li>
-    </ul>
+
   </header>
   <main>
     <article>
@@ -35,7 +32,7 @@ <h2>
       <a href="https://en.wikipedia.org/wiki/README">Read more</a>
     </article>
     <article>
-      <img src="wireframe.png" alt="an image showing a hand drawn sketch of what a wireframe looks like" />
+      <img src="wireframe.jpg" alt="an image showing a hand drawn sketch of what a wireframe looks like" class="wireframe-image"/>
       <h2>What is a Wireframe?</h2>
       <p>
         A wireframe is a visual guide that represents the skeletal framework of a website or application.
@@ -44,14 +41,16 @@ <h2>What is a Wireframe?</h2>
       <a href="https://en.wikipedia.org/wiki/Wireframe">Read more</a>
     </article>
     <article>
-      <img src="branch-image.jpg" alt="an image showing a  diagram of a Git branch" />
+      <img src="branch-image.jpg" alt="an image showing a  diagram of a Git branch" class="article-image" />
       <h2>What is a Branch in Git?</h2>
       <p>
         A branch in Git is a lightweight movable pointer to a commit.
         It allows you to diverge from the mainline of development and work on features, experiments, or bug fixes
         without affecting the main codebase.
       </p>
-      <a href="https://en.wikipedia.org/wiki/Git_branch">Read more</a>
+      <a
+        href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell#:~:text=A%20branch%20in%20Git%20is,Note">Read
+        more</a>
     </article>
   </main>
   <footer>

Wireframe/style.css

@@ -25,22 +25,27 @@ As well as useful links to learn more */
   --container: 1280px;
 }
 
- General rules for basic HTML elements in any context */
-body {
+General rules for basic HTML elements in any context */ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  max-height: fit-content;
 }
+
 img,
 svg {
   width: 100%;
+  height: 250px;
   object-fit: cover;
+  
 }
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -49,6 +54,7 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
 footer {
   background-color: black;
   color: white;
@@ -71,10 +77,12 @@ main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
-  > *:first-child {
+
+  >*:first-child {
     grid-column: span 2;
   }
 }
+
 /* ====== Article Layout ====== 
 Setting the rules for how elements are placed in the article. 
 Now laying out just the INSIDE of the repeated card/article design.
@@ -86,10 +94,18 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
-  > * {
+
+  >* {
     grid-column: 2/3;
   }
-  > img {
+
+  >img {
     grid-column: span 3;
+    
   }
-}
+}
+
+header {
+  text-align: center;
+  padding: var(--space);
+}