CodeYourFuture · Abduhasen · Jan 16, 2026 · Jan 16, 2026 · Jan 16, 2026 · Jan 16, 2026
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,31 +3,46 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>feature/wireframe</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Readme,Wireframe and Branch </h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        On this web page we try to explain and give some examples about Readme file,Wireframe and branch.
       </p>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+      <article class="sectionone">
+        <img src="https://as2.ftcdn.net/jpg/00/97/69/19/1000_F_97691998_FXnZYX8sgVNO64GijBtTKmgmfjpWQerW.jpg " alt=" image describe book selected for reading" />
+        <h2>Readme File</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file is meant to explain a project to anyone who opens it for the first time. Its purpose is to give clear context so the reader quickly understands what the project is, why it exists, and how to use or work with it.
         </p>
-        <a href="">Read more</a>
+        <a href=" https://www.makeareadme.com/">Read more</a>
+      </article>
+      <article class="sectionTwo">
+        <img src=" https://assets.visme.co/templates/whiteboards/thumbnails/i_Wireframe-Board_full.jpg " alt=" image describe wireframe in different platform " />
+        <h3>Wireframe</h3>
+        <p> 
+          wireframe is to visually outline the structure and layout of a product so designers and stakeholders can plan functionality and user flow before development begins.
+        </p>
+        <a href="https://balsamiq.com/blog/what-are-wireframes/ "> Read more</a>
+      </article>
+      <article class="sectionThree"> 
+        <img src=" https://as1.ftcdn.net/jpg/02/05/20/50/1000_F_205205040_52w4i7vH6WXAQVm4LjuRhapYhwBS9ks5.jpg " alt=" image describe the logo of branch" />
+        <h4>Branch</h4>
+        <p> 
+          A branch in Git is a separate line of development that allows you to work on features or changes independently without affecting the main codebase.
+        </p>
+        <a href=" https://www.w3schools.com/git/git_branch.asp ">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+         For more information visit our mobile app.
       </p>
     </footer>
   </body>
-</html>
+</html>      
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,82 +1,64 @@
-/* Here are some starter styles
-You can edit these or replace them entirely 
-It's showing you a common way to organise CSS 
-And includes solutions to common problems 
-As well as useful links to learn more */
-
-/* ====== Design Palette ======
- This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
- At work, a designer will give these to you based on the corporate brand, but while you are learning
- You can design it yourself if you like
- Inspect the starter design with Devtools
- Click on the colour swatches to see what is happening
- I've put some useful CSS you won't have learned yet
- For you to explore and play with if you are interested
- https://web.dev/articles/min-max-clamp
- https://scrimba.com/learn-css-variables-c026
-====== Design Palette ====== */
 :root {
-  --paper: oklch(7 0 0);
+  --paper: rgba(139, 139, 47, 0.562) ;
   --ink: color-mix(in oklab, var(--color) 5%, black);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
   --container: 1280px;
 }
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
+h1 {
+text-align: center;
+border-bottom: ver(--line);
+font-family: 'Times New Roman', Times, serif  ;
+}
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  font-size: larger;
 }
 a {
-  padding: var(--space);
-  border: var(--line);
+  padding: 15px;
+  color: rgba(10, 10, 10, 0.842);
+  border-radius: 20px;
+  background-color: rgba(160, 164, 49, 0.543);
+  border: 3px solid rgb(74, 48, 79);
+  font-weight: bold;
   max-width: fit-content;
 }
 img,
 svg {
   width: 100%;
+  border-radius: 15px;
   object-fit: cover;
 }
-/* ====== Site Layout ====== 
-Setting the overall rules for page regions
-https://www.w3.org/WAI/tutorials/page-structure/regions/
-*/
 main {
-  max-width: var(--container);
+  max-width: 1200px;
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
   position: fixed;
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  border-top: var( line);
   bottom: 0;
   text-align: center;
+  width: 100%;
 }
-/* ====== Articles Grid Layout ====
-Setting the rules for how articles are placed in the main element.
-Inspect this in Devtools and click the "grid" button in the Elements view
-Play with the options that come up.
-https://developer.chrome.com/docs/devtools/css/grid
-https://gridbyexample.com/learn/
-*/
 main {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
+  justify-content: space-between;
+   grid-template-columns: 0.5fr 0.5fr;
+  :first-child {
+    grid-column: span 3;
   }
 }
-/* ====== 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.
-Keeping things orderly and separate is the key to good, simple CSS.
-*/
 article {
-  border: var(--line);
-  padding-bottom: var(--space);
+  border: 2px solid;
+  margin-bottom: 40px ;
+  border-radius: 15px;
+  padding-bottom: 20px;
+  font-style: italic;
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
@@ -87,3 +69,9 @@ article {
     grid-column: span 3;
   }
 }
+.sectionOne{
+  margin-bottom: 40px;
+}
+.sectionThree{
+ margin-left: 50px;
+}