organicmaps/website
13
Fork 1
Code Issues 31 Pull requests 8 Projects Releases Wiki Activity Actions

add

Browse source
This commit is contained in:
borntojesus 2023-11-23 04:32:18 +02:00
parent 5c60b6a390
commit 3d8bee56e0
17 changed files with 618 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
content/support/index.md
View file

@ -7,6 +7,8 @@ extra:
hero_title: Support
hero_description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
support_card_title_1: FAQ
menu_title_pre: Home
hero_image: support/suport-kv.png
support_card_title_2: Email Contact
support_card_title_3: Support Channel
support_card_description_1: This is a Paragraph. Click on "Edit Text" or double click on the text box to start editing the content and make sure to add any relevant details or information that you want to share with your visitors.

BIN
content/support/suport-kv.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 172 KiB

2
content/volunteering/index.md
View file

@ -5,6 +5,8 @@ template: volunteering.html
weight: 10
extra:
hero_title: Volunteering
menu_title_pre: Home
hero_image: volunteering/kv.png
section_item_title_1: Design
section_item_title_2: Engineering
section_item_title_3: Product

BIN
content/volunteering/kv.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 686 KiB

77
sass/common/support-block.scss Normal file
View file

@ -0,0 +1,77 @@
@import "../variables/media";
.support-block {
margin-bottom: var(--container-mob-section);
@media (max-width: $media-sm) {
padding: 0 16rem;
}
&__container {
background-color: var(--bg-green);
border-radius: 24rem;
padding: 50rem;
max-width: 1070rem;
display: flex;
flex-direction: column;
gap: 30rem;
}
&__title {
color: var(--black-white);
@media (max-width: $media-md) {
text-align: center;
}
}
&__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
@media (max-width: $media-md) {
display: flex;
flex-direction: column;
align-items: center;
}
}
&__icon-title {
margin: 20rem 0 10rem;
}
&__card {
padding: 0 50rem;
border-right: 1rem solid var(--common-line-color);
svg {
color: var(--green-button);
}
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
border-right: none;
}
@media (max-width: $media-md) {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 20rem;
margin-bottom: 20rem;
border: none;
border-bottom: 1rem solid var(--common-line-color);
&:last-child {
border: none;
padding: 0;
margin-bottom: 0;
}
}
@media (max-width: $media-md) {
text-align: center;
}
}
}

1
sass/component/header-sub.scss
View file

@ -4,6 +4,7 @@
background-size: cover;
padding: var(--menu-height) 0 124rem;
position: relative;
background-position: center center;
&:before {
content: "";

3
sass/main.scss
View file

@ -13,6 +13,7 @@
@import "./common/header";
@import "./common/footer";
@import "./common/bred-crum";
@import "./common/support-block";
// Component Style
@import "./component/lang-switcher";
@ -25,5 +26,7 @@
// Pages Style
@import "./pages/home";
@import "./pages/community";
@import "./pages/support";
@import "./pages/volunteering";

69
sass/pages/support.scss Normal file
View file

@ -0,0 +1,69 @@
@import "../variables/media";
.section-support {
padding: var(--container-mob-section) 0;
&__container {
display: grid;
grid-template-columns: 2fr minmax(200px, 1fr);
gap: 22rem;
@media (max-width: $media-md) {
display: flex;
flex-direction: column;
}
}
&__title {
@media (max-width: $media-sm) {
padding: 20rem 0 20rem 75rem;
}
}
&__item {
background: var(--common-green);
color: var(--common-white);
padding: 30rem;
border-radius: 10rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 36rem;
&:nth-child(2) {
grid-row: 3/1;
grid-column: 2/2;
flex-direction: column-reverse;
justify-content: center;
@media (max-width: $media-md) {
flex-direction: row;
justify-content: space-between;
}
}
@media (max-width: $media-sm) {
position: relative;
padding: 20rem;
}
}
&__content {
max-width: 388rem;
}
&__line {
width: 256rem;
height: 2rem;
background-color: var(--common-line-color);
margin: 20rem 0;
}
&__img {
max-width: 184rem;
@media (max-width: $media-sm) {
max-width: 63rem;
position: absolute;
top: 24rem;
left: 17rem;
}
}
}

55
sass/pages/volunteering.scss Normal file
View file

@ -0,0 +1,55 @@
.section-volunteering {
padding: var(--container-mob-section) 0;
&__select {
display: flex;
justify-content: space-between;
padding: 22rem 30rem;
border-radius: 10rem;
background-color: var(--acordion-green);
margin-bottom: 20rem;
cursor: pointer;
border: 1rem solid transparent;
&:last-child {
margin-bottom: 0;
}
}
&__main {
padding: 30rem;
}
&__content {
overflow: hidden;
max-height: 0;
background-color: var(--acordion-green-bg);
transition: max-height 0.5s ease-in-out;
margin-bottom: 20rem;
margin-top: -24rem;
border-radius: 0 0 10rem 10rem;
}
&__button {
background-color: var(--common-acord-button);
color: var(--common-green);
width: 34rem;
height: 34rem;
font-size: 21px;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
border-radius: 34rem;
}
.is-active {
border: 1rem solid var(--common-acord-button);
background-color: var(--acordion-green-bg);
}
.is-active + .section-volunteering__content {
max-height: 1500rem;
border: 1rem solid var(--common-acord-button);
}
}

10
sass/variables/color-theme.scss
View file

@ -1,4 +1,6 @@
// Common COLOR
@import "../variables/media";
:root {
--common-black: #000D07;
--common-white: #ffffff;
@ -12,12 +14,16 @@
--common-line-color: #AEC5BA;
--common-black-sub: #26312C;
--common-green-btn-social: #33895E;
--common-acord-button: #BFDACC;
--common-green-gradient: linear-gradient(90deg, #006C35 0%, rgba(0, 96, 49, 0.00) 100%);
}
// Theme COLOR change
.light {
--acordion-green: #F2F8F5;
--acordion-green-bg: #E5F0EB;
--body-bg: var(--common-white);
--white-black: var(--common-white);
--black-white: var(--common-black);
@ -29,6 +35,8 @@
}
.dark {
--acordion-green: #33453D;
--acordion-green-bg: #64776E;
--body-bg: #2C2C2C;
--white-black: var(--common-black);
--black-white: var(--common-white);

9
sass/variables/fonts.scss
View file

@ -10,9 +10,11 @@
--h1-sub: 400 24rem/32rem var(--main-font);
--h1-sub_v2: 300 24rem/32rem var(--main-font);
--h3-boold: 700 24rem/32rem var(--main-font);
--h3-normal: 600 24rem/32rem var(--main-font);
--h4: 500 18rem/28rem var(--main-font);
--h5: 500 20rem/28rem var(--main-font);
--h6: 500 30rem/36rem var(--main-font);
--h5-boold: 700 22rem/28rem var(--main-font);
--p: 300 18rem/28rem var(--main-font);
--p-md: 400 16rem/28rem var(--main-font);
--p-sm: 500 14rem/28rem var(--main-font);
@ -62,7 +64,9 @@
font: var(--h1-sub_v2);
color: var(--common-white);
}
.h3-normal {
font: var(--h3-normal);
}
.h3-bold {
font: var( --h3-boold);
color: var(--common-black);
@ -78,6 +82,9 @@
.h6 {
font: var(--h6);
}
.h5-boold {
font: var( --h5-boold);
}
// Text
.p{
font: var(--p);

1
sass/variables/media.scss
View file

@ -1,3 +1,4 @@
// Media sm: Mobile, md: Tablet, xl: Desktop
$media-md: 991px;
$media-sm: 767px

142
templates/support.html
View file

@ -1,44 +1,108 @@
{% extends "base.html" %}
{%- block content %}
<section class="hero-sub">
<div class="container hero-sub__container">
<h1>{{ page.extra.hero_title | safe }}</h1>
<section class="hero-sub" style="background-image: url({{ page.extra.hero_image | safe }})">
<div class="container hero-sub__container">
<nav class="bred-crum">
<ul class="bred-crum__row">
<li class="bred-crum__item">
<a class="nav-bred bred-crum__link" href="/">{{ page.extra.menu_title_pre }}</a>
</li>
<li class="bred-crum__item">
<span class="nav-bred">
>
</span>
</li>
<li class="bred-crum__item">
<a class="nav-bred bred-crum__link bred-crum--active"
href="/{{ page.extra.hero_title | lower }}">{{ page.extra.hero_title }}</a>
</li>
</ul>
</nav>
<div class="hero-sub__content">
<h1 class="h1 hero-sub__title">
{{ page.extra.hero_title | safe }}
</h1>
<p class="h2-sub_v2 hero-sub__description">
{{ page.extra.hero_description }}
</p>
</div>
</div>
</section>
<section class="section-support">
<div class="container section-support__container">
<div class="section-support__item">
<div class="section-support__content">
<h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_1 | safe }}</h2>
<div class="section-support__line"></div>
<p class="p-sm section-support__description">{{ page.extra.support_card_description_1 | safe }}</p>
</div>
<img class="section-support__img" src="/images/support/email-card-banner.png" alt="img">
</div>
<div class="section-support__item">
<div class="section-support__content">
<h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_2 | safe }}</h2>
<div class="section-support__line"></div>
<p class="p-sm section-support__description">{{ page.extra.support_card_description_2 | safe }}</p>
</div>
<img class="section-support__img" src="/images/support/faq-card-banner.png" alt="img">
</div>
<div class="section-support__item">
<div class="section-support__content">
<h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_3 | safe }}</h2>
<div class="section-support__line"></div>
<p class="p-sm section-support__description">{{ page.extra.support_card_description_3 | safe }}</p>
</div>
<img class="section-support__img" src="/images/support/support-channel-banner.png" alt="img">
</div>
</div>
</section>
<div class="support-block">
<div class="container support-block__container">
<h3 class="h3-bold support-block__title">Get Involved</h3>
<div class="support-block__row">
<div class="support-block__card">
{% include 'ui/icons/header/donate.html' %}
<h5 class="h4 support-block__icon-title">
Donate
</h5>
<p class="p-sm-light support-block__icon-text">
The app runs on your donations, help improve it
</p>
</div>
<div class="support-block__card">
{% include 'ui/icons/header/code.html' %}
<h5 class="h4 support-block__icon-title">
Contribute Code
</h5>
<p class="p-sm-light support-block__icon-text">
Build the app used by people around the world
</p>
</div>
<div class="support-block__card">
{% include 'ui/icons/header/location.html' %}
<h5 class="h4 support-block__icon-title">
Contribute Location Info
</h5>
<p class="p-sm-light support-block__icon-text">
Add info around you, and make the product
better for everyone
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section-community">
<div>
<h2>{{ page.extra.support_card_title_1 | safe }}</h2>
<p>{{ page.extra.support_card_description_1 | safe }}</p>
<img class="section-community__img" src="/images/support/email-card-banner.png" alt="img">
</div>
<div>
<h2>{{ page.extra.support_card_title_2 | safe }}</h2>
<p>{{ page.extra.support_card_description_2 | safe }}</p>
<img class="section-community__img" src="/images/support/faq-card-banner.png" alt="img">
</div>
<div>
<h2>{{ page.extra.support_card_title_3 | safe }}</h2>
<p>{{ page.extra.support_card_description_3 | safe }}</p>
<img class="section-community__img" src="/images/support/support-channel-banner.png" alt="img">
</div>
</section>
<section>
{{ trans(key='ged-involved-title', lang=lang) }}
<div>
<img src="get-involved/donation-ico.png">
{{ trans(key='donate-title', lang=lang) }}
{{ trans(key='donate-description', lang=lang) }}
</div>
<div>
<img src="get-involved/contribute-code-ico.png">
{{ trans(key='contribute-code-title', lang=lang) }}
{{ trans(key='contribute-code-description', lang=lang) }}
</div>
<div>
<img src="get-involved/contribute-info-ico.png">
{{ trans(key='contribute-location-title', lang=lang) }}
{{ trans(key='contribute-location-description', lang=lang) }}
</div>
</section>
{%- endblock content %}

16
templates/ui/icons/header/code.html
View file

@ -1,13 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="83" height="83" viewBox="0 0 83 83" fill="none">
<g clip-path="url(#clip0_917_2389)">
<path d="M32.7476 58.1651C32.434 58.1651 32.1182 58.0573 31.8605 57.8378L22.9935 50.2875C22.6876 50.0268 22.5117 49.646 22.5117 49.2438C22.5117 48.8423 22.6884 48.4615 22.9935 48.2008L31.8605 40.6504C32.4363 40.1595 33.3012 40.2291 33.7921 40.8049C34.2822 41.3815 34.2134 42.2463 33.6369 42.7364L25.9955 49.2438L33.6369 55.7511C34.2134 56.242 34.2822 57.1068 33.7921 57.6826C33.5206 58.0015 33.1352 58.1651 32.7476 58.1651Z" fill="#006031"/>
<path d="M50.2523 58.1651C49.8646 58.1651 49.4792 58.0015 49.2085 57.6826C48.7176 57.1068 48.7872 56.242 49.363 55.7511L57.0043 49.2438L49.363 42.7364C48.7872 42.2463 48.7176 41.3815 49.2085 40.8049C49.6987 40.2291 50.5643 40.1595 51.1393 40.6504L60.0064 48.2008C60.3123 48.4615 60.4881 48.8423 60.4881 49.2438C60.4881 49.646 60.3123 50.0268 60.0064 50.2875L51.1393 57.8378C50.8816 58.0573 50.5658 58.1651 50.2523 58.1651Z" fill="#006031"/>
<path d="M38.3612 63.8282C38.2672 63.8282 38.1723 63.8183 38.0768 63.7984C37.3366 63.6424 36.8625 62.9152 37.0185 62.175L42.5447 35.937C42.7007 35.1968 43.4271 34.7227 44.1681 34.8787C44.9083 35.0347 45.3824 35.7611 45.2264 36.5021L39.7002 62.7401C39.564 63.3855 38.9951 63.8282 38.3612 63.8282Z" fill="#006031"/>
<path d="M73.7995 78.123H9.20047C4.12767 78.123 0 73.9961 0 68.9225V14.0944C0 9.02159 4.12767 4.89392 9.20047 4.89392H73.7995C78.8723 4.89392 83 9.02159 83 14.0944V68.9225C83 73.9961 78.8723 78.123 73.7995 78.123ZM9.20047 7.63449C5.63865 7.63449 2.74057 10.5326 2.74057 14.0944V68.9225C2.74057 72.4844 5.63865 75.3824 9.20047 75.3824H73.7995C77.3614 75.3824 80.2594 72.4844 80.2594 68.9225V14.0944C80.2594 10.5326 77.3614 7.63449 73.7995 7.63449H9.20047Z" fill="#006031"/>
<path d="M81.6297 26.836H1.37028C0.613263 26.836 0 26.2228 0 25.4657C0 24.7095 0.613263 24.0955 1.37028 24.0955H81.6297C82.3867 24.0955 83 24.7095 83 25.4657C83 26.2228 82.3867 26.836 81.6297 26.836Z" fill="#006031"/>
<path d="M23.4126 20.2789C21.0222 20.2789 19.0762 18.3329 19.0762 15.9425C19.0762 13.5514 21.0222 11.6061 23.4126 11.6061C25.8037 11.6061 27.749 13.5514 27.749 15.9425C27.749 18.3329 25.8037 20.2789 23.4126 20.2789ZM23.4126 14.3466C22.5332 14.3466 21.8167 15.0624 21.8167 15.9425C21.8167 16.8226 22.5332 17.5384 23.4126 17.5384C24.2927 17.5384 25.0085 16.8226 25.0085 15.9425C25.0085 15.0624 24.2927 14.3466 23.4126 14.3466Z" fill="#006031"/>
<path d="M10.0889 20.2369C7.69775 20.2369 5.75244 18.2916 5.75244 15.9005C5.75244 13.5094 7.69775 11.5641 10.0889 11.5641C12.48 11.5641 14.4253 13.5094 14.4253 15.9005C14.4253 18.2916 12.48 20.2369 10.0889 20.2369ZM10.0889 14.3047C9.2095 14.3047 8.49301 15.0211 8.49301 15.9005C8.49301 16.7806 9.2095 17.4964 10.0889 17.4964C10.969 17.4964 11.6847 16.7806 11.6847 15.9005C11.6847 15.0211 10.969 14.3047 10.0889 14.3047Z" fill="#006031"/>
<path d="M36.7361 20.3203C34.3457 20.3203 32.4004 18.375 32.4004 15.9839C32.4004 13.5935 34.3457 11.6482 36.7361 11.6482C39.1272 11.6482 41.0725 13.5935 41.0725 15.9839C41.0725 18.375 39.1272 20.3203 36.7361 20.3203ZM36.7361 14.388C35.8567 14.388 35.141 15.1037 35.141 15.9839C35.141 16.864 35.8567 17.5797 36.7361 17.5797C37.6162 17.5797 38.3319 16.864 38.3319 15.9839C38.3319 15.1037 37.6162 14.388 36.7361 14.388Z" fill="#006031"/>
<path d="M32.7476 58.1651C32.434 58.1651 32.1182 58.0573 31.8605 57.8378L22.9935 50.2875C22.6876 50.0268 22.5117 49.646 22.5117 49.2438C22.5117 48.8423 22.6884 48.4615 22.9935 48.2008L31.8605 40.6504C32.4363 40.1595 33.3012 40.2291 33.7921 40.8049C34.2822 41.3815 34.2134 42.2463 33.6369 42.7364L25.9955 49.2438L33.6369 55.7511C34.2134 56.242 34.2822 57.1068 33.7921 57.6826C33.5206 58.0015 33.1352 58.1651 32.7476 58.1651Z" fill="currentColor"/>
<path d="M50.2523 58.1651C49.8646 58.1651 49.4792 58.0015 49.2085 57.6826C48.7176 57.1068 48.7872 56.242 49.363 55.7511L57.0043 49.2438L49.363 42.7364C48.7872 42.2463 48.7176 41.3815 49.2085 40.8049C49.6987 40.2291 50.5643 40.1595 51.1393 40.6504L60.0064 48.2008C60.3123 48.4615 60.4881 48.8423 60.4881 49.2438C60.4881 49.646 60.3123 50.0268 60.0064 50.2875L51.1393 57.8378C50.8816 58.0573 50.5658 58.1651 50.2523 58.1651Z" fill="currentColor"/>
<path d="M38.3612 63.8282C38.2672 63.8282 38.1723 63.8183 38.0768 63.7984C37.3366 63.6424 36.8625 62.9152 37.0185 62.175L42.5447 35.937C42.7007 35.1968 43.4271 34.7227 44.1681 34.8787C44.9083 35.0347 45.3824 35.7611 45.2264 36.5021L39.7002 62.7401C39.564 63.3855 38.9951 63.8282 38.3612 63.8282Z" fill="currentColor"/>
<path d="M73.7995 78.123H9.20047C4.12767 78.123 0 73.9961 0 68.9225V14.0944C0 9.02159 4.12767 4.89392 9.20047 4.89392H73.7995C78.8723 4.89392 83 9.02159 83 14.0944V68.9225C83 73.9961 78.8723 78.123 73.7995 78.123ZM9.20047 7.63449C5.63865 7.63449 2.74057 10.5326 2.74057 14.0944V68.9225C2.74057 72.4844 5.63865 75.3824 9.20047 75.3824H73.7995C77.3614 75.3824 80.2594 72.4844 80.2594 68.9225V14.0944C80.2594 10.5326 77.3614 7.63449 73.7995 7.63449H9.20047Z" fill="currentColor"/>
<path d="M81.6297 26.836H1.37028C0.613263 26.836 0 26.2228 0 25.4657C0 24.7095 0.613263 24.0955 1.37028 24.0955H81.6297C82.3867 24.0955 83 24.7095 83 25.4657C83 26.2228 82.3867 26.836 81.6297 26.836Z" fill="currentColor"/>
<path d="M23.4126 20.2789C21.0222 20.2789 19.0762 18.3329 19.0762 15.9425C19.0762 13.5514 21.0222 11.6061 23.4126 11.6061C25.8037 11.6061 27.749 13.5514 27.749 15.9425C27.749 18.3329 25.8037 20.2789 23.4126 20.2789ZM23.4126 14.3466C22.5332 14.3466 21.8167 15.0624 21.8167 15.9425C21.8167 16.8226 22.5332 17.5384 23.4126 17.5384C24.2927 17.5384 25.0085 16.8226 25.0085 15.9425C25.0085 15.0624 24.2927 14.3466 23.4126 14.3466Z" fill="currentColor"/>
<path d="M10.0889 20.2369C7.69775 20.2369 5.75244 18.2916 5.75244 15.9005C5.75244 13.5094 7.69775 11.5641 10.0889 11.5641C12.48 11.5641 14.4253 13.5094 14.4253 15.9005C14.4253 18.2916 12.48 20.2369 10.0889 20.2369ZM10.0889 14.3047C9.2095 14.3047 8.49301 15.0211 8.49301 15.9005C8.49301 16.7806 9.2095 17.4964 10.0889 17.4964C10.969 17.4964 11.6847 16.7806 11.6847 15.9005C11.6847 15.0211 10.969 14.3047 10.0889 14.3047Z" fill="currentColor"/>
<path d="M36.7361 20.3203C34.3457 20.3203 32.4004 18.375 32.4004 15.9839C32.4004 13.5935 34.3457 11.6482 36.7361 11.6482C39.1272 11.6482 41.0725 13.5935 41.0725 15.9839C41.0725 18.375 39.1272 20.3203 36.7361 20.3203ZM36.7361 14.388C35.8567 14.388 35.141 15.1037 35.141 15.9839C35.141 16.864 35.8567 17.5797 36.7361 17.5797C37.6162 17.5797 38.3319 16.864 38.3319 15.9839C38.3319 15.1037 37.6162 14.388 36.7361 14.388Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_917_2389">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

18
templates/ui/icons/header/donate.html
View file

@ -4,15 +4,15 @@
<path d="M-11 7.62939e-06H72V83H-11V7.62939e-06Z" fill="white"/>
</mask>
<g mask="url(#mask0_917_2365)">
<path d="M42.4877 19.1967C42.4877 25.8169 37.1209 31.1837 30.5005 31.1837C23.8801 31.1837 18.5132 25.8169 18.5132 19.1967C18.5132 12.5763 23.8801 7.20952 30.5005 7.20952C37.1209 7.20952 42.4877 12.5763 42.4877 19.1967Z" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.231 24.1005H31.3176C32.6718 24.1005 33.7695 23.0028 33.7695 21.6486C33.7695 20.2943 32.6718 19.1967 31.3176 19.1967H29.6829C28.3286 19.1967 27.231 18.0989 27.231 16.7446C27.231 15.3905 28.3286 14.2927 29.6829 14.2927H33.7695" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30.5 11.857V14.3132" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30.5 24.1393V26.5956" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M60.6328 42.6447H0.367676V31.1811H60.6328V42.6447Z" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.00262 43H4H56.9974H57" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M56.9928 43L57.0005 82H4.00754L4.00049 43" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M41.741 54.2494C39.1829 51.6913 35.0353 51.6913 32.4771 54.2494L30.5118 56.2146L28.5466 54.2494C25.9885 51.6913 21.8409 51.6913 19.2828 54.2494C16.7247 56.8075 16.7247 60.9552 19.2828 63.5133L30.5118 74.7424L41.741 63.5133C44.2991 60.9552 44.2991 56.8075 41.741 54.2494Z" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.0497 31.1296C14.2312 27.9551 12.5195 23.7757 12.5195 19.1968C12.5195 9.26611 20.5699 1.21592 30.5004 1.21592C40.4307 1.21592 48.4812 9.26611 48.4812 19.1968C48.4812 23.7747 46.7702 27.9533 43.9527 31.1275" stroke="#006031" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M42.4877 19.1967C42.4877 25.8169 37.1209 31.1837 30.5005 31.1837C23.8801 31.1837 18.5132 25.8169 18.5132 19.1967C18.5132 12.5763 23.8801 7.20952 30.5005 7.20952C37.1209 7.20952 42.4877 12.5763 42.4877 19.1967Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.231 24.1005H31.3176C32.6718 24.1005 33.7695 23.0028 33.7695 21.6486C33.7695 20.2943 32.6718 19.1967 31.3176 19.1967H29.6829C28.3286 19.1967 27.231 18.0989 27.231 16.7446C27.231 15.3905 28.3286 14.2927 29.6829 14.2927H33.7695" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30.5 11.857V14.3132" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30.5 24.1393V26.5956" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M60.6328 42.6447H0.367676V31.1811H60.6328V42.6447Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.00262 43H4H56.9974H57" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M56.9928 43L57.0005 82H4.00754L4.00049 43" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M41.741 54.2494C39.1829 51.6913 35.0353 51.6913 32.4771 54.2494L30.5118 56.2146L28.5466 54.2494C25.9885 51.6913 21.8409 51.6913 19.2828 54.2494C16.7247 56.8075 16.7247 60.9552 19.2828 63.5133L30.5118 74.7424L41.741 63.5133C44.2991 60.9552 44.2991 56.8075 41.741 54.2494Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.0497 31.1296C14.2312 27.9551 12.5195 23.7757 12.5195 19.1968C12.5195 9.26611 20.5699 1.21592 30.5004 1.21592C40.4307 1.21592 48.4812 9.26611 48.4812 19.1968C48.4812 23.7747 46.7702 27.9533 43.9527 31.1275" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<defs>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

6
templates/ui/icons/header/location.html
View file

@ -4,9 +4,9 @@
<path d="M73 7.62939e-06H-9.99999V83H73V7.62939e-06Z" fill="white"/>
</mask>
<g mask="url(#mask0_917_2398)">
<path d="M55.8164 81.3789H7.18359" stroke="#006031" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31.5 43.7695C38.6506 43.7695 44.4688 37.9514 44.4688 30.8008C44.4688 23.6501 38.6506 17.832 31.5 17.832C24.3494 17.832 18.5313 23.6501 18.5313 30.8008C18.5313 37.9514 24.3494 43.7695 31.5 43.7695Z" stroke="#006031" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5242 54.5L31.5 81.3788L54.8583 48.2923C58.5139 43.4178 60.6797 37.3628 60.6797 30.8007C60.6797 14.6854 47.6153 1.62097 31.5 1.62097C15.3847 1.62097 2.32031 14.6854 2.32031 30.8007C2.32031 37.3628 4.48626 43.4178 8.14166 48.2923L12.8184 54.9167" stroke="#006031" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M55.8164 81.3789H7.18359" stroke="currentColor" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31.5 43.7695C38.6506 43.7695 44.4688 37.9514 44.4688 30.8008C44.4688 23.6501 38.6506 17.832 31.5 17.832C24.3494 17.832 18.5313 23.6501 18.5313 30.8008C18.5313 37.9514 24.3494 43.7695 31.5 43.7695Z" stroke="currentColor" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5242 54.5L31.5 81.3788L54.8583 48.2923C58.5139 43.4178 60.6797 37.3628 60.6797 30.8007C60.6797 14.6854 47.6153 1.62097 31.5 1.62097C15.3847 1.62097 2.32031 14.6854 2.32031 30.8007C2.32031 37.3628 4.48626 43.4178 8.14166 48.2923L12.8184 54.9167" stroke="currentColor" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<defs>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

339
templates/volunteering.html
View file

@ -1,76 +1,273 @@
{% extends "base.html" %}
{%- block content %}
<section class="hero-sub">
<div class="container hero-sub__container">
<h1>{{ page.extra.hero_title | safe }}</h1>
</div>
</section>
<section class="section-community">
<h2>
{{ page.extra.section_item_title_1 | safe }}
</h2>
<h2>
{{ page.extra.section_item_title_2 | safe }}
</h2>
<h2>
{{ page.extra.section_item_title_3 | safe }}
</h2>
<h2>
{{ page.extra.section_item_title_4 | safe }}
</h2>
<div>
<h2>
{{ page.extra.section_item_title_5 | safe }}
</h2>
<div>
<h3>
{{ page.extra.section_marketing_title_1 | safe }}
</h3>
<p>
{{ page.extra.section_marketing_description_1 | safe }}
</p>
<button>
{{ trans(key='volunteer-button', lang=lang) }}
</button>
<section class="hero-sub" style="background-image: url({{ page.extra.hero_image | safe }})">
<div class="container hero-sub__container">
<nav class="bred-crum">
<ul class="bred-crum__row">
<li class="bred-crum__item">
<a class="nav-bred bred-crum__link" href="/">{{ page.extra.menu_title_pre }}</a>
</li>
<li class="bred-crum__item">
<span class="nav-bred">
>
</span>
</li>
<li class="bred-crum__item">
<a class="nav-bred bred-crum__link bred-crum--active"
href="/{{ page.extra.hero_title | lower }}">{{ page.extra.hero_title }}</a>
</li>
</ul>
</nav>
<div class="hero-sub__content">
<h1 class="h1 hero-sub__title">
{{ page.extra.hero_title | safe }}
</h1>
</div>
</div>
</section>
<section class="section-volunteering">
<div class="container section-volunteering__container">
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.section_item_title_1 | safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.section_item_title_2 | safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.section_item_title_3 | safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.section_item_title_3 | safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.section_item_title_4 | safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.section_item_title_4 | safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis distinctio enim eveniet, fuga
molestiae sequi voluptas. Commodi consequatur debitis deleniti deserunt dicta dignissimos ducimus
eaque eos error excepturi explicabo facere harum hic id iste neque nobis nostrum obcaecati
perspiciatis quam qui, quidem quod quos reprehenderit soluta tempora temporibus tenetur vero
voluptas voluptatum. Ab aliquid animi aperiam architecto blanditiis commodi cupiditate debitis
ducimus ex excepturi in magni minima molestiae molestias natus nemo nostrum nulla, numquam odio odit
perspiciatis reprehenderit saepe, ullam vel voluptatibus! Aliquid, amet beatae blanditiis
consectetur, culpa debitis doloremque esse itaque, nam necessitatibus non saepe sunt vitae! Omnis,
voluptate.
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.section_marketing_title_1 | safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_1 | safe }}
</h3>
<p>
{{ page.extra.section_marketing_description_1 | safe }}
</p>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
<div class="section-volunteering__block">
<h3>
{{ page.extra.section_marketing_title_2 | safe }}
</h3>
<ul>
<li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
</ul>
<button class="button button--main">
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
</div>
</div>
</div>
</section>
<div class="support-block">
<div class="container support-block__container">
<h3 class="h3-bold support-block__title">Get Involved</h3>
<div class="support-block__row">
<div class="support-block__card">
{% include 'ui/icons/header/donate.html' %}
<h5 class="h4 support-block__icon-title">
Donate
</h5>
<p class="p-sm-light support-block__icon-text">
The app runs on your donations, help improve it
</p>
</div>
<div class="support-block__card">
{% include 'ui/icons/header/code.html' %}
<h5 class="h4 support-block__icon-title">
Contribute Code
</h5>
<p class="p-sm-light support-block__icon-text">
Build the app used by people around the world
</p>
</div>
<div class="support-block__card">
{% include 'ui/icons/header/location.html' %}
<h5 class="h4 support-block__icon-title">
Contribute Location Info
</h5>
<p class="p-sm-light support-block__icon-text">
Add info around you, and make the product
better for everyone
</p>
</div>
</div>
</div>
</div>
<div>
<h3>
{{ page.extra.section_marketing_title_2 | safe }}
</h3>
<ul>
<li>{{ page.extra.marketing_section_list_item_1| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_2| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_3| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_4| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_5| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_6| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_7| safe }}</li>
<li>{{ page.extra.marketing_section_list_item_8| safe }}</li>
</ul>
<button>
{{ trans(key='volunteer-button', lang=lang) }}
</button>
</div>
</div>
</section>
<section>
{{ trans(key='ged-involved-title', lang=lang) }}
<div>
<img src="get-involved/donation-ico.png">
{{ trans(key='donate-title', lang=lang) }}
{{ trans(key='donate-description', lang=lang) }}
</div>
<div>
<img src="get-involved/contribute-code-ico.png">
{{ trans(key='contribute-code-title', lang=lang) }}
{{ trans(key='contribute-code-description', lang=lang) }}
</div>
<div>
<img src="get-involved/contribute-info-ico.png">
{{ trans(key='contribute-location-title', lang=lang) }}
{{ trans(key='contribute-location-description', lang=lang) }}
</div>
</section>
<script>
try{
const select = document.querySelectorAll('.section-volunteering__select')
select.forEach(item => {
item.addEventListener('click', ()=>{
item.classList.toggle('is-active')
})
})
}
catch (err) {
console.log(err)
}
</script>
{%- endblock content %}