CodeYourFuture
diff --git a/‎Wireframe/index.html‎
Lines changed: 12 additions & 12 deletions b/‎Wireframe/index.html‎
Lines changed: 12 additions & 12 deletions
diff --git a/‎Wireframe/style.css‎
Lines changed: 14 additions & 1 deletion b/‎Wireframe/style.css‎
Lines changed: 14 additions & 1 deletion
@@ -7,37 +7,37 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <header>
-
-    </header>
-
-
+    <div class='header'>
+      <h1>Web Development & Planning</h1>
+      <p>Here are some useful steps & information to help you get started with web development.</p>
+    </div>
+      <main>
+      <div class="top-article">
+         <img src="wireframe.png" alt="wireframe" />
       <h1>Wireframe</h1>
       <p>
         What is the purpose of a wireframe? Think of "Wireframe" as the  Architectural blueprint of a website or App.
         A visual guide that outlines the structure, layout and placement of elements on a website. 
       </p>
-    
-    </header>
-    <main>
-      <article>
+      </div>
+      <div class="left-article">
         <img src="placeholder.svg" alt="" />
         <h2>README File</h2>
         <p>
           What is the purpose of a README file? It serves as the introductory guide and intruction manual for a project,
           explaining what the software does, how to install and run it, and how others can contribute to it.
         </p>
         <a href="">Read more</a>
-      </article>
-      <article>
+      </div>div>
+      <div class="right-article">
         <img src="placeholder.svg" alt="" />
         <h2>Branch in Git</h2>
         <p>
           What is a branch in Git? A branch in Git is a seperate line of development that allows you to isolate your work,
           experiment with new features, fix bugs or make changes without affecting the main codebase.
         </p>
         <a href="">Read more</a>
-      </article>
+      </div>
     </main>
     <footer>
       <p>
 
@@ -74,7 +74,7 @@ Setting the rules for how elements are placed in the article.
 Now laying out just the INSIDE of the repeated card/article design.
 Keeping things orderly and separate is the key to good, simple CSS.
 */
-article {
+.left-article {
   border: var(--line);
   padding-bottom: var(--space);
   text-align: left;
@@ -86,4 +86,17 @@ article {
   > img {
     grid-column: span 3;
   }
+  
+  .right-article {
+  border: var(--line);
+  padding-bottom: var(--space);
+  text-align: right;
+  display: grid;
+  grid-template-columns: var(--space) 1fr var(--space);
+  > * {
+    grid-column: 2/3;
+  }
+  > img {
+    grid-column: span 3;
+  }
 }