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

mobile clean up, working on accordian styling

Browse Source
This commit is contained in:
Calvin Jhunjhnuwala
2021-06-25 10:58:51 -07:00
parent c23fa8675c
commit ed5dca1188
4 changed files with 177 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,182 +17,179 @@
{% endblock %}
{% block main %}
<div class="marketing-wrapper">
<section class="container-new py-26 text-center">
<img id="home-hero-graphic" src="./img/graphics/home-hero-graphic.svg">
<div class="col-lg-6 mx-auto text-center">
<div class="d-flex flex-column-reverse">
<h1 class="">{% trans %}Community<br/> Powered Utility{% endtrans %}</h1>
<h6 class="green-500 mb-3">{% trans %}XRPL | XRPL Ledger{% endtrans %}</h6>
</div>
<a href="overview.html" class="btn btn-primary mr-4 mb-4">{% trans %}Start Building{% endtrans %}</a>
</div>
</section>
<section class="container-new py-26">
<div class="col-lg-6 offset-lg-3 pl-0-sm pr-0-sm p-8-sm p-10-until-sm">
<h2 class="h4 mb-8">{% trans %}The XRP Ledger: A Scalable, Sustainable Blockchain{% endtrans %}</h2>
<h6 class="longform mb-10">{% trans %}The XRP Ledger (XRPL) is a decentralized, public blockchain led by a global developer community.{% endtrans %}</h6>
<p class="mb-0">{% trans %}It’s fast, energy efficient, and reliable. With ease of development, low transaction costs, and a knowledgeable community, it provides developers with a strong open-source foundation for executing on the most demanding projects—without hurting the environment.{% endtrans %}</p>
</div>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-8 p-0 mx-10-until-md">
<h3 class="h4">{% trans %}Why Developers Choose XRP Ledger{% endtrans %}</h3>
<h6 class="green-500 mb-3">{% trans %}Discover Benefits{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
<li class="col-new ls-none mb-16-sm">
<img src="./img/icons/public.svg">
<h4 class="mt-3 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 mb-16-sm">
<img src="./img/icons/streamlined.svg">
<h4 class="mt-3 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 mb-16-sm">
<img src="./img/icons/performance.svg">
<h4 class="mt-3 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 mb-16-sm">
<img src="./img/icons/low-cost.svg">
<h4 class="mt-3 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 mb-16-sm">
<img src="./img/icons/community.svg">
<h4 class="mt-3 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 mb-16-sm">
<img src="./img/icons/reliability.svg">
<h4 class="mt-3 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>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-8 p-0 mx-10-until-md">
<h3 class="h4">{% trans %}Activate the power of the XRP Ledger and find the building blocks for your next innovation{% endtrans %}</h3>
<h6 class="green-500 mb-3">{% trans %}Explore Advanced Features{% endtrans %}</h6>
</div>
<div class="mt-10 card-grid card-grid-3xN">
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="pink-purple">
<span class="card-new d-block">
<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>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="neutral-blue">
<span class="card-new d-block">
<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>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="light-green">
<span class="card-new d-block">
<h4 class="h5">{% trans %}Payment <br class="until-sm"/>Channels{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Batched micropayments with unlimited speed, secured with XRP.{% endtrans %}</p>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="orange">
<span class="card-new d-block">
<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>
</span>
</a>
</div>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-8 p-0 mx-10-until-md">
<h3 class="h4">{% trans %}Choose a path to start building on the XRPL{% endtrans %}</h3>
<h6 class="green-500 mb-3">{% trans %}Get Started{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="orange-yellow">
<span class="card-new d-block">
<h4 class="h5">{% trans %}Quickstart{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Everything you need to get started working with the XRPL{% endtrans %}</p>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="magenta-orange">
<span class="card-new d-block">
<h4 class="h5">{% trans %}Guided Tutorials{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Step-by-step guides for frequent tasks{% endtrans %}</p>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="blue-green">
<span class="card-new d-block">
<h4 class="h5">{% trans %}XRPL Fundamentals{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Read about the XRPL’s foundational concepts{% endtrans %}</p>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="light-blue">
<span class="card-new d-block">
<h4 class="h5">{% trans %}Choose a Language{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Find tools, documentation, and sample code in Python, Java, Javascript, or use HTTP APIs{% endtrans %}</p>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="green-blue">
<span class="card-new d-block">
<h4 class="h5">{% trans %}Get Inspired{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}See what your peers have built on the XRPL{% endtrans %}</p>
</span>
</a>
</div>
</section>
<section class="container-new py-26">
<div class="col-lg-6 offset-lg-3 p-8-sm p-10-until-sm br-8 bg-grey-800 text-center">
<h2 class="h4 mb-8-sm mb-10-until-sm">{% trans %}Our Shared Vision for 
XRPL’s Future{% endtrans %}</h2>
<p class="mb-10">{% trans %}Together, we're building the greenest infrastructure to drive blockchain innovation that doesn't sacrifice utility or performance, to bring the developer community's vision to life.{% endtrans %}</p>
<a class="btn btn-primary">Learn More</a>
</div>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-8 p-0 mx-10-until-md">
<h3 class="h4">{% trans %}Explore what the community is building to enable new features and use cases on XRPL{% endtrans %}</h3>
<h6 class="green-500 mb-3">{% trans %}Preview New Features{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
<li class="col-new ls-none mb-16-sm">
<h5 class="chip chip-green">{% trans %}In Development{% endtrans %}</h5>
<h4 class="mt-3 mb-0 h5">{% trans %}Smart Contracts{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Hooks are small, efficient WebAssembly modules designed specifically for the XRPL. Check out the hooks amendment and public testnet that enable smart contract functionality.{% endtrans %}</p>
</li>
<li class="col-new ls-none mb-16-sm">
<h5 class="chip chip-green">{% trans %}In Development{% endtrans %}</h5>
<h4 class="mt-3 mb-0 h5">{% trans %}Non-Fungible Tokens{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Lower fees, faster transactions, and custom token functionality make the XRPL ideally suited for building an ecosystem for NFTs. Explore proposed standards for issuing NFTs.{% endtrans %}</p>
</li>
<li class="col-new ls-none mb-16-sm">
<h5 class="chip chip-green">{% trans %}In Development{% endtrans %}</h5>
<h4 class="mt-3 mb-0 h5">{% trans %}Sidechains{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Extend, experiment, and specialize a custom sidechain based on the XRPL's proven blockchain technology. Learn more about the vision of sidechains.{% endtrans %}</p>
</li>
</ul>
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-8-sm p-10-until-sm br-8 bg-grey-800 text-center">
<div class="d-flex flex-column-reverse">
<h2 class="h4 mb-10">{% trans %}XRPL.org: By the Community, 
For the Community{% endtrans %}</h2>
<h5 class="green-500 mb-3">{% trans %}Get Involved{% endtrans %}</h5>
</div>
<p class="mb-10">{% trans %}XRPL.org is a community-driven resource by and for developers who build on the XRP Ledger (XRPL).{% endtrans %}</p>
<a class="btn btn-primary">{% trans %}Join the Community{% endtrans %}</a>
</div>
</section>
<section class="container-new py-26 text-center">
<img id="home-hero-graphic" src="./img/graphics/home-hero-graphic.svg">
<div class="col-lg-6 mx-auto text-center">
<div class="d-flex flex-column-reverse">
<h1 class="mb-10">{% trans %}Community<br/> Powered Utility{% endtrans %}</h1>
<h6 class="green-500 mb-3">{% trans %}XRPL | XRPL Ledger{% endtrans %}</h6>
</div>
<a href="overview.html" class="btn btn-primary mr-4 mb-4">{% trans %}Start Building{% endtrans %}</a>
</div>
</section>
<section class="container-new py-26">
<div class="col-lg-6 offset-lg-3 pl-0-sm pr-0-sm p-8-sm p-10-until-sm">
<h2 class="h4 mb-8">{% trans %}The XRP Ledger: A Scalable, Sustainable Blockchain{% endtrans %}</h2>
<h6 class="longform mb-10">{% trans %}The XRP Ledger (XRPL) is a decentralized, public blockchain led by a global developer community.{% endtrans %}</h6>
<p class="mb-0">{% trans %}It’s fast, energy efficient, and reliable. With ease of development, low transaction costs, and a knowledgeable community, it provides developers with a strong open-source foundation for executing on the most demanding projects—without hurting the environment.{% endtrans %}</p>
</div>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-8 p-0 mx-10-until-md">
<h3 class="h4">{% trans %}Why Developers Choose XRP Ledger{% endtrans %}</h3>
<h6 class="green-500 mb-3">{% trans %}Discover Benefits{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
<li class="col-new ls-none mb-16-sm">
<img src="./img/icons/public.svg">
<h4 class="mt-3 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 mb-16-sm">
<img src="./img/icons/streamlined.svg">
<h4 class="mt-3 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 mb-16-sm">
<img src="./img/icons/performance.svg">
<h4 class="mt-3 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 mb-16-sm">
<img src="./img/icons/low-cost.svg">
<h4 class="mt-3 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 mb-16-sm">
<img src="./img/icons/community.svg">
<h4 class="mt-3 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 mb-16-sm">
<img src="./img/icons/reliability.svg">
<h4 class="mt-3 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>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-8 p-0 mx-10-until-md">
<h3 class="h4">{% trans %}Activate the power of the XRP Ledger and find the building blocks for your next innovation{% endtrans %}</h3>
<h6 class="green-500 mb-3">{% trans %}Explore Advanced Features{% endtrans %}</h6>
</div>
<div class="mt-10 card-grid card-grid-3xN">
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="pink-purple">
<span class="card-new d-block">
<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>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="neutral-blue">
<span class="card-new d-block">
<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>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="light-green">
<span class="card-new d-block">
<h4 class="h5">{% trans %}Payment <br class="until-sm"/>Channels{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Batched micropayments with unlimited speed, secured with XRP.{% endtrans %}</p>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="orange">
<span class="card-new d-block">
<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>
</span>
</a>
</div>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-8 p-0 mx-10-until-md">
<h3 class="h4">{% trans %}Choose a path to start building on the XRPL{% endtrans %}</h3>
<h6 class="green-500 mb-3">{% trans %}Get Started{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="orange-yellow">
<span class="card-new d-block">
<h4 class="h5">{% trans %}Quickstart{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Everything you need to get started working with the XRPL{% endtrans %}</p>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="magenta-orange">
<span class="card-new d-block">
<h4 class="h5">{% trans %}Guided Tutorials{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Step-by-step guides for frequent tasks{% endtrans %}</p>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="blue-green">
<span class="card-new d-block">
<h4 class="h5">{% trans %}XRPL Fundamentals{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Read about the XRPL’s foundational concepts{% endtrans %}</p>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="light-blue">
<span class="card-new d-block">
<h4 class="h5">{% trans %}Choose a Language{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}Find tools, documentation, and sample code in Python, Java, Javascript, or use HTTP APIs{% endtrans %}</p>
</span>
</a>
<a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="green-blue">
<span class="card-new d-block">
<h4 class="h5">{% trans %}Get Inspired{% endtrans %}</h4>
<p class="mt-6 mb-8">{% trans %}See what your peers have built on the XRPL{% endtrans %}</p>
</span>
</a>
</div>
</section>
<section class="container-new py-26">
<div class="col-lg-6 offset-lg-3 p-8-sm p-10-until-sm br-8 bg-grey-800 text-center">
<h2 class="h4 mb-8-sm mb-10-until-sm">{% trans %}Our Shared Vision for 
XRPL’s Future{% endtrans %}</h2>
<p class="mb-10">{% trans %}Together, we're building the greenest infrastructure to drive blockchain innovation that doesn't sacrifice utility or performance, to bring the developer community's vision to life.{% endtrans %}</p>
<a class="btn btn-primary">Learn More</a>
</div>
</section>
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-8 p-0 mx-10-until-md">
<h3 class="h4">{% trans %}Explore what the community is building to enable new features and use cases on XRPL{% endtrans %}</h3>
<h6 class="green-500 mb-3">{% trans %}Preview New Features{% endtrans %}</h6>
</div>
<ul class="mt-10 card-grid card-grid-3xN">
<li class="col-new ls-none mb-16-sm">
<h5 class="chip chip-green">{% trans %}In Development{% endtrans %}</h5>
<h4 class="mt-3 mb-0 h5">{% trans %}Smart Contracts{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Hooks are small, efficient WebAssembly modules designed specifically for the XRPL. Check out the hooks amendment and public testnet that enable smart contract functionality.{% endtrans %}</p>
</li>
<li class="col-new ls-none mb-16-sm">
<h5 class="chip chip-green">{% trans %}In Development{% endtrans %}</h5>
<h4 class="mt-3 mb-0 h5">{% trans %}Non-Fungible Tokens{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Lower fees, faster transactions, and custom token functionality make the XRPL ideally suited for building an ecosystem for NFTs. Explore proposed standards for issuing NFTs.{% endtrans %}</p>
</li>
<li class="col-new ls-none mb-16-sm">
<h5 class="chip chip-green">{% trans %}In Development{% endtrans %}</h5>
<h4 class="mt-3 mb-0 h5">{% trans %}Sidechains{% endtrans %}</h4>
<p class="mt-8 mb-0">{% trans %}Extend, experiment, and specialize a custom sidechain based on the XRPL's proven blockchain technology. Learn more about the vision of sidechains.{% endtrans %}</p>
</li>
</ul>
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-8-sm p-10-until-sm br-8 bg-grey-800 text-center">
<div class="d-flex flex-column-reverse">
<h2 class="h4 mb-10">{% trans %}XRPL.org: By the Community, 
For the Community{% endtrans %}</h2>
<h5 class="green-500 mb-3">{% trans %}Get Involved{% endtrans %}</h5>
</div>
<p class="mb-10">{% trans %}XRPL.org is a community-driven resource by and for developers who build on the XRP Ledger (XRPL).{% endtrans %}</p>
<a class="btn btn-primary">{% trans %}Join the Community{% endtrans %}</a>
</div>
</section>
{% endblock %}

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

@@ -27,7 +27,7 @@
</section>
<section class="container-new py-26">
<div class="col-md-6 offset-md-3 p-10">
<div class="col-lg-6 offset-lg-3 pl-0-sm pr-0-sm p-8-sm p-10-until-sm">
<h6 class="green-500 mb-3">{% trans %}XRP Ledger Basics{% endtrans %}</h6>
<h2 class="h4 mb-8">{% trans %}How the XRPL works{% endtrans %}</h2>
<h5 class="longform mb-10">{% trans %}The XRP Ledger is a decentralized public blockchain. {% endtrans %}</h5>