updated wireframe

Author: Asanda Dunn

Wireframe/Google for Education 2.pdf

@@ -11,6 +11,7 @@
       <h1>Wireframe Task</h1>
     </header>
     <main>
+      
       <article>  
         <img src="wireframe.png" alt="An image of a wireframe template"/>
         <h2>What is the purpose of a wireframe</h2>
@@ -20,27 +21,34 @@ <h2>What is the purpose of a wireframe</h2>
            in relation to each other and what, roughly, they should do.
         </p>
         <a href="https://miro.com/aq/paid-search/wire-frame/"> Read More</a>
-        </article>
+      </article>
+        
+        
         <article>
           <img src = "git.png" alt ="An image of a Git icon">
           <h2>What is a branch in Git</h2>
-        <p>A git branch is basically a separate workspace that 
+          <p>A git branch is basically a separate workspace that 
           allows you to work on a project with others without making any
           changes to the main directly. You can do all your work on 
           your branch and then merge it to the main branch
-        </p>
-        <a href ="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" >Read More </a>  
-      </article>
-        <article>
+          </p>
+          <a href ="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" >Read More </a>  
+        </article>
+        
+      
+      <article>
         <img src ="logo.jpg" alt = "A picture of a README template">
-      <h2>What is the purpose of a README FILE</h2>
-      <p>
-       The purpose of a README file is to provide information on what your 
-       project is about.
-       </p>
-       <a href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/">Read More</a>
+        <h2>What is the purpose of a README FILE</h2>
+        <p>
+        The purpose of a README file is to provide information on what your 
+        project is about.
+        
+        </p>
+
+        <a href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/">Read More</a>
 
-        </article>
+      </article>
+
     </main>
     <footer>
       <p>

Wireframe/Google for Education.pdf

@@ -53,11 +53,18 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
+h1 {
+
+  text-align: center;
+}
 footer {
   bottom: 0;
   width: 100%;
   padding:10px;
   text-align: center;
+  position: fixed;
+  background-color: white;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -70,10 +77,11 @@ main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
-  > *:first-child {
+  align-items: stretch;
+}
+main > *: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.
@@ -85,15 +93,23 @@ article {
   text-align: left;
   display: grid;
   background: white;
+
   grid-template-columns: var(--space) 1fr var(--space);
-  > * {
+  grid-template-rows:auto auto 1fr auto;
+}
+  article >*{
     grid-column: 2/3;
   }
-  > img {
+  article > img {
     grid-column: span 3;
   }
+article p {
+  margin-bottom: 0;
 }
-
+ article a {
+  margin-top:20px;
+ }
+ 
 main article:first-child img{
   height:300px;
   }