ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-04 11:55:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

working on cards, will need to review to make sure ok

Browse Source
This commit is contained in:
Calvin Jhunjhnuwala
2021-06-17 01:01:03 -07:00
parent bfd92d1cab
commit e7f593bc1c
10 changed files with 4546 additions and 3654 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal2020.css
View File

File diff suppressed because one or more lines are too long

6656
dactyl-config.yml
View File

File diff suppressed because it is too large Load Diff

BIN
img/cards/pink.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

1026
img/cards/pink.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 222 KiB

24
styles/_cards.scss
View File

@@ -7,10 +7,10 @@
}
.card-b {
padding: 2rem;
background: rgba(34, 37, 43, 0.5);
backdrop-filter: blur(3px);
border-radius: 8px;
opacity: 1;
// background: rgba(34, 37, 43, 0.5);
// backdrop-filter: blur(3px);
transition: all 0.35s ease-in-out;
@include media-breakpoint-down(sm) {
margin: 10px;
@@ -19,15 +19,15 @@
opacity: 0.6;
}
}
.section-marker {
position: absolute;
font-size: 0.875rem;
transform: rotate(90deg);
font-weight: normal;
top: calc(50% - 64px);
margin-left: -32px;
transform-origin: top left;
}
// .section-marker {
// position: absolute;
// font-size: 0.875rem;
// transform: rotate(90deg);
// font-weight: normal;
// top: calc(50% - 64px);
// margin-left: -32px;
// transform-origin: top left;
// }
@include media-breakpoint-down(md) {
.card-deck {
display: block !important;
@@ -35,4 +35,4 @@
.card-deck .card {
margin-bottom: 2.5rem !important;
}
}
}

18
styles/_font.scss
View File

@@ -52,7 +52,7 @@ h2, .h2 {
}
}
h3, .h3 {
font-size: 3.5rem;
font-size: 3rem;
line-height: 52px;
@include media-breakpoint-down(sm) {
font-size: 1.25rem;
@@ -71,8 +71,8 @@ h5, .h5 {
font-size: 1.5rem;
line-height: 32px;
@include media-breakpoint-down(sm) {
font-size: 1.125rem;
line-height: 26px;
font-size: 1rem;
line-height: 24px;
}
}
h6, .h6 {
@@ -98,7 +98,7 @@ a {
}
}
p a {
text-decoration: underline;
color: $blue-purple-400;
}
.fs-base {
@@ -167,11 +167,11 @@ p a {
font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
}
.section-marker {
transform: unset;
writing-mode: vertical-rl;
font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
}
// .section-marker {
// transform: unset;
// writing-mode: vertical-rl;
// font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
// }
&.page-calculator #data-selector li a {
padding: 0.5rem 1.1rem;

32
styles/_helpers.scss
View File

@@ -33,6 +33,12 @@
/* SPACING HELPERS */
/* To create new margin classes, multiply by 4px */
.mb-6 {
margin-bottom: 1.5rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
@@ -51,10 +57,20 @@
.mb-10 {
margin-bottom: 2.5rem;
}
.ml-10 {
margin-left: 2.5rem;
}
.mr-10 {
margin-right: 2.5rem;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.mx-10 {
margin-left: 2.5rem;
margin-right: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
@@ -108,6 +124,10 @@
margin-top: 5rem;
margin-bottom: 5rem;
}
.my-26 {
margin-top: 6.5rem;
margin-bottom: 6.5rem;
}
.mb-30 {
margin-bottom: 7.5rem;
}
@@ -266,3 +286,15 @@
.grey-700 {
color: $gray-700;
}
.bg-grey-800 {
background-color: $gray-800;
}
.green-500 {
color: $green-500;
}
/* ETC */
.br-8 {
border-radius: 8px;
}

64
styles/_layout.scss
View File

@@ -173,6 +173,69 @@ section {
}
// New Page Layouts ---------------------------------------------------------------
$columns: 12; // Number of columns in the grid system
.container-new {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 960px;
@include media-breakpoint-down(xxl) {
max-width: 1280px;
}
@include media-breakpoint-down(xl) {
max-width: 1040px;
}
@include media-breakpoint-down(lg) {
max-width: 832px;
}
@include media-breakpoint-down(md) {
max-width: 608px;
}
@include media-breakpoint-down(sm) {
max-width: 416px;
}
// create columns
@for $width from 1 through $columns {
.col-#{$width} {
flex-basis: $width / $columns * 100%;
}
}
.col-new {
--width: 4;
@include media-breakpoint-up(lg) {
margin: 40px;
}
@include media-breakpoint-down(lg) {
margin: 24px;
}
// &:nth-child(3n+1){
// margin-left: -40px;
// }
// &:nth-child(3n+3){
// margin-right: -40px;
// }
background-position: bottom;
background-repeat: no-repeat;
&#pink {
background-image: url(../../img/cards/pink.svg);
}
.card-new {
// border-radius: 8px;
padding: 32px;
}
}
.card-new {
--width: 4;
}
}
/* Grid Box Vertical numbers ------------------------------------------------ */
.flag-vertical {
color: $gray-200;
@@ -191,6 +254,7 @@ section {
}
// Misc. layout styles ---------------------------------------------------------
.xrp-ledger-dev-portal.sidebar-primary .main {
z-index: 5;
padding: 44px 24px 48px;

156
template/page-home.html.jinja
View File

@@ -17,9 +17,9 @@
{% endblock %}
{% block main %}
<div class="container marketing-wrapper">
<div class="marketing-wrapper">
<section class="row">
<section class="">
<h6 class="section-marker" id="home-hero-marker">{% trans %}Scroll Down{% endtrans %}</h6>
<img id="home-hero-graphic" src="./img/graphics/home-hero-graphic.svg">
<div class="col-md-6 mx-auto text-center my-5">
@@ -29,101 +29,73 @@
</div>
</section>
<section class="row pt-20 pb-30 py-50-until-sm" id="bg-home-1">
<h6 class="section-marker">{% trans %}XRP Ledger{% endtrans %}</h6>
<div class="row mb-10 mb-20-until-sm ml-0 mr-0">
<div class="col-lg-4 offset-lg-2">
<p class="text-primary bold">{% trans %}What is XRPL.org?{% endtrans %}</p>
<h2 class="mb-10">{% trans %}A Community-Driven Resource for All Things XRP and XRP Ledger{% endtrans %}</h2>
<p>{% trans %}Whether you’re a developer building on the XRP Ledger (XRPL) or just getting acquainted with blockchain and digital assets, XRPL.org is your source for technical information, reference materials, tools and all things XRP.{% endtrans %}</p>
</div>
<section class="container-new my-26">
<div class="d-flex flex-column-reverse col-8 p-0">
<h3 class="h4 mx-10">{% trans %}Why Developers Choose XRP Ledger{% endtrans %}</h3>
<h6 class="green-500 mx-10 mb-3">{% trans %}Discover Benefits{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
<li class="col-new ls-none">
<h4 class="mb-0 h5">{% trans %}Public and Decentralized Structure{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Open source, open to anyone to build on, maintained by the community{% endtrans %}</p>
</li>
<li class="col-new ls-none">
<h4 class="mb-0 h5">{% trans %}Streamlined <br/>Development{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Tools and documentation that speed development and reduce time to market{% endtrans %}</p>
</li>
<li class="col-new ls-none">
<h4 class="mb-0 h5">{% trans %}High <br/>Performance{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Capable of settling thousands of transactions in seconds{% endtrans %}</p>
</li>
<li class="col-new ls-none">
<h4 class="mb-0 h5">{% trans %}Low Cost{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}At fractions of a penny per transaction, costs are inexpensive enough to enable a wide variety of use cases{% endtrans %}</p>
</li>
<li class="col-new ls-none">
<h4 class="mb-0 h5">{% trans %}Vibrant Community{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Developers, validators, users, and businesses make the XRPL better every day{% endtrans %}</p>
</li>
<li class="col-new ls-none">
<h4 class="mb-0 h5">{% trans %}Proven Reliability{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}9+ years of consistent performance over more than 63 million ledgers{% endtrans %}</p>
</li>
</ul>
</section>
<div class="row ml-0 mr-0">
<div class="col-lg-4 offset-lg-2">
<div class="mt-16 mb-16">
<div class="row mb-16">
<div class="col text-center">
<img class="mw-100 mt-1" src="assets/img/icons/fast.png">
<h6 class="mt-8">{% trans %}Fast{% endtrans %}</h6>
</div>
<div class="col text-center">
<img class="mw-100 mt-3" src="assets/img/icons/scalable.png">
<h6 class="mt-8">{% trans %}Scalable{% endtrans %}</h6>
</div>
<div class="col text-center d-none-xs"></div>
</div>
<div class="row">
<div class="col text-center d-none-xs"></div>
<div class="col text-center">
<img class="mw-100 mt-3" src="assets/img/icons/low-cost.png">
<h6 class="mt-8">{% trans %}Low-Cost{% endtrans %}</h6>
</div>
<div class="col text-center" style="width: 33%;">
<img class="mw-100" src="assets/img/icons/sustainable.png">
<h6 class="mt-8">{% trans %}Sustainable{% endtrans %}</h6>
</div>
</div>
<section class="container-new my-26">
<div class="d-flex flex-column-reverse col-8 p-0">
<h3 class="h4 mx-10">{% trans %}Activate the power of the XRP Ledger and find the building blocks for your next innovation{% endtrans %}</h3>
<h6 class="green-500 mx-10 mb-3">{% trans %}Explore Advanced Features{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
<li class="col-new ls-none bg-grey-800 br-8" id="pink">
<div class="card-new" >
<h4 class="h5">{% trans %}Decentralized Exchange{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}A high-performance decentralized peer-to-peer multi-currency exchange built directly into the blockchain{% endtrans %}</p>
</div>
</div>
<div class="col-lg-4 offset-lg-1">
<p class="text-primary bold">{% trans %}What is XRP?{% endtrans %}</p>
<h2 class="mb-10">{% trans %}A Digital Asset Built for Payments{% endtrans %}</h2>
<p class="mb-4">{% trans %}XRP is a digital asset built for payments. It is the native digital asset on the XRP Ledger—an open-source, permissionless and decentralized blockchain technology that can settle transactions in 3-5 seconds.{% endtrans %}</p>
<p class="mb-4">{% trans %}It is the best way to move money around the world; the fuel for our growing digital economy.{% endtrans %}</p>
<a href="overview.html" class="btn btn-outline-secondary mr-4">{% trans %}Learn about XRP{% endtrans %}</a>
<a href="history.html" class="arrow-link mt-4 text-primary d-block"><span class="text-white">{% trans %}XRP History{% endtrans %}</span></a>
</div>
</div>
</section>
<section class="row mb-30 mb-50-until-sm">
<div class="col-12">
<h6 class="section-marker">{% trans %}Use Cases{% endtrans %}</h6>
<h2 class="h1">{% trans %}XRP in the Real World{% endtrans %}</h2>
<div class="w-100 mt-10 mt-20-until-sm"></div>
<div class="card-deck">
<div class="card rounded-lg hc mb-10" id="hc-1">
<h3 class="mb-12 h2">{% trans %}Uses of XRP{% endtrans %}</h3>
<p>{% trans %}XRP is helping solve previously unsolvable problems for people and industries around the world, and is one of the only digital assets with a commercial use case.{% endtrans %}</p>
<a href="uses.html" class="arrow-link mt-12 text-white">{% trans %}Explore Uses{% endtrans %}</a>
</div>
<div class="card rounded-lg hc mb-10" id="hc-2">
<h3 class="mb-12 h2">{% trans %}Businesses on the Ledger{% endtrans %}</h3>
<p class="pb-lg-4">{% trans %}From gaming to web monetization, XRP and the XRP Ledger are powering innovative new technology across the payments space.{% endtrans %}</p>
<a href="businesses.html" class="arrow-link mt-12 text-white">{% trans %}Explore Businesses{% endtrans %}</a>
</div>
<div class="card rounded-lg hc mb-10" id="hc-3">
<h3 class="mb-12 h2">{% trans %}Real-World Impact{% endtrans %}</h3>
<p class="pb-lg-4">{% trans %}With its real-world utility and inherently green design, XRP helps ensure a more sustainable future for our planet and global economy.{% endtrans %}</p>
<a href="impact.html" class="arrow-link mt-12 text-white">{% trans %}Explore Impact{% endtrans %}</a>
</div>
</div>
</div>
</section>
<section class="row last-section">
<h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
<div class="col-sm-4 offset-sm-1 text-center">
<img class="mw-100 green-graphic" src="./img/green/green-graphic.png" alt="{% trans %}Sustainability icon{% endtrans %}">
</div>
<div class="col-sm-6 offset-sm-1">
<h3 class="h1 mb-9">{% trans %}Green by Nature{% endtrans %}</h3>
<p class="mr-sm-5">{% trans %}XRP was designed with sustainability in mind. Contrary to other blockchains that use proof-of-work, the XRP Ledger confirms transactions through a unique “<a href="intro-to-consensus.html">consensus</a>” mechanism and is one of the first truly <a href="https://ripple.com/ripple-press/ripple-leads-sustainability-agenda-to-achieve-carbon-neutrality-by-2030/" target="_blank">carbon neutral blockchains</a>.{% endtrans %}</p>
<p class="mb-10 mr-sm-5">{% trans %}Explore the energy consumption of XRP compared to cash, credit cards and other popular crypto with the <a href="carbon-calculator.html">Green Currency Calculator</a>.{% endtrans %}</p>
<a href="carbon-calculator.html" class="btn btn-outline-secondary">{% trans %}Go Green{% endtrans %}</a>
<h4 class="mt-20 mb-10">{% trans %}Partners in Sustainability{% endtrans %}</h4>
<div class="d-flex align-items-center flex-wrap justify-content-between">
<img class="mw-100 mb-4 mr-2" src="./img/green/energy-web.png">
<img class="mw-100 mb-4 mr-2 ml-2" src="./img/green/rocky-mountain-inst.png">
<img class="mw-100 mb-4 mr-2" src="./img/green/reba.png">
</div>
</div>
</li>
<li class="col-new ls-none bg-grey-800 br-8">
<div class="card-new">
<h4 class="h5">{% trans %}Cross-Currency Payments{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Atomically settle multi-hop payments that cross currency or national boundaries with ease.{% endtrans %}</p>
</div>
</li>
<li class="col-new ls-none bg-grey-800 br-8">
<div class="card-new">
<h4 class="h5">{% trans %}Payment <br/>Channels{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Batched micropayments with unlimited speed, secured with XRP.{% endtrans %}</p>
</div>
</li>
<li class="col-new ls-none bg-grey-800 br-8">
<div class="card-new">
<h4 class="h5">{% trans %}Multi-Signing{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Flexible options for custody and security of on-ledger accounts.{% endtrans %}</p>
</div>
</li>
</ul>
</section>
</div>
{% endblock %}

222
template/page-xrpl-overview.html.jinja
View File

@@ -32,231 +32,29 @@
</div>
</div>
</section>
<section class="row mb-30">
<h6 class="section-marker">{% trans %}Benefits{% endtrans %}</h6>
<div class="col-sm-12 col-lg-10 overflow-x-xs">
<table id="overview-table" class="mw-100">
<thead>
<tr>
<td class="bold h4">{% trans %}Benefits{% endtrans %}</td>
<td class="bold text-large"><img class="h40 mr-3 mb-1" src="assets/img/icons/bw-xrp.png">{% trans %}XRP{% endtrans %}</td>
<td class="bold text-large"><img class="h32 mr-3 mb-1" src="assets/img/icons/bw-bitcoin.png">{% trans %}Bitcoin{% endtrans %}</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bold"><div class="w48 mr-3 text-center d-sm-inline-block no-wrap"><img class="h32" src="assets/img/icons/fast.png"></div>{% trans %}Fast{% endtrans %}</td>
<td class="">{% trans %}3-5 seconds to settle{% endtrans %}</td>
<td class="">{% trans %}500 seconds to settle{% endtrans %}</td>
</tr>
<tr>
<td class="bold"><div class="w48 mr-3 text-center d-sm-inline-block no-wrap"><img class="w32" src="assets/img/icons/low-cost.png"></div>{% trans %}Low-Cost{% endtrans %}</td>
<td class="">{% trans %}$0.0002/transaction{% endtrans %}</td>
<td class="">{% trans %}$0.50/transaction{% endtrans %}</td>
</tr>
<tr>
<td class="bold"><div class="w48 mr-3 text-center d-sm-inline-block no-wrap"><img class="w44" src="assets/img/icons/scalable.png"></div>{% trans %}Scalable{% endtrans %}</td>
<td class="">{% trans %}1,500 transactions per second{% endtrans %}</td>
<td class="">{% trans %}3 transactions per second{% endtrans %}</td>
</tr>
<tr class="border-none">
<td class="bold"><div class="w48 mr-3 text-center d-sm-inline-block no-wrap"><img class="w48" src="assets/img/icons/sustainable.png"></div>{% trans %}Sustainable{% endtrans %}</td>
<td class="">{% trans %}Environmentally sustainable and carbon neutral{% endtrans %}</td>
<td class="">{% trans %}0.3&#37; of global energy consumption{% endtrans %}</td>
</tbody>
</table>
</div>
</section>
<section class="row mb-30 mb-50-until-sm">
<div class="col-lg-6 offset-lg-1 order-1 order-lg-2 mb-10">
<img class="mw-100" src="./img/graphics/overview-supply.png">
</div>
<div class="col-lg-4 order-2 order-lg-1">
<h2 class="mb-10">{% trans %}Finite Supply of XRP{% endtrans %}</h2>
<p>{% trans %}XRP can be sent directly without needing a central intermediary, making it a convenient instrument in bridging two different currencies quickly and efficiently. It is freely exchanged on the open market and used in the real world for enabling cross-border payments and microtransactions.{% endtrans %}</p>
<p>{% trans %}Unlike Bitcoin, there is a finite amount of XRP. All XRP is already in existence today—100 billion in total.{% endtrans %}</p>
<a href="history.html" class="btn btn-outline-secondary mt-3">{% trans %}History of XRP{% endtrans %}</a>
</div>
</section>
<section class="row mb-20">
<div class="col-md-4 mb-10">
<h2>{% trans %}How Does the XRP Ledger Work?{% endtrans %}</h2>
</div>
<div class="col-md-4">
<p>{% trans %}The XRP Ledger is open-source technology on which anyone can build. The XRP Ledger is maintained by a global “XRP Community”—a diverse set of participants composed of software engineers, server operators and <a href="run-a-rippled-validator.html">validators</a>.{% endtrans %}</p>
<p>{% trans %}The XRP Ledger uses a consensus protocol, in which validators come to an agreement on the order of XRP transactions every 3-5 seconds. This agreement serves as the final and irreversible settlement.{% endtrans %}</p>
</div>
<div class="col-md-4">
<p>{% trans %}Transactions are executed in a deterministic order to prevent double spending and malicious activity. Unlike other blockchains, transaction fees are destroyed as part of transaction execution. The XRP Ledger adjusts fees in near real time to respond to network conditions, with the twin goals of maximizing transaction throughput while keeping transaction fees as low as possible.{% endtrans %}</p>
<p>{% trans %}All servers in the network process each transaction according to the same rules, and any transaction that follows the protocol is confirmed as soon as validators reach a quorum.{% endtrans %}</p>
</div>
</section>
<section class="row mb-30 mb-40-until-sm">
<h6 class="section-marker">{% trans %}XRP Validators{% endtrans %}</h6>
<div class="col-lg-6 mb-10">
<img class="mw-100" src="./img/graphics/validator.png">
</div>
<div class="col-lg-5 offset-lg-1 d-flex-sm justify-content-sm-center align-self-sm-center">
<div>
<h4 class="mb-10">{% trans %}Anyone can operate a validator; currently, over 150 <a href="run-a-rippled-validator.html" class="underline">validators</a> are active on the ledger, operated by universities, exchanges, businesses and individuals.{% endtrans %}</h4>
<a href="consensus-network.html" class="btn btn-outline-secondary">{% trans %}Get Technical{% endtrans %}</a>
</div>
</div>
</section>
<section class="row mb-30 mb-50-until-sm">
<div class="col-lg-7 pr-0">
<h2 class="mb-10">{% trans %}Why Is XRP Useful?{% endtrans %}</h2>
<h5 class="mb-10 normal h4">{% trans %}XRP is fast, low-cost, sustainable and scalable. It is the key to fueling growth and realizing the true potential of our global economy—the <a href="https://ripple.com/insights/the-internet-of-value-what-it-means-and-how-it-benefits-everyone/" target="_blank" class="underline">Internet of Value</a>.{% endtrans %}</h5>
</div>
<div class="w-100 mt-20"></div>
<div class="col-md-4 mb-20">
<h4>{% trans %}Businesses{% endtrans %}</h4>
</div>
<div class="new-container">
<h2>Why Developers</h2>
<section class="mt-10 card-grid card-grid-3xN">
<div class="card-new">
<h5>{% trans %}Micropayments{% endtrans %}</h5>
<p class="my-10">{% trans %}Many businesses are building on the XRP Ledger, pursuing powerful use cases in decentralized finance, micropayments, gaming, web monetization and more. Additionally, Ripple, the technology company, is focused on building a network and infrastructure that leverages XRP to power faster, more affordable cross-border payments around the world.{% endtrans %}</p>
<a href="businesses.html" class="text-white bold arrow-link">{% trans %}More About Businesses{% endtrans %}</a>
</div>
<div class="col-md-4 mb-20">
<h4>{% trans %}Individuals{% endtrans %}</h4>
<div class="card-new">
<h5>{% trans %}Cryptocurrency Wallets{% endtrans %}</h5>
<p class="my-10">{% trans %}Individual consumers can use XRP to move different currencies around the world. For example, through wallets and exchanges that use <a href="https://paystring.org/" target="_blank">PayID</a>, anyone can use XRP—or any currency, be it fiat or digital assets—to easily make purchases across any payments network.{% endtrans %}</p>
<a href="uses.html" class="text-white bold arrow-link position-sm-absolute bottom-0">{% trans %}More About Uses{% endtrans %}</a>
</div>
<div class="col-md-4 mb-20">
<h4>{% trans %}Developers{% endtrans %}</h4>
<div class="card-new">
<h5>{% trans %}Exchanges{% endtrans %}</h5>
<p class="my-10">{% trans %}By building on the XRP Ledger, developers can easily integrate payments into their products—seamlessly putting money at the center of their applications. Projects like <a href="https://github.com/XRPLF/xrpl-py" target="_blank">xrpl-py</a> are making it easier for developers to leverage XRP.{% endtrans %}</p>
<a href="docs.html" class="text-white bold arrow-link position-sm-absolute bottom-0">{% trans %}More About Developers{% endtrans %}</a>
</div>
</section>
<section class="mb-30 mb-50-until-sm">
<h6 class="section-marker">{% trans %}Internet of Value{% endtrans %}</h6>
<div class="row mb-20 mb-40-until-sm">
<div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center">
<img class="mw-100" src="./img/overview/fast.png">
</div>
<div class="col-md-4 offset-md-1 order-2 order-md-1 justify-content-sm-center align-self-sm-center">
<h2 class="mb-10">{% trans %}Fast{% endtrans %}</h2>
<p>{% trans %}The XRP Ledger settles transactions faster than any other blockchain—in 3-5 seconds.{% endtrans %}</p>
</div>
</div>
<div class="row mb-30">
<div class="col-md-4 offset-md-1 mb-10 text-center">
<img class="mw-100" src="./img/overview/low-cost.png">
</div>
<div class="col-md-4 offset-md-2 justify-content-sm-center align-self-sm-center">
<h2 class="mb-10">{% trans %}Low-Cost{% endtrans %}</h2>
<p>{% trans %}XRP transactions cost a fraction of a penny ($0.0002)—much less than other cryptocurrencies and average fiat payments.{% endtrans %}</p>
</div>
</div>
<div class="row mb-30">
<div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center">
<img class="mw-100" src="./img/overview/scalable.png">
</div>
<div class="col-md-4 offset-md-1 order-2 order-md-1 justify-content-sm-center align-self-sm-center">
<h2 class="mb-10">{% trans %}Scalable{% endtrans %}</h2>
<p>{% trans %}The XRP Ledger can handle up to 1,500 transactions per second.{% endtrans %}</p>
</div>
</div>
<div class="row mb-30">
<div class="col-md-4 offset-md-1 mb-10 text-center">
<img class="mw-100" src="./img/overview/sustainable.png">
</div>
<div class="col-md-4 offset-md-2 justify-content-sm-center align-self-sm-center">
<h2 class="mb-10">{% trans %}Sustainable{% endtrans %}</h2>
<p>{% trans %}XRP transactions settle without the enormous and unsustainable energy costs associated with proof-of-work (or mining).{% endtrans %}</p>
</div>
</div>
<div class="row mb-20">
<div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center">
<img class="mw-100" src="./img/overview/real.png">
</div>
<div class="col-md-4 offset-md-1 order-2 order-md-1 justify-content-sm-center align-self-sm-center">
<h2 class="mb-10">{% trans %}Real{% endtrans %}</h2>
<p>{% trans %}XRP is one of the only digital assets with a proven, real-world use case: cross-border payments.{% endtrans %}</p>
</div>
</div>
<div class="text-center">
<a href="uses.html" class="btn btn-outline-secondary">{% trans %}Explore Uses{% endtrans %}</a>
</div>
</section>
<section class="mb-30 mb-50-until-sm">
<h6 class="section-marker">{% trans %}Trading{% endtrans %}</h6>
<div class="row">
<div class="col-md-6 offset-md-1 order-1 order-md-2 mb-10">
<div class="d-flex flex-wrap w-100">
<a class="square square-50 d-flex card-b" href="https://www.coinbase.com/" target="_blank">
<img class="mw-100" src="assets/img/exchanges/coinbase.png">
</a>
<a class="square square-50 d-flex card-b" href="https://www.binance.com/" target="_blank">
<img class="mw-100" src="assets/img/exchanges/binance.png">
</a>
<a class="square square-50 d-flex card-b" href="https://www.bitstamp.net/" target="_blank">
<img class="mw-100" src="assets/img/exchanges/bitstamp.png">
</a>
<a class="square square-50 d-flex card-b" href="https://www.kraken.com/" target="_blank">
<img class="mw-100" src="assets/img/exchanges/kraken.png">
</a>
</div>
</div>
<div class="col-md-5 order-2 order-md-1">
<h2 class="mb-10">{% trans %}How Is XRP Used in Trading?{% endtrans %}</h2>
<p>{% trans %}XRP is traded on more than 140 markets and <a href="exchanges.html">exchanges</a> worldwide.{% endtrans %}</p>
<p>{% trans %}XRP’s low transaction fees, reliability and high speed enable traders to use the digital asset as fast, cost-efficient and reliable collateral across trading venues—<a href="https://ripple.com/insights/xrp-a-preferred-base-currency-for-arbitrage-trading/" target="_blank">seizing arbitrage opportunities</a>, servicing margin calls and managing general trading inventory in real time.{% endtrans %}</p>
<p>{% trans %}Because of the properties inherent to XRP and the ecosystem around it, traders worldwide are able to shift collateral, bridge currencies and switch from one crypto into another nearly instantly, across any exchange on the planet.{% endtrans %}</p>
<a href="exchanges.html" class="mt-10 btn btn-outline-secondary">{% trans %}Find Out More{% endtrans %}</a>
</div>
</div>
</section>
<section class="mb-30 mb-50-until-sm">
<h6 class="section-marker">{% trans %}Ripple vs. XRP{% endtrans %}</h6>
<div class="row">
<div class="col-md-3 offset-md-1 mb-10 text-center d-flex-md justify-content-md-center align-self-md-center">
<img class="mw-100 mt-10" src="./img/overview/xrp-text-logo.png">
</div>
<div class="col-md-5 offset-md-2">
<h2 class="mb-10">{% trans %}What Is the Relationship Between Ripple and XRP?{% endtrans %}</h2>
<p>{% trans %}Ripple is a technology company that makes it easier to build a high-performance, global payments business through its platform, RippleNet. XRP is a digital asset independent of this, and is used in Ripple’s On-Demand Liquidity service to facilitate efficient and cost-effective cross-border transactions. In December of 2017, Ripple placed 55 Billion XRP into a cryptographically secured <a href="https://ripple.com/insights/explanation-ripples-xrp-escrow/" target="_blank">escrow</a> account to support stable and healthy <a href="https://ripple.com/xrp/market-performance" target="_blank">XRP markets</a>.{% endtrans %}</p>
<a class="mt-10 btn btn-outline-secondary" href="https://ripple.com/" target="_blank">{% trans %}Visit Ripple's Website{% endtrans %}</a>
</div>
</div>
</section>
<section class="last-section">
<h6 class="section-marker">{% trans %}XRP Community{% endtrans %}</h6>
<div class="row">
<div class="col-md-6 offset-md-1 order-1 order-md-2 mb-10 text-center">
<img class="mw-100 mt-2" src="./img/overview/xrp-community.png">
</div>
<div class="col-md-5 order-2 order-md-1">
<h2 class="mb-10">{% trans %}XRPL.org: For the Community, by the Community{% endtrans %}</h2>
<p>{% trans %}XRPL.org is a community-driven resource for all things XRP and XRP Ledger (XRPL). If you’d like to suggest additional information around XRP, you can suggest changes <a href="contribute.html">here</a>.{% endtrans %}</p>
<a href="contribute.html" class="mt-10 btn btn-outline-secondary">{% trans %}Suggest Changes{% endtrans %}</a>
</div>
</div>
</section>
</div>
</div>
{% endblock %}
{% block endbody %}
<script type="text/javascript">
$( '.card-b' )
.mouseover( function(e){
$( '.card-b' ).addClass( 'not-hover' );
$( this ).removeClass( 'not-hover' );
})
.mouseout( function(e){
$( '.card-b' ).removeClass( 'not-hover' );
});
</script>
<script type="application/javascript">
gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});