Commit d489572e authored by Kim Höfer's avatar Kim Höfer
Browse files

implement styling for donation page

parent e21fc1fb
......@@ -22,4 +22,156 @@
#direct-payment > p {
margin: 0;
}
.sepa-debit-details {
display: none;
}
#lastschrift:checked ~ .sepa-debit-details {
display: block;
}
.bank-transfer {
display: none;
}
#Ueberweisung:checked ~ .bank-transfer {
display: block;
}
input[type=radio] {
margin: 0px;
margin-left: 2px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
h3 {
font-weight:bold;
}
.amount-label {
vertical-align:baseline ;
text-align: center;
margin-bottom: 4px;
margin-top: 4px;
margin-right: 5px;
font-size: 18px;
font-weight: normal;
width:4em;
border: 2px solid #a6a6a6;
border-radius: 5px;
}
.frequency-radio {
display:none;
}
.amount-radio {
display:none;
}
.payment-radio {
display:none;
}
.frequency-label {
margin-top: 5px;
height:45px;
font-weight: normal;
text-align: center;
border: 2px solid #a6a6a6;
width: 150px;
border-radius: 6px;
}
.payment-label {
margin-top: 5px;
height:45px;
font-weight: normal;
text-align: center;
border: 2px solid #a6a6a6;
width: 150px;
border-radius: 6px;
}
.amount-row {
display: flex;
justify-content: inherit;
margin-bottom: 8px;
height: 40px;
}
.amount-custom {
text-align: center;
align-items: center;
margin-right: 4px;
padding-right: 8px;
padding-left: 4px;
height: 30px;
font-weight: normal;
border: 2px solid #a6a6a6;
border-radius: 5px;
}
#amount-custom {
display: none;
}
#custom-amount {
display: none;
width: 164px;
}
#amount-custom:checked + label{
border: 4px solid #f47216;
}
#amount-custom:checked + label + input{
display: initial;
}
#amount-5euro:checked + label {
border: 4px solid #f47216;
}
#amount-10euro:checked + label {
border: 4px solid #f47216;
}
#amount-15euro:checked + label {
border: 4px solid #f47216;
}
#amount-20euro:checked + label {
border: 4px solid #f47216;
}
#amount-25euro:checked + label {
border: 4px solid #f47216;
}
#amount-50euro:checked + label {
border: 4px solid #f47216;
}
#amount-100euro:checked + label {
border: 4px solid #f47216;
}
#amount-200euro:checked + label {
border: 4px solid #f47216;
}
#amount-250euro:checked + label {
border: 4px solid #f47216;
}
#amount-300euro:checked + label {
border: 4px solid #f47216;
}
#once:checked + label{
border: 4px solid #f47216;
}
#monthly:checked + label{
border: 4px solid #f47216;
}
#quarterly:checked + label{
border: 4px solid #f47216;
}
#six-monthly:checked + label{
border: 4px solid #f47216;
}
#annual:checked + label{
border: 4px solid #f47216;
}
#lastschrift:checked + label{
border: 4px solid #f47216;
}
#ueberweisung:checked + label{
border: 4px solid #f47216;
}
#paypal:checked + label{
border: 4px solid #f47216;
}
}
\ No newline at end of file
......@@ -14,23 +14,60 @@
<div class="col-left">
<div class="section">
<h3 id="lastschrift">Welchen Beitrag möchten Sie spenden?</h3>
<input type="radio" name="amount" id="5euro"><label for="amount">5</label> <input type="radio" name="amount" id="15euro"><label for="amount">15</label>
<input type="radio" name="amount" id="25euro"><label for="amount">25</label> <input type="radio" name="amount" id="50euro"><label for="amount">50</label> <br>
<input type="radio" name="amount" id="100euro"><label for="amount">100</label> <input type="radio" name="amount" id="200euro"><label for="amount">200</label>
<input type="radio" name="amount" id="250euro"><label for="amount">250</label> <input type="radio" name="amount" id="300euro"><label for="amount">300</label> <br>
<input placeholder="Wunschbetrag in €" value="">
<div class="amount-row">
<input type="radio" class="amount-radio" name="amount" id="amount-5euro"> <label for="amount-5euro" class="amount-label">5</label>
<input type="radio" class="amount-radio" name="amount" id="amount-10euro"><label for="amount-10euro" class="amount-label">10</label>
<input type="radio" class="amount-radio" name="amount" id="amount-15euro"><label for="amount-15euro" class="amount-label">15</label>
<input type="radio" class="amount-radio" name="amount" id="amount-20euro"><label for="amount-20euro" class="amount-label">20</label>
<input type="radio" class="amount-radio" name="amount" id="amount-25euro"><label for="amount-25euro" class="amount-label">25</label> <br>
</div>
<div class="amount-row">
<input type="radio" class="amount-radio" name="amount" id="amount-50euro"><label for="amount-50euro" class="amount-label">50</label>
<input type="radio" class="amount-radio" name="amount" id="amount-100euro"><label for="amount-100euro" class="amount-label">100</label>
<input type="radio" class="amount-radio" name="amount" id="amount-200euro"><label for="amount-200euro" class="amount-label">200</label>
<input type="radio" class="amount-radio" name="amount" id="amount-250euro"><label for="amount-250euro" class="amount-label">250</label>
<input type="radio" class="amount-radio" name="amount" id="amount-300euro"><label for="amount-300euro" class="amount-label">300</label> <br>
</div>
<div>
<input type="radio" name="amount" id="amount-custom"><label for="amount-custom" class="amount-custom">Wunschbetrag</label> <input id="custom-amount" type="number" step=".01" placeholder="Betrag in €" value="">
</div>
<br>
<h3> Wie regelmäßig wollen Sie spenden?<h3>
<input type="radio" name="frequency" id="once"><label for="frequency">Einmalig</label> <br>
<input type="radio" name="frequency" id="monthly"><label for="frequency">Monatlich</label> <br>
<input type="radio" name="frequency" id="quarterly"><label for="frequency">Vierteljährlich</label> <br>
<input type="radio" name="frequency" id="six-monthly"><label for="frequency">Halbjährlich</label> <br>
<input type="radio" name="frequency" id="annual"><label for="frequency">Jährlich</label> <br>
<input type="radio" class="frequency-radio" name="frequency" id="once"><label class="frequency-label" for="once">Einmalig</label> <br>
<input type="radio" class="frequency-radio" name="frequency" id="monthly"><label class="frequency-label" for="monthly">Monatlich</label> <br>
<input type="radio" class="frequency-radio" name="frequency" id="quarterly"><label class="frequency-label" for="quarterly">Vierteljährlich</label> <br>
<input type="radio" class="frequency-radio" name="frequency" id="six-monthly"><label class="frequency-label" for="six-monthly">Halbjährlich</label> <br>
<input type="radio" class="frequency-radio" name="frequency" id="annual"><label class="frequency-label" for="annual">Jährlich</label> <br>
<br>
<h3>Wie wollen Sie spenden?<h3>
<input type="radio" name="payment-method" id="lastschrift"><label for="frequency">Lastschrift</label> <br>
<input type="radio" name="payment-method" id="Überweisung"><label for="frequency">Überweisung</label> <br>
<input type="radio" name="payment-method" id="Paypal" ><label for="frequency">Paypal</label> <br>
<input type="radio" class="payment-radio" name="payment-method" id="lastschrift"><label class="payment-label" for="lastschrift">Lastschrift</label><br>
<div class="sepa-debit-details">blaaarg</div>
<input type="radio" class="payment-radio" name="payment-method" id="ueberweisung"><label class="payment-label" for="ueberweisung">Überweisung</label> <br>
<div class="bank-transfer" id="direct-payment">
<p>{!! trans('spende.bankinfo.2') !!}</p>
<p>{!! trans('spende.bankinfo.2.1') !!}</p>
<p>{!! trans('spende.bankinfo.2.2') !!}</p>
<p>{!! trans('spende.bankinfo.2.3') !!}</p>
<p>{!! trans('spende.bankinfo.2.4') !!}</p></div>
<input type="radio" class="payment-radio" name="payment-method" id="paypal" ><label class="payment-label" for="paypal">Paypal</label> <br>
<div class="section">
<button type="button">Fortfahren</button>
</div>
......@@ -38,21 +75,24 @@
</div>
<div class="col-right">
<!--<div class="section" id="direct-payment">
<h3>{!! trans('spende.bankinfo.1') !!}</h3>
<p>{!! trans('spende.bankinfo.2') !!}</p>
<p>{!! trans('spende.bankinfo.2.1') !!}</p>
<p>{!! trans('spende.bankinfo.2.2') !!}</p>
<p>{!! trans('spende.bankinfo.2.3') !!}</p>
<p>{!! trans('spende.bankinfo.2.4') !!}</p>
<!--<div
</div>-->
<div class="section">
<p>{!! trans('spende.lastschrift.10') !!}</p> </div>
<div class="section">
<h3>Oder doch lieber Mitglied werden?</h3>
<p>Es kostet nicht mehr und bietet viele Vorteile.</p>
<a href="www.suma-ev.de/mitglieder">Vorteile</a> <a href="">Antragsformular</a>
</div>
<div class="section">
<p>{!! trans('spende.lastschrift.10') !!}</p> </div>
<ul>
<li>Werbefreie Nutzung von MetaGer</li>
<li>Förderung der Suchmaschine MetaGer</li>
<li>Mitgliedsbeitrag steuerlich absetzbar</li>
<li>Mitbestimmungsrechte im Verein</li>
</ul>
<a href="">Antragsformular</a>
</div>
</div>
</div>
@endsection
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment