From: Michael Tremer <michael.tremer@ipfire.org>
Date: Sun, 30 Sep 2018 16:47:59 +0000 (+0100)
Subject: donate: Make page a single column only
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=bddae05d0dc6b0f61c6280f6d1ec5b6a42749f7f;p=ipfire.org.git

donate: Make page a single column only

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 637712fe..c814220f 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -238,26 +238,12 @@ footer {
 
 // Donations
 
-.faq {
-	a {
-		color: $body-color;
-	}
-}
-
 .donation-explanation {
-	margin-bottom: 2rem;
-
-	p {
-		color: $text-muted;
-	}
+	color: $text-muted;
+	padding: 1.5rem;
 
-	@include media-breakpoint-down(sm) {
-		background-color: $dark;
-		color: $white;
-
-		padding: 1.5rem;
-
-		h5, p {
+	.faq {
+		a {
 			color: inherit;
 		}
 	}
diff --git a/src/templates/donate.html b/src/templates/donate.html
index 5a0681d2..cb5d985d 100644
--- a/src/templates/donate.html
+++ b/src/templates/donate.html
@@ -8,410 +8,372 @@
 	<h1 class="text-center mt-5 mb-5">{{ _("Donate") }}</h1>
 
 	<div class="container">
-		<div class="card mb-5">
-			<div class="row">
-				<div class="d-none d-md-block col col-md-4 p-4 bg-dark text-white">
-					<h5 class="text-white mt-4">Why we need you to donate today</h5>
-
-					<p>
-						IP<strong>Fire</strong> has grown to be the backbone of networks in companies,
-						schools and homes worldwide.
-					</p>
-
-					<p>
-						It is trusted by many and has proven that free software, developed by a diverse
-						community, can not only be equal, but better than proprietary solutions.
-					</p>
-
-					<p>
-						But still, development doesn’t come free to us and therefore
-						we are asking for your contribution today.
-					</p>
-				</div>
+		<div class="row justify-content-center">
+			<div class="col-12 col-md-8">
+				<div class="card mb-5">
+					<div class="card-body">
+						<form action="" method="POST">
+							{% raw xsrf_form_html() %}
+
+							<div class="row mt-md-4">
+								<div class="col-12 col-lg-6 mb-3 mb-md-0">
+									<h6>Choose a currency</h6>
+
+									<div class="form-check form-check-inline">
+										<input class="form-check-input" type="radio" name="currency" id="EUR" value="EUR"
+											{% if currency == "EUR" %}checked{% end %}>
+										<label class="form-check-label" for="EUR">{{ _("Euro") }}</label>
+									</div>
 
-				<div class="col p-5 p-md-4 pt-4">
-					<form action="" method="POST">
-						{% raw xsrf_form_html() %}
+									<div class="form-check form-check-inline">
+										<input class="form-check-input" type="radio" name="currency" id="USD" value="USD"
+											{% if currency == "USD" %}checked{% end %}>
+										<label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
+									</div>
+								</div>
 
-						<div class="row mt-md-4">
-							<div class="col-12 col-lg-6 mb-3 mb-md-0">
-								<h6>Choose a currency</h6>
+								<div class="col-12 col-lg-6">
+									<h6>Frequency</h6>
 
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" name="currency" id="EUR" value="EUR"
-										{% if currency == "EUR" %}checked{% end %}>
-									<label class="form-check-label" for="EUR">{{ _("Euro") }}</label>
-								</div>
+									<div class="form-check form-check-inline">
+										<input class="form-check-input" type="radio" name="frequency" id="frequency-one-time"
+											value="one-time" {% if frequency == "one-time" %}checked{% end %}>
+										<label class="form-check-label" for="frequency-one-time">{{ _("One Time") }}</label>
+									</div>
 
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" name="currency" id="USD" value="USD"
-										{% if currency == "USD" %}checked{% end %}>
-									<label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
+									<div class="form-check form-check-inline">
+										<input class="form-check-input" type="radio" name="frequency" id="frequency-monthly"
+											value="monthly" {% if frequency == "monthly" %}checked{% end %}>
+										<label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
+									</div>
 								</div>
 							</div>
 
-							<div class="col-12 col-lg-6">
-								<h6>Frequency</h6>
+							<div class="mt-5 mb-3 p-4 bg-light rounded">
+								<h6>{{ _("Choose an amount") }}</h6>
 
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" name="frequency" id="frequency-one-time"
-										value="one-time" {% if frequency == "one-time" %}checked{% end %}>
-									<label class="form-check-label" for="frequency-one-time">{{ _("One Time") }}</label>
-								</div>
+								<input type="hidden" name="amount" {% if amount %}value="{{ amount }}"{% end %} required>
 
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" name="frequency" id="frequency-monthly"
-										value="monthly" {% if frequency == "monthly" %}checked{% end %}>
-									<label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
+								<div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
+									{% for a in amounts %}
+										<label class="btn btn-secondary btn-lg mb-2">
+											<input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
+												autocomplete="off"> <span class="USD">$</span>{{ a }} <span class="EUR">€</span>
+										</label>
+									{% end %}
 								</div>
-							</div>
-						</div>
-
-						<div class="mt-5 mb-3 p-4 bg-light rounded">
-							<h6>{{ _("Choose an amount") }}</h6>
-
-							<input type="hidden" name="amount" {% if amount %}value="{{ amount }}"{% end %} required>
 
-							<div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
-								{% for a in amounts %}
-									<label class="btn btn-secondary btn-lg mb-2">
-										<input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
-											autocomplete="off"> <span class="USD">$</span>{{ a }} <span class="EUR">€</span>
+								<div class="form-group row mb-5">
+									<label class="col-sm-5 col-form-label col-form-label-lg">
+										or enter your own
 									</label>
-								{% end %}
-							</div>
-
-							<div class="form-group row mb-5">
-								<label class="col-sm-5 col-form-label col-form-label-lg">
-									or enter your own
-								</label>
 
-								<div class="col-sm-5">
-									<input type="number" class="form-control form-control-lg" name="amount-input" min="5" step="0.01"
-										{% if not amount in amounts %}value="{{ amount }}"{% end %}>
+									<div class="col-sm-5">
+										<input type="number" class="form-control form-control-lg" name="amount-input" min="5" step="0.01"
+											{% if not amount in amounts %}value="{{ amount }}"{% end %}>
+									</div>
 								</div>
-							</div>
 
-							<div class="row mb-5">
-								<div class="col d-flex flex-column">
-									<div class="form-row">
-										<div class="col">
-											<div class="form-check form-check-inline mb-3">
-												<input class="form-check-input" type="radio" name="title" id="mr" value="Mr." checked>
-												<label class="form-check-label" for="mr">{{ _("Mr.") }}</label>
-											</div>
-											<div class="form-check form-check-inline mb-3">
-												<input class="form-check-input" type="radio" name="title" id="mrs" value="Mrs.">
-												<label class="form-check-label" for="mrs">{{ _("Mrs.") }}</label>
+								<div class="row mb-5">
+									<div class="col d-flex flex-column">
+										<div class="form-row">
+											<div class="col">
+												<div class="form-check form-check-inline mb-3">
+													<input class="form-check-input" type="radio" name="title" id="mr" value="Mr." checked>
+													<label class="form-check-label" for="mr">{{ _("Mr.") }}</label>
+												</div>
+												<div class="form-check form-check-inline mb-3">
+													<input class="form-check-input" type="radio" name="title" id="mrs" value="Mrs.">
+													<label class="form-check-label" for="mrs">{{ _("Mrs.") }}</label>
+												</div>
 											</div>
 										</div>
-									</div>
 
-									<div class="form-row">
-										<div class="col-sm-6">
-											<div class="form-group">
-												<input type="text" class="form-control" name="first_name"
-													placeholder="{{ _("First Name" )}}" required>
+										<div class="form-row">
+											<div class="col-sm-6">
+												<div class="form-group">
+													<input type="text" class="form-control" name="first_name"
+														placeholder="{{ _("First Name" )}}" required>
+												</div>
 											</div>
-										</div>
 
-										<div class="col-sm-6">
-											<div class="form-group">
-												<input type="text" class="form-control" name="last_name"
-													placeholder="{{ _("Last Name" )}}" required>
+											<div class="col-sm-6">
+												<div class="form-group">
+													<input type="text" class="form-control" name="last_name"
+														placeholder="{{ _("Last Name" )}}" required>
+												</div>
 											</div>
 										</div>
-									</div>
 
-									<div class="form-group">
-										<input type="email" class="form-control" name="email"
-											placeholder="{{ _("Email Address") }}" required>
-									</div>
+										<div class="form-group">
+											<input type="email" class="form-control" name="email"
+												placeholder="{{ _("Email Address") }}" required>
+										</div>
 
-									<div class="form-group">
-										<input type="text" class="form-control" name="company_name"
-											placeholder="{{ _("Company Name (optional)") }}">
-									</div>
+										<div class="form-group">
+											<input type="text" class="form-control" name="company_name"
+												placeholder="{{ _("Company Name (optional)") }}">
+										</div>
 
-									<div class="form-group">
-										<input type="text" class="form-control" name="street1"
-											placeholder="{{ _("Address Line 1") }}" required>
-									</div>
+										<div class="form-group">
+											<input type="text" class="form-control" name="street1"
+												placeholder="{{ _("Address Line 1") }}" required>
+										</div>
 
-									<div class="form-group">
-										<input type="text" class="form-control" name="street2"
-											placeholder="{{ _("Address Line 2") }}">
-									</div>
+										<div class="form-group">
+											<input type="text" class="form-control" name="street2"
+												placeholder="{{ _("Address Line 2") }}">
+										</div>
 
-									<div class="form-row">
-										<div class="col-sm-6">
-											<div class="form-group">
-												<input type="text" class="form-control" name="city"
-													placeholder="{{ _("City") }}" required>
+										<div class="form-row">
+											<div class="col-sm-6">
+												<div class="form-group">
+													<input type="text" class="form-control" name="city"
+														placeholder="{{ _("City") }}" required>
+												</div>
 											</div>
-										</div>
 
-										<div class="col-sm-6">
-											<div class="form-group">
-												<input type="text" class="form-control" name="post_code"
-													placeholder="{{ _("Post Code") }}" required>
+											<div class="col-sm-6">
+												<div class="form-group">
+													<input type="text" class="form-control" name="post_code"
+														placeholder="{{ _("Post Code") }}" required>
+												</div>
 											</div>
 										</div>
-									</div>
-
-									<div class="form-row">
-										<div class="col-sm-6">
-											<div class="form-group">
-												<select class="form-control" name="country_code" required>
-													<option value="">- {{ _("Country") }} -</option>
 
-													{% for c in countries %}
-														<option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
-													{% end %}
-												</select>
+										<div class="form-row">
+											<div class="col-sm-6">
+												<div class="form-group">
+													<select class="form-control" name="country_code" required>
+														<option value="">- {{ _("Country") }} -</option>
+
+														{% for c in countries %}
+															<option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
+														{% end %}
+													</select>
+												</div>
 											</div>
-										</div>
 
-										<div class="col-sm-6">
-											<div class="form-group">
-												<input type="text" class="form-control" name="state"
-													placeholder="{{ _("State (optional)") }}">
+											<div class="col-sm-6">
+												<div class="form-group">
+													<input type="text" class="form-control" name="state"
+														placeholder="{{ _("State (optional)") }}">
+												</div>
 											</div>
 										</div>
 									</div>
 								</div>
-							</div>
 
-							<div class="row mb-5">
-								<div class="col text-center">
-									<input type="submit" class="btn btn-primary btn-lg"
-										id="donate" value="{{ _("Donate Now") }}">
+								<div class="row mb-5">
+									<div class="col text-center">
+										<input type="submit" class="btn btn-primary btn-lg"
+											id="donate" value="{{ _("Donate Now") }}">
+									</div>
 								</div>
-							</div>
 
-							<div class="row">
-								<div class="col d-flex justify-content-center">
-									<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-xl-2">
-									</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-xl-2">
-									</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/visa@3x.png") }} 3x"
-											alt="Visa" class="m-xl-2">
-									</picture>
-
-									<!-- XXX insert SEPA logo -->
+								<div class="row">
+									<div class="col d-flex justify-content-center">
+										<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-xl-2">
+										</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-xl-2">
+										</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/visa@3x.png") }} 3x"
+												alt="Visa" class="m-xl-2">
+										</picture>
+
+										<!-- XXX insert SEPA logo -->
+									</div>
 								</div>
-							</div>
 
-							<div class="modal fade" tabindex="-1" role="dialog" id="modal-upsell" aria-hidden="true">
-								<div class="modal-dialog modal-dialog-centered" role="document">
-									<div class="modal-content">
-										<div class="modal-header">
-											<h5 class="modal-title">Modal title</h5>
-											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-												<span aria-hidden="true">&times;</span>
-											</button>
-										</div>
+								<div class="modal fade" tabindex="-1" role="dialog" id="modal-upsell" aria-hidden="true">
+									<div class="modal-dialog modal-dialog-centered" role="document">
+										<div class="modal-content">
+											<div class="modal-header">
+												<h5 class="modal-title">Modal title</h5>
+												<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+													<span aria-hidden="true">&times;</span>
+												</button>
+											</div>
 
-										<div class="modal-body">
-											<p>Modal body text goes here.</p>
-										</div>
+											<div class="modal-body">
+												<p>Modal body text goes here.</p>
+											</div>
 
-										<div class="modal-footer">
-											<input type="submit" class="btn btn-primary" value="Donate Now">
-											<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+											<div class="modal-footer">
+												<input type="submit" class="btn btn-primary" value="Donate Now">
+												<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+											</div>
 										</div>
 									</div>
 								</div>
 							</div>
-						</div>
 
-						<p class="small text-muted mb-0">
-							The organization you will be donating to is Lightning Wire Labs GmbH who is
-							kindly handling donations for the IPFire project.
-							After clicking "Donate Now", you will be redirected to Lightning Wire Labs
-							where you will be able to complete the transaction.
-						</p>
-					</form>
+							<p class="small text-muted mb-0">
+								The organization you will be donating to is Lightning Wire Labs GmbH who is
+								kindly handling donations for the IPFire project.
+								After clicking "Donate Now", you will be redirected to Lightning Wire Labs
+								where you will be able to complete the transaction.
+							</p>
+						</form>
+					</div>
 				</div>
-			</div>
-		</div>
 
-		<div class="row">
-			<div class="col-12 col-md-6 donation-explanation">
-				<div class="d-block d-md-none">
-					<h5>Why we need you to donate today</h5>
-
-					<p>
-						IP<strong>Fire</strong> has grown to be the backbone of networks in companies,
-						schools and homes worldwide.
-					</p>
-
-					<p>
-						It is trusted by many and has proven that free software, developed by a diverse
-						community, can not only be equal, but better than proprietary solutions.
-					</p>
-
-					<p>
-						But still, development doesn’t come free to us and therefore
-						we are asking for your contribution today.
-					</p>
-				</div>
+				<div class="donation-explanation">
+					<section>
+						<h5>Why should I donate?</h5>
 
-				<section>
-					<h5>Why should I donate?</h5>
+						<p>
+							At IPFire, we are working hard to provide you with a free firewall distribution
+							that is like no other. We release updates regularly and enhance functionality
+							to make IPFire more secure, faster and easier to use.
+						</p>
 
-					<p>
-						At IPFire, we are working hard to provide you with a free firewall distribution
-						that is like no other. We release updates regularly and enhance functionality
-						to make IPFire more secure, faster and easier to use.
-					</p>
+						<p>
+							To achieve our high standards that we have set for ourselves, we need your help.
 
-					<p>
-						To achieve our high standards that we have set for ourselves, we need your help.
+							Only with your donation, we can get the right tools, people and utilities that
+							we need to make our work most efficient and reach our maximum potential.
 
-						Only with your donation, we can get the right tools, people and utilities that
-						we need to make our work most efficient and reach our maximum potential.
+							Only with your donation, we can achieve our vision to make the Internet a safer
+							place that is fair for everyone and giving equal opportunities.
+						</p>
+					</section>
 
-						Only with your donation, we can achieve our vision to make the Internet a safer
-						place that is fair for everyone and giving equal opportunities.
-					</p>
-				</section>
+					<section>
+						<h5>How much should I give?</h5>
 
-				<section>
-					<h5>How much should I give?</h5>
+						<p>
+							We are grateful for every single donation, but of course, we appreciate
+							if you help us as much as you can.
+						</p>
 
-					<p>
-						We are grateful for every single donation, but of course, we appreciate
-						if you help us as much as you can.
-					</p>
+						<p>
+							We rely on steady contributions from companies to keep the project healthy
+							and encourage them to set up a monthly donation.
+						</p>
+					</section>
 
-					<p>
-						We rely on steady contributions from companies to keep the project healthy
-						and encourage them to set up a monthly donation.
-					</p>
-				</section>
-			</div>
+					<div class="faq">
+						<h5>Frequently Asked Questions</h5>
 
-			<div class="col-12 col-md-6 faq">
-				<h5>Frequently Asked Questions</h5>
+						<p>
+							<a data-toggle="collapse" href="#faq-bank-transfer">
+								Do you accept bank transfer via SEPA?
+							</a>
+						</p>
 
-				<p>
-					<a data-toggle="collapse" href="#faq-bank-transfer">
-						Do you accept bank transfer via SEPA?
-					</a>
-				</p>
+						<div class="collapse text-muted" id="faq-bank-transfer">
+							<p>
+								We do accept direct transfers through SEPA. These are our bank details:
+							</p>
 
-				<div class="collapse text-muted" id="faq-bank-transfer">
-					<p>
-						We do accept direct transfers through SEPA. These are our bank details:
-					</p>
+							<dl>
+								<dt>IBAN</dt>
+								<dd>DE76 3605 0105 1010 8206 84</dd>
 
-					<dl>
-						<dt>IBAN</dt>
-						<dd>DE76 3605 0105 1010 8206 84</dd>
+								<dt>BIC</dt>
+								<dd>SPESDE3EXXX</dd>
+							</dl>
+						</div>
 
-						<dt>BIC</dt>
-						<dd>SPESDE3EXXX</dd>
-					</dl>
-				</div>
+						<p>
+							<a data-toggle="collapse" href="#faq-address">
+								Why do you need my address in order to process a donation?
+							</a>
+						</p>
 
-				<p>
-					<a data-toggle="collapse" href="#faq-address">
-						Why do you need my address in order to process a donation?
-					</a>
-				</p>
-
-				<div class="collapse text-muted" id="faq-address">
-					<p>
-						We understand that your privacy is very important.
-					</p>
-
-					<p>
-						We ask for a minimum amount of information required to process
-						credit card donations, including billing addresses.
-						This allows our payment processor to verify your identity,
-						process your payment, and prevent fraudulent charges to your credit card.
-					</p>
-
-					<p>
-						We keep your information private - if you have questions, please refer to
-						Lightning Wire Labs' <a href="https://www.lightningwirelabs.com/legal">Privacy Policy</a>.
-					</p>
-
-					<p>
-						If you would rather not fill in your information on our online donation form,
-						you can send your donation via SEPA bank transfer.
-					</p>
-				</div>
+						<div class="collapse text-muted" id="faq-address">
+							<p>
+								We understand that your privacy is very important.
+							</p>
+
+							<p>
+								We ask for a minimum amount of information required to process
+								credit card donations, including billing addresses.
+								This allows our payment processor to verify your identity,
+								process your payment, and prevent fraudulent charges to your credit card.
+							</p>
+
+							<p>
+								We keep your information private - if you have questions, please refer to
+								Lightning Wire Labs' <a href="https://www.lightningwirelabs.com/legal">Privacy Policy</a>.
+							</p>
+
+							<p>
+								If you would rather not fill in your information on our online donation form,
+								you can send your donation via SEPA bank transfer.
+							</p>
+						</div>
 
-				<p>
-					<a data-toggle="collapse" href="#faq-tax-deduction">
-						Is my donation tax deductible?
-					</a>
-				</p>
-
-				<div class="collapse text-muted" id="faq-tax-deduction">
-					<p>
-						IPFire is not registered as a charitable organization and therefore donations
-						are not tax deductible in Germany or the European Union.
-					</p>
-
-					<p>
-						For donors outside of the European Union, please consult your tax advisor
-						about whether your donation is tax deductible.
-					</p>
-				</div>
+						<p>
+							<a data-toggle="collapse" href="#faq-tax-deduction">
+								Is my donation tax deductible?
+							</a>
+						</p>
 
-				<p>
-					<a data-toggle="collapse" href="#faq-cancel">
-						How do I cancel or change my recurring donation?
-					</a>
-				</p>
-
-				<div class="collapse text-muted" id="faq-cancel">
-					<p>
-						Your credit card statements or bank statements will contain a link
-						that you can follow to cancel your donation at any time.
-					</p>
-				</div>
+						<div class="collapse text-muted" id="faq-tax-deduction">
+							<p>
+								IPFire is not registered as a charitable organization and therefore donations
+								are not tax deductible in Germany or the European Union.
+							</p>
 
-				<p>
-					<a data-toggle="collapse" href="#faq-email">
-						Who can I email directly with questions about donating?
-					</a>
-				</p>
-
-				<div class="collapse text-muted" id="faq-email">
-					<p>
-						If you have a question about donating to the IPFire Project,
-						please contact us at <a href="mailto:donate@ipfire.org">donate@ipfire.org</a>.
-					</p>
+							<p>
+								For donors outside of the European Union, please consult your tax advisor
+								about whether your donation is tax deductible.
+							</p>
+						</div>
+
+						<p>
+							<a data-toggle="collapse" href="#faq-cancel">
+								How do I cancel or change my recurring donation?
+							</a>
+						</p>
+
+						<div class="collapse text-muted" id="faq-cancel">
+							<p>
+								Your credit card statements or bank statements will contain a link
+								that you can follow to cancel your donation at any time.
+							</p>
+						</div>
+
+						<p>
+							<a data-toggle="collapse" href="#faq-email">
+								Who can I email directly with questions about donating?
+							</a>
+						</p>
+
+						<div class="collapse text-muted" id="faq-email">
+							<p>
+								If you have a question about donating to the IPFire Project,
+								please contact us at <a href="mailto:donate@ipfire.org">donate@ipfire.org</a>.
+							</p>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>