mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 11:45:50 +00:00
adds lg version of community page
This commit is contained in:
akcodez
File diff suppressed because one or more lines are too long
BIN
assets/img/community/card-bg-1.png
Normal file
BIN
assets/img/community/card-bg-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
assets/img/community/card-bg-2.png
Normal file
BIN
assets/img/community/card-bg-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
assets/img/community/card-bg-3.png
Normal file
BIN
assets/img/community/card-bg-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
96
assets/js/contribute-carousel.js
Normal file
96
assets/js/contribute-carousel.js
Normal file
@@ -0,0 +1,96 @@
|
||||
const events = [
|
||||
{
|
||||
name: "Q3 2023 Ripple XRP Meetup",
|
||||
description: "Join your fellow Ripple XRP Enthusiasts for a 90-minute discussion. Topics: XRP, Flare, XRPL, Ripple (Company), General Crypto QA.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/ripple-xrp-community/events/292740612",
|
||||
location: "Online",
|
||||
date: "July 13, 2023",
|
||||
image: "Virtual-Event.png",
|
||||
end_date: "July 13, 2023"
|
||||
},
|
||||
{
|
||||
name: "XRPL Toronto Meetup",
|
||||
description: "Prepare for an evening of XRPL Toronto Meetup – a celebration of discovery and connection. Join enthusiasts, innovators, and developers for inspiring talks, conversations, and learning. All are welcome, from seasoned developers to curious newcomers.",
|
||||
type: "meetup",
|
||||
link: "https://www.meetup.com/xrpl-toronto-community-meetup/events/294766059",
|
||||
location: "Downtown Toronto",
|
||||
date: "August 14, 2023",
|
||||
image: "event-meetup-toronto@2x.jpg",
|
||||
end_date: "August 14, 2023"
|
||||
},
|
||||
{
|
||||
name: "XRPL London Meetup (Accelerator Edition)",
|
||||
description: "Join us for a Happy Hour hosted by the XRPL Accelerator Team! Connect with fellow start-ups in the blockchain space and gain insights into cutting-edge projects and founders.",
|
||||
type: "meetup",
|
||||
link: "https://lu.ma/xrplacceleratorhappyhour",
|
||||
location: "Central London",
|
||||
date: "September 04, 2023",
|
||||
image: "event-meetup-london.png",
|
||||
end_date: "September 04, 2023"
|
||||
},
|
||||
{
|
||||
name: "XRPL Accelerator Demo Day",
|
||||
description: "Join us for our very first XRPL Accelerator Demo Day in London. Witness pitches from nine portfolio startups, engage in Q&A sessions, and network with founders and investors.",
|
||||
type: "conference",
|
||||
link: "https://lu.ma/xrplaccelerator",
|
||||
location: "Central London and Online",
|
||||
date: "September 05, 2023",
|
||||
image: "Conference.png",
|
||||
end_date: "September 05, 2023"
|
||||
},
|
||||
{
|
||||
name: "XRPL Hackathon - Apex 2023",
|
||||
description: "Join the XRPL Hackathon - APEX 2023, a week before the XRP Ledger's annual developer conference. Explore the Future of Finance and Web3 tracks, collaborate, learn, and compete for 10K USD in prizes.",
|
||||
type: "hackathon",
|
||||
link: "https://lu.ma/4h3bqfw1",
|
||||
location: "Delft, Netherlands ",
|
||||
date: "August 30, 2023 - August 31, 2023",
|
||||
image: "Hackathons.png",
|
||||
end_date: "August 31, 2023"
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
let currentIndex = 1;
|
||||
|
||||
function updateCarousel() {
|
||||
console.log({events,currentIndex})
|
||||
if(!!events[currentIndex - 1]) {
|
||||
document.getElementById('prev-btn').style = 'opacity:1;'
|
||||
document.getElementById('left-image').style = 'visibility:visible;'
|
||||
document.getElementById('left-image').src = `assets/img/events/${events[currentIndex - 1].image}`;
|
||||
} else {
|
||||
document.getElementById('prev-btn').style = 'opacity:0.5;'
|
||||
document.getElementById('left-image').style = 'visibility:hidden;'
|
||||
}
|
||||
document.getElementById('center-image').src = `assets/img/events/${events[currentIndex].image}`;
|
||||
if(!!events[currentIndex + 1] ) {
|
||||
document.getElementById('next-btn').style = 'opacity:1;'
|
||||
document.getElementById('right-image').style = 'visibility:visible;'
|
||||
document.getElementById('right-image').src = `assets/img/events/${events[currentIndex + 1].image}`;
|
||||
} else {
|
||||
document.getElementById('next-btn').style = 'opacity:0.5;'
|
||||
document.getElementById('right-image').style = 'visibility:hidden;'
|
||||
}
|
||||
document.getElementById('event-name').textContent = events[currentIndex].name;
|
||||
document.getElementById('event-location').textContent = events[currentIndex].location;
|
||||
document.getElementById('event-date').textContent = events[currentIndex].date;
|
||||
}
|
||||
|
||||
document.getElementById('prev-btn').addEventListener('click', function() {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex--;
|
||||
updateCarousel();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('next-btn').addEventListener('click', function() {
|
||||
if (currentIndex < events.length - 1) {
|
||||
currentIndex++;
|
||||
updateCarousel();
|
||||
}
|
||||
});
|
||||
|
||||
// Initial setup
|
||||
updateCarousel();
|
||||
@@ -1,4 +1,14 @@
|
||||
.page-community {
|
||||
.icon-date {
|
||||
padding-right: 4px;
|
||||
content: url(../img/events/event-date.svg);
|
||||
}
|
||||
|
||||
.icon-location {
|
||||
padding-right: 4px;
|
||||
content: url(../img/events/event-location.svg);
|
||||
}
|
||||
|
||||
.builders-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -16,6 +26,10 @@
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
padding-top: 165px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.eyebrow-convo {
|
||||
@@ -51,6 +65,13 @@
|
||||
border-bottom: 1px solid #343437;
|
||||
}
|
||||
|
||||
#community-table td {
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
max-width: 65vw;
|
||||
|
||||
}
|
||||
|
||||
#community-table img {
|
||||
width: 52px;
|
||||
height: 29px;
|
||||
@@ -96,5 +117,606 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.xrpl-events-section {
|
||||
margin-top: 150px;
|
||||
padding: 50px 40px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
// Responsive Styles for Mobile
|
||||
@media screen and (max-width: 768px) {
|
||||
// Adjust this breakpoint value as needed
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
|
||||
.header-div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
|
||||
h6 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: Work Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: Work Sans;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: start;
|
||||
margin-top: 1rem;
|
||||
font-family: Work Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
/* 140% */
|
||||
}
|
||||
|
||||
.view-all-events-btn {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.upcoming-event {
|
||||
text-align: start;
|
||||
margin-top: 2rem;
|
||||
padding: 1rem 0;
|
||||
|
||||
.days-count {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-div {
|
||||
padding-top: 27px;
|
||||
}
|
||||
|
||||
.header {
|
||||
h6 {
|
||||
padding-left: 1.5px;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--black-black-0, #FFF);
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-align: start;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--black-black-0, #FFF);
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
max-width: 444px;
|
||||
color: var(--black-black-10-gray-200, #E0E0E1);
|
||||
line-height: 32px;
|
||||
/* 133.333% */
|
||||
}
|
||||
|
||||
.view-all-events-btn {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.upcoming-event {
|
||||
margin-top: 2rem;
|
||||
|
||||
.upcoming-label {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--black-black-30, #C1C1C2);
|
||||
}
|
||||
|
||||
.days-count {
|
||||
font-size: 4rem; // Assuming a larger font for the days count. Adjust as needed.
|
||||
// Add additional styles if required
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--black-black-10, #F5F5F7);
|
||||
}
|
||||
|
||||
.event-details,
|
||||
.event-location {
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--black-black-30, #C1C1C2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.community-funding {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
.funding-section {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
color: var(--black-black-0);
|
||||
}
|
||||
|
||||
.small-text {
|
||||
color: var(--black-black-30, #C1C1C2);
|
||||
font-family: Work Sans;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
/* 133.333% */
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.funding-section h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 38px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.funding-section p {
|
||||
color: var(--black-black-20);
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stacked-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stat {
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 54px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.community-funding {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.stacked-stats {
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.funding-section,
|
||||
.stats {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
width: 950px;
|
||||
margin: 0 auto;
|
||||
margin-top: 106px;
|
||||
|
||||
.flex-align {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.center-image-wrapper {
|
||||
position: relative;
|
||||
width: 60%;
|
||||
margin: 0 48px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#center-image {
|
||||
width: 100%;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
#left-image,
|
||||
#right-image {
|
||||
width: 15%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#prev-btn {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#next-btn {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.event-info {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
span {
|
||||
color: #FFF;
|
||||
font-family: Work Sans;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.name {
|
||||
padding-bottom: 5px;
|
||||
color: var(--black-black-10, #F5F5F7);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
/* 150% */
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--black-black-0: #FFF;
|
||||
--black-black-10: #F5F5F7;
|
||||
--black-black-30: #C1C1C2;
|
||||
}
|
||||
|
||||
.community-spotlight-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
margin-top: 100px;
|
||||
min-height: 562px;
|
||||
}
|
||||
|
||||
.community-spotlight {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 10px;
|
||||
/* for spacing */
|
||||
}
|
||||
|
||||
.projects-wrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
margin-left: 70px;
|
||||
margin-right: 70px
|
||||
}
|
||||
|
||||
.project-card {
|
||||
height: 291px;
|
||||
position: absolute;
|
||||
width: 205px;
|
||||
background-color: #232325;
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.project-card.top-left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.project-card.bottom-right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 44%;
|
||||
/* adjust as per your design */
|
||||
background-color: rgb(44, 43, 43);
|
||||
/* placeholder */
|
||||
}
|
||||
|
||||
.spotlight-title,
|
||||
.project-title {
|
||||
color: var(--black-black-10, #F5F5F7);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
/* 100% */
|
||||
}
|
||||
|
||||
.spotlight-subtitle {
|
||||
color: var(--black-black-10, #F5F5F7);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
/* 100% */
|
||||
}
|
||||
|
||||
|
||||
.project-description {
|
||||
color: var(--black-black-30, #C1C1C2);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
/* 150% */
|
||||
}
|
||||
|
||||
.card-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: start;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.view-project {
|
||||
color: var(--blue-purple-blue-purple-50, #7919FF);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.community-spotlight-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.community-spotlight,
|
||||
.projects-wrapper {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.projects-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
position: static;
|
||||
margin: 20px 0;
|
||||
/* Space between the cards */
|
||||
}
|
||||
}
|
||||
|
||||
.w-222 {
|
||||
width: 222px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bottom-cards-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 48px;
|
||||
padding: 104px 64px;
|
||||
margin: 0 auto;
|
||||
|
||||
.com-card {
|
||||
padding: 36px;
|
||||
background: #232325;
|
||||
width: 352px;
|
||||
height: 442px;
|
||||
position: relative;
|
||||
|
||||
.top-left-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: url(../img/community/card-bg-1.png);
|
||||
}
|
||||
|
||||
.bottom-right-img {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
content: url(../img/community/card-bg-2.png);
|
||||
}
|
||||
|
||||
.top-right-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
content: url(../img/community/card-bg-3.png);
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.card-title {
|
||||
color: var(--black-black-0-white, #FFF);
|
||||
white-space: nowrap;
|
||||
/* Desktop/H6 */
|
||||
font-family: Work Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
/* 130% */
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
color: var(--black-black-0, #FFF);
|
||||
font-family: Work Sans;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
/* 133.333% */
|
||||
}
|
||||
|
||||
.card-description {
|
||||
color: var(--black-black-20, #E0E0E1);
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
/* 150% */
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.com-card-link {
|
||||
cursor: pointer;
|
||||
color: #7919FF;
|
||||
font-family: Work Sans;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
content: url(../img/icons/arrow-right-purple.svg);
|
||||
position: relative;
|
||||
top: 1px;
|
||||
vertical-align: middle;
|
||||
padding-left: 8px;
|
||||
-webkit-transition: transform 0.3s ease-out;
|
||||
-moz-transition: transform 0.3s ease-out;
|
||||
-ms-transition: transform 0.3s ease-out;
|
||||
-o-transition: transform 0.3s ease-out;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: none;
|
||||
|
||||
&::after {
|
||||
-webkit-transform: translateX(4px);
|
||||
-moz-transform: translateX(4px);
|
||||
-ms-transform: translateX(4px);
|
||||
-o-transform: translateX(4px);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Media query for mobile view */
|
||||
@media (max-width: 768px) {
|
||||
.bottom-cards-section {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.bottom-cards-section .com-card {
|
||||
margin-bottom: 20px;
|
||||
/* Ensure that the card takes up space */
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Reset the image positions for mobile */
|
||||
.com-card .top-left-img,
|
||||
.com-card .bottom-right-img,
|
||||
.com-card .top-right-img {
|
||||
position: static;
|
||||
/* This removes the absolute positioning */
|
||||
display: block;
|
||||
width: 100%;
|
||||
/* Adjust this if you want the image to take up less width */
|
||||
margin-bottom: 15px;
|
||||
/* Add some space between the image and the card content */
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -579,6 +579,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.autoscroll-content {
|
||||
animation: autoscroll 15s linear infinite;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 300px; /* adjust this value based on your design requirements */
|
||||
}
|
||||
// Community Page
|
||||
#community-magenta {
|
||||
position: absolute;
|
||||
|
||||
@@ -16,7 +16,101 @@
|
||||
{% block breadcrumbs %}{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
{% set events = [
|
||||
{ "name": "Q3 2023 Ripple XRP Meetup",
|
||||
"description": "Join your fellow Ripple XRP Enthusiasts for a 90-minute discussion. Topics: XRP, Flare, XRPL, Ripple (Company), General Crypto QA.",
|
||||
"type": "meetup",
|
||||
"link": "https://www.meetup.com/ripple-xrp-community/events/292740612",
|
||||
"location": "Online",
|
||||
"date": "July 13, 2023",
|
||||
"image": "Virtual-Event.png",
|
||||
"end_date": "July 13, 2023"
|
||||
},
|
||||
{ "name": "XRPL Toronto Meetup",
|
||||
"description": "Prepare for an evening of XRPL Toronto Meetup – a celebration of discovery and connection. Join enthusiasts, innovators, and developers for inspiring talks, conversations, and learning. All are welcome, from seasoned developers to curious newcomers.",
|
||||
"type": "meetup",
|
||||
"link": "https://www.meetup.com/xrpl-toronto-community-meetup/events/294766059",
|
||||
"location": "Downtown Toronto",
|
||||
"date": "August 14, 2023",
|
||||
"image": "event-meetup-toronto@2x.jpg",
|
||||
"end_date": "August 14, 2023"
|
||||
},
|
||||
{ "name": "XRPL London Meetup (Accelerator Edition)",
|
||||
"description": "Join us for a Happy Hour hosted by the XRPL Accelerator Team! Connect with fellow start-ups in the blockchain space and gain insights into cutting-edge projects and founders.",
|
||||
"type": "meetup",
|
||||
"link": "https://lu.ma/xrplacceleratorhappyhour",
|
||||
"location": "Central London",
|
||||
"date": "September 04, 2023",
|
||||
"image": "event-meetup-london.png",
|
||||
"end_date": "September 04, 2023"
|
||||
},
|
||||
{
|
||||
"name": "XRPL Accelerator Demo Day",
|
||||
"description": "Join us for our very first XRPL Accelerator Demo Day in London. Witness pitches from nine portfolio startups, engage in Q&A sessions, and network with founders and investors. ",
|
||||
"type": "conference",
|
||||
"link": "https://lu.ma/xrplaccelerator",
|
||||
"location": "Central London and Online",
|
||||
"date": "September 05, 2023",
|
||||
"image": "Conference.png",
|
||||
"end_date": "September 05, 2023"
|
||||
},
|
||||
{ "name": "XRPL Hackathon - Apex 2023",
|
||||
"description": "Join the XRPL Hackathon - APEX 2023, a week before the XRP Ledger's annual developer conference. Explore the Future of Finance and Web3 tracks, collaborate, learn, and compete for 10K USD in prizes.",
|
||||
"type": "hackathon",
|
||||
"link": "https://lu.ma/4h3bqfw1",
|
||||
"location": "Delft, Netherlands ",
|
||||
"date": "August 30, 2023 - August 31, 2023",
|
||||
"image": "Hackathons.png",
|
||||
"end_date": "August 31, 2023"
|
||||
},
|
||||
{ "name": "XRPL Grants Info Session: Financial Inclusion Focused",
|
||||
"description": "Join us for a live information session and Q&A on applying to XRPL Grants Wave 7. This session will provide a general overview of the XRPL Grants application for Wave 7, with a focus on Financial Inclusion projects.",
|
||||
"type": "info-session",
|
||||
"link": "https://www.youtube.com/watch?v=TgLaAXTZY7Q",
|
||||
"location": "Virtual - Zoom",
|
||||
"date": "September 05, 2023",
|
||||
"image": "InfoSessions.png",
|
||||
"end_date": "September 05, 2023"
|
||||
},
|
||||
{ "name": "XRPL South Korea Meetup - XCCESS",
|
||||
"description": "We are excited to introduce the XRP Ledger XCCESS - an exclusive meetup bringing together the brightest minds, innovators, and enthusiasts from South Korea's blockchain industry. Join us for an engaging experience during the Korea Blockchain Week.",
|
||||
"type": "meetup",
|
||||
"link": "https://lu.ma/xrplxccess",
|
||||
"location": "South Korea - JBK Tower",
|
||||
"date": "September 06, 2023",
|
||||
"image": "SouthKoreaMeetup.png",
|
||||
"end_date": "September 06, 2023"
|
||||
},
|
||||
{ "name": "XRPL Grants Info Session: Decentralized Exchange (DEX) Focused",
|
||||
"description": "Watch the recorded information session and Q&A on applying to XRPL Grants Wave 7. This session will provide a general overview of the XRPL Grants application for Wave 7, with a focus on Decentralized Exchange (DEX) projects.",
|
||||
"type": "info-session",
|
||||
"link": "https://www.youtube.com/watch?v=BbGu0QC5WEE",
|
||||
"location": "Virtual - Zoom",
|
||||
"date": "September 06, 2023",
|
||||
"image": "InfoSessions.png",
|
||||
"end_date": "September 06, 2023"
|
||||
},
|
||||
{ "name": "XRPL Developers Discord AMA: Edge Wallet",
|
||||
"description": "Join us for a live chat on Discord and learn more about Edge Wallet and how they are building on the XRP Ledger.",
|
||||
"type": "ama",
|
||||
"link": "http://xrpldevs.org/",
|
||||
"location": "XRPL Developers Discord",
|
||||
"date": "October 13, 2023",
|
||||
"image": "AMAs.png",
|
||||
"end_date": "October 13, 2023"
|
||||
},
|
||||
|
||||
{ "name": "XRPL Developers Reddit AMA: Real World Assets",
|
||||
"description": "Join us for a live chat on Reddit and learn more about how developers are building real world assets with confidence on the XRP Ledger.",
|
||||
"type": "ama",
|
||||
"link": "https://xrplresources.org/rwa-ama?utm_source=web&utm_medium=web&utm_campaign=bwc",
|
||||
"location": "Virtual - Reddit",
|
||||
"date": "October 17, 2023",
|
||||
"image": "AMAs.png",
|
||||
"end_date": "October 17, 2023"
|
||||
},
|
||||
]
|
||||
%}
|
||||
|
||||
<section class="text-center" id="community-heading" style="position: relative;">
|
||||
|
||||
@@ -49,29 +143,176 @@
|
||||
<tr>
|
||||
<td class="td-img"><img src="./assets/img/community/ic_Discord.png" alt="discord icon"></td>
|
||||
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis
|
||||
</td>
|
||||
<td>
|
||||
<a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-img"><img src="./assets/img/community/ic_Twitter.png" alt="twitter icon"></td>
|
||||
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis
|
||||
</td>
|
||||
<td>
|
||||
<a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-img"><img src="./assets/img/community/ic_Youtube.png" alt="youtube icon"></td>
|
||||
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis
|
||||
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis </td>
|
||||
<td>
|
||||
<a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-img"><img src="./assets/img/community/ic_XRPL.png" alt="youtube icon"></td>
|
||||
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis
|
||||
<td>Donec venenatis orci ac turpis aliquet aliquam. Etiam vehicula sem nec justo lobortis </td>
|
||||
<td>
|
||||
<a href="YOUR_LINK_HERE" class="text-external-link"><span class="external-link-contribute"></span></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="xrpl-events-section">
|
||||
<div class="header-div">
|
||||
<div class="header">
|
||||
<h6>XRPL Events</h6>
|
||||
<h4>Check out global events hosted <br class="d-none-sm" /> by the XRPL community</h4>
|
||||
</div>
|
||||
<p class="description">Meet the XRPL community at meetups, hackathons, blockchain conferences, and more across global regions.</p>
|
||||
<a class="btn btn-primary btn-arrow view-all-events-btn" href="events.html">{% trans %}View All Events{% endtrans %}</a>
|
||||
</div>
|
||||
<div class="upcoming-event">
|
||||
<p class="upcoming-label">UPCOMING EVENT</p>
|
||||
<div class="days-count">13 days</div>
|
||||
<h5>XRPL Warsaw Meetup 2023</h5>
|
||||
|
||||
<p class="event-details mb-2 d-flex icon"> <span class="icon-location"> </span>September 08-09, 2023</p>
|
||||
<p class="event-location d-flex icon"> <span class="icon-date"> </span>Warsaw, Poland</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="carousel">
|
||||
<div class="image-container">
|
||||
<img id="left-image" src="" alt="Left Event Image">
|
||||
<div class="center-image-wrapper">
|
||||
<img id="center-image" src="" alt="Featured Event Image">
|
||||
<div class="event-info">
|
||||
<span class="name" id="event-name"></span>
|
||||
<div class="flex-align">
|
||||
<span class="icon-location"> </span>
|
||||
<span id="event-location"></span>
|
||||
</div>
|
||||
<div class="flex-align">
|
||||
<span class="icon-date"> </span>
|
||||
<span id="event-date"> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img id="right-image" src="" alt="Right Event Image">
|
||||
</div>
|
||||
|
||||
<div class="arrow-wrapper">
|
||||
<button class="arrow-button left-arrow" id="prev-btn">
|
||||
<img alt="left arrow">
|
||||
</button>
|
||||
<button class="arrow-button right-arrow" id="next-btn">
|
||||
<img alt="right arrow">
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="community-funding">
|
||||
<div class="stats">
|
||||
<div class="stacked-stats">
|
||||
<div class="stat">
|
||||
<span class="small-text">funding been awarded</span>
|
||||
<div class="number" >$13M+</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="small-text">teams awarded globally</span>
|
||||
<div class="number" >120+</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="small-text">countries represented</span>
|
||||
<div class="number">28+</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="funding-section">
|
||||
<span class="small-text">XRPL Developer Funding</span>
|
||||
<h2>Funding Opportunities for Blockchain Businesses</h2>
|
||||
<p>If you're a software developer or team looking to build your next blockchain business on the XRP Ledger (XRPL), numerous funding opportunities like grants and hackathons await your innovation.</p>
|
||||
<a class="btn btn-primary btn-arrow view-all-events-btn" href="developer-funding.html">{% trans %}Get Funding{% endtrans %}</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="community-spotlight-wrapper">
|
||||
<div class="community-spotlight">
|
||||
<h6 class="spotlight-title">XRPL Community Spotlight</h6>
|
||||
<h4 class="spotlight-subtitle">Showcase your blockchain project, application, or product</h4>
|
||||
<p class="spotlight-description">Get featured on the Developer Reflections blog or Ecosystem page, and amplify your innovation within the blockchain community.</p>
|
||||
<a class="w-222 btn btn-primary btn-arrow view-all-events-btn" href="developer-funding.html">{% trans %}Submit Your Project{% endtrans %}</a>
|
||||
</div>
|
||||
<div class="projects-wrapper">
|
||||
<div class="project-card top-left">
|
||||
<div class="card-image"></div>
|
||||
<div class="card-details">
|
||||
<h6 class="project-title">XRPCafe</h6>
|
||||
<p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
<a href="" class="view-project external-link">View Project</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card bottom-right">
|
||||
<div class="card-image"></div>
|
||||
<div class="card-details">
|
||||
<h6 class="project-title">XRPCafe</h6>
|
||||
<p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
<a href="" class="view-project external-link">View Project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bottom-cards-section">
|
||||
<div class="com-card">
|
||||
<img class="top-left-img" />
|
||||
<div class="card-content">
|
||||
<h6 class="card-title">Contribute to Consensus </h6>
|
||||
<h6 class="card-subtitle">Run an XRP Ledger network node </h6>
|
||||
<p class="card-description">Thank you for your interest in contributing to XRPL.org. </p>
|
||||
<div class="card-links">
|
||||
<a class="com-card-link" href="">{% trans %}The Rippled Server{% endtrans %}</a>
|
||||
<a class="com-card-link">Join UNL </a>
|
||||
<a class="com-card-link">Install & Configure</a>
|
||||
<a class="com-card-link">Troubleshooting</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="com-card">
|
||||
<img class="bottom-right-img" />
|
||||
<div class="card-content">
|
||||
<h6 class="card-title">XRPL Careers </h6>
|
||||
<h6 class="card-subtitle">Discover your next career opportunity in the XRPL community </h6>
|
||||
<p class="card-description">Teams across the XRPL community are looking for talented individuals to help build their next innovation. </p>
|
||||
<div class="card-links">
|
||||
<a class="com-card-link">View Open Roles</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="com-card">
|
||||
<img class="top-right-img" />
|
||||
<div class="card-content">
|
||||
<h6 class="card-title">Contribute to XRPL.org </h6>
|
||||
<h6 class="card-subtitle">A Community-Driven Resource for All Things XRPL.org </h6>
|
||||
<p class="card-description">Contribute to XRPL.org, the go-to resource for XRP Ledger. This open-source portal welcomes contributions from anyone for suggested changes. </p>
|
||||
<div class="card-links">
|
||||
<a class="com-card-link">Read Contributor Guidelines </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -82,14 +323,8 @@
|
||||
|
||||
<!-- Light version for network node looks ok for both light/dark.-->
|
||||
<!-- Dark version for other two and using filter invert and adjust brightness for light mode -->
|
||||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/community/network-node-light.json"></script>
|
||||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/community/XRPL-grants-dark.json"></script>
|
||||
<script type="text/javascript" src="{{currentpage.prefix}}assets/js/community/careers-dark.json"></script>
|
||||
|
||||
|
||||
<script type="application/javascript" src="{{currentpage.prefix}}assets/js/contribute-carousel.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block analytics %}
|
||||
<script type="application/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
Reference in New Issue
Block a user