- <div class="container">
- <div class="row">
- <section class="features-content col-12 text-center">
- <h2 class="display-2">{{ _("Donate") }}</h2>
-
- <div class="row justify-content-center mb-6">
- <div class="col-12">
- <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="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">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>
- {% end %}
- </div>
- <div class="col pl-5 pr-5">
- <div class="card p-3 pt-6">
- <div class="row">
- <div class="col d-flex flex-column">
+ <section class="donation">
+ <div class="container">
+ <div class="row">
+ <section class="features-content col-12 text-center">
+ <h2 class="display-2">{{ _("Donate") }}</h2>
+
+ <div class="row justify-content-center mb-6">
+ <div class="col-12 col-sm-11 col-xl-12">
+ <div class="row">
+ <div class="donation-card d-flex flex-column flex-md-row-reverse text-left col p-0">
+ <div class="card p-4 p-sm-6 p-md-4 pt-6">
+ <div class="row py-md-3 px-md-6">
+ <div class="col-12 col-lg-6 d-flex flex-column mb-6 mb-lg-0">