CodeYourFuture · alexandru-pocovnicu · Jan 1, 2026 · Jan 1, 2026 · Jan 1, 2026 · Jan 1, 2026
diff --git a/Wireframe/images/download.png b/Wireframe/images/download.png
diff --git a/Wireframe/images/readme-links.webp b/Wireframe/images/readme-links.webp
diff --git a/Wireframe/images/wireframe-example-plain.png b/Wireframe/images/wireframe-example-plain.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -8,26 +8,65 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Starting a project</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        The following page contains an introduction to a README file,a
+        WIREFRAME, and to GIT BRANCH.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img
+          src="images/readme-links.webp"
+          alt="Screenshot of a README for a repository. To the left of a section heading, a link icon is outlined in dark orange."
+        />
+        <h2>What is a README file</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file can be added to the repository to tell other people why
+          the project is useful, what they can do with the project, and how they
+          can use it.
         </p>
-        <a href="">Read more</a>
+        <a
+          href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
+          >Read more</a
+        >
+      </article>
+      <article>
+        <img
+          src="images/wireframe-example-plain.png"
+          alt="Wireframe mockup of a product page for a cushy fleece hoodie with image gallery, size selector, and add-to-cart button"
+        />
+        <h2>What is a WIREFRAME</h2>
+        <p>
+          A wireframe is the skeleton of your digital project. Think of it as
+          the foundation for your website, app, or dashboard. It focuses on
+          layout, and content placement—not on colors, fonts, or any visual
+          polish.
+        </p>
+        <a href="https://balsamiq.com/blog/what-are-wireframes/">Read more</a>
+      </article>
+      <article>
+        <img
+        src="images/download.png"
+          alt="Diagram titled ‘GIT Branch and its Operations’ showing master and two feature branches with colored nodes and commits, plus a git logo"
+        />
+        <h2>What is a GIT BRANCH</h2>
+        <p>
+          Use a branch to isolate development work without affecting other
+          branches in the repository. Each repository has one default branch,
+          and can have multiple other branches. You can merge a branch into
+          another branch using a pull request.
+        </p>
+        <a
+          href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
+          >Read more</a
+        >
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>Contact:</p>
+      <p>Phone:123456</p>
+      <p>G-mail:dfdfd@gmail.com</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -27,20 +27,51 @@ As well as useful links to learn more */
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
-  background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  margin-bottom: 9rem;
 }
+
+header {
+  margin-bottom: 5rem;
+}
+
+h1 {
+  margin-bottom: 5rem;
+  text-align: center;
+}
+
+article h2,
+article p,
+article a {
+  margin-left: 1rem;
+}
+
+article h2 {
+  height: 4rem;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
 a {
+  background-color: #000004;
+  color: white;
   padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+  border: none;
+  display: inline-block;
+  max-width: 7rem;
+  max-height: 2rem;
+  text-align: center;
+  text-decoration: none;
 }
 img,
 svg {
   width: 100%;
+ height: 280px;
   object-fit: cover;
 }
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -50,9 +81,13 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
+  background-color: aquamarine;
+  text-align: center;
   position: fixed;
+
   bottom: 0;
-  text-align: center;
+  left: 0;
+  right: 0;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -78,12 +113,10 @@ article {
   border: var(--line);
   padding-bottom: var(--space);
   text-align: left;
-  display: grid;
-  grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
+  display: flex;
+  flex-direction: column;
+}
+
+article a {
+  margin-top: auto;
 }