dis fix 14

content/donate/index.md

@@ -5,6 +5,8 @@ weight: 10
 extra:
   menu_title: Donate
   preview_image: donate/donate.png
+  service_title: Created with love by enthusiast volunteers
+  service_text: Donate to keep the project running
 ---
 
 Organic Maps app is _free for everyone_ thanks to your **[donations][stripe]**:

sass/pages/new-support.scss

@@ -33,11 +33,17 @@
     justify-content: center;
     align-items: center;
     gap: 15rem;
+    @media (max-width: $media-sm) {
+      flex-direction: row;
+    }
   }
 
   &__text {
     max-width: 292rem;
     text-align: center;
+    @media (max-width: $media-sm) {
+      text-align: left;
+    }
   }
 
   &__icon {
@@ -50,6 +56,11 @@
     background-color: var(--acordion-green-bg);
     color: var(--green-button);
     border: 1rem solid var(--green-button-transparent);
+    @media (max-width: $media-sm) {
+      width: 74rem;
+      height: 74rem;
+      padding: 13rem;
+    }
   }
 }
 
@@ -178,9 +189,56 @@
   }
 }
 
-.reviews {
-  padding: var(--container-mob-section) 0;
+.donate-services {
 
+  &__row {
+    box-shadow: var(--common-card-box-shadow);
+    padding: 40rem 15rem 30rem;
+    border-radius: 10rem;
+    background-color: var(--rewi-card-color);
+    @media (max-width: $media-sm) {
+      background-color: transparent;
+      box-shadow: none;
+      padding: 21rem 0 0 ;
+    }
+  }
+  &__title {
+    text-align: center;
+    margin-bottom: 33rem;
+    @media (max-width: $media-sm) {
+      margin-bottom: 20rem;
+    }
+  }
+  &__text {
+    color: var(--black-white);
+    text-align: center;
+    margin-bottom: 34rem;
+    @media (max-width: $media-sm) {
+      margin-bottom: 20rem;
+    }
+  }
+  &__icons {
+    display: flex;
+    gap: 5rem;
+    @media (max-width: $media-sm) {
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+  &__icon {
+    text-decoration: none;
+    transition: transform 0.5s;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+}
+
+.reviews {
+  padding: 110rem 0;
+  @media (max-width: $media-sm) {
+    padding: var(--container-mob-section) 0;
+  }
   &__title {
     text-align: center;
   }

sass/variables/fonts.scss

@@ -18,6 +18,7 @@
   --h6-bold: 700 30rem/36rem var(--main-font);
    --h6-date: 700 30rem/36rem var(--main-font);
   --h5-boold: 700 22rem/28rem var(--main-font);
+  --h7: 400 32rem/36rem var(--main-font);
   --p: 300 18rem/28rem var(--main-font);
   --p-15: 300 15rem/26rem var(--main-font);
     --p-15-bold: 500 15rem/18rem var(--main-font);
@@ -106,6 +107,9 @@
 .h5-boold {
   font: var( --h5-boold);
 }
+.h7 {
+  font: var(--h7);
+}
 // Text
 .p{
   font: var(--p);

templates/about-us.html

@@ -71,10 +71,9 @@
                 <div class="line free-open__line"></div>
                 <div class="free-open__img-row">
                 <img class="free-open__img" src="/images/about-us/project-info-main-banner.png" alt="img">
-            </div>
-                <p class="p-15 free-open__text">{{ page.extra.project_info_section_description | safe }}</p>
-            </div>
-
+                </div>
+                    <p class="p-15 free-open__text">{{ page.extra.project_info_section_description | safe }}</p>
+                </div>
         </div>
     </section>
     <section class="about-history">

templates/new-donate.html

@@ -103,7 +103,61 @@
 
                 </div>
             </div>
-            <button class="button button--main"> {{ trans(key='donate-title', lang=lang) }}</button>
+<!--            <button class="button button&#45;&#45;main"> {{ trans(key='donate-title', lang=lang) }}</button>-->
+        </div>
+    </section>
+
+    <section class="donate-services">
+        <h2 class="reviews__title">{{ page.extra.menu_title_pre }}</h2>
+        <div class="line reviews__line"></div>
+        <div class="container donate-services__row">
+            <h2 class="h7 donate-services__title">{{ page.extra.service_title }}</h2>
+            <p class="h1-sub donate-services__text">{{ page.extra.service_text }}</p>
+            <div class="donate-services__icons">
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon01.png" alt="icon" width="75">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon02.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon03.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon04.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon05.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon06.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon07.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon08.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon09.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon10.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon11.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon12.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon13.png" alt="icon" width="72">
+                </a>
+                <a href="#" target="_blank" class="donate-services__icon">
+                    <img src="/images/donate/donat-service/icon14.png" alt="icon" width="72">
+                </a>
+
+            </div>
         </div>
     </section>
 

templates/news.html

@@ -12,7 +12,7 @@
 {% block content %}
 
 
-    <section class="hero-sub" style="">
+    <section class="hero-sub" style="background-image: url(/images/news/hero-img.png);">
        <div class="container hero-sub__container">
         <nav class="bred-crum">
             <ul class="bred-crum__row">