Restyle donation form

Author: ThomasFarstrike

src/images/donate-phone.png

@@ -21,10 +21,14 @@ html {
 
 body {
     background-color: #CAE2E9;
-    color: #424242;
+    color: #18222E;
     margin: 0;
 }
 
+a {
+    color: #18222E;
+}
+
 header {
     background-color: #18222E;
     color: #fff;
@@ -50,10 +54,6 @@ footer span {
 
 footer a {
     color: #CAE2E9;
-    text-decoration: none;
-}
-footer a:hover {
-    text-decoration: underline;
 }
 
 header .logo {
@@ -180,7 +180,7 @@ input:focus{
 }
 
 .bigbutton:hover {
-  background-color: #000;
+    background-color: #000;
 }
 
 .feature {
@@ -195,9 +195,6 @@ input:focus{
     box-shadow: 0 0 60px #44aaff;
 }
 
-.feature p {
-}
-
 .feature img.qrcode {
     width: 6em;
 }
@@ -219,7 +216,7 @@ img.headericon {
     top: 0.6em;
 }
 
-.donationqr {
+img.donate {
     width: 50%;
 }
 
@@ -278,3 +275,16 @@ img.headericon {
     padding: 0.5em 1em 0em 0;
 }
 
+#content4 {
+    height: 42em;
+    overflow-y: hidden;
+    padding: 2em 2em 0 2em;
+}
+
+#content4 img.donate {
+    width: 80%;
+}
+
+.twocolumns {
+    width: 50%;
+}

src/index.css

@@ -27,8 +27,7 @@
                <div class="menuitem"><a href="#" class="menubutton menubuttonselected" onclick="menuChange(event,0)">Connect</a></div>
                <div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,1)">Features</a></div>
                <div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,5)">About</a></div>
-               <div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,4)">Donate</a></div>
-               <div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,2)">Contact</a></div>
+               <div class="menuitem"><a href="#" class="menubutton" onclick="menuChange(event,4)">Contact and Donate</a></div>
            </div>
         </header>
         <div class="main-content" id="content0">
@@ -81,13 +80,16 @@ <h1>We'd love to know which feature to focus on next.</h1>
 		 <iframe width="1200" height="610" src="https://legend.lnbits.com/tipjar/1114" title="Tip Jar"></iframe>
 	</div>
         <div class="main-content" id="content4">
-	     <div class="onecolumn">
-		<p>As you know, writing and maintaining quality software is not cheap.</p>
+	     <div class="twocolumns column1">
+		<h1>As you know, writing and maintaining quality software is not cheap...</h1>
 		<p>We are aiming to keep this project well-maintained, bug-free, and reliable long-term.</p>
 		<p>Therefore, your generous donations are always appreciated.</p>
                 <p>Just scan the QR code with a Bitcoin Lightning wallet and send however much you like.</p>
+		<h3>You'll be able to add a comment to your payment so use it to reach out if you want.</h3>
 		<p>Thank you!</p>
-		<a href="lightning:LNURL1DP68GURN8GHJ7MR9VAJKUEPWD3HXY6T5WVHXXMMD9AKXUATJD3CZ7DN8GUE4WCGS0D0DN"><img src="../images/LNURL1DP68GURN8GHJ7MR9VAJKUEPWD3HXY6T5WVHXXMMD9AKXUATJD3CZ7DN8GUE4WCGS0D0DN.png" class="donationqr"/></a>
+	    </div>
+	     <div class="twocolumns column2">
+		<a href="lightning:LNURL1DP68GURN8GHJ7MR9VAJKUEPWD3HXY6T5WVHXXMMD9AKXUATJD3CZ7DN8GUE4WCGS0D0DN"><img src="../images/donate-phone.png" class="donate"/></a>
 	    </div>
 	</div>
         <div class="main-content" id="content5">