updates to all the QA requests. Fixed layout for the impact, calculator, and overview pages. Added net-new assets that have been updated or were missing. Removed unnecessary styling and added more helpers.

styles/_helpers.scss

@@ -11,6 +11,9 @@
 .w36 {
   width: 36px;
 }
+.h40 {
+  height: 40px;
+}
 .w40 {
   width: 40px;
 }
@@ -127,6 +130,9 @@
 .last-section {
   margin-bottom: 100px;
 }
+.bottom-0 {
+  bottom: 0;
+}
 
 /*  TEXT HELPERS */
 .va-middle {
@@ -141,17 +147,28 @@
 .align-items-stretch {
   align-items: stretch;
 }
+.underline {
+  text-decoration: underline;
+}
 
 @include media-breakpoint-down(xs) {
   .overflow-xs {
     overflow: scroll;
   }
 }
+@include media-breakpoint-up(md) {
+  .position-sm-absolute {
+    position: absolute;
+  }
+}
 
 /* COLOR ELEMENTS */
 .border-green {
   border: 1px solid $primary;
 }
+.border-none {
+  border: none !important;
+}
 .grey-400 {
   color: $gray-400
 }

styles/_pages.scss

@@ -54,10 +54,8 @@
 }
 
 
-
-
 #hero-impact {
-  width: 100vw;
+  width: calc(100vw - 16px);
 }
 @include media-breakpoint-up(md) {
   #hero-impact {
@@ -116,13 +114,13 @@
 #page-contribute-bot {
   position: absolute;
   right: 0;
-  margin-top: -199px;
+  margin-top: -256px;
   z-index: -1;
 }
 #page-overview-bg {
   background-image: url(../img/backgrounds/bg-overview-top.png);
   background-repeat: no-repeat;
-  background-position: right 0;
+  background-position: right 80px;
 }
 
 #page-history-bg {
@@ -137,11 +135,10 @@
   top: 302px;
 }
 
-.sustainability-bg {
+// .sustainability-bg {
-  background: url(../../img/green/green-graphic.png) 0 3rem no-repeat;
+//   background: url(../../img/green/green-graphic.png) 0 3rem no-repeat;
-  background-size: contain;
+//   background-size: contain;
-}
+// }
-
 
 .page-docs-index {
   @include media-breakpoint-up(lg) {
@@ -153,7 +150,13 @@
 
 
 .page-calculator {
+  .calculator-section-description {
+    max-width: 458px;
+  }
   /* CALCULATOR STYLING */
+  .calc-inputs {
+    border-radius: 8px;
+  }
   #data-selector li a {
     background: #22252B;
     padding: 0.5rem 1.3rem;
@@ -169,6 +172,14 @@
     background: $primary;
     color: $black;
   }
+  #data-selector li:first-child a {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+  }
+  #data-selector li:last-child a {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
   .tab-content div {
     display: none;
   }

styles/_tables.scss

@@ -2,11 +2,24 @@
 .dblue {
   color: #656E81;
 }
-#table-overview {
+#overview-table {
   td:nth-child(1){
     width: 40%;
   }
+  td:nth-child(2){
+    width: 30%;
+  }
+  tbody td {
+    padding: 2rem 0.75rem;
+  }
+  @include media-breakpoint-down(md) {
+    font-size: 0.875rem;
+    thead .h4 {
+      font-size: 1.125rem;
+    }
+  }
 }
+
 #calculator-table {
   width: 100%;
   thead {

tool/template-calculator.html

@@ -17,23 +17,23 @@
 
 {% block main %}
 <div class="fullwidth-bg">
-  <div class="container">
+  <div class="container mt-30">
 
     <section class="row mb-49">
       <h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
-      <div class="col-sm-4 d-sm-none d-md-block sustainability-bg">
+      <div class="col-sm-4 d-sm-none d-md-block">
-        &nbsp;
+        <img class="mw-100" src="./img/green/green-graphic.png">
       </div>
       <div class="col-sm-8">
         <h3 class="h1 mb-4 mt-12">{% trans %}How Green Is Your Currency?{% endtrans %}</h3>
         <a href="#calculator" class="arrow-link text-green bold">{% trans %}Explore the Interactive Tool{% endtrans %}</a>
         <h2 class="text-largest mt-16 h4">{% trans %}Energy Consumption for Cash, Credit Cards and Crypto{% endtrans %}</h2>
         <div class="d-sm-flex mt-10">
-          <div class="pr-1">
+          <div class="pr-sm-3">
             <p>{% trans %}Moving money carries cost—and not just the fee on your transaction or the value of your payment.{% endtrans %}</p>
             <p>{% trans %}Whether it’s in cash, on a credit card or with crypto, every transaction you make consumes energy, and therefore, emits pollutants into the environment.{% endtrans %}</p>
           </div>
-          <div class="pl-1">
+          <div class="pl-sm-3">
             <p>{% trans %}The impact of this is startling when you look at the total transactions across an entire year—for any one form of currency.{% endtrans %}</p>
             <p>{% trans %}Find out more about the environmental cost of some of the world’s most popular and innovative currencies, and start making more educated choices about how you transact.{% endtrans %}</p>
           </div>
@@ -43,8 +43,8 @@
   </div>
 
   <div class="container" id="calculator">
-    <div class="col-sm-8 mt-20 mb-30 offset-sm-4">
+    <div class="col-sm-5 mt-20 mb-30 offset-sm-4">
-      <h3>{% trans %}How Does XRP Compare to Other Currencies?{% endtrans %}</h3>
+      <h3 class="mb-4">{% trans %}How Does XRP Compare to Other Currencies?{% endtrans %}</h3>
       <a href="#" class="text-green arrow-link bold">{% trans %}Learn more about the methodology{% endtrans %}</a>
     </div>
   </div>
@@ -56,13 +56,13 @@
       <div class="col-lg-4" >
         <div class="rounded sticky-top top-10 mb-3 mb-lg-0" id="calculator-inputs">
           <div class="border-green p-3 calc-inputs">
-            <h4>{% trans %}Comparing Transaction Data{% endtrans %}</h4>
+            <h4>{% trans %}Comparing<br/> Transaction Data{% endtrans %}</h4>
               <ul class="p-0 mt-10 ls-none d-sm-flex d-lg-block d-xl-flex flex-wrap justify-content-around" id="data-selector">
                 <li class="d-block d-xl-inline-flex text-center active"><a class="tab-link d-block d-xl-flex fs-base va-middle" href="#d-crypto">{% trans %}Crypto{% endtrans %}</a></li>
                 <li class="d-block d-xl-inline-flex text-center"><a class="tab-link d-block d-xl-flex fs-base va-middle" href="#d-credit">{% trans %}Credit Cards{% endtrans %}</a></li>
                 <li class="d-block d-xl-inline-flex text-center"><a class="tab-link d-block d-xl-flex fs-base va-middle" href="#d-cash">{% trans %}Cash{% endtrans %}</a></li>
               </ul>
-              <div class="slidecontainer">
+              <div class="slidecontainer mb-10">
                 <input type="range" min="20" max="100" value="60" class="slider w-100" id="myRange" step="20">
                 <ul class="d-flex p-0 ls-none justify-content-between position-relative mr-neg-8 ml-neg-8 mt-1" style="z-index: -1;">
                   <li class="dash text-center text-smaller grey-50">20M</li>
@@ -72,6 +72,11 @@
                   <li class="dash text-center text-smaller grey-50">100M</li>
                 </ul>
               </div>
+              <div class="d-flex mb-3 ml-3">
+                <a href="#" class="mr-3"><img src="./img/logos/Twitter.png" alt="{% trans %}Twitter share{% endtrans %}" class="mw-100"></a>
+                <a href="#" class="mr-3"><img src="./img/logos/LinkedIn.png" alt="{% trans %}LinkedIn share{% endtrans %}" class="mw-100"></a>
+                <a href="#" class="mr-3"><img src="./img/logos/Facebook.png" alt="{% trans %}Facebook share{% endtrans %}" class="mw-100"></a>
+              </div>
           </div>
           <a href="#" class="text-white arrow-link bold mt-4 d-block">{% trans %}Learn more about the methodology{% endtrans %}</a>
         </div>
@@ -83,7 +88,7 @@
 
           <p class="grey-400 text-small my-4">{% trans %}Comparing <span class="slider-amt"></span> Million Transactions in 2019{% endtrans %}</p>
 
-          <p>{% trans %}The country of Portugal consumes ~50twh (1 billion) Kilowatt hours (KWH) of energy annually. Explore how much energy today’s various currencies consume in relation to Portugal.{% endtrans %}</p>
+          <p class="calculator-section-description">{% trans %}The country of Portugal consumes ~50twh (1 billion) Kilowatt hours (KWH) of energy annually. Explore how much energy today’s various currencies consume in relation to Portugal.{% endtrans %}</p>
 
           <div class="d-viz d-viz-1 mt-10">
             <ul class="d-sm-flex  p-0">
@@ -168,7 +173,7 @@
 
           <p class="grey-400 text-small my-4">{% trans %}Comparing <span class="slider-amt"></span> Million Transactions in 2019{% endtrans %}</p>
 
-          <p>{% trans %}A 12-hour flight from London to Hong Kong releases 3 tons of Carbon dioxide (C02). Discover how much C02 different forms of currency release in comparison to emissions from airline flights.{% endtrans %}</p>
+          <p class="calculator-section-description">{% trans %}A 12-hour flight from London to Hong Kong releases 3 tons of Carbon dioxide (C02). Discover how much C02 different forms of currency release in comparison to emissions from airline flights.{% endtrans %}</p>
 
           <div class="mt-10" id="co2Animation"></div>
 
@@ -211,7 +216,7 @@
 
           <p class="grey-400 text-small my-4">{% trans %}Comparing <span class="slider-amt"></span> Million Transactions in 2019{% endtrans %}</p>
 
-          <p>{% trans %}An Ultra Large Crude Carrier (ULCC) carries approximately 120 million gallons of gas. Measure the environmental impact between currencies in relation to the amount of gas they would consume in the real-world.{% endtrans %}</p>
+          <p class="calculator-section-description">{% trans %}An Ultra Large Crude Carrier (ULCC) carries approximately 120 million gallons of gas. Measure the environmental impact between currencies in relation to the amount of gas they would consume in the real-world.{% endtrans %}</p>
 
           <div class="mt-10" id="gasAnimation"></div>
 

tool/template-home.html

@@ -110,10 +110,10 @@
       <div class="col-sm-4 offset-sm-1 text-center">
         <img class="mw-100" src="./img/green/green-graphic.png">
       </div>
-      <div class="col-sm-5 offset-sm-1">
+      <div class="col-sm-6 offset-sm-1">
         <h3 class="h1 mb-9">{% trans %}Green by Nature{% endtrans %}</h3>
-        <p>{% 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 that consumes negligible energy.{% endtrans %}</p>
+        <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 that consumes negligible energy.{% endtrans %}</p>
-        <p class="mb-10">{% 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>
+        <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">

tool/template-learn-impact.html

@@ -36,12 +36,12 @@
 
     <div class="container mb-20">
       <section class="row mb-50">
-        <h6 class="section-marker">{% trans %}Creating Economic Opportunity{% endtrans %}</h6>
+        <h6 class="section-marker">{% trans %}Global Payments{% endtrans %}</h6>
-        <div class="col-md-4 offset-md-1 mb-10 text-center">
+        <div class="col-md-4 offset-md-1 mb-10 text-center d-flex-md justify-content-md-center align-self-md-center">
           <img class="mw-100" src="./img/impact/impact-democratizing-payments@2x.png">
         </div>
         <div class="col-md-6 offset-md-1">
-          <h2 class="mb-10">{% trans %}Democratizing Global Payments{% endtrans %}</h2>
+          <h2 class="mb-10">{% trans %}Creating Economic Opportunity{% endtrans %}</h2>
           <h5 class="mb-10 normal">{% trans %}For the more than <a href="https://www.un.org/sites/un2.un.org/files/wmr_2020.pdf">272 million migrants</a> worldwide, sending and receiving money across borders is expensive, unreliable and complex.{% endtrans %}</h5>
           <div class="mb-10 row">
             <div class="col-md">
@@ -70,8 +70,8 @@
       </section>
 
       <section class="row mb-50">
-        <h6 class="section-marker">{% trans %}Are All Digital Assets Alike?{% endtrans %}</h6>
+        <h6 class="section-marker">{% trans %}Digital Assets{% endtrans %}</h6>
-          <div class="col-md-4 offset-md-1 mb-10 text-center">
+          <div class="col-md-4 offset-md-1 mb-10 text-center d-flex-md justify-content-md-center align-self-md-center">
             <img class="mw-100" src="./img/impact/impact-crypto-strengths@2x.png">
           </div>
           <div class="col-md-6 offset-md-1">
@@ -89,11 +89,12 @@
       </section>
 
       <section class="row last-section">
-        <h6 class="section-marker">{% trans %}What Makes XRP and the XRP Ledger Green?{% endtrans %}</h6>
+        <h6 class="section-marker">{% trans %}Future of Finance{% endtrans %}</h6>
         <div class="col-md-4 mb-10 text-center">
           <img class="mw-100 mt-20" src="./img/green/green-graphic@2x.png">
         </div>
         <div class="col-md-8">
+          <h2 class="mb-10">{% trans %}What Makes XRP and the XRP Ledger Green?{% endtrans %}</h2>
           <h5 class="mb-10 normal">{% trans %}Most currency today—whether digital or physical—is not environmentally friendly. The potential for long-term impact on our planet could hold startling consequences.{% endtrans %}</h5>
           <div class="row mb-10">
             <div class="col-md">

tool/template-learn-overview.html

@@ -17,7 +17,7 @@
 
 {% block main %}
 <div id="page-overview-bg" class="pt-40">
-  <div class="container marketing-wrapper">
+  <div class="container">
       <section class="row mb-50">
         <div class="col-md-6 mb-10">
           <h6 class="text-primary mb-4">{% trans %}XRP Overview{% endtrans %}</h6>
@@ -25,7 +25,7 @@
         </div>
         <div class="w-100"></div>
         <div class="col-md-8">
-          <h2 class="mb-8">{% trans %}What is XRP?{% endtrans %}</h2>
+          <h2 class="mb-10">{% trans %}What is XRP?{% endtrans %}</h2>
           <div class="row">
             <p class="col-sm">{% trans %}XRP is a digital asset that’s native to the XRP Ledger, an open-source, permissionless and decentralized <a href="https://www.distributedagreement.com/2018/09/24/what-is-a-blockchain/" target="_blank">blockchain technology</a>.{% endtrans %}</p>
             <p class="col-sm">{% trans %}Created in 2012 specifically for payments, XRP can settle transactions on the ledger in 3-5 seconds. It was built to be a better Bitcoin—faster, cheaper and greener than any other digital asset.  {% endtrans %}</p>
@@ -33,35 +33,35 @@
         </div>
       </section>
 
-      <section class="row mb-50">
+      <section class="row mb-30">
         <h6 class="section-marker">{% trans %}Benefits{% endtrans %}</h6>
-        <div class="col-sm-12 col-lg-10 mt-14 overflow-xs">
+        <div class="col-sm-12 col-lg-10">
-            <table id="table-overview" class="mw-100">
+            <table id="overview-table" class="mw-100">
               <thead>
                 <tr>
                   <td class="bold h4">{% trans %}Benefits{% endtrans %}</td>
-                  <td class="bold text-large"><img class="h36 mr-2" src="assets/img/icons/bw-xrp.png">{% trans %}XRP{% 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="h36 mr-2" src="assets/img/icons/bw-bitcoin.png">{% trans %}Bitcoin{% 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-inline-block no-wrap"><img class="h32" src="assets/img/icons/fast.png"></div>{% trans %}Fast{% endtrans %}</td>
+                  <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-inline-block no-wrap"><img class="w32" src="assets/img/icons/low-cost.png"></div>{% trans %}Low Cost{% endtrans %}</td>
+                  <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.00002/transaction{% endtrans %}</td>
                   <td class="">{% trans %}$0.50/transaction{% endtrans %}</td>
                 </tr>
                 <tr>
-                  <td class="bold"><div class="w48 mr-3 text-center d-inline-block no-wrap"><img class="w44" src="assets/img/icons/scalable.png"></div>{% trans %}Scalable{% endtrans %}</td>
+                  <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 %}1500 transaction per second{% endtrans %}</td>
                   <td class="">{% trans %}3 transactions per second{% endtrans %}</td>
                 </tr>
-                <tr>
+                <tr class="border-none">
-                  <td class="bold"><div class="w48 mr-3 text-center d-inline-block no-wrap"><img class="w48" src="assets/img/icons/sustainable.png"></div>{% trans %}Sustainable{% endtrans %}</td>
+                  <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 (negligible energy consumption){% endtrans %}</td>
                   <td class="">{% trans %}0.3% of global energy consumption{% endtrans %}</td>
               </tbody>
@@ -71,19 +71,18 @@
 
 
       <section class="row mb-50">
-        <h6 class="section-marker">{% trans %}Finite Supply of XRP {% endtrans %}</h6>
         <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">{% trans %}History of XRP{% endtrans %}</a>
+          <a href="history.html" class="btn btn-outline-secondary mt-3">{% trans %}History of XRP{% endtrans %}</a>
         </div>
       </section>
 
-      <section class="row mb-50">
+      <section class="row mb-20">
-        <h6 class="section-marker">{% trans %}XRP Validators{% endtrans %}</h6>
         <div class="col-md-4 mb-10">
           <h2>{% trans %}How Does the XRP Ledger Work?{% endtrans %}</h2>
         </div>
@@ -95,21 +94,25 @@
           <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>
-        <div class="w-100 mb-20"></div>
+      </section>
-        <div class="col-lg-6">
+
+      <section class="row mb-40">
+        <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">
+        <div class="col-lg-5 offset-lg-1 d-flex-sm justify-content-sm-center align-self-sm-center">
-          <h4 class="mb-10">{% trans %}Anyone can operate a validator; currently, over 150 <a href="run-a-rippled-validator.html">validators</a> are active on the ledger, operated by  universities, exchanges, businesses and individuals.{% endtrans %}</h4>
+          <div>
-          <a href="consensus-network.html" class="btn btn-outline-secondary">{% trans %}Get Technical{% endtrans %}</a>
+            <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-50">
-        <h6 class="section-marker">{% trans %}Internet of Value{% endtrans %}</h6>
+        <div class="col-lg-7 pr-0">
-        <div class="col-lg-6">
           <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">Internet of Value</a>.{% endtrans %}</h5>
+          <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">
@@ -120,12 +123,12 @@
         <div class="col-md-4 mb-20">
           <h4>{% trans %}Individuals{% endtrans %}</h4>
           <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://payid.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">{% trans %}More About Uses{% endtrans %}</a>
+          <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">
+        <div class="col-md-4 mb-20">
           <h4>{% trans %}Developers{% endtrans %}</h4>
           <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 the <a href="https://xpring.io/">Xpring developer platform</a> are making it easier for developers to leverage XRP.  {% endtrans %}</p>
-          <a href="docs.html" class="text-white bold arrow-link">{% trans %}More About Developers{% endtrans %}</a>
+          <a href="docs.html" class="text-white bold arrow-link position-sm-absolute bottom-0">{% trans %}More About Developers{% endtrans %}</a>
         </div>
       </section>
 
@@ -184,7 +187,7 @@
       <section class="mb-50">
         <h6 class="section-marker">{% trans %}Trading{% endtrans %}</h6>
         <div class="row">
-          <div class="col-md-6 order-1 order-md-2 mb-10">
+          <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/">
                 <img class="mw-100" src="assets/img/exchanges/coinbase.png">
@@ -213,10 +216,10 @@
       <section class="mb-50">
         <h6 class="section-marker">{% trans %}Ripple vs. XRP{% endtrans %}</h6>
         <div class="row">
-          <div class="col-md-4 offset-md-1 mb-10 text-center">
+          <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-1">
+          <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>
@@ -228,7 +231,7 @@
         <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" src="./img/overview/xrp-community.png">
+            <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>

tool/template-learn-uses.html

@@ -35,10 +35,10 @@
     <div class="container mb-20">
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Cross-Border payments{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
+      <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center text-md-left">
         <img class="mw-100" src="./img/uses/xb-payment.png">
       </div>
-      <div class="col-md-6 offset-md-1 order-2 order-md-1">
+      <div class="col-md-4 offset-md-1 order-2 order-md-1">
         <h2 class="mb-10">{% trans %}Cross-Border Payments{% endtrans %}</h2>
         <p class="mb-10 normal">{% trans %}Through RippleNet, financial institutions can use XRP to bridge two currencies in 3-5 seconds, ensuring payments are quickly sent and received in the local currency on either side of a transaction.{% endtrans %}</p>
         <a href="https://ripple.com/ripplenet/on-demand-liquidity" class="btn btn-outline-secondary" target=
@@ -48,10 +48,10 @@
 
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Micropayments{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 mb-10 text-center">
+      <div class="col-md-4 offset-md-1 mb-10 text-center text-md-left">
         <img class="mw-100" src="./img/uses/micropayments.png">
       </div>
-      <div class="col-md-6 offset-md-1">
+      <div class="col-md-4 offset-md-2">
         <h2 class="mb-10">{% trans %}Micropayments{% endtrans %}</h2>
         <p class="mb-10 normal">{% trans %}Businesses are leveraging XRP and the XRP Ledger to build innovative products for gaming, content and web monetization, among other applications where money is at the center.{% endtrans %}</p>
         <a href="businesses.html" class="btn btn-outline-secondary">{% trans %}Learn About XRP Ledger Businesses{% endtrans %}</a>
@@ -60,10 +60,10 @@
 
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Digital Cryptocurrency{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
+      <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center text-md-left">
         <img class="mw-100" src="./img/uses/digital-wallets.png">
       </div>
-      <div class="col-md-6 offset-md-1 order-2 order-md-1">
+      <div class="col-md-4 offset-md-1 order-2 order-md-1">
         <h2 class="mb-10">{% trans %}Digital Cryptocurrency Wallets{% endtrans %}</h2>
         <p class="mb-10 normal">{% trans %}Individuals can use mobile wallets to store private and public passwords and interact with various blockchains to send and receive digital assets, including XRP.{% endtrans %}</p>
         <a href="wallets.html" class="btn btn-outline-secondary">{% trans %}Explore Wallets{% endtrans %}</a>
@@ -72,22 +72,22 @@
 
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Exchanges{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 mb-10 text-center">
+      <div class="col-md-4 offset-md-1 mb-10 text-center text-md-left">
         <img class="mw-100" src="./img/uses/exchanges.png">
       </div>
-      <div class="col-md-4 offset-md-1">
+      <div class="col-md-4 offset-md-2">
         <h2 class="mb-10">{% trans %}Exchanges{% endtrans %}</h2>
         <p class="mb-10 normal">{% trans %}Market makers and individuals use exchanges to trade XRP and other digital assets. Exchanges are often also intermediaries in cross-border payments among financial institutions.{% endtrans %}</p>
         <a href="exchanges.html" class="btn btn-outline-secondary">{% trans %}Explore Exchanges{% endtrans %}</a>
       </div>
     </section>
 
-    <section class="row last-section">
+    <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Trading{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
+      <div class="col-md-5 offset-md-1 order-1 order-md-2 mb-10 text-center text-md-left">
         <img class="mw-100" src="./img/uses/inst-trading.png">
       </div>
-      <div class="col-md-6 offset-md-1 order-2 order-md-1">
+      <div class="col-md-4 offset-md-1 order-2 order-md-1">
         <h2 class="mb-10">{% trans %}Institutional Trading{% endtrans %}</h2>
         <p class="mb-10 normal">{% trans %}Market participants use XRP as a high-speed, cost-efficient and reliable trading collateral. This means seizing arbitrage opportunities, servicing margin calls and managing general trade inventory in real time.{% endtrans %}</p>
         <a href="https://blog.xpring.io/how-xrp-enables-faster-low-cost-cross-exchange-transfers/" class="btn btn-outline-secondary" target="_blank">{% trans %}Learn More{% endtrans %}</a>