mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 03:35:51 +00:00
exosystem page updates
This commit is contained in:
akcodez
File diff suppressed because one or more lines are too long
BIN
assets/img/uses/infrastructure.png
Normal file
BIN
assets/img/uses/infrastructure.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@@ -120,6 +120,15 @@ section {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&.card-grid-4xN {
|
||||
/* 4 equal columns and any number of auto-sized rows. */
|
||||
grid-auto-rows: auto;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@include media-breakpoint-up(lg) {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-grid-3xN {
|
||||
/* 3 equal columns and any number of auto-sized rows. */
|
||||
grid-auto-rows: auto;
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
color: #eae7e6;
|
||||
font-size: 5.16em;
|
||||
font-weight: 400;
|
||||
font-family: 'Space Mono', sans-serif;
|
||||
font-family: "Space Mono", sans-serif;
|
||||
}
|
||||
|
||||
.use-case-step-length {
|
||||
@@ -29,7 +29,114 @@
|
||||
color: #888;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.use-case-circle {
|
||||
display: inline-block;
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
border: 1px solid #343437;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.use-case-circle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
border: 1px solid grey;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 30px;
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 13px; /* Adjust the space between the elements */
|
||||
}
|
||||
|
||||
.circle-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.circle-text {
|
||||
font-family: "Work Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.join-xrpl-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.colorful-join-text-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 0 5%; /* Percentage-based padding to make it responsive */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
.colorful-join-text-wrapper {
|
||||
padding: 0 4%; /* Percentage-based padding to make it responsive */
|
||||
}
|
||||
}
|
||||
|
||||
.colorful-join-text {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-family: "Work Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#feff01 0%,
|
||||
#ff2d9a 30.82%,
|
||||
#e24cff 64.01%,
|
||||
#9a52ff 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.colorful-join-text {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
.pill-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3.69087px 29.527px;
|
||||
width: 73.05px;
|
||||
height: 37.38px;
|
||||
/* Blue-Purple/Blue-Purple 50 */
|
||||
background: #7919ff;
|
||||
/* Blue-Purple/Blue-Purple 60 */
|
||||
border: 3.69087px solid #5f00e5;
|
||||
border-radius: 184.543px;
|
||||
}
|
||||
|
||||
.pill-number {
|
||||
font-family: "Work Sans";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 22.1452px;
|
||||
color: #f0e5ff;
|
||||
}
|
||||
.use-case-steps h2 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
@@ -66,10 +173,10 @@
|
||||
padding-top: 2px;
|
||||
}
|
||||
.related-tasks-links a:hover::after {
|
||||
padding-left: .5em;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.related-tasks-links a::after {
|
||||
content: " ➝";
|
||||
padding-left: 0;
|
||||
transition: all .2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@@ -345,8 +345,8 @@
|
||||
<section class="container-new py-26 text-lg-center">
|
||||
<div class="p-3 col-lg-8 mx-lg-auto">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h1 class="mb-0">{% trans %}Powering Innovative Technology{% endtrans %}</h1>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Use Cases{% endtrans %}</h6>
|
||||
<h1 class="mb-0">{% trans %}Powering Innovative Use Cases and Projects.{% endtrans %}</h1>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Ecosystem{% endtrans %}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -354,14 +354,14 @@
|
||||
<section class="container-new py-26">
|
||||
<div class="col-lg-5 p-3 mb-3 mb-lg-5">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h3 class="h4 h2-sm">{% trans %}Powering innovative use cases and projects{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Ecosystem{% endtrans %}</h6>
|
||||
<p class="text-sm">{% trans %}The XRPL has a rich ecosystem with many contributors globally. Explore the community of developers, validators, and partners.{% endtrans %}</p>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Introducing the XRPL Ecosystem{% endtrans %}</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="card-grid card-grid-3xN ls-none mt-4 pt-lg-2" id="use-case-card-grid">
|
||||
|
||||
<ul class="card-grid card-grid-4xN ls-none mt-4 pt-lg-2" id="use-case-card-grid">
|
||||
{% set uses = [
|
||||
|
||||
{"id": "infrastructure",
|
||||
"title": _("Infrastructure"),
|
||||
"description": _("Build and operate components or systems that help the functionality of the XRP Ledger, such as Nodes, dev tools, storage, security and more.")},
|
||||
@@ -409,22 +409,30 @@
|
||||
{"id": "custody",
|
||||
"title": _("Custody"),
|
||||
"description": _("Use the XRP Ledger to build crypto custody and securely hold, store and use your assets.")},
|
||||
|
||||
{"id": "defi",
|
||||
"title": _("DeFi"),
|
||||
"description": _("Provide access to financial products and services replacing the traditional role of financial institutions.")},
|
||||
|
||||
] %}
|
||||
{% for use in uses %}
|
||||
<li class="col ls-none p-3">
|
||||
<img id="{{use.id}}" alt="{{use.title}} icon">
|
||||
<h4 class="mt-3 mb-0 h5">{{use.title}}</h4>
|
||||
<p class="mt-2 mt-md-3 mb-0">{{use.description}}</p>
|
||||
<li class="col use-case-circle ls-none p-3">
|
||||
<div class="circle-content">
|
||||
<img class="circle-img" src="assets/img/uses/infrastructure.png" alt="use-logos">
|
||||
<p class="circle-text">Your Text Here</p>
|
||||
<div class="pill-box">
|
||||
<span class="pill-number">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="join-xrpl-section py-26">
|
||||
<div class="colorful-join-text-wrapper">
|
||||
<span class="colorful-join-text"> Join the XRPL Ecosystem and showcase your XRPL project, application, or product. Get featured on the Developer Reflections blog or Ecosystem page. </span>
|
||||
<div class="mt-10">
|
||||
<a class="btn btn-primary btn-arrow" href="docs.html">{% trans %}Submit Your Project{% endtrans %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-12 col-lg-8 col-xl-6 p-3 mb-5">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
@@ -491,7 +499,6 @@
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block analytics %}
|
||||
|
||||
Reference in New Issue
Block a user