diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e53..351e35b2 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,26 +8,62 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1 >Understanding of basics in DEV</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+       Some good information about wireframe, README files and Git branches.
       </p>
     </header>
-    <main>
+    
+     <main class="page">
+
+
+
+       <article>
+        <img class="img" src="placeholder.svg" alt="an image of two triangle and a circle ">
+       <h2>What is wireframe</h2>
+       <p>Wireframes are used to plan and communicate the layout of a digital product, ensuring everyone understands the structure and functionality before moving on to more detailed design. </p>
+      
+         <a href="https://prismic.io/glossary/wireframe">Read more</a>
+
+      </article>
+
+
+ 
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+        <img src="placeholder.svg" alt="an image of two triangle and a circle">
+        <h2> what is README files</h2>
+        <p>READMEs provide a clear and concise introduction to the project, making it easier for users and developers to understand. 
         </p>
-        <a href="">Read more</a>
+      
+        <a href="https://datamanagement.hms.harvard.edu/collect-analyze/documentation-metadata/readme-files">Read more</a>
+
+      </article>
+
+      
+          <article>
+            <img src="placeholder.svg" alt="an image of two triangle and a circle">
+        <h2>what is Git branches</h2>
+        <p>In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the 
+           Think of it as a "parallel universe" for your code.</p>
+           
+         <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
+
+           
       </article>
-    </main>
+    
+
+     </main>
+
+
+
+   
+     
+   
     <footer>
+      <hr>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        If you need more details contact us.
       </p>
     </footer>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c..ab1f5aba 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -24,6 +24,10 @@ As well as useful links to learn more */
   --line: 1px solid;
   --container: 1280px;
 }
+
+header{
+  text-align: center;
+}
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
@@ -31,13 +35,20 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+
+.page{
+  margin: 100px;
+
+}
+
+
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
-img,
-svg {
+img {
   width: 100%;
   object-fit: cover;
 }
@@ -50,7 +61,6 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
   bottom: 0;
   text-align: center;
 }
@@ -86,4 +96,4 @@ article {
   > img {
     grid-column: span 3;
   }
-}
+}
\ No newline at end of file
