CodeYourFuture · alexandru-pocovnicu · Jan 1, 2026 · Jan 1, 2026 · Jan 1, 2026 · Jan 1, 2026
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,26 +8,64 @@
   </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="https://docs.github.com/assets/cb-55933/mw-1440/images/help/repository/readme-links.webp"
+          alt="GitHub README for Scientist, a Ruby library for refactoring critical paths, showing the 'How do I science?' section with explanation of testing refactored code under load"
+        />
+        <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="https://balsamiq.com/assets/learn/articles/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="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS8AAACmCAMAAAC8yPlOAAABg1BMVEX///8AAADwUTOp0Y6+zrXn7eXMAMxBMACdw+b7+/vj4+Pm5ube3t7u7u66urrd3d3BwcHPz8/29vbr6+vLz9csEQDHx8fU1NSzs7O9vb1vb28kJCS1tbWmpqbQ0NAvGAA9KwA4JABMTEw8PDzvRB+Xl5eGhoZ4eHjvQhujo6OUlJT+9PItFAAyHABGRkZjY2MvLy9dUTfvOwteXl4gAAD2mIoPDw8VFRX0dmKdpLWBr2Gt1ZLf0d7p3+iYAJX6yMGoopj1i3uPiHtPQB4TAAAeHh5+iZ9lco66v8rP2cqNuW+dtJCAoWyldaHHrMSWXJK7mrjRvM+6ALmlAKOLAIeNO4j3oJSYkoV7cmFtY07yYkn0fWtTRir4r6QoBwCBeWn73Nfza1RRcptvk7pBX4gfPGpUYH56hZ1ri7Ckq7qLsdeuv6SWwXl4nmBpl0mGrXFqAGJndoYuUVRAZFR+TXFphXM1Ul9tOWGzoq5/hWmrwJ2sg6mPq36YVpOQKIugeJuWOpJsz5oiAAASMklEQVR4nO2di3/TRrbHZ0iyrl6WNIol2bHyJHbk5gWmoXmSQsmDkJAALWRLYVu6pV1Ctrvbe+/e0m37p++ckWTLtmRLjhzbxL9PS+TRsTL+6syZMw85CA8URwijgaJrwCueBrziacArnga84mnAK54GvOJpwCueBrziacArnq4Sr48/jmjIk9BTV4jXlzdv3oliZ2Qyt56Fnbw6vL6cu3YtErAbk6nULSnk5JXh9QnFFQ1YivLKyHAkb28LdSevDK+vrl+LCOzu/OTUAjvafnlLrTt5RXhRSp9FBvbsxnOeHZxOTlxNXp/c/IQCu3k9apN0JGZSE+N1ZVeCF41dcxTYnTt/jgNMp3FsweRF2R/7rwIvFuoBGEKBTZLbfn5vMnV6F2Si5xRTal7TPl+gP1ML8/M1ycUV4OX0jNc+g+OvAoAZCwuToCmqzCvWPaYymnZrCnjR0sy2z/jD5+XiuvZn3ws/MO3lZGoyc2+KudOLbbR9D/IJgdx9Rn9Ovnr27K7uu9oHz8vDde06c7DGXvLuVGrylEMoPZ9aYGS4DPCiB9TBJoy6y33ovCq4KKOPEUX22VxdL8miFRycTk7eg5/Ez+uK5RM+XNfmPkaQVnz9dW0v+ZJSYQfU0V7CQPtivDgumZoXFqPZ8SteFeWL/+YvfbiA15zTS9YAo1FqnqWnNG5l4FdegBcpwJLuElxubBql4cUK/X/ZObsEr3N8tKrnVqLZGVhxDkw8G+0dTeTHxXhduw7FX7Mm+aljA/HrharJz+nPG1DQPi8Z44Ki22NgQnnxtmWWsW1Zeef0zFjetDEOG8rXKnc72kes8BJydMyrYzna24LlRvd6Xp+xl186NtIE7R8nMvMwK8Gy+bZ5cR4L+ASUF6jgM5+ZYZ8vmhvE5sV0QV7o0+v1vGjIvzNX6S5B2guae9H/FjJZ9rptXiXss67wqkYVxovgAg06ZTQ7U0JkdnpmCe6RsYTM6WmLWWXLizmR8SrMlCvdswSmRsXUZIXW9KIle7y0soxKZbxUtKmjL82U/VlQdPmA3QRe165T1eBCxtTkjVenp6+23VlVP6+FdN31mvFaue97EcYrD1BVvISXyggvz1oz2IDCMi5MM88r4PLsNCaU1/3F0krFXfDMrLWMRQhTOTClUFARLxXwmMcLHI2eKOdKNC4smYU2+/EqMMrrpnfsx/UytVATUlj+BSW0A5i8pxjmtu9kE14czsHlVFU1QnjdL5Vy7JOqGMPNYd4D/pbG0BvO0EsL8BJlKS9col7FXiHXlINXeQwXXl7xTBc9XszRnPZYukjO4wGb+wtCf5lrwIUWaOC6d+P0+d3tPLuZ27QDSE292kboFT2YXJhYmPJdrQkvgotgwDY9BfPC09OL2PGvqt+O5YAXzz4mh2zszlA6/eNY2f8b4BfksYYcIhYzlWt4ZcFb6Zn6ZhFHLrCv2HEDLnILRols+LiQSVFit9hocupzgrTMFBwtfO5LAZq1R8w+HEddA4W3R26ZupbqRjqrPDaGGS/a0tAsPVNpRk68n5n23myDaYXXLPa6EqOGl8J4oTK+b8XmVNGn1fThm3pcjhd5mqQJ2IsbTPdog5Genb648SrtXy1qxmvZPdWUF2WjeLzGsKUbtyPxug2m9bzg0oG8kJzDM7EY1YgBm7vT0DM6l15ITabmX2bmYcA9oYRcwlMzXiaEHNSKV77Cy/lwYzW8bOw6cy2vNItLtbwsZhrMy+1X2pUD7JtvAnDR3hCGj5zEKzDdZba4UtN8dQYXgE65GS/pPi1xeGXh3/Ha9ijgJXiXUMfLBA56LS8e3qnhGl4qhpwILq7j+qmCOKr2knW4UJq6lXt4g/pZq6yl+XiIjnjGZpzxz4oz/vPzWnZ2wBrwseD30Py2sISXlwACuA/wopH8dhl6zyX2e5ZdXmBaxss5IAdRnvWARbxcxiXsZI2uo2Fcnqb3rZjDlcjXljxg9bhQeiI1ddfQNMGAgdFU4Jt9ajHeFu1CwWbdrDsIUn3ZvG5RsRuildiMCDdbnOUU+nn5EksvWHMeLxQtylixfVehzYCaoiwlIjLTcWaqFAs0R3U7VIkdaIWiijirWMyji8kB1oALkfmp1NREJpOZoD9ftvThD3w+xycA1oiL3pHTlzTFotnEfOZV66Hw1eGFPp27GYCLiqjm9vZ23ogyf3SFeKE7kVcew3WVeCWhAa94GvCKpwGveBrwiqcBr3ga8IqntnkZ9qwddwQs5dqbhO8htclLoqPw+xgvhm+8rpVmgaVemY7uW7XJC7MJCctbuW0pZ8IC1e+e7T+1x6uAnX2KbPKFo64jeyQE2XE5gggbj4nOa5eX645uIZLA3ini5Ijr5F1We7w8v5Jgii83rWKMZwCBfJsewSqJjQ1MG18O5scK7qLJIjWHWXiT7TFAMMNlLDrzZ9TeWVXpebXFq7osBuCKGGdJGhZHCC5zNEiVoKVi2zC05XHwRQMJNs7KGn2fCXOvBYkzwVymbDUZOIkA0k5oZ0tH1RYv0Z3YR2hsBXhBUypi4q4TFtlcfGVekQALZ4GN8WJLk9RUo7wAu02PFNwfrfHCvG7fd/g4K4WLy0o+n85RchZ2QxVv6LCi60zoAy+JLfCicay4S41ZGtoIvtAK4yWqLV7OSi57e9njpdMec2xlkWp6GvyLTVXabANUDS8Zs5llnh16vJBUxjjeCqM86p8MtbLs/ojVknEraq4TS23Ge3czlwEsHF7QA85U9sQ5vBTmS7W8NMe/YIXExwtyWdxq7a8qsvPt69c/7I5WCuxxw+SzeklHaVs1WR6t9BCvEnbW6Wag2RUZiyXsXzxyeLHFWuLwAii++AWmNbzoiRIspkeR8N1HTK9XvRITWYqeN5U0MWU9LZM8ES6wXNlEbear93HB4JVlho32j2naARZg8XBR5KR8yeNl0TbGjwEvGto11eFl46Kg2QCnymvWhpCnU7aREmAXFwW255ZoiFM4hSZ/ikYczxJ7yb8QV4SEaZkNB4tYgX2ZcGiMQTHkBk68hx2b5sqsc1R2869ZsIEygy01guvpUFRCEXmt/s3j9dF37VT+Imp/fkLwntqF+FV5glcSnDDs7T3jvTYmCdVSwR0NkOq/Gu9/W3N9W8H10evR1uaJKoH5nOJlJubS6N73f63y+uH70SB1pCkyJcArd2m8hJ03q6Pa6HeteO2t7uzstb5cO0qAl24nUZHWEnd/dPxmN0p7HN3Z6YSX9c/86k4leYgY78mbH5OvRb/wIrta9UVjPhGs0d3E69EnvLSaTy5953jYD60ciNtNuk32By9S5yjc6rc/vP52N0IysZvwJFF/8ApoV5oaiQSXcJPsC16rQbNjEdcC5NXWNjHUD7yknaDSqGsnO9GeB4uofuC1E9jyovLiAmm3qz7gFfKBI6/NJZq39gGvPTGwODIvIcm0tQ94vQkujr72G3KBttQHvELij8rzvBipqSUZwHqfFwlJCKL7148JLtb1Pi8xZIwYnddogpOKvc9rtCkvjnAtZ2XlBOfC+oBXiHeogiDwsCxkIVWUdYMLXY7jrxSvvRBejn/JsmpqJpcXdD50hVxLMKHofV6rIeOZGHvJEuwge59X2IeNwSvBBOxK8LpK/hXWPTr5arTZwAQTip7nFdqW4uyFTa5B9jovLXS6Lw6v1cQ2Gvc6r/DpZAeBLssCMiQi86TZ0wCJzUr3OK+98FTTEGVZJnklXeJt2eZVkm3vOvGUMK/9/f0kZ+f4lj0bx3GwMMkRSXLb3Mj+/kij3RutvoTbH96Pv3iUKK+35w/OHqz9mhgxLX4zGnm3dna29m6/4UT9SuQB1PX8IO71k+T18Gx9fWhofeg84P62Izk+ruE1VoX1tbcNp3b94wTufIjZDb2L6WIJ8jo4o1UArZ8ncr3V+CthI+deFdYaPeyNL4Y9HPL0MN5vSI4X8eo6NHQ2fPHLje628U18VQzr7xrP7r3xXGz/gVfXILDNlByv4bNqZf9+wWtJP75pq0Nbq9yy9bWgoLC642T6B0NVxQthF+d18G6Y6aGvDj8dK/vD7en771f/8c9/vY3/xv3s0Rc/V3gNnR0EWv3PP/+xurf6v1W79XdhF3z4a0d4DR+MMPnv2f+dbBz//vO/R9rQ3l4771J+Pjza0I7+v+pfD4bDbDWxhtfDMLtfGvuMJNvjvq89Ondm4/A4oWu30MajI+fg3Ncem2U1v/jubRCVcCXYP1Yqu/7Ai6Gbj06Sunq4uMMj79Dn4037vZFKoFuvJj8yklhS2zR9TJDXsFuJdX9dj94ndfkwbT6qplBcJZ9okQN6uc/62S+VsrRuGbqsjttaXsyHDUaTzFffrtEMcH39Qc2t3XyU2PUDtXHofzVyfgZVaJ0yH6yB3fqar3dU8qaattVsVrP00LWARMdDI7+er50/rEu+Ng+DjZNRw9Xfvltbe3fQOmvffwh19SdfMkdEU1cVWcjzoblf0vMTAX680cGozwV4Lwnen9Kodr6aOmleQXU93kz0V/h1GBCcuajL/+1sE0iaV+A961gI2zgKKOx/XiedyioCb0T/8+qUg20GudeHwKtDEex9YDfo8uIlZycKCU1AHTsDni6k1dYIaZiDbVTivAQqTcxaskB0QcsjEwgGO8KFFZKpwE4UgdiKmSZpTc2HPsnN6iqZulkSdGQZIorwbUjJ+xfHcUgULFMXTCltaSa7ix3JwUhwosKJUAdOU3WeUFg6Px6ymsazusJX+yKdyIIs1v8xvgBdTnvsDK+N4G7kA4hfqCOjyJONwOI+5EUM3nl2W3ALOsLrKLgX4dyVXF5CnA5fbm6EtkdQVjZkpEtkXGi64usqcV6iKNJQYFhmliiGqiCdfQ9EcE92QYXwQjrUgZjmbFZSJFtFekgcN5hdXrdmBQuVRFWK8J3enfEvjVNliTeQoWg665yOE32Ix9VxcL/n+hehgZxTkWaE7jqvtEeacnCIIyTCwuklxa+QUHMxhTTyPoxfDepIAhbS6bq8ZMhXBfgSuwj5qsohgZAIu3gS5yVRETFvGbxkQr5qOQQ7kFCEpF+IM6AOnKWYJrElvUm+yuycfFWz5e7kqwR48ZJlqmJeyppuvtqJgB8W7jkD6sBphioQ2t/ovBEyzmF15SRJM6h/iTRf7Ub/GFK+mfykYdgg/kOIXx2YogidJHJ5adAKOfivefySBQ06dCR1Z7zN/hUVSxSIqUlpZLozrok7WOgNcHhxtpJXSEkaN1E2JC45vEzVLGlFyezOeJvQHFDkRd62dJWNty1vhvp9snM6TS7HQx2IACsXWZRWeD1kQp/VVdM0mihqnCEYYoSvWLvE/ZiNDrF5shElj908OWno6U86M0PUUpfIq34t5+jpk8ePt/7TKmhs/EbNnvxRm/BudHwZOESXud+XPPJH3sPHf2J62rydHj9xzLb84f2kW7gueX/0YfVDH7m4KLBmw7aNJ57ZVpXr+y41RnTp+8mPDr1P/fRPFTXrOf+omv3HLTp51Ln1zJa69P33x4cn4E8bj6sgfgu3lp5UzbagYPP4sBND98jqwvMKG+8PD49/2vKBSIcp+28f1p8e0TcedWJiKIa69XzH7z4QW4LAB0vY85k97apjueoWr01fQ/si3Iz43fDyaheurj0/9FuFw+NmuwUeVXl1LYfwq2u8NrZq3EvOsskUXx5P2PeVS5V+9GlP/DmB7j2fduIAe/wF46Drkqnwpikb43lVYd/m7aw+bDrAHj+NMHlwCeri83za71tbW3+4qacicQU9X1KIkk2jQh6Wldw/VUyOn25t/XZJO61bqrvPP1YnDmhDHJflLOH1cQHJbKKADzDrurrLK+IMZw/9cY++4DXwL1cDXvE04BVPLi9SSa2CcyzXjP0pgqY7BjuvLvMSnK2AeV3l0oJoorxqBPgczLPLvJY2s7qkiEbeSzW6oC7zgo2AHBGyWUOjsNKCohoBi6YOQokoqiBlkU7NuuZgPdEeW2kQv1wNeMXTIF+NJ2dSsKWZGM3sMjTwr3jqC16D+OXK5SVqNFPVIBHVfLlrvRlniM7DjXwXHa7LvNhuRGLm81nJFuDRFT3o7/6y+KVpumWmJVPWFdTsq6s6qy7zIkySShNRHekKrxpywA4ypz0SYsiSpCJDEdRBvtpMg/jlasArnga84omDmYfWNDj2UOUl1Ke1evz7HntOA17xNOAVTwNe8TTgFU8DXvFEeQ0UR/8FZObn2m9p42IAAAAASUVORK5CYII="
+          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>Mob:123456</p>
+      <p>G-mail:[email protected]</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -27,20 +27,38 @@ As well as useful links to learn more */
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
-  background: var(--paper);
+  background-color: rgb(235, 219, 194);
   color: var(--ink);
   font: var(--font);
+  margin-bottom: 9rem;
 }
+
+header {
+  margin-bottom: 5rem;
+}
+
+h1 {
+  margin-bottom: 5rem;
+  text-align: center;
+}
+
 a {
+  background-color: #4A90E2;
+  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%;
   object-fit: cover;
 }
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -50,9 +68,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 +100,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;
 }