Homepage card style improvements

This commit is contained in:
mDuo13
2018-05-04 15:37:41 -07:00
parent ab0b5ef3b8
commit d3e09ea231
12 changed files with 306 additions and 242 deletions

View File

@@ -1,9 +1,10 @@
// Variable overrides here
$primary: #1db4ff; // "Ripple Blue"
$light: #e6eaee;
$primary: #1db4ff; // "Ripple Blue" (aka "Blue-1")
$secondary: #0A93EB; // "Blue-2"
$light: #e1e4e8; // "Black-20"
$dark: #2b3e51; // "Background Navy"
$code-color: #333;
$code-color: #3B4147; // "Black-80"
$navbar-padding-y: 0;
$navbar-nav-link-padding-x: 1rem;

View File

@@ -105,7 +105,7 @@
<div class="card-body">
<p>Amendments introduce new features to the decentralized XRP Ledger without causing disruptions.</p>
<div class="readmore">
<a href="known-amendments.html"><button class="btn btn-primary" type="button">View Known Amendments</button></a>
<a href="known-amendments.html"><button class="btn btn-secondary" type="button">View Known Amendments <i class="fa fa-arrow-right" aria-hidden="true"></i></button></a>
</div>
</div><!--/.card-body-->
</div><!--/.card-->
@@ -210,46 +210,56 @@
<p>Have an idea for a use case not listed here? <a href="mailto:projectlotus@ripple.com">Contact us</a></p>
</div>
<div class="container">
<div class="card-deck mb-4 p-xl-5">
<div class="row">
<div class="col-xl-8 col-lg-10 col-md-12 offset-xl-2 offset-lg-1">
<div class="card">
<div class="card-header">
<h3 class="card-title">Exchanges and Gateways</h3>
</div><!--/.card-header-->
<img class="card-img-top" src="assets/img/exchange-on-ripple.svg" alt="(currency exchange icon)" />
<div class="card-body">
<p>Integrate your Exchange or Gateway with the XRP Ledger to enable your users to buy and sell XRP and issued currencies.</p>
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a href="list-xrp-in-your-exchange.html"><button class="btn btn-secondary" type="button">View Use Case <i class="fa fa-arrow-right" aria-hidden="true"></i></button></a>
</div><!--/.readmore-->
</div><!--/.card-footer-->
</div><!--/.card-->
<div class="card-deck mb-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Market Makers</h3>
</div><!--/.card-header-->
<img class="card-img-top" src="assets/img/market-maker-on-ripple.svg" alt="(market maker icon)" />
<div class="card-body">
<p>Integrate with the XRP Ledger to place offers algorithmically or through your own trading interface, providing liquidity between different gateways and their users.</p>
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a href="mailto:projectlotus@ripple.com"><button class="btn btn-secondary" type="button">Contact Us <i class="fa fa-envelope" aria-hidden="true"></i></button></a>
</div><!--/.readmore-->
</div><!--/.card-footer-->
</div><!--/.card-->
<div class="card">
<div class="card-header">
<h3 class="card-title">Exchanges and Gateways</h3>
</div><!--/.card-header-->
<img class="card-img-top" src="assets/img/exchange-on-ripple.svg" alt="(currency exchange icon)" />
<div class="card-body">
<p>Integrate your Exchange or Gateway with the XRP Ledger to enable your users to buy and sell XRP and issued currencies.</p>
</div><!--/.card-body-->
</div><!--/.card-->
<div class="card">
<div class="card-header">
<h3 class="card-title">Wallets</h3>
</div><!--/.card-header-->
<img class="card-img-top" src="assets/img/wallet-on-ripple.svg" alt="(wallet icon)" />
<div class="card-body">
<p>Build a wallet app on the XRP Ledger to enable your users to send and trade XRP and other currencies issued by a gateway you trust.</p>
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a href="mailto:projectlotus@ripple.com"><button class="btn btn-secondary" type="button">Contact Us <i class="fa fa-envelope" aria-hidden="true"></i></button></a>
</div><!--/.readmore-->
</div><!--/.card-footer-->
</div><!--/.card-->
<div class="card">
<div class="card-header">
<h3 class="card-title">Market Makers</h3>
</div><!--/.card-header-->
<img class="card-img-top" src="assets/img/market-maker-on-ripple.svg" alt="(market maker icon)" />
<div class="card-body">
<p>Integrate with the XRP Ledger to place offers algorithmically or through your own trading interface, providing liquidity between different gateways and their users.</p>
</div><!--/.card-body-->
</div><!--/.card-->
<div class="card">
<div class="card-header">
<h3 class="card-title">Wallets</h3>
</div><!--/.card-header-->
<img class="card-img-top" src="assets/img/wallet-on-ripple.svg" alt="(wallet icon)" />
<div class="card-body">
<p>Build a wallet app on the XRP Ledger to enable your users to send and trade XRP and other currencies issued by a gateway you trust.</p>
</div><!--/.card-body-->
</div><!--/.card-->
</div><!--/.card-deck-->
</div><!--/.col-->
</div><!--/.row-->
</div><!--/.card-deck-->
</div><!--/.container-->
</section>
@@ -266,7 +276,7 @@
<img class="project-icon" src="assets/img/RippleNet-condensed.svg" />
<span class="project-name">Ripple Client Portal</span>
<span class="login-required">(login required)</span>
<i class="fa fa-external-link"></i>
<i class="fa fa-external-link" aria-hidden="true"></i>
</p>
<p class="project-summary">For financial institutions using Ripple's proprietary solutions to send money globally.</p>
</div><!--/.card-body-->
@@ -281,7 +291,7 @@
<p>
<img class="project-icon" src="assets/img/ilp_logo.svg" />
<span class="project-name">Interledger</span>
<i class="fa fa-external-link"></i>
<i class="fa fa-external-link" aria-hidden="true"></i>
</p>
<p class="project-summary">An open protocol suite for connecting all forms of digital money.</p>
</div><!--/.card-body-->