adding backgrounds to the necessary pages. more styling for the landing pages. updated dactyl file

dactyl-config.yml

@@ -165,6 +165,16 @@ pages:
             - en
             - ja
 
+    -   name: Overview
+        funnel: Learn
+        category: Uses
+        template: template-learn-overview.html
+        html: overview.html
+        sidebar: disabled
+        targets:
+            - en
+            - ja
+
     -   name: Uses
         funnel: Learn
         category: Uses
@@ -178,7 +188,7 @@ pages:
     -   name: History
         funnel: Learn
         category: History
-        template: template-contact.html # TODO: change as needed
+        template: template-learn-history.html # TODO: change as needed
         html: history.html
         sidebar: disabled
         targets:
@@ -197,8 +207,8 @@ pages:
 
     -   name: Carbon Calculator
         funnel: Learn
-        category: Impact
-        template: template-doc.html # TODO: change as needed
+        category: Carbon Calculator
+        template: template-calculator.html # TODO: change as needed
         html: carbon-calculator.html
         sidebar: disabled
         targets:

styles/_buttons.scss

@@ -95,7 +95,7 @@ a.button {
   padding-left: 14px;
 }
 
-.btn:not(.external-link):not(.dropdown-toggle):not(.jump-to-top)::after,
+// .btn:not(.external-link):not(.dropdown-toggle):not(.jump-to-top)::after,
 .landing .card .level-1 a::after,
 .landing .card .level-2 a::after,
 .landing .card .curated-links li a::after,
@@ -111,7 +111,7 @@ a.button {
   content: " ↑"
 }
 
-.btn:not(.external-link):not(.dropdown-toggle):hover::after,
+// .btn:not(.external-link):not(.dropdown-toggle):hover::after,
 .landing .card .level-1 a:hover::after,
 .landing .card .level-2 a:hover::after,
 .landing .card .curated-links li a:hover::after,

styles/_helpers.scss

@@ -74,6 +74,9 @@
 .mb-30 {
 	margin-bottom: 7.5rem;
 }
+.mt-30 {
+	margin-top: 7.5rem;
+}
 .mt-40 {
 	margin-top: 10rem;
 }
@@ -90,6 +93,9 @@
 .mb-50 {
 	margin-bottom: 12.5rem;
 }
+.pt-40 {
+	padding-top: 10rem;
+}
 .pb-40 {
 	padding-bottom: 10rem;
 }

styles/_layout.scss

@@ -152,9 +152,9 @@ section {
   min-height: 700px;
 }
 
-.row {
-  margin: 0 -1px;
-}
+// .row {
+//   margin: 0 -1px;
+// }
 
 
 .doc-index {

styles/_marketing.scss

@@ -45,7 +45,7 @@
 
 #hero-impact {
 	width: 100vw;
-	margin-left: -64px;
+	// margin-left: -32px;
 }
 @media only screen and (min-width: 768px) {
   #hero-impact {
@@ -68,8 +68,8 @@
 	border: 1px solid $white;
 }
 .btn-clear:hover {
-	background: $white;
-	color: #000;
+	background: $primary;
+	color: $primary;
 }
 .card-wrapper {
 	width: 100%;
@@ -77,6 +77,7 @@
 .card-b {
 	padding: 2rem;
 	background: rgba(34, 37, 43, 0.5);
+	backdrop-filter: blur(3px);
 }
 
 // change this to be less generic
@@ -152,4 +153,158 @@
   0% { padding-left: 7px; }
   50% { padding-left: 14px; }
   100% { padding-left: 7px; }
+}
+
+//  TIMELINE 
+.timeline-wrapper {
+    z-index: 999;
+    position: relative;
+}
+
+
+.timeline:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 18px;
+    height: 102.5%;
+    width: 4px;
+    background: linear-gradient(180deg, rgba(254, 255, 1, 1) 0%, rgba(255, 45, 154, 1) 33%, rgba(163, 8, 143, 1) 66%, rgba(44, 4, 128, 0.85) 100%);
+ }
+
+.timeline-dot {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #000;
+  box-sizing: border-box;
+}
+
+.timeline-block:first-child .timeline-dot {
+	border: 3px solid #FAFF1A;
+}
+
+.timeline-block:nth-child(2) .timeline-dot {
+	border: 3px solid #FF884B;
+}
+.timeline-block:nth-child(3) .timeline-dot {
+	border: 3px solid #C000E6;
+}
+
+
+.timeline-block {
+    display: flex;
+    position: relative;
+    z-index: 1;
+    margin-bottom: 8px;
+}
+
+.timeline-content {
+  flex-grow: 1;
+  position: relative;
+  margin-left: 1.25em;
+}
+
+.timeline h4 {
+  margin-top: -4px;
+}
+
+@media (min-width: 767px) {
+	.timeline:before {
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
+  .timeline-dot {
+  	-ms-flex-order: 1;
+    order: 1;
+    margin-left: calc(5% - 9px);
+    will-change: transform;
+  }
+  .timeline-block:nth-child(even) {
+  	-ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+  }
+  .timeline-dot {
+    margin-right: calc(5% - 9px);
+  }
+  .timeline-content {
+  	 width: 45%;
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+    will-change: transform;
+    margin: 0;
+    --line-height-multiplier: 1.2;
+  }
+}
+
+
+#page-impact-bg {
+	background-image: url(../../img/backgrounds/bg-impact-top.png);
+	background-repeat: no-repeat;
+  background-position: center 250px;
+  background-size: contain;
+}
+
+#page-business-bg {
+	background-image: url(../../img/backgrounds/bg-business-mid.png);
+	background-repeat: no-repeat;
+	background-position: right 72.5%;
+}
+#page-business-top {
+	position: absolute;
+	left: 0;
+}
+#page-business-bot {
+	position: absolute;
+	left: 0;
+	margin-top: -505px;
+  z-index: -1;
+}
+
+#page-exchanges-bg {
+	background-image: url(../../img/backgrounds/bg-exchanges-top.png);
+	background-repeat: no-repeat;
+	background-position: left 25%;
+}
+#page-exchanges-bot {
+	position: absolute;
+	right: 0;
+	margin-top: -446px;
+  z-index: -1;
+}
+
+
+#page-wallets-bg {
+	background-image: url(../../img/backgrounds/bg-wallets-top.png);
+	background-repeat: no-repeat;
+	background-position: left 5%;
+}
+#page-wallets-bot {
+	position: absolute;
+	right: 0;
+	margin-top: -778px;
+  z-index: -1;
+}
+
+#page-contribute-bot {
+	position: absolute;
+	right: 0;
+	margin-top: -199px;
+  z-index: -1;
+}
+
+#page-overview-bg {
+	background-image: url(../../img/backgrounds/bg-overview-top.png);
+	background-repeat: no-repeat;
+	background-position: right 0;
 }

tool/template-calculator.html

@@ -16,43 +16,211 @@
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
-  <div class="container my-40 marketing-wrapper">
-    <section class="row mb-50">
-      <div class="col-md-5">
-        <h6 class="text-primary mb-4">{% trans %}Contribute to XRPL.org{% endtrans %}</h6>
-        <h1 class="mb-10">{% trans %}How to Suggest Changes to the Site{% endtrans %}</h1>
-        <p>{% trans %}Thank you for your interest in contributing to XRPL.org.{% endtrans %}</p>
-        <p>{% trans %}This website was created for the community and is meant to be a living, breathing source of truth for XRP resources.{% endtrans %}</p>
-				<p>{% trans %}If you’d like to recommend new content, please fill out the form or submit your changes in GitHub.{% endtrans %}</p>
+  <div class="container my-20 mb-49">
+        <section class="row mb-49">
+          <h6 class="section-marker">Sustainability</h6>
+          <div class="col-sm-4">
+            <img src="../assets/img/green-graphic.png" class="mw-100">
+          </div>
+          <div class="col-sm-8">
+            <h3 class="h1 mb-4 mt-12">How Green Is Your Currency?</h3>
+            <a href="" class="arrow-link text-green bold">Explore the Interactive Tool</a>
+            <h4 class="text-largest mt-16">Energy Consumption for Cash, Credit Cards and Crypto</h4>
+            <div class="d-sm-flex mt-10">
+              <p class="pr-1">Moving money carries cost—and not just the fee on your transaction or the value of your payment.<br/><br/>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. </p>
+              <p class="pl-1">The impact of this is startling when you look at the total transactions across an entire year—for any one form of currency.<br/><br/>
+              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.</p>
+            </div>
+          </div>
+        </section>
       </div>
-      <div class="col-md-6 offset-md-1">
-        <form id="contact-form" method="post" action="contact-form-handler.php">
-        	<label class="text-primary bold h6" for="name">Name*</label>
-        	<input type="text" name="name" placeholder="Your Name" required>
-        	<label class="text-primary bold h6 mt-4" for="email">Email*</label>
-        	<input type="email" name="email" placeholder="Your Email" required>
-        	<label class="text-primary bold h6 mt-4" for="message">Message*</label>
-        	<textarea name="message" placeholder="Message" required name="message"></textarea>
-        	<input type="submit" class="form-control submit mt-4" value="Submit">
-        </form>
-      </div>
-    </section>
 
-    <section class="row mb-50">
-      <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
-        <img class="mw-100 mb-10" src="./img/marketing/impact-democratizing-payments@2x.png">
+      <div class="container">
+        <div class="col-sm-8 my-20 offset-sm-4">
+          <h3>How Does XRP Compare to Other Currencies?</h3>
+          <a href="#" class="text-green arrow-link bold">Learn more about the methodology</a>
+        </div>
       </div>
-      <div class="col-md-6 offset-md-1 order-2 order-md-1">
-        <h2 class="mb-10 h1">{% trans %}For Developers{% endtrans %}</h2>
-        <p class="mb-10 normal">{% trans %}Contributing to the developer portal of XRPL.org is a great way to learn about the XRP Ledger.{% endtrans %}</p>
-        <p>{% trans %}You may also be interested in learning about Interledger Protocol (ILP), which, along with the XRP Ledger, is another part of the Xpring developer ecosystem.{% endtrans %}</p>
-				<p>{% trans %}If you choose to submit your changes to the site through TGitHub, please read and consider the contributing guidelines.{% endtrans %}</p>
-        <a href="#" class="btn btn-clear">{% trans %}Learn About On-Demand Liquidity{% endtrans %}</a>
-      </div>
-    </section>
-    
 
-  </div>
+      <div class="container my-20">
+        <section class="row mb-49">
+          <div class="col-sm-4">
+            <div class="rounded sticky-top top-10 border-green p-3 calc-inputs">
+              <h4>Comparing Transaction Data<h4>
+                <ul class="d-flex align-items-stretch p-0 mt-10">
+                  <li class="ls-none w-100 active"><a class="tab-link fs-base va-middle" href="#d-crypto">Crypto</a></li>
+                  <li class="ls-none w-100"><a class="tab-link fs-base va-middle" href="#d-credit">Credit Cards</a></li>
+                  <li class="ls-none w-100"><a class="tab-link fs-base va-middle" href="#d-cash">Cash</a></li>
+                </ul>
+                <div class="slidecontainer">
+                  <input type="range" min="20" max="100" value="60" class="slider w-100" id="myRange" step="20">
+                  <p id="demo"></p>
+                </div>
+            </div>
+          </div>
+          <div class="col-sm-7 offset-sm-1 scroll-container h-100" id="main">
+            <section class="vh100 section1">
+              <h4>Energy Consumption of Portugal</h4>
+
+              <p>Comparing <span class="slider-amt"></span> Million Transactions in 2019
+
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
+
+              <div class="d-viz d-viz-1">
+                <ul class="d-sm-flex justify-content-between p-0">
+                  <li class="d-output d-crypto active" data-comp="kWh" data-type="btc">
+                    <img src="../assets/img/Portugal.png" class="mw-100">
+                    <div class="dot"></div>
+                    <p>Bitcoin</p>
+                    <h5 id="kWh-btc"></h5>
+                    <p>kWh</p>
+                  </li>
+                  <li class="d-output d-crypto active" data-comp="kWh" data-type="eth">
+                    <img src="../assets/img/Portugal.png" class="mw-100">
+                    <p>Ethereum</p>
+                    <h5 id="kWh-eth"></h5>
+                    <p>kWh</p>
+                  </li>
+                  <li class="d-output d-cash" data-comp="kWh" data-type="pap">
+                    <img src="../assets/img/Portugal.png" class="mw-100">
+                    <p>Cash</p>
+                    <h5 id="kWh-pap"></h5>
+                    <p>kWh</p>
+                  </li>
+                  <li class="d-output d-crypto d-credit d-cash active" data-comp="kWh" data-type="xrp">
+                    <img src="../assets/img/Portugal.png" class="mw-100">
+                    <p>XRP</p>
+                    <h5 id="kWh-xrp"></h5>
+                    <p>kWh</p>
+                  </li>
+                  <li class="d-output d-credit" data-comp="kWh" data-type="vsa">
+                    <img src="../assets/img/Portugal.png" class="mw-100">
+                    <p>Visa</p>
+                    <h5 id="kWh-vsa"></h5>
+                    <p>kWh</p>
+                  </li>
+                  <li class="d-output d-credit" data-comp="kWh" data-type="mst">
+                    <img src="../assets/img/Portugal.png" class="mw-100">
+                    <p>Mastercard</p>
+                    <h5 id="kWh-mst"></h5>
+                    <p>kWh</p>
+                  </li>
+                  
+                </ul>
+              </div>
+            </section>
+            <section class="vh100 section2">
+              <h4>C02 Emissions from Airline Flights</h4>
+
+              <p>Comparing <span class="slider-amt"></span> Million Transactions in 2019
+
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
+
+              <div class="d-viz d-viz-1">
+                <ul class="d-sm-flex justify-content-between">
+                  <li class="d-output d-crypto active" data-comp="miles" data-type="btc">
+                    <p>Bitcoin</p>
+                    <h5 id="miles-btc"></h5>
+                    <p>miles</p>
+                  </li>
+                  <li class="d-output d-crypto active" data-comp="miles" data-type="eth">
+                    <p>Ethereum</p>
+                    <h5 id="miles-eth"></h5>
+                    <p>miles</p>
+                  </li>
+                  <li class="d-output d-cash" data-comp="miles" data-type="pap">
+                    <p>Cash</p>
+                    <h5 id="miles-pap"></h5>
+                    <p>miles</p>
+                  </li>
+                  <li class="d-output d-crypto d-credit d-cash active" data-comp="miles" data-type="xrp">
+                    <p>XRP</p>
+                    <h5 id="miles-xrp"></h5>
+                    <p>miles</p>
+                  </li>
+                  <li class="d-output d-credit" data-comp="miles" data-type="vsa">
+                    <p>Visa</p>
+                    <h5 id="miles-vsa"></h5>
+                    <p>miles</p>
+                  </li>
+                  <li class="d-output d-credit" data-comp="miles" data-type="mst">
+                    <p>Mastercard</p>
+                    <h5 id="miles-mst"></h5>
+                    <p>miles</p>
+                  </li>
+                  
+                </ul>
+              </div>
+            </section>
+            <section class="vh100 section3">
+              <h4>Gas Consumption by the Gallon</h4>
+
+              <p>Comparing <span class="slider-amt"></span> Million Transactions in 2019
+
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
+            </section>
+          </div> 
+        </section>
+      </div>
+
+      <div class="container my-20">
+        <section class="row mb-49">
+          <div class="col-sm-7 col-sm-offset-5">
+            <h4>Breaking Down Individual Transactions</h4>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
+          </div>
+          <div class="col-sm-12 mt-14">
+            <table>
+              <thead>
+                <tr>
+                  <td></td>
+                  <td class="bold ta-right">Kilowatt Hour</td>
+                  <td class="bold ta-right">Gallons of Gas</td>
+                  <td class="bold ta-right">CO2 Emissions</td>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="../assets/img/Bitcoin@2x.png"></div>Bitcoin</td>
+                  <td class="fs-6 ta-right">700<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">700<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">700<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
+                </tr>
+                <tr>
+                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="../assets/img/Ethereum@2x.png"></div>Ethereum</td>
+                  <td class="fs-6 ta-right">30<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">30<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">30<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
+                </tr>
+                <tr>
+                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="../assets/img/XRP-Mark@2x.png"></div>XRP</td>
+                  <td class="fs-6 ta-right">0.0079<span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">0.0079<span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">0.0079<span class="ratio"> KWh/tx</span></td>
+                </tr>
+                <tr>
+                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="../assets/img/Visa@2x.png"></div>Visa</td>
+                  <td class="fs-6 ta-right">0.0008<span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">0.0008<span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">0.0008<span class="ratio"> KWh/tx</span></td>
+                </tr>
+                <tr>
+                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="../assets/img/MasterCard@2x.png"></div>Mastercard</td>
+                  <td class="fs-6 ta-right">0.0006<span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">0.0006<span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">0.0006<span class="ratio"> KWh/tx</span></td>
+                </tr>
+                <tr>
+                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="../assets/img/paper-money@2x.png"></div>Paper</td>
+                  <td class="fs-6 ta-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
+                  <td class="fs-6 ta-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </div>
 {% endblock %}
 
 

tool/template-explore-businesses.html

@@ -16,91 +16,95 @@
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
-  <div class="container my-40 marketing-wrapper">
-    <section class="row mb-50">
-      <div class="col-md-4 d-flex flex-column-reverse justify-content-end">
-        <h1 class="mb-10">{% trans %}Solving Real Problems Across Industries{% endtrans %}</h1>
-        <h3 class="text-primary mb-4 h6">{% trans %}Businesses Running on the XRP Ledger{% endtrans %}</h3>
-      </div>
-      <div class="col-sm-6 offset-sm-1">
-        <p class="mt-12 mb-10">{% trans %}While exchanges and wallet providers are the most common businesses running on the XRP Ledger, there are many other companies that leverage the technology to solve interesting problems across myriad industries.{% endtrans %}</p>
-        <div class="row">
-          <ul class="col ml-3">
-            <li>{% trans %}Asset Custody{% endtrans %}</li>
-            <li>{% trans %}Payment Processing{% endtrans %}</li> 
-            <li>{% trans %}Micropayments{% endtrans %}</li>
-            <li>{% trans %}Wallets{% endtrans %}</li>
-            <li>{% trans %}Music{% endtrans %}</li>
-          </ul>
-          <ul class="col">
-            <li>{% trans %}On-Demand Liquidity{% endtrans %}</li>
-            <li>{% trans %}Gaming{% endtrans %}</li> 
-            <li>{% trans %}Infrastructure{% endtrans %}</li>
-            <li>{% trans %}Security{% endtrans %}</li>
-            <li>{% trans %}Applications{% endtrans %}</li>
-          </ul>
+  <div id="page-business-bg">
+    <img id="page-business-top" src="./img/backgrounds/bg-business-top.png">
+    <div class="container my-40 marketing-wrapper">
+      <section class="row mb-50">
+        <div class="col-md-4 d-flex flex-column-reverse justify-content-end">
+          <h1 class="mb-10">{% trans %}Solving Real Problems Across Industries{% endtrans %}</h1>
+          <h3 class="text-primary mb-4 h6">{% trans %}Businesses Running on the XRP Ledger{% endtrans %}</h3>
         </div>
-      </div>
-    </section>
+        <div class="col-sm-6 offset-sm-1">
+          <p class="mt-12 mb-10">{% trans %}While exchanges and wallet providers are the most common businesses running on the XRP Ledger, there are many other companies that leverage the technology to solve interesting problems across myriad industries.{% endtrans %}</p>
+          <div class="row">
+            <ul class="col ml-3">
+              <li>{% trans %}Asset Custody{% endtrans %}</li>
+              <li>{% trans %}Payment Processing{% endtrans %}</li> 
+              <li>{% trans %}Micropayments{% endtrans %}</li>
+              <li>{% trans %}Wallets{% endtrans %}</li>
+              <li>{% trans %}Music{% endtrans %}</li>
+            </ul>
+            <ul class="col">
+              <li>{% trans %}On-Demand Liquidity{% endtrans %}</li>
+              <li>{% trans %}Gaming{% endtrans %}</li> 
+              <li>{% trans %}Infrastructure{% endtrans %}</li>
+              <li>{% trans %}Security{% endtrans %}</li>
+              <li>{% trans %}Applications{% endtrans %}</li>
+            </ul>
+          </div>
+        </div>
+      </section>
 
-    <section class="row mb-50">
-      <h6 class="section-marker">Businesses Using XRP</h6>
-      <div class="col-md-5 mb-20 card-b">
-        <img class="mw-100" src="./img/businesses/bitgo.png">
-        <h3 class="my-10 h4">Asset Custody</h3>
-        <p>BitGo provides custodial and non-custodial asset holdings for digital assets including XRP. BitGo's enterprise-level security empowers businesses to integrate digital currencies like XRP into new and existing financial systems.</p>
-      </div>
-      <div class="col-md-5 mb-20 card-b offset-md-1">
-        <img class="mw-100" src="./img/businesses/bitpay.png">
-        <h3 class="my-10 h4">Payment Processing</h3>
-        <p>BitPay builds powerful, enterprise-grade tools for accepting and spending cryptocurrencies, including XRP.</p>
-      </div>
-      <div class="col-md-5 mb-20 card-b">
-        <img class="mw-100" src="./img/businesses/coil.png">
-        <h3 class="my-10 h4">Web Monetization</h3>
-        <p>Coil provides an alternative to the status quo of paid advertisements with web monetization. Coil's web monetization uses the interledger protocol (ILP) to stream micropayments as users consume content. The XRP Ledger's payment channels provide an ideal system for settling these micropayments at high speed and low cost.</p>
-      </div>
-      <div class="col-md-5 mb-20 card-b offset-md-1">
-        <img class="mw-100" src="./img/businesses/forte.png">
-        <h3 class="my-10 h4">Online Gaming</h3>
-        <p>Forte offers an unprecedented set of easy-to-use tools and services for game developers to integrate blockchain technology into their games, to unlock new economic and creative opportunities for gamers across the world.</p>
-      </div>
-      <div class="col-md-5 mb-20 card-b">
-        <img class="mw-100" src="./img/businesses/exodus.png">
-        <h3 class="my-10 h4">Wallets and Apps</h3>
-        <p>Exodus offers wallets and applications for securing, managing and exchanging crypto.</p>
-      </div>
-      <div class="col-md-5 mb-20 card-b offset-md-1">
-        <img class="mw-100" src="./img/businesses/raised-in-space.png">
-        <h3 class="my-10 h4">Music</h3>
-        <p>Raised in Space is a music/tech investment group focused on raising the value of music, innovating across the entire value chain of the music industry.</p>
-      </div>
-      <div class="col-md-5 mb-20 card-b">
-        <img class="mw-100" src="./img/businesses/ripple.png">
-        <h3 class="my-10 h4">On-Demand Liquidity</h3>
-        <p>Ripple powers instant, lower-cost settlement of cross-border payments using XRP to source liquidity on demand. XRP is ideally suited for global payments because it's quicker, less costly, and more scalable than any other digital asset.</p>
-      </div>
-      <div class="col-md-5 mb-20 card-b offset-md-1">
-        <img class="mw-100" src="./img/businesses/towo-labs.png">
-        <h3 class="my-10 h4">Infrastructure</h3>
-        <p>Towo Labs was founded in 2019, to develop XRP Ledger and Interledger infrastructures and make non-custodial crypto management easier.</p>
-      </div>
-      <div class="col-md-5 mb-20 card-b">
-        <img class="mw-100" src="./img/businesses/xrplorer.png">
-        <h3 class="my-10 h4">Security</h3>
-        <p>Xrplorer offers services and tools that help prevent and combat fraudulent activity on the XRPL as well as custom APIs and analytics that supplement the XRPL APIs where they are not enough.</p>
-      </div>
-      <div class="col-md-5 mb-20 card-b offset-md-1">
-        <img class="mw-100" src="./img/businesses/xrpl-labs.png">
-        <h3 class="my-10 h4">Applications</h3>
-        <p>From cold storage to apps for signing transactions, XRPL Labs is dedicated to building software on the XRP Ledger.</p>
-      </div>
-      <div class="w-100"></div>
-      <div class="col-md-4 offset-md-6">
-        <p style="font-size: 10px;">Disclaimer: XRPL.org does not endorse or recommend any wallets or exchanges, or make any representations with respect to wallets. It’s advisable to conduct your own due diligence before relying on any third party or third-party technology.</p>
-      </div>
-    </section>
+      <section class="row mb-50">
+        <h6 class="section-marker">Businesses Using XRP</h6>
+        <div class="col-md-5 mb-20 card-b">
+          <img class="mw-100" src="./img/businesses/bitgo.png">
+          <h3 class="my-10 h4">Asset Custody</h3>
+          <p>BitGo provides custodial and non-custodial asset holdings for digital assets including XRP. BitGo's enterprise-level security empowers businesses to integrate digital currencies like XRP into new and existing financial systems.</p>
+        </div>
+        <div class="col-md-5 mb-20 card-b offset-md-1">
+          <img class="mw-100" src="./img/businesses/bitpay.png">
+          <h3 class="my-10 h4">Payment Processing</h3>
+          <p>BitPay builds powerful, enterprise-grade tools for accepting and spending cryptocurrencies, including XRP.</p>
+        </div>
+        <div class="col-md-5 mb-20 card-b">
+          <img class="mw-100" src="./img/businesses/coil.png">
+          <h3 class="my-10 h4">Web Monetization</h3>
+          <p>Coil provides an alternative to the status quo of paid advertisements with web monetization. Coil's web monetization uses the interledger protocol (ILP) to stream micropayments as users consume content. The XRP Ledger's payment channels provide an ideal system for settling these micropayments at high speed and low cost.</p>
+        </div>
+        <div class="col-md-5 mb-20 card-b offset-md-1">
+          <img class="mw-100" src="./img/businesses/forte.png">
+          <h3 class="my-10 h4">Online Gaming</h3>
+          <p>Forte offers an unprecedented set of easy-to-use tools and services for game developers to integrate blockchain technology into their games, to unlock new economic and creative opportunities for gamers across the world.</p>
+        </div>
+        <div class="col-md-5 mb-20 card-b">
+          <img class="mw-100" src="./img/businesses/exodus.png">
+          <h3 class="my-10 h4">Wallets and Apps</h3>
+          <p>Exodus offers wallets and applications for securing, managing and exchanging crypto.</p>
+        </div>
+        <div class="col-md-5 mb-20 card-b offset-md-1">
+          <img class="mw-100" src="./img/businesses/raised-in-space.png">
+          <h3 class="my-10 h4">Music</h3>
+          <p>Raised in Space is a music/tech investment group focused on raising the value of music, innovating across the entire value chain of the music industry.</p>
+        </div>
+        <div class="col-md-5 mb-20 card-b">
+          <img class="mw-100" src="./img/businesses/ripple.png">
+          <h3 class="my-10 h4">On-Demand Liquidity</h3>
+          <p>Ripple powers instant, lower-cost settlement of cross-border payments using XRP to source liquidity on demand. XRP is ideally suited for global payments because it's quicker, less costly, and more scalable than any other digital asset.</p>
+        </div>
+        <div class="col-md-5 mb-20 card-b offset-md-1">
+          <img class="mw-100" src="./img/businesses/towo-labs.png">
+          <h3 class="my-10 h4">Infrastructure</h3>
+          <p>Towo Labs was founded in 2019, to develop XRP Ledger and Interledger infrastructures and make non-custodial crypto management easier.</p>
+        </div>
+        <div class="col-md-5 mb-20 card-b">
+          <img class="mw-100" src="./img/businesses/xrplorer.png">
+          <h3 class="my-10 h4">Security</h3>
+          <p>Xrplorer offers services and tools that help prevent and combat fraudulent activity on the XRPL as well as custom APIs and analytics that supplement the XRPL APIs where they are not enough.</p>
+        </div>
+        <div class="col-md-5 mb-20 card-b offset-md-1">
+          <img class="mw-100" src="./img/businesses/xrpl-labs.png">
+          <h3 class="my-10 h4">Applications</h3>
+          <p>From cold storage to apps for signing transactions, XRPL Labs is dedicated to building software on the XRP Ledger.</p>
+        </div>
+        <div class="w-100"></div>
+        <div class="col-md-4 offset-md-6">
+          <p style="font-size: 10px;">Disclaimer: XRPL.org does not endorse or recommend any wallets or exchanges, or make any representations with respect to wallets. It’s advisable to conduct your own due diligence before relying on any third party or third-party technology.</p>
+        </div>
+      </section>
 
+    </div>
+    <img id="page-business-bot" src="./img/backgrounds/bg-business-bot.png">
   </div>
 {% endblock %}
 

tool/template-explore-exchanges.html

@@ -16,6 +16,7 @@
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
+<div id="page-exchanges-bg">
   <div class="container my-40 marketing-wrapper">
     <section class="row mt-40 mb-40">
       <div class="col-sm-4 mb-10">
@@ -70,6 +71,8 @@
     </section>
 
   </div>
+  <img id="page-exchanges-bot" src="./img/backgrounds/bg-exchanges-bot.png">
+</div>
 {% endblock %}
 
 

tool/template-explore-wallets.html

@@ -16,6 +16,7 @@
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
+<div id="page-wallets-bg">
   <div class="container my-40 marketing-wrapper">
 
     <section class="row mt-40 mb-40">
@@ -63,6 +64,8 @@
     </section>
 
   </div>
+  <img id="page-wallets-bot" src="./img/backgrounds/bg-wallets-bot.png">
+</div>
 {% endblock %}
 
 

tool/template-home.html

@@ -21,10 +21,8 @@
     <section class="row">
       <h6 class="section-marker" id="home-hero-marker">{% trans %}Scroll Down{% endtrans %}</h6>
       <img class="mw-100" src="./img/graphics/home-hero-graphic.svg">
-      <div class="col-sm-6 mx-auto text-center my-5">
+      <div class="col-md-6 mx-auto text-center my-5">
         <h1 class="mb-18">{% trans %}The Best Digital Asset for Payments{% endtrans %}</h1>
-        <a href="#" class="btn btn-clear inline-block mr-4">{% trans %}Learn More{% endtrans %}</a>
-        <a href="#" class="btn btn-clear inline-block">{% trans %}Build with XRP{% endtrans %}</a>
       </div>
     </section>
 
@@ -82,21 +80,21 @@
       <h6 class="section-marker">{% trans %}Use Cases{% endtrans %}</h6>
       <h2 class="h1 ml-3">{% trans %}XRP in the Real World{% endtrans %}</h2>
       <div class="w-100 mt-20"></div>
-      <div class="col-sm-6 col-lg-4 mb-10">
+      <div class="col-md-6 col-lg-4 mb-10">
         <div class="card rounded hc" id="hc-1">
           <h5 class="mb-12 h2">{% trans %}Uses of XRP{% endtrans %}</h5>
           <p>{% trans %}XRP is helping solve previously unsolvable problems for people and industries around the world, and is the only digital asset with a commercial use case.{% endtrans %}</p>
           <a href="" class="arrow-link mt-12 text-white">{% trans %}Explore Uses{% endtrans %}</a>
       </div>
       </div>
-      <div class="col-sm-6 col-lg-4 mb-10">
+      <div class="col-md-6 col-lg-4 mb-10">
         <div class="card rounded hc" id="hc-2">
           <h5 class="mb-12 h2">{% trans %}Businesses on the Ledger{% endtrans %}</h5>
-          <p>{% trans %}From gaming to web monetization, XRP and the XRP Ledger are powering innovative new technology across the payments space.{% endtrans %}</p>
+          <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="" class="arrow-link mt-12 text-white">{% trans %}Explore Businesses{% endtrans %}</a>
         </div>
       </div>
-      <div class="col-sm-6 col-lg-4 mb-10">
+      <div class="col-md-6 col-lg-4 mb-10">
         <div class="card rounded hc" id="hc-3">
           <h5 class="mb-12 h2">{% trans %}Real-World Impact{% endtrans %}</h5>
           <p>{% trans %}With its real-world utility and inherently green design, XRP will help ensure a more sustainable future for our planet and global economy.{% endtrans %}</p>
@@ -117,9 +115,9 @@
         <a href="#" class="btn btn-clear">{% 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" src="./img/green/energy-web.png">
-          <img class="mw-100" src="./img/green/rocky-mountain-inst.png">
-          <img class="mw-100" src="./img/green/reba.png">
+          <img class="mw-100 mb-2 mr-2" src="./img/green/energy-web.png">
+          <img class="mw-100 mb-2 mr-2" src="./img/green/rocky-mountain-inst.png">
+          <img class="mw-100 mb-2 mr-2" src="./img/green/reba.png">
         </div>
       </div>
     </section>

tool/template-learn-history.html

@@ -17,78 +17,70 @@
 
 {% block main %}
   <div class="container my-40 marketing-wrapper">
-    <section class="row mb-50">
-      <div class="col-md-4 d-flex flex-column-reverse justify-content-end">
-        <h1 class="mb-10">{% trans %}The Best Way to Move Money Around the World{% endtrans %}</h1>
-        <h6 class="text-primary mb-4">{% trans %}Using XRP{% endtrans %}</h6>
-      </div>
-      <div class="col-md-6 offset-md-1">
-        <h2 class="mt-12 mb-10">{% trans %}XRP and the XRP Ledger are used to power innovative technology across the payments space.{% endtrans %}</h2>
-        <p>{% trans %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas maximus ligula, id tincidunt odio condimentum ac. Pellentesque vulputate felis lacus, id imperdiet elit tristique id. Ut sapien lorem, finibus id auctor eu, volutpat finibus nisi. {% endtrans %}</p>
-      </div>
-    </section>
+      <section class="row mt-40 mb-40">
+        <div class="col-sm-4 mb-10">
+          <h6 class="text-primary mb-4">{% trans %}XRP’s Origin{% endtrans %}</h6>
+          <h1 class="mb-18">{% trans %}Build a Better Bitcoin{% endtrans %}</h1>
+        </div>
+        <div class="col-sm-6 offset-sm-1">
+          <h2 class="mt-12 mb-10">{% trans %}In 2011, three engineers—David Schwartz, Jed McCaleb and Arthur Britto—began developing the XRP Ledger.{% endtrans %}</h2>
+          <p>{% trans %}Fascinated by Bitcoin, they set out to create a better version that improved upon its limitations—with the goal of creating a digital asset that was more sustainable and built specifically for payments.{% endtrans %}</p>
+          <p>{% trans %}The XRP Ledger first launched in June 2012. Shortly thereafter, they were joined by Chris Larsen and the group started the Company OpenCoin in September 2012 (now named Ripple).{% endtrans %}</p>
+          <p>{% trans %}The founders of the XRP Ledger gifted 80 billion XRP to the company. Ripple has since sold some of its XRP and put the rest in escrow.{% endtrans %}</p>
+        </div>
+      </section>
+      <section class="row mb-60">
+        <h6 class="section-marker">{% trans %}XRP History{% endtrans %}</h6>
+        <h2 class="h1 text-center mx-auto mb-20">{% trans %}Timeline of XRP Evolution{% endtrans %}</h2>
+        <div class="col-lg-10 offset-lg-1">
+          <div class="timeline">
+            <div class="timeline-block">
+              <div class="timeline-dot"></div>
+              <div class="timeline-content">
+                <h4 class="mb-10">{% trans %}2011 XRP Ledger  Development{% endtrans %}</h4>
+                <p>{% trans %}The history of the XRP Ledger and its native digital asset XRP dates back to early 2011 when three developers—David Schwartz, Jed McCaleb and Arthur Britto—were fascinated with Bitcoin but observed the waste inherent in mining. They sought to create a better system for sending value (an idea outlined in a May 2011 forum post: “Bitcoin without mining”).{% endtrans %}</p>
+                <p>{% trans %}Their initial observations about the high energy consumption and scalability issues that would plague Bitcoin proved prescient. (In 2019, estimates suggest Bitcoin mining used more energy than the entire country of Portugal!) Moreover, their initial read indicated that significant problems could arise if any miner obtained (or miners colluded to obtain) greater than 50% of the mining power—that risk persists with Bitcoin (and Ethereum) today as mining power has consolidated in China.{% endtrans %}</p>
+              </div>
+            </div>
+            <div class="timeline-block">
+              <div class="timeline-dot"></div>
+              <div class="timeline-content">
+                <h4 class="mb-10">{% trans %}2012 XRP Launched{% endtrans %}</h4>
+                <p>{% trans %}In 2011 and early 2012, the trio of developers started a project to build a distributed ledger that improved upon these fundamental limitations of Bitcoin—their first ever code commit was in November 2011.{% endtrans %}</p> 
+                <p>{% trans %}They wrote code, that when executed, would create a distributed ledger, which they named Ripple. It included a digital asset that would be called “ripples” (XRP as the currency code) to follow the same naming convention as bitcoin (BTC). At the time, Ripple stood for the open-source project, the unique consensus ledger (Ripple Consensus Ledger), transaction protocol (Ripple Transaction Protocol or RTXP), the network (Ripple network) and the digital asset (known as “ripples”).{% endtrans %}</p>
+                <p>{% trans %}In practice, this approach led to many, broad uses of “Ripple.” To clarify, the community simply started calling the digital asset, “XRP.”{% endtrans %}</p>
+                <p>{% trans %}By June 2012, Schwartz, McCaleb and Britto completed code development and the XRP Ledger was fully functioning.{% endtrans %}</p>
+                <p>{% trans %}At that time, they decided their next move would be to gift 80 billion XRP to a not-yet-formed private company that would work with the broader community as well as pursue its own payments mission. The ledger code itself would be open source and for anyone to use.{% endtrans %}</p>
+                <p>{% trans %}They all agreed on how to allocate the XRP among themselves and the future company, and they eventually created the company along with Chris Larsen in September 2012.{% endtrans %}</p>
+                <p>{% trans %}While from a developer standpoint the XRP Ledger had already been created in early 2012, the final ledger stuck in late 2012, due to some stability issues. Once it stuck, 80% of the XRP was gifted to the company—initially called NewCoin and renamed quickly to OpenCoin.{% endtrans %}</p>
+                <p>{% trans %}Chris Larsen was the CEO of OpenCoin, and at the company's founding, Jed was co-founder and CTO, David Schwartz was the Chief Cryptography Officer, and Arthur Britto an advisor.{% endtrans %}</p>
+              </div>
+            </div>
+            <div class="timeline-block">
+              <div class="timeline-dot"></div>
+              <div class="timeline-content">
+                <h4 class="mb-10">{% trans %}2013 OpenCoin Rebranded to Ripple Labs{% endtrans %}</h4>
+                <p>{% trans %}At the outset of the company, OpenCoin set out to revolutionize the global financial system. Despite the revolutionary ideals of many of Bitcoin’s early believers, Larsen never thought blockchain technology should be used to overthrow the existing financial system. He believed that history’s most transformative innovations have always relied on the great ideas that came before them—not disrupting them.{% endtrans %}</p>
+                <p>{% trans %}In early conversations with potential customers, the team was asked about the differences between the Ripple project and OpenCoin company. Because the community widely adopted calling the digital asset by its currency code “XRP,”  company leaders decided to rebrand the company to Ripple Labs, which has been shortened over time to “Ripple.”{% endtrans %}</p>
+                <p>{% trans %}Today, the company uses XRP and the XRP Ledger for liquidity management in its cross-border payments business. Ripple also remains a stakeholder and contributor to the broader XRP community.{% endtrans %}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
 
-    <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">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
-      </div>
-      <div class="col-md-6 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="#" class="btn btn-clear">{% trans %}Learn About On-Demand Liquidity{% endtrans %}</a>
-      </div>
-    </section>
-    
-    <section class="row mb-50">
-      <h6 class="section-marker">{% trans %}Micropayments{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 mb-10">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
-      </div>
-      <div class="col-md-6 offset-md-1">
-        <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="#" class="btn btn-clear">{% trans %}Learn About XRPL Businesses{% endtrans %}</a>
-      </div>
-    </section>
-
-    <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">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
-      </div>
-      <div class="col-md-6 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="#" class="btn btn-clear">{% trans %}Explore Wallets{% endtrans %}</a>
-      </div>
-    </section>
-    
-    <section class="row mb-50">
-      <h6 class="section-marker">{% trans %}Exchanges{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 mb-10">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
-      </div>
-      <div class="col-md-4 offset-md-1">
-        <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="#" class="btn btn-clear">{% trans %}Explore Exchanges{% endtrans %}</a>
-      </div>
-    </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">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
-      </div>
-      <div class="col-md-6 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="#" class="btn btn-clear">{% trans %}Learn More{% endtrans %}</a>
-      </div>
-    </section>
-
-  </div>
+      <section class="row mt-30 mb-40">
+        <h6 class="section-marker" id="section-marker-podcast">{% trans %}Podcast{% endtrans %}</h6>
+        <div class="col-sm-5 order-1 order-sm-2 mb-10">
+          <img class="mw-100" src="./img/graphics/chris-larsen.png">
+        </div>
+        <div class="col-sm-5 offset-sm-1 order-2 order-sm-1 mt-20">
+          <h2 class="mb-10">{% trans %}How Digital Assets Will Help Create a  Sustainable Global Economy{% endtrans %}</h2>
+          <p class="mb-10">{% trans %}Hear from Ripple co-founder Chris Larsen in the inaugural episode of the Block Stars podcast.{% endtrans %}</p>
+          <a href="#" class="btn btn-clear">{% trans %}Listen Now{% endtrans %}</a>
+        </div>
+      </section>
+    </div>
 {% endblock %}
 
 

tool/template-learn-overview.html

@@ -16,78 +16,216 @@
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
-  <div class="container my-40 marketing-wrapper">
-    <section class="row mb-50">
-      <div class="col-md-4 d-flex flex-column-reverse justify-content-end">
-        <h1 class="mb-10">{% trans %}The Best Way to Move Money Around the World{% endtrans %}</h1>
-        <h6 class="text-primary mb-4">{% trans %}Using XRP{% endtrans %}</h6>
-      </div>
-      <div class="col-md-6 offset-md-1">
-        <h2 class="mt-12 mb-10">{% trans %}XRP and the XRP Ledger are used to power innovative technology across the payments space.{% endtrans %}</h2>
-        <p>{% trans %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas maximus ligula, id tincidunt odio condimentum ac. Pellentesque vulputate felis lacus, id imperdiet elit tristique id. Ut sapien lorem, finibus id auctor eu, volutpat finibus nisi. {% endtrans %}</p>
-      </div>
-    </section>
+<div id="page-overview-bg" class="pt-40">
+  <div class="container marketing-wrapper">
+      <section class="row mb-50">
+        <div class="col-md-6 mb-10">
+          <h6 class="text-primary mb-4">Using XRP</h6>
+          <h1 class="mb-18">Your Questions About XRP, Answered.</h1>
+        </div>
+        <div class="w-100"></div>
+        <div class="col-md-8">
+          <h2 class="mb-8">What is XRP?</h2>
+          <div class="row">
+            <p class="col">XRP is a digital asset that’s native to the XRP Ledger, an open-source, permissionless and decentralized blockchain technology.</p>
+            <p class="col">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.</p>
+          </div>
+        </div>
+      </section>
 
-    <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">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
-      </div>
-      <div class="col-md-6 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="#" class="btn btn-clear">{% trans %}Learn About On-Demand Liquidity{% endtrans %}</a>
-      </div>
-    </section>
+      <section class="row mb-50">
+        <h6 class="section-marker">Benefits</h6>
+        <div class="col-sm-12 col-lg-10 mt-14">
+            <table>
+              <thead>
+                <tr>
+                  <td class="bold"></td>
+                  <td class="bold">XRP</td>
+                  <td class="bold">Bitcoin</td>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/icons/fast.png"></div>Fast</td>
+                  <td class="">3-5 seconds to settle</td>
+                  <td class="">500 seconds to settle</td>
+                </tr>
+                <tr>
+                  <td class="bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/icons/low-cost.png"></div>Low Cost</td>
+                  <td class="">$0.0002/transaction</td>
+                  <td class="">$0.50/transaction</td>
+                </tr>
+                <tr>
+                  <td class="bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/icons/scalable.png"></div>Scalable</td>
+                  <td class="">1500 transaction per second</td>
+                  <td class="">3 transactions per second</td>
+                </tr>
+                <tr>
+                  <td class="bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/icons/sustainable.png"></div>Sustainable</td>
+                  <td class="">Environmentally sustainable (negligible energy consumption)</td>
+                  <td class="">0.3% of global energy consumption</td>
+              </tbody>
+            </table>
+          </div>
+      </section>
     
-    <section class="row mb-50">
-      <h6 class="section-marker">{% trans %}Micropayments{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 mb-10">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
-      </div>
-      <div class="col-md-6 offset-md-1">
-        <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="#" class="btn btn-clear">{% trans %}Learn About XRPL Businesses{% endtrans %}</a>
-      </div>
-    </section>
 
-    <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">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
-      </div>
-      <div class="col-md-6 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="#" class="btn btn-clear">{% trans %}Explore Wallets{% endtrans %}</a>
-      </div>
-    </section>
-    
-    <section class="row mb-50">
-      <h6 class="section-marker">{% trans %}Exchanges{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 mb-10">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
-      </div>
-      <div class="col-md-4 offset-md-1">
-        <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="#" class="btn btn-clear">{% trans %}Explore Exchanges{% endtrans %}</a>
-      </div>
-    </section>
+      <section class="row mb-50">
+        <h6 class="section-marker">Digital Cryptocurrency</h6>
+        <div class="col-lg-8 order-1 order-md-2 mb-10">
+          <img class="mw-100" src="./img/green/green-graphic.png">
+        </div>
+        <div class="col-lg-4 order-2 order-md-1">
+          <p>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.</p>
+          <p>Unlike Bitcoin, there is a finite amount of XRP. All XRP is already in existence today—100 billion in total.</p>
+          <a href="#" class="btn btn-clear">History of XRP</a>
+        </div>
+      </section>
+      
+      <section class="row mb-50">
+        <h6 class="section-marker">XRP Ledger</h6>
+        <div class="col-md-4">
+          <h2>How Does the XRP Ledger Work?</h2>
+        </div>
+        <div class="col-md-4">
+          <p>The XRP Ledger stands on open-source technologies 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 validators.</p>
+          <p>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.</p>
+        </div>
+        <div class="col-md-4">
+          <p>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.</p>
+          <p>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.</p>
+        </div>
+        <div class="w-100 mb-20"></div>
+        <div class="col-lg-6">
+          <img class="mw-100" src="./img/graphics/validator.png">
+        </div>
+        <div class="col-lg-5 offset-lg-1">
+          <h4 class="mb-10">Anyone can operate a validator; currently, over 150 validators are active on the ledger, operated by  universities, exchanges, businesses and individuals.</h4>
+          <a href="#" class="btn btn-clear">Get Technical</a>
+        </div>
+      </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">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
-      </div>
-      <div class="col-md-6 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="#" class="btn btn-clear">{% trans %}Learn More{% endtrans %}</a>
-      </div>
-    </section>
+      <section class="row mb-50">
+        <h6 class="section-marker">Trading</h6>
+        <div class="col-lg-6">
+          <h2 class="mb-10">Why Is XRP Useful?</h2>
+          <p class="mb-10 normal h4">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.</p>
+        </div>
+        <div class="w-100 mt-20"></div>
+        <div class="col-md-4">
+          <h4>Businesses</h4>
+          <p class="my-10">Many businesses are building on the XRP Ledger, pursuing powerful use cases in 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.</p>
+          <a href="#" class="text-white bold arrow-link">More About Businesses</a>
+        </div>
+        <div class="col-md-4">
+          <h4>Individuals</h4>
+          <p class="my-10">Individual consumers can use XRP to move different currencies around the world. For example, through the PayID solution, anyone can use XRP—or any currency, be it fiat or digital assets—to easily make purchases across any payments network.</p>
+          <a href="#" class="text-white bold arrow-link">More About Uses</a>
+        </div>
+        <div class="col-md-4">
+          <h4>Developers</h4>
+          <p class="my-10">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 Xpring developer platform are making it easier for developers to leverage XRP.</p>
+          <a href="#" class="text-white bold arrow-link">More About Developers</a>
+        </div>
+      </section>
 
+      <section class="mb-50">
+        <h6 class="section-marker">Internet of Value</h6>
+        <div class="row mb-40">
+          <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10">
+            <img class="mw-100" src="./img/overview/fast.png">
+          </div>
+          <div class="col-md-4 offset-md-1 order-2 order-md-1">
+            <h2 class="mb-10">Fast</h2>
+            <p>XRP transactions settle faster than on any other blockchain—in 3-5 seconds.</p>
+          </div>
+        </div>
+        <div class="row mb-30">
+          <div class="col-md-4 offset-md-1 mb-10">
+            <img class="mw-100" src="./img/overview/low-cost.png">
+          </div>
+          <div class="col-md-4 offset-md-2">
+            <h2 class="mb-10">Low Cost</h2>
+            <p>XRP transactions cost a fraction of a penny ($0.0002) – much less than other cryptocurrencies and average fiat payments.</p>
+          </div>
+        </div>
+        <div class="row mb-30">
+          <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10">
+            <img class="mw-100" src="./img/overview/scalable.png">
+          </div>
+          <div class="col-md-4 offset-md-1  order-2 order-md-1">
+            <h2 class="mb-10">Scalable</h2>
+            <p>The XRP Ledger can handle up to 1,500 transactions per second.</p>
+          </div>
+        </div>
+        <div class="row mb-30">
+          <div class="col-md-4 offset-md-1 mb-10">
+            <img class="mw-100" src="./img/overview/sustainable.png">
+          </div>
+          <div class="col-md-4 offset-md-2">
+            <h2 class="mb-10">Sustainable</h2>
+            <p>XRP transactions settle without the enormous and unsustainable energy costs associated with proof-of-work (or mining).</p>
+          </div>
+        </div>
+        <div class="row mb-20">
+          <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10">
+            <img class="mw-100" src="./img/overview/real.png">
+          </div>
+          <div class="col-md-4 offset-md-1 order-2 order-md-1">
+            <h2 class="mb-10">Real</h2>
+            <p>XRP is one of the only digital assets with a proven, real-world use case: cross-border payments. </p>
+          </div>
+        </div>
+        <div class="text-center">
+          <a href="#" class="btn btn-clear">Explore Uses</a>
+        </div>
+      </section>
+
+      <section class="mb-50">
+        <h6 class="section-marker">Trading</h6>
+        <div class="row">
+          <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10">
+            <img class="mw-100" src="./img/overview/real.png">
+          </div>
+          <div class="col-md-5 order-2 order-md-1">
+            <h2 class="mb-10">How Is XRP Used in Trading?</h2>
+            <p>XRP is traded on more than 140 markets and exchanges worldwide.</p>
+            <p>XRP’s low transaction fees, reliability and high speed enable traders to use the digital asset as high-speed, cost-efficient and reliable collateral across trading venues—seizing arbitrage opportunities, servicing margin calls and managing general trading inventory in real time.</p>
+            <p>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.</p>
+            <a href="#" class="mt-10 btn btn-clear">Find Out More</a>
+          </div>
+        </div>
+      </section>
+
+      <section class="mb-50">
+        <h6 class="section-marker">Ripple vs. XRP</h6>
+        <div class="row">
+          <div class="col-md-4 offset-md-1 mb-10">
+            <img class="mw-100 mt-10" src="./img/overview/xrp-text-logo.png">
+          </div>
+          <div class="col-md-5 offset-md-1">
+            <h2 class="mb-10">What Is the Relationship Between Ripple and XRP?</h2>
+            <p>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. </p>
+            <a href="#" class="mt-10 btn btn-clear">Visit Ripple's Website</a>
+          </div>
+        </div>
+      </section>
+
+      <section class="mb-50">
+        <h6 class="section-marker">XRP Community</h6>
+        <div class="row">
+          <div class="col-md-6 offset-md-1 order-1 order-md-2 mb-10">
+            <img class="mw-100" src="./img/overview/xrp-community.png">
+          </div>
+          <div class="col-md-5 order-2 order-md-1">
+            <h2 class="mb-10">XRPL.org: For the Community, by the Community</h2>
+            <p>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 here.</p>
+            <a href="#" class="mt-10 btn btn-clear">Suggest Changes</a>
+          </div>
+        </div>
+      </section>
+
+    </div>
   </div>
 {% endblock %}