Add footer menu

app.css

@@ -14,10 +14,11 @@ html, body, .wrapper {
 }
 
 body {
-    height: 100%;
+    color: #fff;
     background: url(wallpaper.jpg) no-repeat center / cover fixed;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
     Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    height: 100%;
 }
 
 .wrapper {
@@ -34,7 +35,6 @@ body {
 }
 
 .header__title {
-    color: #fff;
     font-size: 60px;
     font-size: calc(50px + 16 * (100vw - 320px) / (960 - 320));
     font-weight: normal;
@@ -44,7 +44,6 @@ body {
 }
 
 .header__description {
-    color :#fff;
     text-shadow: #000 1px 1px 5px;
     line-height: 1.7;
     margin-bottom: 40px;
@@ -53,9 +52,38 @@ body {
 
 .main {
     margin: 0 0 50px;
+    padding: 0 10px;
     text-align: center;
 }
 
+.main p {
+    line-height: 1.7;
+    text-align: left;
+    text-shadow: #000 1px 1px 5px;
+}
+
+.main--fluid {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.main--background {
+    background: rgba(255, 255, 255, 0.8);
+}
+
+.main--background p {
+    color: #333;
+    text-shadow: none;
+}
+
+.container {
+    margin: 0 auto;
+    max-width: 700px;
+    padding: 10px 20px;
+}
+
 .button {
     width: 100%;
     max-width: 300px;
@@ -95,3 +123,27 @@ body {
 [id$="version"] {
     font-size: small;
 }
+
+.footer {
+    margin-top: 30px;
+    text-align: center;
+}
+
+.footer__nav {
+    margin-top: 30px;
+    list-style: none;
+    padding: 0;
+    display: flex;
+}
+
+.footer__item {
+    margin-right: 10px;
+}
+
+.footer__link {
+    color: #eeeeee;
+    text-decoration: none;
+}
+.footer__link:hover {
+    text-decoration: underline;
+}

index.html

@@ -47,6 +47,11 @@
                 class="github">
                 <img src="./github.svg" alt="Zobacz repozytorium na Githubie">
             </a>
+            <ul class="footer__nav">
+                <li class="footer__item">
+                    <a class="footer__link" href="https://github.com/wulkanowy">Wszystkie projekty</a>
+                </li>
+            </ul>
         </footer>
     </section>
     <script>