Added background color to footer, that it shows above the context while being fixed

Giontr · Giontr · commit ef20f276cd55 · 2026-05-25T22:30:15.000+01:00
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" />
@@ -10,51 +10,71 @@
     <header>
       <h1>Code Hub</h1>
       <p>
-        Learn to code with hands-on projects and expert guidance. Join our community of developers
+        Learn to code with hands-on projects and expert guidance. Join our
+        community of developers
       </p>
     </header>
     <main>
       <article>
-        <img src="Readme.png" alt="README file illustration"/>
+        <img src="Readme.png" alt="README file illustration" />
         <h2>What is a README file?</h2>
         <p class="intro">
-          A README is the front door of any software project — the first document a visitor reads when they encounter your code.
+          A README is the front door of any software project — the first
+          document a visitor reads when they encounter your code.
         </p>
         <p class="content">
-          Typically named README.md and written in Markdown, it lives at the root
-          of a repository and renders automatically on platforms like GitHub. Its core
-          purpose is to answer three questions immediately: what does this project do,
-          how do I get it running, and how do I use it?<br>A well-crafted README...
+          Typically named README.md and written in Markdown, it lives at the
+          root of a repository and renders automatically on platforms like
+          GitHub. Its core purpose is to answer three questions immediately:
+          what does this project do, how do I get it running, and how do I use
+          it?<br />A well-crafted README...
         </p>
-        <a href="https://en.wikipedia.org/wiki/README" target="_blank">Read more</a>
+        <a href="https://en.wikipedia.org/wiki/README" target="_blank"
+          >Read more</a
+        >
       </article>
       <article>
-        <img src="Wireframe1.png" alt="Wireframe illustration"/>
+        <img src="Wireframe1.png" alt="Wireframe illustration" />
         <h2>What is a WIREFRAME?</h2>
         <p class="intro">
-          A wireframe is a skeletal blueprint of a digital interface — a low-fidelity sketch that maps out layout and structure before any visual design begins.
+          A wireframe is a skeletal blueprint of a digital interface — a
+          low-fidelity sketch that maps out layout and structure before any
+          visual design begins.
         </p>
         <p class="content">
-          Think of it as the floor plan of a building: it shows where the rooms are, how they connect, and how large each space is — but says nothing about paint colours or furniture. In UI/UX design, wireframes...
+          Think of it as the floor plan of a building: it shows where the rooms
+          are, how they connect, and how large each space is — but says nothing
+          about paint colours or furniture. In UI/UX design, wireframes...
         </p>
-        <a href="https://en.wikipedia.org/wiki/Website_wireframe" target="_blank">Read more</a>
+        <a
+          href="https://en.wikipedia.org/wiki/Website_wireframe"
+          target="_blank"
+          >Read more</a
+        >
       </article>
       <article>
-        <img src="git-branch.png" alt="Git branch illustration"/>
+        <img src="git-branch.png" alt="Git branch illustration" />
         <h2>What is a BRANCH in Git?</h2>
         <p class="intro">
-          A branch in Git is an independent line of development — a lightweight pointer that lets you work on changes in isolation without affecting the main codebase.
+          A branch in Git is an independent line of development — a lightweight
+          pointer that lets you work on changes in isolation without affecting
+          the main codebase.
         </p>
         <p class="content">
-          Imagine a river that splits into a side channel. Work can proceed along the side channel independently; later, the two streams can be merged back together. In Git, this is exactly what a branch does: it diverges from a point in the commit history so
+          Imagine a river that splits into a side channel. Work can proceed
+          along the side channel independently; later, the two streams can be
+          merged back together. In Git, this is exactly what a branch does: it
+          diverges from a point in the commit history so
         </p>
-        <a href="https://en.wikipedia.org/wiki/Branching_(version_control)" target="_blank" >Read more</a>
+        <a
+          href="https://en.wikipedia.org/wiki/Branching_(version_control)"
+          target="_blank"
+          >Read more</a
+        >
       </article>
     </main>
     <footer>
-      <p>
-        &copy; Giorgi Natriashvili. All rights reserved.
-      </p>
+      <p>&copy; Giorgi Natriashvili. All rights reserved.</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -25,6 +25,8 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  height: 100%;
+  margin: 0;
 }
 header {
   text-align: center;
@@ -47,14 +49,17 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  flex: 1;
+  padding-bottom: 100px;
 }
 footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   text-align: center;
-  padding-bottom: var(--space);
+  padding: 20px;
+  background: var(--paper);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
