diff --git a/Wireframe/Pic1.png b/Wireframe/Pic1.png
new file mode 100644
index 000000000..e6ad55cf3
Binary files /dev/null and b/Wireframe/Pic1.png differ
diff --git a/Wireframe/git.png b/Wireframe/git.png
new file mode 100644
index 000000000..203d064cd
Binary files /dev/null and b/Wireframe/git.png differ
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..18dca49b0 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,25 +8,43 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <h1>Wireframe Task</h1>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+      <article>  
+        <img src="wireframe.png" alt="An image of a wireframe template"/>
+        <h2>What is the purpose of a wireframe</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A wireframe is a simple diagram showcasing the UI of a webpage 
+           It shows where components should be 
+           in relation to each other and what, roughly, they should do.
         </p>
-        <a href="">Read more</a>
+        <a href="https://miro.com/aq/paid-search/wire-frame/"> Read More</a>
+        </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 
+          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>
+        <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>
+  
+        </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Created for WIREFRAME HTML and CSS task.
       </p>
     </footer>
   </body>
diff --git a/Wireframe/logo.jpg b/Wireframe/logo.jpg
new file mode 100644
index 000000000..95bde57f9
Binary files /dev/null and b/Wireframe/logo.jpg differ
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..941abc2d2 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,6 +30,9 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  margin:0;
+  padding:20px;
+  padding-bottom:80px;
 }
 a {
   padding: var(--space);
@@ -40,6 +43,7 @@ img,
 svg {
   width: 100%;
   object-fit: cover;
+  display:block
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
@@ -50,8 +54,9 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
   bottom: 0;
+  width: 100%;
+  padding:10px;
   text-align: center;
 }
 /* ====== Articles Grid Layout ====
@@ -79,6 +84,7 @@ article {
   padding-bottom: var(--space);
   text-align: left;
   display: grid;
+  background: white;
   grid-template-columns: var(--space) 1fr var(--space);
   > * {
     grid-column: 2/3;
@@ -87,3 +93,8 @@ article {
     grid-column: span 3;
   }
 }
+
+main article:first-child img{
+  height:300px;
+  }
+
