change the icon, the button style and text on the donation page

diff --git a/static/css/style.css b/static/css/style.css
index dbc7cd017d7a89e4c727e7c1e04751a3d3e2d304..4f3aa67a138fd65d52ee76c4634bddc6a1bbb2e8 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5302,7 +5302,6 @@ a.pswp__share--download:hover {
   background-color: white;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
 
   background-color: white;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
 

-.currency-dropdown,

 .ownamount {
   overflow: hidden;
   width: 95%;
 .ownamount {
   overflow: hidden;
   width: 95%;


@@ -5311,16 +5310,23 @@ a.pswp__share--download:hover {
   border-radius: 2px;
   border: none; }
 
   border-radius: 2px;
   border: none; }
 

-.dropdown-wrapper,

 .ownamount {
   background-color: rgba(38, 50, 56, 0.08);
   border-bottom: 2px solid #263238;
   width: 90%; }
 
 .ownamount {
   background-color: rgba(38, 50, 56, 0.08);
   border-bottom: 2px solid #263238;
   width: 90%; }
 

-.currency-dropdown {
-  background-color: transparent; }
-  .currency-dropdown:focus {
-    outline: none; }
+input.radiobtn:not(old) {
+  display: none; }
+
+input.radiobtn:not(old) + label {
+  display: inline-block;
+  background-image: url("/static/img/icons/icon-radiobtn-off.png");
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  padding-left: 38px; }
+
+input.radiobtn:not(old):checked + label {
+  background-image: url("/static/img/icons/icon-radiobtn-on.png"); }

 
 .inline-card {
   border-radius: 8px;
 
 .inline-card {
   border-radius: 8px;


@@ -5971,6 +5977,9 @@ button:focus {
 .i_server {
   fill: #ff8f00; }
 
 .i_server {
   fill: #ff8f00; }
 

+.i_secure {
+  fill: rgba(38, 50, 56, 0.3); }
+

 .amber-800 {
   color: #ff8f00;
   border-color: #ff8f00; }
 .amber-800 {
   color: #ff8f00;
   border-color: #ff8f00; }


@@ -5987,6 +5996,9 @@ button:focus {
   color: #1976d2;
   border-color: #1976d2; }
 
   color: #1976d2;
   border-color: #1976d2; }
 

+.blue_grey_300 {
+  color: rgba(38, 50, 56, 0.3); }
+

 .bg-blue-grey-900 {
   background-color: #263238; }
 
 .bg-blue-grey-900 {
   background-color: #263238; }
 

diff --git a/static/img/amex.png b/static/img/amex.png
new file mode 100644 (file)
index 0000000..6c36bf4
Binary files /dev/null and b/static/img/amex.png differ

diff --git a/static/img/amex@2x.png b/static/img/amex@2x.png
new file mode 100644 (file)
index 0000000..104a5da
Binary files /dev/null and b/static/img/amex@2x.png differ

diff --git a/static/img/amex@3x.png b/static/img/amex@3x.png
new file mode 100644 (file)
index 0000000..27d7747
Binary files /dev/null and b/static/img/amex@3x.png differ

diff --git a/static/img/icons/icon-lock.svg b/static/img/icons/icon-lock.svg
new file mode 100644 (file)
index 0000000..1a3eecb
--- /dev/null
+++ b/static/img/icons/icon-lock.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h24v24H0z"/>
+        <path fill="#263238" d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
+    </g>
+</svg>

diff --git a/static/img/icons/icon-radiobtn-off.png b/static/img/icons/icon-radiobtn-off.png
new file mode 100644 (file)
index 0000000..4c1f3e8
Binary files /dev/null and b/static/img/icons/icon-radiobtn-off.png differ

diff --git a/static/img/icons/icon-radiobtn-off.svg b/static/img/icons/icon-radiobtn-off.svg
new file mode 100644 (file)
index 0000000..3ded16b
--- /dev/null
+++ b/static/img/icons/icon-radiobtn-off.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <circle id="a" cx="12" cy="12" r="10"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h24v24H0z"/>
+        <g>
+            <use fill="#263238" fill-opacity=".08" xlink:href="#a"/>
+            <circle cx="12" cy="12" r="9" stroke="#263238" stroke-width="2"/>
+        </g>
+    </g>
+</svg>

diff --git a/static/img/icons/icon-radiobtn-off@2x.png b/static/img/icons/icon-radiobtn-off@2x.png
new file mode 100644 (file)
index 0000000..e66d4ac
Binary files /dev/null and b/static/img/icons/icon-radiobtn-off@2x.png differ

diff --git a/static/img/icons/icon-radiobtn-off@3x.png b/static/img/icons/icon-radiobtn-off@3x.png
new file mode 100644 (file)
index 0000000..02b005b
Binary files /dev/null and b/static/img/icons/icon-radiobtn-off@3x.png differ

diff --git a/static/img/icons/icon-radiobtn-on.png b/static/img/icons/icon-radiobtn-on.png
new file mode 100644 (file)
index 0000000..c48db16
Binary files /dev/null and b/static/img/icons/icon-radiobtn-on.png differ

diff --git a/static/img/icons/icon-radiobtn-on.svg b/static/img/icons/icon-radiobtn-on.svg
new file mode 100644 (file)
index 0000000..357c418
--- /dev/null
+++ b/static/img/icons/icon-radiobtn-on.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <circle id="a" cx="12" cy="12" r="10"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h24v24H0z"/>
+        <use fill="#263238" fill-opacity=".08" xlink:href="#a"/>
+        <circle cx="12" cy="12" r="9" stroke="#263238" stroke-width="2"/>
+        <circle cx="12" cy="12" r="5" fill="#263238"/>
+    </g>
+</svg>

diff --git a/static/img/icons/icon-radiobtn-on@2x.png b/static/img/icons/icon-radiobtn-on@2x.png
new file mode 100644 (file)
index 0000000..79a61d2
Binary files /dev/null and b/static/img/icons/icon-radiobtn-on@2x.png differ

diff --git a/static/img/icons/icon-radiobtn-on@3x.png b/static/img/icons/icon-radiobtn-on@3x.png
new file mode 100644 (file)
index 0000000..517d409
Binary files /dev/null and b/static/img/icons/icon-radiobtn-on@3x.png differ

diff --git a/static/img/mastercard.png b/static/img/mastercard.png
new file mode 100644 (file)
index 0000000..9ca8772
Binary files /dev/null and b/static/img/mastercard.png differ

diff --git a/static/img/mastercard@2x.png b/static/img/mastercard@2x.png
new file mode 100644 (file)
index 0000000..bd2132f
Binary files /dev/null and b/static/img/mastercard@2x.png differ

diff --git a/static/img/mastercard@3x.png b/static/img/mastercard@3x.png
new file mode 100644 (file)
index 0000000..dfdef22
Binary files /dev/null and b/static/img/mastercard@3x.png differ

diff --git a/static/img/visa.png b/static/img/visa.png
new file mode 100644 (file)
index 0000000..4dc8bbe
Binary files /dev/null and b/static/img/visa.png differ

diff --git a/static/img/visa@2x.png b/static/img/visa@2x.png
new file mode 100644 (file)
index 0000000..f84d83c
Binary files /dev/null and b/static/img/visa@2x.png differ

diff --git a/static/img/visa@3x.png b/static/img/visa@3x.png
new file mode 100644 (file)
index 0000000..add2261
Binary files /dev/null and b/static/img/visa@3x.png differ

diff --git a/static/scss/_donation.scss b/static/scss/_donation.scss
index 6033dc930b9e3aea54170526e2e9a9c1758746b5..82322f3bd9255a2522e56b5ac2bd10b15d6461cc 100644 (file)
--- a/static/scss/_donation.scss
+++ b/static/scss/_donation.scss
@@ -4,7 +4,6 @@
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 }
 
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 }
 

-.currency-dropdown,

 .ownamount {
        overflow: hidden;
        width: 95%;
 .ownamount {
        overflow: hidden;
        width: 95%;


@@ -14,17 +13,26 @@
        border: none;
 }
 
        border: none;
 }
 

-.dropdown-wrapper,

 .ownamount {
        background-color: rgba($blue-grey-900, .08);
        border-bottom: 2px solid $blue-grey-900;
        width: 90%;
 }
 .ownamount {
        background-color: rgba($blue-grey-900, .08);
        border-bottom: 2px solid $blue-grey-900;
        width: 90%;
 }

-.currency-dropdown {
-       background-color: transparent;
-       &:focus {
-               outline: none;
-       }
+
+input.radiobtn:not(old) {
+       display: none;
+}
+
+input.radiobtn:not(old) + label {
+       display: inline-block;
+       background-image: url("/static/img/icons/icon-radiobtn-off.png");
+       background-repeat: no-repeat;
+       background-position: 0 0;
+       padding-left: 38px;
+}
+
+input.radiobtn:not(old):checked + label {
+       background-image: url("/static/img/icons/icon-radiobtn-on.png");

 }
 
 .inline-card {
 }
 
 .inline-card {

diff --git a/static/scss/_icons.scss b/static/scss/_icons.scss
index cc679dc243d85c3ac0a2790fd3140bd3e16fbedb..28c5e750c70be30c9077129a13e262c9bec37c38 100644 (file)
--- a/static/scss/_icons.scss
+++ b/static/scss/_icons.scss
@@ -67,4 +67,8 @@
 
 .i_server {
        fill: $amber-800;
 
 .i_server {
        fill: $amber-800;

+}
+
+.i_secure {
+       fill: $blue_grey_300;

 }
\ No newline at end of file
 }
\ No newline at end of file

diff --git a/static/scss/style.scss b/static/scss/style.scss
index 7cd5aec1c2390b054f013d68509f3476f075c9f6..1eb92eb843024ea4ef5e4e852b8689bd72647533 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -101,6 +101,10 @@ body {
        border-color: $blue-700;
 }
 
        border-color: $blue-700;
 }
 

+.blue_grey_300 {
+       color: $blue_grey_300;
+}
+

 .bg-blue-grey-900 {
        background-color: $blue-grey-900;
 }
 .bg-blue-grey-900 {
        background-color: $blue-grey-900;
 }

diff --git a/templates/donate.html b/templates/donate.html
index 5b70c5e12ac3e3864d4a8fb26c7fa2a6d304eb59..2ba97074e1748d3f593397276d03655438051861 100644 (file)
--- a/templates/donate.html
+++ b/templates/donate.html
@@ -13,33 +13,64 @@
                                                <div class="row">
                                                        <div class="donation-card d-flex flex-row text-left">
                                                                <div class="col-4 bg-blue-grey-900 text-white p-5 pt-6" style="border-radius: 4px 0 0 4px">
                                                <div class="row">
                                                        <div class="donation-card d-flex flex-row text-left">
                                                                <div class="col-4 bg-blue-grey-900 text-white p-5 pt-6" style="border-radius: 4px 0 0 4px">

-                                                                       <h3>IP<strong>Fire</strong> is an Open Source software project.</h3>
-                                                                       {% if lang == "de" %}
-                                                                               <p class="copy">
-                                                                                       Die Entwicklung und die Fortführung des Projekts wird allein
-                                                                                       von einer Gruppe von Freiwilligen getragen, die ein Produkt
-                                                                                       entwickelt hat, das tagtäglich von Hunderttausenden genutzt
-                                                                                       wird.
-                                                                               </p>
+                                                                       <div class="mb-6">
+                                                                               <h3>IP<strong>Fire</strong> is an Open Source software project.</h3>
+                                                                               {% if lang == "de" %}
+                                                                                       <p class="copy">
+                                                                                               Die Entwicklung und die Fortführung des Projekts wird allein
+                                                                                               von einer Gruppe von Freiwilligen getragen, die ein Produkt
+                                                                                               entwickelt hat, das tagtäglich von Hunderttausenden genutzt
+                                                                                               wird.
+                                                                                       </p>
+                                                               
+                                                                                       <p class="copy">
+                                                                                               Jede einzelne Spende hilft IPFire noch weiter zu verbessern...
+                                                                                       </p>
+                                                                               {% else %}
+                                                                                       <p class="copy">
+                                                                                               IPFire is an Open Source software project.
+                                                                                       </p>
+                                                               
+                                                                                       <p class="copy">
+                                                                                               Development and keeping the project healthy is carried out by a
+                                                                                               group of volunteers who have built a very successful product,
+                                                                                               which hundreds of thousands of people use every day.
+                                                                                       </p>
+                                                               
+                                                                                       <p class="copy">
+                                                                                               Your donation helps us to make IPFire even better...
+                                                                                       </p>
+                                                                       </div>
+                                                                               
+                                                                       <div class="mb-6">                                                                              
+                                                                               <h3>Why should I donate?</h3>

                                                        
                                                        

-                                                                               <p class="copy">
-                                                                                       Jede einzelne Spende hilft IPFire noch weiter zu verbessern...
+                                                                               <p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall
+                                                                                       distribution that is free to use for everyone anywhere in the world. To do that,
+                                                                                       we need to provide the infrastructure to distribute it to our users and provide
+                                                                                       the right tools for our developers to help them to make IPFire better every day.

                                                                                </p>
                                                                                </p>

-                                                                       {% else %}
-                                                                               <p class="copy">
-                                                                                       IPFire is an Open Source software project.
+                                                                               
+                                                                               <p class="copy">Donations from individuals and corporations are the only way to keep all of our
+                                                                                       services free for everyone. They pay for hosting, advertising, purchase
+                                                                                       equipment and to fund the work of the people behind it.

                                                                                </p>
                                                                                </p>

-                                                       
-                                                                               <p class="copy">
-                                                                                       Development and keeping the project healthy is carried out by a
-                                                                                       group of volunteers who have built a very successful product,
-                                                                                       which hundreds of thousands of people use every day.
+                                                                               
+                                                                               <p class="copy">Our ambition is to compete with projects backed by large corporations and
+                                                                                       proprietary solutions and we cannot do that without you. Become a supporter
+                                                                                       today!

                                                                                </p>
                                                                                </p>

-                                                       
-                                                                               <p class="copy">
-                                                                                       Your donation helps us to make IPFire even better...
+                                                                       </div>
+                                                               
+                                                                       <div class="mb-6">
+                                                                               <h3>How much should I give?</h3>
+                                                                               
+                                                                               <p class="copy">Donations range from single digits donations to hundreds. For us it is important
+                                                                                       to give something back to help this project to succeed. If you want to help,
+                                                                                       please do so and encourage others to do so, too.

                                                                                </p>
                                                                                </p>

-                                                                       {% end %}
+                                                                       </div>
+                                                               {% end %}

                                                                </div>
                                                                
                                                                <div class="col pl-5 pr-5">
                                                                </div>
                                                                
                                                                <div class="col pl-5 pr-5">


@@ -47,11 +78,15 @@
                                                                                <div class="row">
                                                                                        <div class="col d-flex flex-column">
                                                                                                <h4 class="mb-5">Choose a currency</h4>
                                                                                <div class="row">
                                                                                        <div class="col d-flex flex-column">
                                                                                                <h4 class="mb-5">Choose a currency</h4>

-                                                                                               <div class="dropdown-wrapper">
-                                                                                                       <select class="currency-dropdown">
-                                                                                                               <option class="form-control" value="EUR €">EUR €</option>
-                                                                                                               <option class="form-control" value="US $">US $</option>
-                                                                                                       </select>
+                                                                                               <div class="row pt-4">
+                                                                                                       <div class="col">
+                                                                                                               <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="euro" value="euro" checked>
+                                                                                                               <label for="euro" class="form-check-label radiobtn">€uro</label>
+                                                                                                       </div>
+                                                                                                       <div class="col">
+                                                                                                               <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="usd" value="usd">
+                                                                                                               <label for="usd" class="form-check-label radiobtn">USD $</label>
+                                                                                                       </div>

                                                                                                </div>
                                                                                        </div>
                                                                                        
                                                                                                </div>
                                                                                        </div>
                                                                                        


@@ -59,16 +94,12 @@
                                                                                                <h4 class="mb-5">Frequency</h4>
                                                                                                <div class="row pt-4">
                                                                                                        <div class="col">
                                                                                                <h4 class="mb-5">Frequency</h4>
                                                                                                <div class="row pt-4">
                                                                                                        <div class="col">

-                                                                                                               <label class="form-check-label">
-                                                                                                                       <input class="form-check-input mr-4" type="radio" name="frequency" id="one-time-payment" value="single" onclick="Check()" checked>
-                                                                                                                       One time
-                                                                                                               </label>
+                                                                                                               <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="one-time-payment" value="single" checked>
+                                                                                                               <label for="one-time-payment" class="form-check-label radiobtn">One time</label>

                                                                                                        </div>
                                                                                                        <div class="col">
                                                                                                        </div>
                                                                                                        <div class="col">

-                                                                                                               <label class="form-check-label">
-                                                                                                                       <input class="form-check-input mr-4" type="radio" name="frequency" id="monthly-payment" value="monthly" onclick="Check()">
-                                                                                                                       Monthly
-                                                                                                               </label>
+                                                                                                               <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="monthly-payment" value="monthly">
+                                                                                                               <label for="monthly-payment" class="form-check-label radiobtn">Monthly</label>

                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>


@@ -79,51 +110,84 @@
                                                                                                <div class="row mb-6">
                                                                                                        <div class="col">
                                                                                                                <h4 class="mb-5">Choose an amount</h4>
                                                                                                <div class="row mb-6">
                                                                                                        <div class="col">
                                                                                                                <h4 class="mb-5">Choose an amount</h4>

-                                                                                                               <div class="form-group d-flex flex-row flex-wrap" id="ifonetime" style="margin-left: -8px;">
+                                                                                                               <div class="form-group d-flex flex-row flex-wrap" style="margin-left: -8px;">

                                                                                                                        <input class="amount-check" type="radio" name="amount" id="10" value="10" checked>
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="10" value="10" checked>

-                                                                                                                       <label for="10" class="form-check-label amount">10€</label>
+                                                                                                                       <label for="10" class="form-check-label amount">10<span class="currency"></span></label>

                                                                                                                        
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="25" value="25">
                                                                                                                        
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="25" value="25">

-                                                                                                                       <label for="25" class="form-check-label amount">25€</label>
+                                                                                                                       <label for="25" class="form-check-label amount">25<span class="currency"></span></label>

                                                                                                                        
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="50" value="50">
                                                                                                                        
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="50" value="50">

-                                                                                                                       <label for="50" class="form-check-label amount">50€</label>
+                                                                                                                       <label for="50" class="form-check-label amount">50<span class="currency"><span class="currency"></label>
+                                                                                                                       
+                                                                                                                       <input class="amount-check" type="radio" name="amount" id="50" value="50">
+                                                                                                                       <label for="50" class="form-check-label amount">75<span class="currency"></span></label>

                                                                                                                
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="100" value="100">
                                                                                                                
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="100" value="100">

-                                                                                                                       <label for="100" class="form-check-label amount">100€</label>
+                                                                                                                       <label for="100" class="form-check-label amount">100<span class="currency"></span></label>

                                                                                                                        
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="250" value="250">
                                                                                                                        
                                                                                                                        <input class="amount-check" type="radio" name="amount" id="250" value="250">

-                                                                                                                       <label for="250" class="form-check-label amount">250€</label>
+                                                                                                                       <label for="250" class="form-check-label amount">250<span class="currency"></span></label>

                                                                                                                </div>                                                                                  
                                                                                                        </div>
                                                                                                        <div class="col">
                                                                                                                <div class="form-group">
                                                                                                                        <h4 class="mb-5">Enter your own</h4>
                                                                                                                </div>                                                                                  
                                                                                                        </div>
                                                                                                        <div class="col">
                                                                                                                <div class="form-group">
                                                                                                                        <h4 class="mb-5">Enter your own</h4>

-                                                                                                                       <input type="text" class="ownamount w-100" id="enterYourOwn" placeholder="1€ at least">
+                                                                                                                       <input type="number" class="ownamount w-100" id="enterYourOwn" placeholder="Enter your own amount">

                                                                                                                </div>
                                                                                                        </div>
                                                                                                </div>
                                                                                                <div class="row mt-6">
                                                                                                                </div>
                                                                                                        </div>
                                                                                                </div>
                                                                                                <div class="row mt-6">

-                                                                                                       <div class="col">
-                                                                                                               <h4>Choose payment</h4>
-                                                                                                       </div>
-                                                                                                       <div class="col d-flex flex-row justify-content-end">
-                                                                                                               <i class="fa fa-lock mr-3" aria-hidden="true" style="position: relative; top: 4px;"></i>
-                                                                                                               <p class="text-uppercase">Secure</p>
+                                                                                                       <div class="col d-flex flex-row">
+                                                                                                               <h4 class="mr-3">Choose payment</h4>
+                                                                                                               <svg class="icon i_secure ml-4"><use xlink:href="#secure"/></svg>
+                                                                                                               <p class="text-uppercase blue_grey_300"><strong>Secure</strong></p>

                                                                                                        </div>
                                                                                                </div>
                                                                                                
                                                                                                        </div>
                                                                                                </div>
                                                                                                

-                                                                                               <div class="row d-flex align-items-center pl-4 pr-4 mb-6">
-                                                                                                       <label class="form-check-label col d-flex align-items-center">
-                                                                                                               <input class="form-check-input mr-4" type="radio" name="payment" id="creditcard" value="creditcard" checked style="margin-top: 0;">
-                                                                                                               <i class="fa fa-cc-amex fa-3x m-3" aria-hidden="true"></i>
-                                                                                                               <i class="fa fa-cc-mastercard fa-3x m-3" aria-hidden="true"></i>
-                                                                                                               <i class="fa fa-cc-visa fa-3x m-3" aria-hidden="true"></i>
-                                                                                                       </label>
-                                                                                                       <label class="form-check-label col">
-                                                                                                               <input class="form-check-input mr-4" type="radio" name="payment" id="sepa-payment" value="sepa-payment">
-                                                                                                               SEPA direct debit
-                                                                                                       </label>
+                                                                                               <div class="row d-flex pl-4 pr-4 mb-6">
+                                                                                                       <div class="col">
+                                                                                                               <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="creditcard" value="creditcard" checked>
+                                                                                                               <label for="creditcard" class="form-check-label radiobtn" style="background-position: 0 20px">
+                                                                                                                       <picture>
+                                                                                                                               <source srcset="{{ static_url("img/amex.png") }},
+                                                                                                                                       {{ static_url("img/amex@2x.png") }} 2x,
+                                                                                                                                       {{ static_url("img/amex@3x.png") }} 3x ">
+                                                                                                                               <img src="{{ static_url("img/amex.png") }}"
+                                                                                                                                        srcset="{{ static_url("img/amex.png") }},
+                                                                                                                                       {{ static_url("img/amex@2x.png") }} 2x,
+                                                                                                                                       {{ static_url("img/amex@3x.png") }} 3x "
+                                                                                                                                       alt="Amex" class="m-4">
+                                                                                                                       </picture>
+                                                                                                                       
+                                                                                                                       <picture>
+                                                                                                                               <source srcset="{{ static_url("img/mastercard.png") }},
+                                                                                                                                       {{ static_url("img/mastercard@2x.png") }} 2x,
+                                                                                                                                       {{ static_url("img/mastercard@3x.png") }} 3x ">
+                                                                                                                               <img src="{{ static_url("img/mastercard.png") }}"
+                                                                                                                                        srcset="{{ static_url("img/mastercard.png") }},
+                                                                                                                                       {{ static_url("img/mastercard@2x.png") }} 2x,
+                                                                                                                                       {{ static_url("img/mastercard@3x.png") }} 3x "
+                                                                                                                                       alt="Mastercard" class="m-4">
+                                                                                                                       </picture>
+                                                                                                                       
+                                                                                                                       <picture>
+                                                                                                                               <source srcset="{{ static_url("img/visa.png") }},
+                                                                                                                                       {{ static_url("img/visa@2x.png") }} 2x,
+                                                                                                                                       {{ static_url("img/visa@3x.png") }} 3x ">
+                                                                                                                               <img src="{{ static_url("img/visa.png") }}"
+                                                                                                                                        srcset="{{ static_url("img/visa.png") }},
+                                                                                                                                       {{ static_url("img/visa@2x.png") }} 2x,
+                                                                                                                                       {{ static_url("img/visax@3x.png") }} 3x "
+                                                                                                                                       alt="Visa" class="m-4">
+                                                                                                                       </picture>
+                                                                                                               </label>
+                                                                                                       </div>
+                                                                                                       
+                                                                                                       <div class="col" style="padding-top: 20px;">
+                                                                                                               <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="sepa-payment" value="sepa-payment">
+                                                                                                               <label for="sepa-payment" class="form-check-label radiobtn">SEPA direct debit</label>
+                                                                                                       </div>

                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>


@@ -142,34 +206,6 @@
                                
                                <div class="row text-left">
                                        <div class="col-5">
                                
                                <div class="row text-left">
                                        <div class="col-5">

-                                               <div class="mb-6">
-                                                       <h3>Why should I donate?</h3>
-                                                       
-                                                       <p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall
-                                                               distribution that is free to use for everyone anywhere in the world. To do that,
-                                                               we need to provide the infrastructure to distribute it to our users and provide
-                                                               the right tools for our developers to help them to make IPFire better every day.
-                                                       </p>
-                                                       
-                                                       <p class="copy">Donations from individuals and corporations are the only way to keep all of our
-                                                               services free for everyone. They pay for hosting, advertising, purchase
-                                                               equipment and to fund the work of the people behind it.
-                                                       </p>
-                                                       
-                                                       <p class="copy">Our ambition is to compete with projects backed by large corporations and
-                                                               proprietary solutions and we cannot do that without you. Become a supporter
-                                                               today!
-                                                       </p>
-                                               </div>
-                                               
-                                               <div class="mb-6">
-                                                       <h3>How much should I give?</h3>
-                                                       
-                                                       <p class="copy">Donations range from single digits donations to hundreds. For us it is important
-                                                               to give something back to help this project to succeed. If you want to help,
-                                                               please do so and encourage others to do so, too.
-                                                       </p>
-                                               </div>

                                        </div>
                                        
                                        <div class="col-5 offset-2">
                                        </div>
                                        
                                        <div class="col-5 offset-2">


@@ -179,5 +215,12 @@
                        </section>
                </div>
        </div>
                        </section>
                </div>
        </div>

+
+<!-- Icons -->
+<svg aria-hidden="true" style="display: none">
+       <symbol id="secure" viewBox="0 0 24 24">
+               <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
+       </symbol>
+</svg>

        
 {% end block %}
        
 {% end block %}