diff --git a/content/support/index.md b/content/support/index.md index aa45db0b..47b344d8 100644 --- a/content/support/index.md +++ b/content/support/index.md @@ -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. diff --git a/content/support/suport-kv.png b/content/support/suport-kv.png new file mode 100644 index 00000000..d87ea04d Binary files /dev/null and b/content/support/suport-kv.png differ diff --git a/content/volunteering/index.md b/content/volunteering/index.md index dab1fce6..6c02ec42 100644 --- a/content/volunteering/index.md +++ b/content/volunteering/index.md @@ -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 diff --git a/content/volunteering/kv.png b/content/volunteering/kv.png new file mode 100644 index 00000000..19269ffa Binary files /dev/null and b/content/volunteering/kv.png differ diff --git a/sass/common/support-block.scss b/sass/common/support-block.scss new file mode 100644 index 00000000..8fe15240 --- /dev/null +++ b/sass/common/support-block.scss @@ -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; + } + } + +} \ No newline at end of file diff --git a/sass/component/header-sub.scss b/sass/component/header-sub.scss index fe9049c3..f1f4dd30 100644 --- a/sass/component/header-sub.scss +++ b/sass/component/header-sub.scss @@ -4,6 +4,7 @@ background-size: cover; padding: var(--menu-height) 0 124rem; position: relative; + background-position: center center; &:before { content: ""; diff --git a/sass/main.scss b/sass/main.scss index 2ad748c6..cdb2a204 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -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"; diff --git a/sass/pages/support.scss b/sass/pages/support.scss new file mode 100644 index 00000000..bc7aef12 --- /dev/null +++ b/sass/pages/support.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/sass/pages/volunteering.scss b/sass/pages/volunteering.scss new file mode 100644 index 00000000..cae8e4c2 --- /dev/null +++ b/sass/pages/volunteering.scss @@ -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); + +} +} + diff --git a/sass/variables/color-theme.scss b/sass/variables/color-theme.scss index 2e44cf04..857eca07 100644 --- a/sass/variables/color-theme.scss +++ b/sass/variables/color-theme.scss @@ -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); diff --git a/sass/variables/fonts.scss b/sass/variables/fonts.scss index 351e1fad..c1cec8da 100644 --- a/sass/variables/fonts.scss +++ b/sass/variables/fonts.scss @@ -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); diff --git a/sass/variables/media.scss b/sass/variables/media.scss index 2cb4a4c1..eedf0ac8 100644 --- a/sass/variables/media.scss +++ b/sass/variables/media.scss @@ -1,3 +1,4 @@ // Media sm: Mobile, md: Tablet, xl: Desktop $media-md: 991px; +$media-sm: 767px diff --git a/templates/support.html b/templates/support.html index 5d896a4c..b895fbd2 100644 --- a/templates/support.html +++ b/templates/support.html @@ -1,44 +1,108 @@ {% extends "base.html" %} {%- block content %} -
-
-

{{ page.extra.hero_title | safe }}

+ + +
+
+ +
+

+ {{ page.extra.hero_title | safe }} +

+

+ {{ page.extra.hero_description }} +

+ +
+
+
+ +
+
+
+
+

{{ page.extra.support_card_title_1 | safe }}

+
+

{{ page.extra.support_card_description_1 | safe }}

+
+ img +
+
+
+

{{ page.extra.support_card_title_2 | safe }}

+
+

{{ page.extra.support_card_description_2 | safe }}

+
+ img +
+
+
+

{{ page.extra.support_card_title_3 | safe }}

+
+

{{ page.extra.support_card_description_3 | safe }}

+
+ img +
+
+ +
+
+
+

Get Involved

+
+
+ {% include 'ui/icons/header/donate.html' %} +
+ Donate +
+ +

+ The app runs on your donations, help improve it +

+ +
+
+ {% include 'ui/icons/header/code.html' %} +
+ Contribute Code +
+ +

+ Build the app used by people around the world +

+ +
+
+ {% include 'ui/icons/header/location.html' %} +
+ Contribute Location Info +
+

+ Add info around you, and make the product + better for everyone +

+ +
+
+ +
-
-
-
-

{{ page.extra.support_card_title_1 | safe }}

-

{{ page.extra.support_card_description_1 | safe }}

- img -
-
-

{{ page.extra.support_card_title_2 | safe }}

-

{{ page.extra.support_card_description_2 | safe }}

- img -
-
-

{{ page.extra.support_card_title_3 | safe }}

-

{{ page.extra.support_card_description_3 | safe }}

- img -
-
-
- {{ trans(key='ged-involved-title', lang=lang) }} -
- - {{ trans(key='donate-title', lang=lang) }} - {{ trans(key='donate-description', lang=lang) }} -
-
- - {{ trans(key='contribute-code-title', lang=lang) }} - {{ trans(key='contribute-code-description', lang=lang) }} -
-
- - {{ trans(key='contribute-location-title', lang=lang) }} - {{ trans(key='contribute-location-description', lang=lang) }} -
-
+ + {%- endblock content %} \ No newline at end of file diff --git a/templates/ui/icons/header/code.html b/templates/ui/icons/header/code.html index d8f608cd..16abf8c2 100644 --- a/templates/ui/icons/header/code.html +++ b/templates/ui/icons/header/code.html @@ -1,13 +1,13 @@ - - - - - - - - + + + + + + + + diff --git a/templates/ui/icons/header/donate.html b/templates/ui/icons/header/donate.html index 909ba971..346c0486 100644 --- a/templates/ui/icons/header/donate.html +++ b/templates/ui/icons/header/donate.html @@ -4,15 +4,15 @@ - - - - - - - - - + + + + + + + + + diff --git a/templates/ui/icons/header/location.html b/templates/ui/icons/header/location.html index a61d35f1..b07d925e 100644 --- a/templates/ui/icons/header/location.html +++ b/templates/ui/icons/header/location.html @@ -4,9 +4,9 @@ - - - + + + diff --git a/templates/volunteering.html b/templates/volunteering.html index 4571e53c..d6b8ae16 100644 --- a/templates/volunteering.html +++ b/templates/volunteering.html @@ -1,76 +1,273 @@ {% extends "base.html" %} {%- block content %} -
-
-

{{ page.extra.hero_title | safe }}

-
- -
-

- {{ page.extra.section_item_title_1 | safe }} -

-

- {{ page.extra.section_item_title_2 | safe }} -

-

- {{ page.extra.section_item_title_3 | safe }} -

-

- {{ page.extra.section_item_title_4 | safe }} -

- -
-

- {{ page.extra.section_item_title_5 | safe }} -

-
-

- {{ page.extra.section_marketing_title_1 | safe }} -

-

- {{ page.extra.section_marketing_description_1 | safe }} -

- + +
+
+ +
+

+ {{ page.extra.hero_title | safe }} +

+ + +
+
+
+ +
+
+
+
+

+ {{ page.extra.section_item_title_1 | safe }} +

+
+ + +
+
+
+
+ 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. +
+ +
+
+
+
+

+ {{ page.extra.section_item_title_2 | safe }} +

+
+ + +
+
+
+
+ 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. +
+ +
+
+
+
+

+ {{ page.extra.section_item_title_3 | safe }} +

+
+ + +
+
+
+
+ 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. +
+ +
+
+
+
+

+ {{ page.extra.section_item_title_3 | safe }} +

+
+ + +
+
+
+ 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. +
+
+
+
+

+ {{ page.extra.section_item_title_4 | safe }} +

+
+ + +
+
+
+
+ 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. +
+ +
+
+
+
+

+ {{ page.extra.section_item_title_4 | safe }} +

+
+ + +
+
+
+ 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. +
+
+
+
+

+ {{ page.extra.section_marketing_title_1 | safe }} +

+
+ + +
+
+
+
+

+ {{ page.extra.section_marketing_title_1 | safe }} +

+

+ {{ page.extra.section_marketing_description_1 | safe }} +

+ +
+
+

+ {{ page.extra.section_marketing_title_2 | safe }} +

+
    +
  • {{ page.extra.marketing_section_list_item_1| safe }}
    • +
  • {{ page.extra.marketing_section_list_item_2| safe }}
    • +
  • {{ page.extra.marketing_section_list_item_3| safe }}
    • +
  • {{ page.extra.marketing_section_list_item_4| safe }}
    • +
  • {{ page.extra.marketing_section_list_item_5| safe }}
    • +
  • {{ page.extra.marketing_section_list_item_6| safe }}
    • +
  • {{ page.extra.marketing_section_list_item_7| safe }}
    • +
  • {{ page.extra.marketing_section_list_item_8| safe }}
    • +
+ +
+
+
+
+ +
+
+
+

Get Involved

+
+
+ {% include 'ui/icons/header/donate.html' %} +
+ Donate +
+ +

+ The app runs on your donations, help improve it +

+ +
+
+ {% include 'ui/icons/header/code.html' %} +
+ Contribute Code +
+ +

+ Build the app used by people around the world +

+ +
+
+ {% include 'ui/icons/header/location.html' %} +
+ Contribute Location Info +
+

+ Add info around you, and make the product + better for everyone +

+ +
+
+ +
-
-

- {{ page.extra.section_marketing_title_2 | safe }} -

-
    -
  • {{ page.extra.marketing_section_list_item_1| safe }}
    • -
  • {{ page.extra.marketing_section_list_item_2| safe }}
    • -
  • {{ page.extra.marketing_section_list_item_3| safe }}
    • -
  • {{ page.extra.marketing_section_list_item_4| safe }}
    • -
  • {{ page.extra.marketing_section_list_item_5| safe }}
    • -
  • {{ page.extra.marketing_section_list_item_6| safe }}
    • -
  • {{ page.extra.marketing_section_list_item_7| safe }}
    • -
  • {{ page.extra.marketing_section_list_item_8| safe }}
    • -
- -
-
-
-
- {{ trans(key='ged-involved-title', lang=lang) }} -
- - {{ trans(key='donate-title', lang=lang) }} - {{ trans(key='donate-description', lang=lang) }} -
-
- - {{ trans(key='contribute-code-title', lang=lang) }} - {{ trans(key='contribute-code-description', lang=lang) }} -
-
- - {{ trans(key='contribute-location-title', lang=lang) }} - {{ trans(key='contribute-location-description', lang=lang) }} -
-
+ + {%- endblock content %} \ No newline at end of file