Weekly UI - Stripe - Pricing section

Developer
Fred Hawk
Size
5,848 Kb
Views
12,144
  1. Weekly UI - Stripe - Pricing section Previews
  2. Weekly UI - Stripe - Pricing section HTML Codes
  3. Weekly UI - Stripe - Pricing section CSS Codes
  4. Weekly UI - Stripe - Pricing section JS Codes

How do I make an weekly ui - stripe - pricing section?

What is a weekly ui - stripe - pricing section? How do you make a weekly ui - stripe - pricing section? This script and codes were developed by Fred Hawk on 14 November 2022, Monday.

Weekly UI - Stripe - Pricing section Previews
IQ Test

Weekly UI - Stripe - Pricing section - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weekly UI - Stripe - Pricing section</title> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="payment"> <div class="container"> <section class="segment"> <header class="payment__title item"><img class="payment__titleIcon" src="https://stripe.com/img/v3/pricing/payments/title-icon.svg" alt="Dollars"/> <h4>Payments</h4> </header> </section> <article class="payment__cards"> <section class="segment"> <div class="iconContainer"><img src="https://stripe.com/img/v3/pricing/payments/section-cards.svg" alt="Cards"/></div> <div class="contentContainer item"> <h4 class="item__title">Credit & Debit Cards</h4> <div class="item__content"> <div class="itemContainer"> <p class="item__body">We charge a percentage-based fee each time you accept a credit or debit card payment. The price is the same for all major cards, including American Express. There’s no additional fee for international cards, failed charges, or refunds.</p><img class="item__credit-cards" src="https://stripe.com/img/v3/pricing/payments/card-brands.svg" alt="Credit Cards"/> </div> <div class="itemPrice"> <p class="item__price">2.9% + 30¢</p> </div> </div> </div> </section> </article> <article class="payment__ach-bitcoin"> <section class="segment"> <div class="iconContainer"><img src="https://stripe.com/img/v3/pricing/payments/section-ach.svg" alt="Building"/><img src="https://stripe.com/img/v3/pricing/payments/section-bitcoin.svg" alt="Bitcoin"/></div> <div class="contentContainer item"> <h4 class="item__title">ACH and Bitcoin payments</h4> <div class="item__content"> <div class="itemContainer"> <p class="item__body">ACH and Bitcoin fees are capped at $5—payments above $625 cost $5. We also provide tools to <a class="regular__link" href="#">verify customers’ bank accounts</a> at no additional cost. We charge $4 for failed ACH payments.</p> </div> <div class="itemPrice"> <p class="item__price">0.8% · $5 cap</p> </div> </div> </div> </section> </article> <article class="payment__also-included"> <section class="segment"> <div class="iconContainer"><img src="https://stripe.com/img/v3/pricing/payments/section-features.svg" alt="Hammer &amp; Screwdriver"/></div> <div class="contentContainer item"> <h4 class="item__title">Also included</h4> <div class="item__content"> <div class="itemContainer"> <p class="item__body">Get access to 100+ features right out of the box:</p> <div class="item__list"> <ul> <li>Smarter saved cards</li> <li>Simple PCI compliance</li> <li>Integrated fraud tools</li> </ul> <ul> <li>Full data portability</li> <li>Accounting integrations</li> <li>Team security controls</li> </ul> <ul> <li>Apple Pay, Android Pay</li> <li>iOS Dashboard</li> <li>Webhooks</li> </ul> </div> <h4 class="item__subheader">Currency conversions</h4> <p class="item__body">We’ll automatically convert payments accepted in other currencies. <a class="regular__link regular__link--rightArrow" href="#">Learn more</a></p> </div> </div> </div> </section> </article> <article class="payment__disputes"> <section class="segment"> <div class="iconContainer"><img src="https://stripe.com/img/v3/pricing/payments/section-disputes.svg" alt="Cash"/></div> <div class="contentContainer item"> <h4 class="item__title">Disputes</h4> <div class="item__content"> <div class="itemContainer"> <p class="item__body">Disputed payments, such as chargebacks, incur a fee. If the customer’s bank resolves the dispute in your favor, the fee is fully refunded. <a class="regular__link regular__link--rightArrow" href="#">Learn more</a></p> </div> <div class="itemPrice"> <p class="item__price">$15.00 or $0</p> </div> </div> </div> </section> </article> </div>
</section> <script src="js/index.js"></script>
</body>
</html>

Weekly UI - Stripe - Pricing section - Script Codes CSS Codes

.payment { background: white; font-family: 'Raleway', sans-serif;
}
.container { margin: 2rem 0;
}
.segment { padding-top: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex;
}
@media (min-width: 568px) { .segment { width: 90%; margin: 2rem auto 1rem; }
}
@media (min-width: 800px) { .segment { width: 75%; max-width: 60rem; }
}
.item { margin: 0 1rem;
}
.payment__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline;
}
.payment__title img { padding-right: 1rem; width: 2rem;
}
.payment__title h4 { font-size: 1.6rem; font-weight: 400; margin-bottom: 0;
}
.iconContainer { display: none;
}
@media (min-width: 800px) { .iconContainer { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 5rem; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
}
@media (min-width: 700px) { .item__content { display: -webkit-box; display: -ms-flexbox; display: flex; }
}
.item__title { font-size: 1.2rem; font-weight: 600; color: #0d2b3e;
}
.item__body { color: #566b78;
}
@media (min-width: 568px) { .item__body { margin-right: 1rem; }
}
.item__credit-cards { width: 90%;
}
@media (min-width: 568px) { .item__credit-cards { max-width: 25rem; }
}
@media (min-width: 700px) { .itemPrice { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-left: 1px solid rgba(52, 21, 112, 0.075); }
}
.item__price { font-size: 1.8rem; color: #00ab1c; white-space: nowrap;
}
@media (min-width: 700px) { .item__price { min-width: 12rem; text-align: right; }
}
.regular__link { color: #008cdd; text-decoration: none; -webkit-transition: color .1s ease; transition: color .1s ease;
}
.regular__link:hover { color: #003f5e;
}
.regular__link--rightArrow::after { pointer-events: none; content: ''; display: inline-block; width: 9px; height: 8px; margin-left: 5px; -webkit-transition: background .1s ease; transition: background .1s ease; top: -1px; background: #008cdd; -webkit-clip-path: url(https://stripe.com/img/v3/common/linkArrow-clip.svg#arrow); clip-path: url(https://stripe.com/img/v3/common/linkArrow-clip.svg#arrow); -webkit-mask: url(https://stripe.com/img/v3/common/linkArrow.svg); mask: url(https://stripe.com/img/v3/common/linkArrow.svg);
}
.regular__link--rightArrow:hover::after { background: #003f5e;
}
.payment__also-included { background: #edf6f9;
}
.item__subheader { font-weight: 600; color: #566b78;
}
.item__list { color: #566b78;
}
.item__list ul { margin: 0;
}
.item__list ul li { margin: 1rem 0;
}
@media (min-width: 700px) { .item__list { display: -webkit-box; display: -ms-flexbox; display: flex; }
}

Weekly UI - Stripe - Pricing section - Script Codes JS Codes

// Design
// https://stripe.com/us/pricing
"use strict";
Weekly UI - Stripe - Pricing section - Script Codes
Weekly UI - Stripe - Pricing section - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 5,848 Kb
Views 12,144
Do you need developer help for Weekly UI - Stripe - Pricing section?

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!

Fred Hawk (osycon) Script Codes
Name
Collapsing Text Animation
Weekly UI - Statue of liberty
Quotastic
Weekly UI - Dropbox Hero Component
Lilli
Weekly UI - ToDo mobile design
CSS Flexbox 3 col example
Calcul
Portfolio example FCC
Weather App
Create amazing SEO content 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!