adds ambassador page updates

This commit is contained in:
akcodez
2023-06-07 07:40:54 -07:00
parent 4a144c4cab
commit 3f07b70dbb
4 changed files with 277 additions and 267 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 650 KiB

After

Width:  |  Height:  |  Size: 666 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 667 KiB

After

Width:  |  Height:  |  Size: 722 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 743 KiB

View File

@@ -68,7 +68,258 @@
</div>
</section>
<!-- Benefits -->
<section class="container-new py-26">
<!-- flex. Col for mobile. Row for large. on large align content to the center -->
<div class="d-flex flex-column flex-lg-row align-items-lg-center">
<div class="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0">
<div class="d-flex flex-column-reverse p-lg-3">
<h3 class="h4 h2-sm">{% trans %}Why become an XRPL Campus Ambassador?{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Benefits{% endtrans %}</h6>
</div>
<p class="p-lg-3 mb-2 longform">{% trans %}Join a global cohort of students empowering others to build on the XRPL.{% endtrans %}</p>
</div>
<div class="order-2 col-lg-6 px-0 mr-lg-5">
<div class="row align-items-center m-0" id="benefits-list">
<!-- benefitslist -->
<div class="col-12 col-lg-6 p-0 pr-lg-4">
<div class="px-lg-3 pb-3">
<img id="benefits-01" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Exclusive Opportunities</h6>
<p class="">Get access and invitations to Ambassador-only events, conferences, and opportunities</p>
</div>
</div>
<!-- Hide on large -->
<div class="px-lg-3 pb-3 d-lg-none ">
<img id="benefits-02" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Education</h6>
<p class="">Tutorials and workshops from leading XRPL and blockchain developers</p>
</div>
</div>
<div class="px-lg-3 pb-3">
<img id="benefits-03" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Swag</h6>
<p class="">New XRPL swag for Ambassadors and swag to share with other students</p>
</div>
</div>
<!-- Hide on large -->
<div class="px-lg-3 pb-3 d-lg-none">
<img id="benefits-04" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Mentorship</h6>
<p class="">Serve as an advocate and receive support from notable members of the community</p>
</div>
</div>
<div class="px-lg-3 pb-3">
<img id="benefits-05" class="pl-lg-3">
<div class="p-lg-3 pt-3 pb-lg-0">
<h6 class="mb-3">Career Acceleration</h6>
<p class="pb-lg-0">Gain hands-on experience building communities and grow your professional network in the blockchain industry</p>
</div>
</div>
<!-- Hide on large -->
<div class="px-lg-3 pb-3 d-lg-none">
<img id="benefits-06" class="pl-lg-3">
<div class="pb-lg-0">
<h6 class="mb-3">Stipend</h6>
<p class="pb-lg-0">Receive a stipend to fund your ideas and initiatives that fuel XRPL growth on your campus</p>
</div>
</div>
</div>
<!-- end col 1 -->
<!-- Show on large -->
<div class="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
<div class="px-lg-3 pb-3 pt-5 mt-5">
<img id="benefits-02" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Education</h6>
<p class="">Tutorials and workshops from leading XRPL and blockchain developers</p>
</div>
</div>
<div class="px-lg-3 pb-3 ">
<img id="benefits-04" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Mentorship</h6>
<p class="">Serve as an advocate and receive support from notable members of the community</p>
</div>
</div>
<div class="px-lg-3 pb-3">
<img id="benefits-06" class="pl-lg-3">
<div class="p-lg-3 pt-3 pb-lg-0">
<h6 class="mb-3">Stipend</h6>
<p class="pb-lg-0">Receive a stipend to fund your ideas and initiatives that fuel XRPL growth on your campus</p>
</div>
</div>
</div>
<!-- end col 2 -->
</div>
</div>
</div>
</section>
<!-- Eligibility -->
<section class="container-new py-26">
<!-- flex. Col for mobile. Row for large. on large align content to the center -->
<div class="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-4">
<div class="order-1 order-lg-2 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 mr-lg-5">
<div class="d-flex flex-column-reverse p-lg-3">
<h3 class="h4 h2-sm">{% trans %}Should You Apply?{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Eligibility for XRPL Campus Ambassadors{% endtrans %}</h6>
</div>
<p class="p-lg-3 mb-2 longform">{% trans %}Students currently enrolled in an undergraduate or postgraduate program at an accredited college or university are eligible to apply.{% endtrans %}</p>
</div>
<div class="order-2 order-lg-1 col-lg-6 px-0">
<div class="row align-items-center m-0" id="eligibility-list">
<div class="col-12 col-lg-6 p-0 pr-lg-4">
<div class="px-lg-3 pb-3">
<img id="eligibility-01" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">A Leader</h6>
<p class="">Interested in leading meetups and workshops for your local campus community</p>
</div>
</div>
<!-- Hide on large -->
<div class="px-lg-3 pb-3 d-lg-none ">
<img id="eligibility-02" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Active</h6>
<p class="">An active participant in the XRPL community or interested in blockchain and crypto technologies</p>
</div>
</div>
<div class="px-lg-3 pb-3">
<img id="eligibility-03" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Curious</h6>
<p class="">Eager to learn more about technical blockchain topics and the XRPL</p>
</div>
</div>
<!-- Hide on large -->
<div class="px-lg-3 pb-3 d-lg-none">
<img id="eligibility-04" class="pl-lg-3">
<div class="p-lg-3 pt-3 pb-lg-0">
<h6 class="mb-3">Passionate</h6>
<p class="">Passionate about increasing XRPL education and awareness through events, content, and classroom engagement</p>
</div>
</div>
<div class="p-lg-3 pb-3">
<img id="eligibility-05" class="pl-lg-3">
<div class="p-lg-3 pt-3 pb-lg-0">
<h6 class="mb-3">Creative</h6>
<p class="pb-lg-0 mb-0">Ability to think outside the box to grow the XRPL student community</p>
</div>
</div>
</div>
<!-- end col 1 -->
<!-- Show on large -->
<div class="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
<div class="px-lg-3 pb-3 ">
<img id="eligibility-02" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Active</h6>
<p class="">An active participant in the XRPL community or interested in blockchain and crypto technologies</p>
</div>
</div>
<div class="px-lg-3 pb-3 ">
<img id="eligibility-04" class="pl-lg-3">
<div class="p-lg-3 pt-3 pb-lg-0">
<h6 class="mb-3">Passionate</h6>
<p class="">Passionate about increasing XRPL education and awareness through events, content, and classroom engagement</p>
</div>
</div>
</div>
<!-- end col 2 -->
</div>
</div>
</div>
</section>
<!-- Current Students -->
<section class="container-new py-26">
<!-- Quotes -->
<div id="carouselSlidesOnly" class="carousel slide col-lg-10 mx-auto px-0" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="p-0">
<div class="mb-4 p-lg-3">
<img src="./assets/img/ambassadors/quote1-small.svg" class="h-100 d-lg-none mb-4">
<img src="./assets/img/ambassadors/quote1.svg" class="h-100 d-none d-lg-block">
<div class="p-0 col-lg-7 mx-lg-auto">
<p class="p-lg-3 mb-2"><strong>Derrick N.</strong><br >
Toronto Metropolitan University<br >
Spring 2023 XRPL Campus Ambassador</p>
</div>
</div>
</div>
</div>
<div class="carousel-item mb-20">
<div class="p-0">
<div class="mb-4 p-lg-3">
<img src="./assets/img/ambassadors/quote2-small.svg" class="h-150 d-lg-none mb-4">
<img src="./assets/img/ambassadors/quote2.svg" class="h-100 d-none d-lg-block">
<div class="p-0 col-lg-7 mx-lg-auto">
<p class="p-lg-3 mb-2"><strong>Sally Z.</strong><br >
Toronto Metropolitan University<br >
Spring 2023 XRPL Campus Ambassador</p>
</div>
</div>
</div>
</div>
<div class="carousel-item mb-40">
<div class="p-0">
<div class="mb-4 p-lg-3">
<img src="./assets/img/ambassadors/quote3-small.svg" class="h-150 d-lg-none mb-4">
<img src="./assets/img/ambassadors/quote3.svg" class="h-100 d-none d-lg-block">
<div class="p-0 col-lg-7 mx-lg-auto">
<p class="p-lg-3 mb-2"><strong>Nick D.</strong><br >
Miami University<br >
Spring 2023 XRPL Campus Ambassador</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- How it Works -->
<section class="container-new py-26">
@@ -166,266 +417,11 @@
</div>
</section>
<!-- Benefits -->
<section class="container-new py-26">
<!-- flex. Col for mobile. Row for large. on large align content to the center -->
<div class="d-flex flex-column flex-lg-row align-items-lg-center">
<div class="order-1 order-lg-2 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0">
<div class="d-flex flex-column-reverse p-lg-3">
<h3 class="h4 h2-sm">{% trans %}Why become an XRPL Campus Ambassador?{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Benefits{% endtrans %}</h6>
</div>
<p class="p-lg-3 mb-2 longform">{% trans %}Join a global cohort of students empowering others to build on the XRPL.{% endtrans %}</p>
</div>
<div class="order-2 order-lg-1 col-lg-6 px-0 mr-lg-5">
<div class="row align-items-center m-0" id="benefits-list">
<!-- benefitslist -->
<div class="col-12 col-lg-6 p-0 pr-lg-4">
<div class="px-lg-3 pb-3">
<img id="benefits-01" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Exclusive Opportunities</h6>
<p class="">Get access and invitations to Ambassador-only events, conferences, and opportunities</p>
</div>
</div>
<!-- Hide on large -->
<div class="px-lg-3 pb-3 d-lg-none ">
<img id="benefits-02" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Education</h6>
<p class="">Tutorials and workshops from leading XRPL and blockchain developers</p>
</div>
</div>
<div class="px-lg-3 pb-3">
<img id="benefits-03" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Swag</h6>
<p class="">New XRPL swag for Ambassadors and swag to share with other students</p>
</div>
</div>
<!-- Hide on large -->
<div class="px-lg-3 pb-3 d-lg-none">
<img id="benefits-04" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Mentorship</h6>
<p class="">Serve as an advocate and receive support from notable members of the community</p>
</div>
</div>
<div class="px-lg-3 pb-3">
<img id="benefits-05" class="pl-lg-3">
<div class="p-lg-3 pt-3 pb-lg-0">
<h6 class="mb-3">Career Acceleration</h6>
<p class="pb-lg-0">Gain hands-on experience building communities and grow your professional network in the blockchain industry</p>
</div>
</div>
<!-- Hide on large -->
<div class="px-lg-3 pb-3 d-lg-none">
<img id="benefits-06" class="pl-lg-3">
<div class="pb-lg-0">
<h6 class="mb-3">Stipend</h6>
<p class="pb-lg-0">Receive a stipend to fund your ideas and initiatives that fuel XRPL growth on your campus</p>
</div>
</div>
</div>
<!-- end col 1 -->
<!-- Show on large -->
<div class="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
<div class="px-lg-3 pb-3 pt-5 mt-5">
<img id="benefits-02" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Education</h6>
<p class="">Tutorials and workshops from leading XRPL and blockchain developers</p>
</div>
</div>
<div class="px-lg-3 pb-3 ">
<img id="benefits-04" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Mentorship</h6>
<p class="">Serve as an advocate and receive support from notable members of the community</p>
</div>
</div>
<div class="px-lg-3 pb-3">
<img id="benefits-06" class="pl-lg-3">
<div class="p-lg-3 pt-3 pb-lg-0">
<h6 class="mb-3">Stipend</h6>
<p class="pb-lg-0">Receive a stipend to fund your ideas and initiatives that fuel XRPL growth on your campus</p>
</div>
</div>
</div>
<!-- end col 2 -->
</div>
</div>
</div>
</section>
<!-- Current Students -->
<section class="container-new py-26">
<!-- Quotes -->
<div id="carouselSlidesOnly" class="carousel slide col-lg-10 mx-auto px-0" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="p-0">
<div class="mb-4 p-lg-3">
<img src="./assets/img/ambassadors/quote1-small.svg" class="h-100 d-lg-none mb-4">
<img src="./assets/img/ambassadors/quote1.svg" class="h-100 d-none d-lg-block">
<div class="p-0 col-lg-7 mx-lg-auto">
<p class="p-lg-3 mb-2"><strong>Derrick N.</strong><br >
Toronto Metropolitan University<br >
Spring 2023 XRPL Campus Ambassador</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="p-0">
<div class="mb-4 p-lg-3">
<img src="./assets/img/ambassadors/quote2-small.svg" class="h-100 d-lg-none mb-4">
<img src="./assets/img/ambassadors/quote2.svg" class="h-100 d-none d-lg-block">
<div class="p-0 col-lg-7 mx-lg-auto">
<p class="p-lg-3 mb-2"><strong>Sally Z.</strong><br >
Toronto Metropolitan University<br >
Spring 2023 XRPL Campus Ambassador</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="p-0">
<div class="mb-4 p-lg-3">
<img src="./assets/img/ambassadors/quote2-small.svg" class="h-100 d-lg-none mb-4">
<img src="./assets/img/ambassadors/quote3.svg" class="h-100 d-none d-lg-block">
<div class="p-0 col-lg-7 mx-lg-auto">
<p class="p-lg-3 mb-2"><strong>Nick D.</strong><br >
Miami University<br >
Spring 2023 XRPL Campus Ambassador</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Image Block -->
<div class="">
<img src="./assets/img/ambassadors/students-large.png" class="w-100">
</div>
</section>
<!-- Eligibility -->
<section class="container-new py-26">
<!-- flex. Col for mobile. Row for large. on large align content to the center -->
<div class="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-4">
<div class="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 mr-lg-5">
<div class="d-flex flex-column-reverse p-lg-3">
<h3 class="h4 h2-sm">{% trans %}Should You Apply?{% endtrans %}</h3>
<h6 class="eyebrow mb-3">{% trans %}Eligibility for XRPL Campus Ambassadors{% endtrans %}</h6>
</div>
<p class="p-lg-3 mb-2 longform">{% trans %}Students currently enrolled in an undergraduate or postgraduate program at an accredited college or university are eligible to apply.{% endtrans %}</p>
</div>
<div class="order-2 col-lg-6 px-0">
<div class="row align-items-center m-0" id="eligibility-list">
<div class="col-12 col-lg-6 p-0 pr-lg-4">
<div class="px-lg-3 pb-3">
<img id="eligibility-01" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">A Leader</h6>
<p class="">Interested in leading meetups and workshops for your local campus community</p>
</div>
</div>
<!-- Hide on large -->
<div class="px-lg-3 pb-3 d-lg-none ">
<img id="eligibility-02" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Active</h6>
<p class="">An active participant in the XRPL community or interested in blockchain and crypto technologies</p>
</div>
</div>
<div class="px-lg-3 pb-3">
<img id="eligibility-03" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Curious</h6>
<p class="">Eager to learn more about technical blockchain topics and the XRPL</p>
</div>
</div>
<!-- Hide on large -->
<div class="px-lg-3 pb-3 d-lg-none">
<img id="eligibility-04" class="pl-lg-3">
<div class="p-lg-3 pt-3 pb-lg-0">
<h6 class="mb-3">Passionate</h6>
<p class="">Passionate about increasing XRPL education and awareness through events, content, and classroom engagement</p>
</div>
</div>
<div class="p-lg-3 pb-3">
<img id="eligibility-05" class="pl-lg-3">
<div class="p-lg-3 pt-3 pb-lg-0">
<h6 class="mb-3">Creative</h6>
<p class="pb-lg-0 mb-0">Ability to think outside the box to grow the XRPL student community</p>
</div>
</div>
</div>
<!-- end col 1 -->
<!-- Show on large -->
<div class="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
<div class="px-lg-3 pb-3 ">
<img id="eligibility-02" class="pl-lg-3">
<div class="p-lg-3 pt-3">
<h6 class="mb-3">Active</h6>
<p class="">An active participant in the XRPL community or interested in blockchain and crypto technologies</p>
</div>
</div>
<div class="px-lg-3 pb-3 ">
<img id="eligibility-04" class="pl-lg-3">
<div class="p-lg-3 pt-3 pb-lg-0">
<h6 class="mb-3">Passionate</h6>
<p class="">Passionate about increasing XRPL education and awareness through events, content, and classroom engagement</p>
</div>
</div>
</div>
<!-- end col 2 -->
</div>
</div>
</div>
</section>
<!-- Global Community Carousel -->