Donation Prototype - v3 Multi-pay option

Developer
Zane Riley
Size
11,995 Kb
Views
14,168
  1. Donation Prototype - v3 Multi-pay option Previews
  2. Donation Prototype - v3 Multi-pay option HTML Codes
  3. Donation Prototype - v3 Multi-pay option CSS Codes
  4. Donation Prototype - v3 Multi-pay option JS Codes

How do I make an donation prototype - v3 multi-pay option?

What is a donation prototype - v3 multi-pay option? How do you make a donation prototype - v3 multi-pay option? This script and codes were developed by Zane Riley on 11 September 2022, Sunday.

Donation Prototype - v3 Multi-pay option Previews
IQ Test

Donation Prototype - v3 Multi-pay option - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Donation Prototype - v3 Multi-pay option</title> <meta name="viewport" content="width=device-width">
<script src="//use.typekit.net/rku0ory.js"></script> <script>try{Typekit.load();}catch(e){}</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/qcmpw.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main> <div class="donate-module"> <form class="donate-module-content" id="ccform" novalidate="" autocomplete="on" method="POST"> <h2 class="donation-module-title">Donate Today</h2> <fieldset class="donation-module-content-amount active"> <div class="donation-instructions"> <p>Choose the amount you'd like to give.</p> </div> <div class="donation-module-amounts"> <h4 class="donation-module-subtitle">Amount</h4> <ul> <li class="amount amount-cont-1"> <input type="radio" name="amount" id="amount_10" value="10" tabindex="10"/> <label for="amount_10">$10</label> </li> <li class="amount amount-count-2"> <input type="radio" name="amount" id="amount_35" value="35" tabindex="10"/> <label for="amount_35">$35</label> </li> <li class="amount amount-cont-3"> <input type="radio" name="amount" id="amount_50" value="50" tabindex="50"/> <label for="amount_50">$50</label> </li> <li class="amount amount-count-4"> <input type="radio" name="amount" id="amount_100" value="100" tabindex="10"/> <label for="amount_100">$100</label> </li> <li class="amount amount-count-5"> <input type="radio" name="amount" id="amount_250" value="250" tabindex="10"/> <label for="amount_250">$250</label> </li> <li class="amount amount-count-6"> <input type="radio" name="amount" id="amount_500" value="500" tabindex="10"/> <label for="amount_500">$500</label> </li> <div class="amount-count-other"> <label for="amount_other">Enter Other Amount</label> <input type="tel" name="amount_other" id="amount_other" placeholder="Enter Other Amount" tabindex="18"/> </div> <div class="amount-reoccuring"> <input type="checkbox" name="amount_reoccuring" id="amount_reoccuring"/> <label for="amount_reoccuring"><span></span> Make this a reoccuring donation.</label> </div> </ul> </div> <div class="next-step"> <p class="impact-statement"><span class="impact-amount">$35</span> can pay for: <span class="impact-results">180 days back to 2 girls.</span></p> <button class="btn btn--success" type="button" name="next" value="next">Donate with Credit Card or Bitcoin</button> <button class="btn btn--confirm" type="button" name="next" value="next">Donate with PayPal</button> </div> </fieldset> </form> <div class="thank-you-transition"></div> <div class="thank-you"> <div class="clearfix"></div> </div> </div> <p class="notes">Form does not post anywhere.</p>
</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.2.2/jquery.payment.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Donation Prototype - v3 Multi-pay option - Script Codes CSS Codes

$primary-color: #ef6c00;
$primary-color-lighter: #ffc855;
$primary-color-lightest: #ffffc8;
$accent-color: #bf2030;
$confirm-color: #814efc;
$success-color: #29ce75;
$inverse-color: #fff;
$main-text: rgba(55,0,67,1);
$sub-text: rgba(55,0,67,0.87);
$hint-text: rgba(55,0,67,0.33);
$border-radius: 0.2em;
// DONATION MODULE - GLOBAL
.donate-module { background-color: $inverse-color; border-radius: $border-radius; box-shadow: 0px 2px 4px 0px rgba(55,0,67,0.20); -webkit-font-smoothing: antialiased; overflow: hidden; position: relative; transform: rotateZ(360deg); transition: max-height 200ms cubic-bezier(0.000, -0.600, 0.000, 1.650); width: 25em; -webkit-transform: translateZ(0) scale(1.0, 1.0); fieldset { background: $inverse-color; transition: all 750ms cubic-bezier(1.000, -0.500, 0.520, 1.650); opacity: 0; position: absolute; transform: translateX(0%); float: left; max-width: 22em; &.active { display: block; opacity: 1; position: relative; transform: translateX(0); } &.next { opacity: 0; transform: translateX(-110%); } &.previous { transform: translate(110%); } }
}
// DONATION MODULE - CONTENT WITHIN MODULE
.donate-module-content { padding: 1.5em 1.5em 0; position: relative; > *:first-child, h2:first-child { margin-top: 0; } .donation-instructions { margin-bottom: 1.918em; text-align: left; p:last-of-type { margin-bottom: 0; } } // DONATE MODAL - NAME - IMPACT STATEMENT .next-step { text-align: right; .btn { margin-top: 1em; width: 100%; } >*:last-child{ margin-bottom:1.333em;; } } label + input:not([type='checkbox']):not([type='radio']) { display: block; } input:not([type='checkbox']):not([type='radio']) { margin-bottom: 1.333em; width: 100%; }
}
// DONATION MODAL - FIELDSET - DONATION AMOUNT
.donation-module-content-amount { text-align: center; width: 100%; h4 { margin-top: 0; text-align: left; } .donation-module-amounts { margin-bottom: 1.918em; } .amount { @include column(1/6); display: inline-block; margin-bottom: 1.633em; margin-top: 2.933em; input { position: absolute; visibility: hidden; z-index: 99; } label { border-radius: 10em; cursor: pointer; display: block; margin-top: -1.633em; position: relative; z-index: 2; color: $main-text; font-weight:700; &:after { background-color: $primary-color-lighter; border: 0; border-radius: 3em; bottom: -50%; content: ''; display: inline-block; height: 3.25em; left: 0; margin: auto; position: absolute; right: 0; width: 3.25em; z-index: -1; } } } .amount-count-other { clear: both; display: block; position: relative; width: 100%; label { display: none; visibility: hidden; } input { padding: 0.6em 2em 0.6em 1.75em; width: 100%; } &:before { bottom: 0.35em; content: '$'; display: inline-block; font-weight: 900; left: 0.75em; position: absolute; z-index: 1; } &:after { bottom: 0.35em; content: 'USD'; display: inline-block; font-weight: 900; position: absolute; right: 0.5em; z-index: 1; } } .amount-reoccuring { text-align: right; } .impact-statement { font-style: italic; margin-bottom: 0; } .impact-amount, .impact-results { font-style: normal; font-weight: 900; }
}
.thank-you-transition { content:""; display: block; position:absolute; border-radius:50%; background-color: $success-color; width:0; height:0; opacity:0; transition: all 750ms cubic-bezier(1.000, -0.500, 0.520, 1.650); bottom: 8.75em; right: 6.5em; &.active { width:100%; height:100%; opacity:1; }
}
// DONATE MODAL - RADIO LABELS -- UNCHECKED
input[type=radio] + label { color: $inverse-color; &:after { transition: background-color .1s ease-in-out; }
}
// DONATE MODAL RADIO LABELS -- CHECKED
input[type=radio]:checked + label { color: $inverse-color; transition: color 50ms ease-in-out; animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1) forwards; &:after { transition: background-color 200ms ease-in-out; background-color: $primary-color; }
}
// HELPER CLASSES
.hide { display: none;
}
.clearfix { clear:both;
}
// GLOBAL CLASSES
a { color:$primary-color; text-decoration:none; &:hover { background-image: linear-gradient(to bottom,rgba(0,0,0,0)90%, $primary-color 10%); background-repeat: repeat-x; text-decoration:none; }
}
.btn, a, button { cursor: pointer;
}
.btn, button { background: $primary-color; border-radius: $border-radius; border: 0; color: $inverse-color; font-size: 1em; font-weight: 700; padding: 0.75em 1em; position: relative; transition: background-color .1s ease-in-out; &:after { background: inherit; border-radius: $border-radius; bottom: -20px; content: ''; left: -20px; opacity: 0.4; position: absolute; right: -20px; top: -20px; transform: scale3d(0.8, 0.5, 1); z-index: -1; } &:active { transform: scale3d(0.95, 0.95, 1); &:after { animation: button-down-after 0.2s forwards; } }
}
.btn--confirm { background-color: $confirm-color; border: 1px solid rgba(55,0,67,0.20); box-shadow: 0px 1px 2px 0px rgba(55,0,67,0.20); text-shadow: 0px 1px 0px $hint-text; &:hover { background-color: #6322ff; } &:active { background-color: #40267f; }
}
.btn--success { background-color: $success-color; color: $main-text; &:hover { background-color: adjust-saturation($success-color, 30%); }
}
// INPUTS
input { border: 1px solid $hint-text; border-radius: $border-radius; background-color: #f3f3f3; color: $main-text; font-size: 1em; font-weight: 900; padding: .6em; transition:border .1s ease-in-out;
}
label{ display:block;
} // Placeholder Text Styling
::-webkit-input-placeholder { color: $hint-text; font-weight: 300;
} // Placeholder Text Styling
:-moz-placeholder { color: $primary-color-lighter; font-weight: 300; opacity: 1;
} // Placeholder Text Styling
::-moz-placeholder { color: $primary-color-lighter; font-weight: 300; opacity: 1;
} // Placeholder Text Styling
:-ms-input-placeholder { color: $primary-color; font-weight: 300;
}
input:active, input:focus{ border:1px solid $primary-color-lighter;
} // Checkbox Styling
input[type=checkbox] { display: none;
}
input[type=checkbox] + label,
input[type=radio] + label { cursor: pointer; position: relative; display:inline-block;
}
// Checkmark box
input[type='checkbox'] + label > span { background: transparent; border: 1px solid $hint-text; background-color: #f3f3f3; border-radius: $border-radius; cursor: pointer; display:inline-block; margin-bottom:0.1655em; margin-right:0.1em; height: 1em; transition: all 250ms cubic-bezier(.4, .0, .23, 1.5); width: 1em; vertical-align:middle;
}
// Highlights labels
input[type='checkbox'] + label:hover,
input[type='checkbox']:focus + label {
}
// Highlights Checkbox
input[type='checkbox'] + label:hover > span,
input[type='checkbox']:focus + label > span { border-color: $primary-color;
}
// Checkbox Background Color
input[type='checkbox']:checked + label > span { border: .5em solid #f3f3f3; animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);
}
// Checkmark Inside Checkbox
input[type='checkbox'] + label > span:before { content: ""; position: absolute; top: 0em; left: 0.125em; border-right: 0.3em solid transparent; border-bottom: 0.3em solid transparent; box-sizing:content-box;
}
// Checkmark Inside Checkbox
input[type='checkbox']:checked + label > span:before { transform: rotate(45deg); transform-origin: 0% 100%; animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards; box-sizing:content-box;
}
// CODEPEN STYLING
.notes { margin-bottom:0; font-size:0.75em; color:$inverse-color; padding:0.25em}
main { align-content: center; align-items: center; display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%; justify-content: space-around;
}
html { box-sizing: border-box;
}
*,
:after,
:before { box-sizing: inherit; margin: 0; outline: 0;
}
body,
html { min-height: 100%; height:100%;
}
body { background-color: $primary-color; background-image: url('https://i.imgur.com/gk3hqjs.jpg'); background-size: cover; color: $main-text; font-family: adelle-sans, sans-serif; line-height: 1.6; text-rendering: optimizeLegibility; &:after { content: ''; /* background-image: url('https://dl.dropboxusercontent.com/u/52491126/dfg-bg-v2.svg');*/ background-repeat: repeat; background-size: 10em; opacity: 0.25; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: -1; transition: opacity 400ms ease-in-out; }
}
p { margin-bottom: 1.3em;
}
h1,
h2,
h3,
h4 { font-family: adelle,serif; font-weight: inherit; line-height: 1.2; margin: 1.414em 0 .33333em;
}
h1 { font-size: 2.441em; margin-top: 0;
}
h2 { font-size: 1.953em;
}
h3 { font-size: 1.563em;
}
h4 { font-size: 1.25em;
}
.font-small, small { font-size: .8em;
}
// ANIMATIONS
@keyframes slideIn { 0% { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); } 4.3% { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,102.854,0,0,1); } 8.61% { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,175.717,0,0,1); } 12.91% { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,210.455,0,0,1); } 17.22% { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,218.667,0,0,1); } 28.33% { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,204.125,0,0,1); } 39.44% { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,198.754,0,0,1); } 61.66% { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,200.083,0,0,1); } 83.98% { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,199.994,0,0,1); } 100% { transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,200,0,0,1); }
}
@keyframes shrink-bounce{ 0% { transform: scale(1); } 33% { transform: scale(.85); } 100% { transform: scale(1); }
}
@keyframes checkbox-check{ 0% { width: 0; height: 0; border-color: $primary-color; transform: translate3d(0,0,0) rotate(45deg); } 33% { width: .2em; height: 0; transform: translate3d(0,0,0) rotate(45deg); } 100% { width: .2em; height: .5em; border-color: $primary-color; transform: translate3d(0,0,0) rotate(45deg); }
}
@keyframes button-down-after { to { opacity: 0; transform: scale(1, 1); }
}

Donation Prototype - v3 Multi-pay option - Script Codes JS Codes

// BUTTON SUBMISSION
$('form').submit(function (e) { e.preventDefault();
});
/* Donate Module - Amount Section - Impact Statement */
// Amount Radio Label Button Events
$('.amount label').on('click', function () { var dollarAmount = parseInt($(this).text().replace('$', ''), 10); var impactAmount = parseInt(dollarAmount / 10, 10); // copy to impact statement $('.impact-amount').text('$'+ dollarAmount); $('.impact-results').text('180 days back to ' + impactAmount + ' girls.'); // Clear other amount donation, if any $('#amount_other').val(''); // copy to donate button "Donate $50" $('button.donate').text('Donate $' + dollarAmount);
});
// Other Donation Amount Events
$('#amount_other').keyup(function () { var dollarAmount = $(this).val(); var impactAmount = parseInt(dollarAmount / 10, 10); // copy to impact statement $('.impact-amount').text('$'+ dollarAmount); $('.impact-results').text('180 days back to ' + impactAmount + ' girls.'); $('.amount input[type=radio]').prop('checked', false); // copy to donate button "Donate $50" $('button.donate').text('Donate $' + dollarAmount);
});
$('.btn.donate').on('click', function() { $('.thank-you-transition').addClass('active');
});
Donation Prototype - v3 Multi-pay option - Script Codes
Donation Prototype - v3 Multi-pay option - Script Codes
Home Page Home
Developer Zane Riley
Username zaneriley
Uploaded September 11, 2022
Rating 3
Size 11,995 Kb
Views 14,168
Do you need developer help for Donation Prototype - v3 Multi-pay option?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zane Riley (zaneriley) Script Codes
Name
Halloween Pen
Landing Page Prototype
Button Explorations
Fluid Type Demo with Grid
Donation Prototype - v2 Visual Hierarchy Fixes
Splash Page with animated gradient and text clipping.
Callout Example
3d Shadow Prototype v2
Portfolio Header and Footer
Typography
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!