Merge pull request #470 from codebar/add-donate-footer-box

Add donate box in footer

Author: KimberleyCook

index.html

@@ -132,6 +132,14 @@ <h3>Other Useful Resources</h3>
 
       </section>
     </div>
+
+    <footer>
+      <div class="donation-box">
+        <p>Looking for a way to support codebar? Please consider making a donation</p>
+        <a href="https://codebar.enthuse.com/donate/#!/">Donate</a>
+      </div>
+      <p class="small">Registered UK and Wales charity no. 1187776 © codebar 2021</p>
+    </footer>
     <script src="javascripts/scale.fix.js"></script>
     <script type="text/javascript">
       var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

stylesheets/styles.css

@@ -56,6 +56,8 @@ a small {
 .wrapper {
   width: 860px;
   margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
 }
 
 .logo {
@@ -110,8 +112,6 @@ img {
 
 header {
   width: 270px;
-  float: left;
-  position: fixed;
 }
 
 header ul {
@@ -174,7 +174,6 @@ header ul a strong {
 
 section {
   width: 500px;
-  float: right;
   padding-bottom: 50px;
 }
 
@@ -190,34 +189,51 @@ hr {
 }
 
 footer {
-  width: 270px;
-  float: left;
-  position: fixed;
-  bottom: 50px;
+  max-width: 860px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.donation-box {
+  border: 4px solid #4bafff;
+  padding: 65px 0;
+  margin-bottom: 50px;
+}
+
+.donation-box p {
+  font-size: 20px;
+}
+
+.donation-box a {
+  background-color: #4bafff;
+  color: #fff;
+  font-weight: bold;
+  font-size: 18px;
+  padding: 10px 13px;
+  border-radius: 5px;
 }
 
 @media print, screen and (max-width: 960px) {
 
   div.wrapper {
     width: auto;
     margin: 0;
+    flex-direction: column;
   }
 
-  header, section, footer {
-    float: none;
-    position: static;
-    width: auto;
+  header {
+    width: 100%;
+    text-align: center;
   }
 
-  header {
-    padding-right: 320px;
+  section, footer {
+    width: auto;
   }
 
   section {
-    border: 1px solid #e5e5e5;
-    border-width: 1px 0;
     padding: 20px 0;
-    margin: 0 0 20px;
   }
 
   header a small {
@@ -247,6 +263,15 @@ footer {
   pre, code {
     word-wrap: normal;
   }
+
+  .donation-box {
+    padding: 50px 0;
+  }
+
+  .donation-box p {
+    font-size: 17px;
+  }
+
 }
 
 @media print, screen and (max-width: 480px) {