.inline-card {
border-radius: 8px;
background-color: #eceff1;
- padding: 24px; }
+ padding: 24px;
+ position: relative;
+ padding: 24px 20px; }
label.amount {
width: 84px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
font-size: 20px;
color: #42a5f5;
- text-align: left;
+ text-align: center;
margin: 0 8px 16px 8px;
- padding-top: 8px; }
+ padding: 8px 0 0 0; }
input[name=amount] {
display: none; }
background-image: linear-gradient(120deg, #4fc3f7, #1976d2);
color: white; }
+.or {
+ display: block;
+ height: 200px;
+ width: 1px;
+ border: 1px solid rgba(38, 50, 56, 0.3);
+ position: absolute;
+ left: 350px;
+ top: 12px; }
+ .or:before {
+ content: "OR";
+ font-family: 'Ubuntu', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ color: rgba(38, 50, 56, 0.3);
+ background-color: #eceff1;
+ display: block;
+ position: absolute;
+ top: 12px;
+ left: -12px;
+ width: 24px;
+ height: 24px; }
+
body {
min-height: 100vh;
display: flex;
border-radius: 8px;
background-color: $blue-grey-50;
padding: 24px;
+ position: relative;
+ padding: 24px 20px;
}
label.amount {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
font-size: 20px;
color: $blue-400;
- text-align: left;
+ text-align: center;
margin: 0 8px 16px 8px;
- padding-top: 8px;
+ padding: 8px 0 0 0;
}
input[name=amount] {
input[name=amount]:checked + label {
background-image: linear-gradient(120deg, rgb(79, 195, 247), rgb(25, 118, 210));
color: white;
+}
+
+.or {
+ display: block;
+ height: 200px;
+ width: 1px;
+ border: 1px solid $blue-grey-300;
+ position: absolute;
+ left: 350px;
+ top: 12px;
+ &:before {
+ content: "OR";
+ font-family: 'Ubuntu', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ color: $blue-grey-300;
+ background-color: $blue-grey-50;
+ display: block;
+ position: absolute;
+ top: 12px;
+ left: -12px;
+ width: 24px;
+ height: 24px;
+ }
}
\ No newline at end of file
</p>
</div>
{% end %}
- </div>
-
+ </div>
<div class="col pl-5 pr-5">
<div class="card p-3 pt-6">
<div class="row">
</div>
<div class="row mt-6">
- <div class="inline-card bg-blue-grey-50 w-100 p-5">
+ <div class="inline-card bg-blue-grey-50 w-100">
+ <div class="or"></div>
<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" style="margin-left: -8px;">
+ <div class="form-group d-flex flex-row flex-wrap" style="margin-left: -8px;" id="amount">
<input class="amount-check" type="radio" name="amount" id="10" value="10" checked>
- <label for="10" class="form-check-label amount">10<span class="currency"></span></label>
+ <label for="10" class="form-check-label amount"><span id="amount_10">10</span><span class="currency">€</span></label>
<input class="amount-check" type="radio" name="amount" id="25" value="25">
- <label for="25" class="form-check-label amount">25<span class="currency"></span></label>
+ <label for="25" class="form-check-label amount"><span id="amount_25">25</span><span class="currency">€</span></label>
<input class="amount-check" type="radio" name="amount" id="50" value="50">
- <label for="50" class="form-check-label amount">50<span class="currency"><span class="currency"></label>
+ <label for="50" class="form-check-label amount"><span id="amount_50">50</span><span class="currency">€</span></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="75" value="50">
+ <label for="50" class="form-check-label amount"><span id="amount_75">75</span><span class="currency">€</span></label>
<input class="amount-check" type="radio" name="amount" id="100" value="100">
- <label for="100" class="form-check-label amount">100<span class="currency"></span></label>
+ <label for="100" class="form-check-label amount"><span id="amount_100">100</span><span class="currency">€</span></label>
<input class="amount-check" type="radio" name="amount" id="250" value="250">
- <label for="250" class="form-check-label amount">250<span class="currency"></span></label>
+ <label for="250" class="form-check-label amount"><span id="amount_250">250</span><span class="currency">€</span></label>
</div>
</div>
<div class="col">
<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>
+
+<script type="text/javascript">
+$(document).ready(function(){
+ $("input[name='currency']").on("change", function(){
+ if ($(this).val() == "euro") {
+ $('.currency').html('€');
+ }
+ else if ($(this).val() == "usd") {
+ $('.currency').html('$');
+ }
+ });
+ $("input[name='frequency']").on("change", function(){
+ if ($(this).val() == "single") {
+ $("input#10").attr("value", "10");
+ document.getElementById("amount_10").innerHTML="10";
+ $("input#25").attr("value", "25");
+ document.getElementById("amount_25").innerHTML="25";
+ $("input#50").attr("value", "50");
+ document.getElementById("amount_50").innerHTML="50";
+ $("input#75").attr("value", "75");
+ document.getElementById("amount_75").innerHTML="75";
+ $("input#100").attr("value", "100");
+ document.getElementById("amount_100").innerHTML="100";
+ $("input#250").attr("value", "250");
+ document.getElementById("amount_250").innerHTML="250";
+ }
+ else if ($(this).val() == "monthly") {
+ $("input#10").attr("value", "2");
+ document.getElementById("amount_10").innerHTML="2";
+ $("input#25").attr("value", "3");
+ document.getElementById("amount_25").innerHTML="3";
+ $("input#50").attr("value", "5");
+ document.getElementById("amount_50").innerHTML="5";
+ $("input#75").attr("value", "7");
+ document.getElementById("amount_75").innerHTML="7";
+ $("input#100").attr("value", "10");
+ document.getElementById("amount_100").innerHTML="10";
+ $("input#250").attr("value", "12");
+ document.getElementById("amount_250").innerHTML="12";
+ }
+ })
+});
+</script>
{% end block %}