From 5475f4f14a1f446275d2459bed6c2eb77a290fc3 Mon Sep 17 00:00:00 2001
From: Creativetech <creative.joomdev@gmail.com>
Date: Mon, 15 Feb 2021 15:36:45 +0500
Subject: [PATCH 1/6] boxes layout update

---
 .gitignore                                 |   3 +
 weblate_web/static/style-rtl.css           | 123 +++++++++++++--------
 weblate_web/static/style.css               | 123 +++++++++++++--------
 weblate_web/templates/about.html           |   4 +-
 weblate_web/templates/contribute.html      |  22 ++--
 weblate_web/templates/snippets/bottom.html |   2 +-
 weblate_web/templates/support.html         |  30 +++--
 7 files changed, 187 insertions(+), 120 deletions(-)

diff --git a/.gitignore b/.gitignore
index ee19e7a0aa..6bd1b11372 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,6 @@
 /saml/saml.key
 /saml/saml.crt
 /saml/local_metadata.xml
+.idea
+venv
+requirements.txt
\ No newline at end of file
diff --git a/weblate_web/static/style-rtl.css b/weblate_web/static/style-rtl.css
index 2e1ba7c897..35152ee160 100644
--- a/weblate_web/static/style-rtl.css
+++ b/weblate_web/static/style-rtl.css
@@ -1168,11 +1168,21 @@ section.bottom .box.join {
   background-image: url("img/box-join.jpg");
 }
 
+section.bottom .box.join a{
+  position: absolute;
+  bottom: 40px;
+}
+
 section.bottom .box.donate {
   background-color: #f6664c;
   background-image: url("img/box-donate.jpg");
 }
 
+section.bottom .box.donate a{
+  position: absolute;
+  bottom: 40px;
+}
+
 section.bottom .box .title {
   font-size: 40px;
   letter-spacing: -1px;
@@ -1189,7 +1199,7 @@ section.bottom .box p {
   font-size: 20px;
   letter-spacing: 0.5px;
   line-height: 25px;
-  margin-bottom: 45px;
+  margin-bottom: 70px;
 }
 
 body.light .main-menu ul li a {
@@ -2253,10 +2263,6 @@ input[type="radio"]:checked + .biglabel {
   line-height: 26px;
 }
 
-.installations .box:nth-child(2) {
-  min-height: 500px;
-}
-
 .installations .box:nth-child(2n + 1) {
   margin-right: 0;
 }
@@ -2276,9 +2282,9 @@ input[type="radio"]:checked + .biglabel {
 .installations .box ul {
   margin: 0 25px 20px 0;
   max-width: 380px;
-  padding: 0;
   list-style: none;
   clear: right;
+  padding-bottom: 32px;
 }
 
 .installations .box li::before,
@@ -2668,6 +2674,7 @@ h2.section-title.hp-style {
   margin: 0 25px 35px 0;
   padding: 0;
   list-style: none;
+  padding-bottom: 40px;
 }
 
 .contribution-list .box ul li,
@@ -2758,6 +2765,13 @@ h2.section-title.hp-style {
 .aboutus-list .box.blue {
   background-color: #00d2e6;
   border-radius: 20px 20px 20px 0;
+  display: inline-block !important;
+  min-height: unset;
+}
+
+.aboutus-list .box.green {
+  display: inline-block !important;
+  min-height: unset;
 }
 
 .aboutus-list .box h2 {
@@ -3075,6 +3089,7 @@ input.button.make-payment {
 
 .form-line:last-child {
   border-bottom: none;
+  border-top: 1px solid #e9eaec;
 }
 
 .form-line > div {
@@ -4032,71 +4047,81 @@ input.fullwidth {
   }
 }
 
-/* Your Weblate Team - About Us */
+/* Flex property for boxes */
 
-.content-p {
-  width: 69%;
-  display: inline-block;
-  padding-right: 10px;
-  text-align: right;
+.flex{
+  display: flex;
 }
 
-.content-p p {
-  font-weight: bold;
-  text-transform: uppercase;
-}
+/* Box display flow root */
 
-.weblate-team-content img {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
+.box{
+  display: flow-root !important;
   position: relative;
-  top: -15px;
 }
 
-.weblate-team-content {
-  display: table-cell;
-  padding-bottom: 90px;
-  padding-top: 20px;
+/* Box bottom leftand right button custom position */
+
+.bottom-left{
+  position: absolute;
+  bottom: 40px;
 }
 
-.weblate-team {
-  display: table;
-  width: 82%;
-  margin: 0 auto;
+.bottom-right{
+  position: absolute;
+  bottom: 40px;
+  left: 40px;
 }
 
-@media (max-width: 1250px) {
-  .content-p {
-    width: 58%;
+/* Media Queries */
+
+@media screen and (max-width: 891px) {
+  .flex{
+      display: unset;
   }
 }
 
-@media (max-width: 889px) {
-  .content-p {
-    width: 65%;
+@media screen and (max-width: 550px) {
+  .bottom-right {
+    position: unset;
+    bottom: unset;
+    left: unset;
   }
 
-  .weblate-team-content img {
-    width: 65px;
-    height: 65px;
-    border-radius: 50%;
-    top: -28px;
+  .installations .box ul, .mailing .box ul {
+    padding-bottom: unset;
   }
 
-  .weblate-team {
-    width: 90%;
+  .bottom-left {
+    position: unset;
+    bottom: unset;
   }
 }
 
-@media (max-width: 790px) {
-  .content-p {
-    width: 100%;
-    display: unset !important;
-    text-align: center;
+@media screen and (max-width: 650px) {
+  section.bottom .box p {
+    margin-bottom: 100px;
   }
 
-  .weblate-team-content {
-    text-align: center;
+  section.bottom .box.donate a{
+    bottom: 30px;
+  }
+
+  section.bottom .box.join a{
+    bottom: 30px;
   }
 }
+
+@media screen and (max-width: 1030px) and (min-width: 892px) {
+  .installations .box ul, .mailing .box ul {
+    padding-bottom: 50px;
+  }
+
+  .bottom-left {
+    bottom: 60px;
+  }
+
+  .bottom-right {
+    bottom: 12px;
+  }
+}
\ No newline at end of file
diff --git a/weblate_web/static/style.css b/weblate_web/static/style.css
index f0667773c8..7e55a31aa7 100644
--- a/weblate_web/static/style.css
+++ b/weblate_web/static/style.css
@@ -1168,11 +1168,21 @@ section.bottom .box.join {
   background-image: url("img/box-join.jpg");
 }
 
+section.bottom .box.join a{
+  position: absolute;
+  bottom: 40px;
+}
+
 section.bottom .box.donate {
   background-color: #f6664c;
   background-image: url("img/box-donate.jpg");
 }
 
+section.bottom .box.donate a{
+  position: absolute;
+  bottom: 40px;
+}
+
 section.bottom .box .title {
   font-size: 40px;
   letter-spacing: -1px;
@@ -1189,7 +1199,7 @@ section.bottom .box p {
   font-size: 20px;
   letter-spacing: 0.5px;
   line-height: 25px;
-  margin-bottom: 45px;
+  margin-bottom: 70px;
 }
 
 body.light .main-menu ul li a {
@@ -2253,10 +2263,6 @@ input[type="radio"]:checked + .biglabel {
   line-height: 26px;
 }
 
-.installations .box:nth-child(2) {
-  min-height: 500px;
-}
-
 .installations .box:nth-child(2n + 1) {
   margin-left: 0;
 }
@@ -2276,9 +2282,9 @@ input[type="radio"]:checked + .biglabel {
 .installations .box ul {
   margin: 0 0 20px 25px;
   max-width: 380px;
-  padding: 0;
   list-style: none;
   clear: left;
+  padding-bottom: 32px;
 }
 
 .installations .box li::before,
@@ -2668,6 +2674,7 @@ h2.section-title.hp-style {
   margin: 0 0 35px 25px;
   padding: 0;
   list-style: none;
+  padding-bottom: 40px;
 }
 
 .contribution-list .box ul li,
@@ -2758,6 +2765,13 @@ h2.section-title.hp-style {
 .aboutus-list .box.blue {
   background-color: #00d2e6;
   border-radius: 20px 20px 0 20px;
+  display: inline-block !important;
+  min-height: unset;
+}
+
+.aboutus-list .box.green {
+  display: inline-block !important;
+  min-height: unset;
 }
 
 .aboutus-list .box h2 {
@@ -3075,6 +3089,7 @@ input.button.make-payment {
 
 .form-line:last-child {
   border-bottom: none;
+  border-top: 1px solid #e9eaec;
 }
 
 .form-line > div {
@@ -4024,71 +4039,81 @@ input.fullwidth {
   }
 }
 
-/*Your Weblate Team - About us */
+/* Flex property for boxes */
 
-.content-p {
-  width: 69%;
-  display: inline-block;
-  padding-left: 10px;
-  text-align: left;
+.flex{
+  display: flex;
 }
 
-.content-p p {
-  font-weight: bold;
-  text-transform: uppercase;
-}
+/* Box display flow root */
 
-.weblate-team-content img {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
+.box{
+  display: flow-root !important;
   position: relative;
-  top: -15px;
 }
 
-.weblate-team-content {
-  display: table-cell;
-  padding-bottom: 90px;
-  padding-top: 20px;
+/* Box bottom left and right button custom position */
+
+.bottom-left{
+  position: absolute;
+  bottom: 40px;
 }
 
-.weblate-team {
-  display: table;
-  width: 82%;
-  margin: 0 auto;
+.bottom-right{
+  position: absolute;
+  bottom: 40px;
+  right: 40px;
 }
 
-@media (max-width: 1250px) {
-  .content-p {
-    width: 58%;
+/* Media Queries */
+
+@media screen and (max-width: 891px) {
+  .flex{
+      display: unset;
   }
 }
 
-@media (max-width: 889px) {
-  .content-p {
-    width: 65%;
+@media screen and (max-width: 550px) {
+  .bottom-right {
+    position: unset;
+    bottom: unset;
+    right: unset;
   }
 
-  .weblate-team-content img {
-    width: 65px;
-    height: 65px;
-    border-radius: 50%;
-    top: -28px;
+  .installations .box ul, .mailing .box ul {
+    padding-bottom: unset;
   }
 
-  .weblate-team {
-    width: 90%;
+  .bottom-left {
+    position: unset;
+    bottom: unset;
   }
 }
 
-@media (max-width: 790px) {
-  .content-p {
-    width: 100%;
-    display: unset !important;
-    text-align: center;
+@media screen and (max-width: 650px) {
+  section.bottom .box p {
+    margin-bottom: 100px;
   }
 
-  .weblate-team-content {
-    text-align: center;
+  section.bottom .box.donate a{
+    bottom: 30px;
+  }
+
+  section.bottom .box.join a{
+    bottom: 30px;
   }
 }
+
+@media screen and (max-width: 1030px) and (min-width: 892px) {
+  .installations .box ul, .mailing .box ul {
+    padding-bottom: 50px;
+  }
+
+  .bottom-left {
+    bottom: 60px;
+  }
+
+  .bottom-right {
+    bottom: 12px;
+  }
+}
\ No newline at end of file
diff --git a/weblate_web/templates/about.html b/weblate_web/templates/about.html
index 4f0b15cdcb..af3197650b 100644
--- a/weblate_web/templates/about.html
+++ b/weblate_web/templates/about.html
@@ -14,7 +14,7 @@ <h1 class="section-title min-m">{% block title %}{% trans "The Weblate Way" %}{%
             </div>
 
             <div class="aboutus-list">
-                <div class="box">
+                <div class="box green">
                     <img class="avatar" src="{% static "img/MichalPhoto.png" %}" />
                     <div class="date">{% trans "February 2012" %}—Michal Čihař</div>
                     <h2><a href="{% url 'post' slug='looking-pootle-alternative' %}">{% trans "Looking for a Pootle alternative" %}</a></h2>
@@ -38,7 +38,7 @@ <h2><a href="{% url 'post' slug='why-weblate' %}">{% trans "Why Weblate?" %}</a>
                         ◦ {% trans "Consistency checks" %}
                     </p>
                 </div>
-                <div class="box">
+                <div class="box green">
                     <div class="date">{% trans "Today" %}—Michal Čihař</div>
                     <h2>{% trans "Weblate grows and the future is open to new opportunities." %}</h2>
                 </div>
diff --git a/weblate_web/templates/contribute.html b/weblate_web/templates/contribute.html
index ac4d233659..c5e3d1e8e8 100644
--- a/weblate_web/templates/contribute.html
+++ b/weblate_web/templates/contribute.html
@@ -20,6 +20,7 @@ <h1 class="section-title min-m">{% block title %}{% trans "Contribute to Weblate
             </div>
 
             <div class="contribution-list">
+              <div class="flex">
                 <div class="box">
                     <h2>{% trans "Found a <strong>bug</strong> in Weblate?" %}</h2>
                     <ul>
@@ -28,7 +29,7 @@ <h2>{% trans "Found a <strong>bug</strong> in Weblate?" %}</h2>
                         <li>{% blocktrans with url='https://github.com/WeblateOrg/weblate/issues/new?template=bug_report.md' %}If you're unable to find an open issue addressing the problem, <a href="{{ url }}">open a new one</a>.{% endblocktrans %}</li>
                         <li>{% trans "<strong>Follow instructions in the issue template</strong>, and provide as much relevant info as possible." %}</li>
                     </ul>
-                    <a href="https://github.com/WeblateOrg/weblate/issues/" class="button">{% trans "GitHub issues" %}</a>
+                    <a href="https://github.com/WeblateOrg/weblate/issues/" class="button bottom-left">{% trans "GitHub issues" %}</a>
                 </div>
                 <div class="box">
                     <h2>{% trans "Have a <strong>patch</strong> that fixes a bug?" %}</h2>
@@ -36,15 +37,17 @@ <h2>{% trans "Have a <strong>patch</strong> that fixes a bug?" %}</h2>
                         <li>{% blocktrans with url='https://github.com/WeblateOrg/weblate/compare' %}Open a new <a href="{{ url }}">GitHub pull request</a> with the patch.{% endblocktrans %}</li>
                         <li>{% blocktrans %}Ensure the pull request description clearly describes the problem and solution. Include the relevant issue number if applicable.{% endblocktrans %}</li>
                     </ul>
-                    <a href="https://github.com/WeblateOrg/weblate/compare" class="button">{% trans "Open a pull request" %}</a>
+                    <a href="https://github.com/WeblateOrg/weblate/compare" class="button bottom-left">{% trans "Open a pull request" %}</a>
                 </div>
+              </div>
+              <div class="flex">
                 <div class="box">
                     <h2>{% trans "Missing a <strong>feature</strong> or want to change something?" %}</h2>
                     <ul>
                         <li>{% blocktrans with url="https://github.com/WeblateOrg/weblate/issues/new?template=feature_request.md" %}Suggest your change in the <a href="{{ url }}">GitHub issues</a>.{% endblocktrans %}</li>
                         <li>{% trans "<strong>Follow instructions in the issue template</strong>, and provide as much relevant info as possible." %}</li>
                     </ul>
-                    <a href="https://github.com/WeblateOrg/weblate/issues" class="button">{% trans "GitHub issues" %}</a>
+                    <a href="https://github.com/WeblateOrg/weblate/issues" class="button bottom-left">{% trans "GitHub issues" %}</a>
                 </div>
                 <div class="box">
                     <h2>{% trans "<strong>Source code</strong> related questions?" %}</h2>
@@ -52,26 +55,31 @@ <h2>{% trans "<strong>Source code</strong> related questions?" %}</h2>
                         <li>{% blocktrans with url='https://docs.weblate.org/en/latest/contributing/index.html' %}Please consult the <a href="{{ url }}">contributor documentation</a> to find the most common topics.{% endblocktrans %}</li>
                         <li>{% blocktrans with url='https://lists.cihar.com/hyperkitty/list/weblate@lists.cihar.com/' %}Ask any question about the source code on the <a href="{{ url }}">Weblate mailing list</a>.{% endblocktrans %}</li>
                     </ul>
-                    <a href="https://docs.weblate.org/en/latest/contributing/index.html" class="button">{% trans "Browse documentation" %}</a>
+                    <a href="https://docs.weblate.org/en/latest/contributing/index.html" class="button bottom-left">{% trans "Browse documentation" %}</a>
                 </div>
+              </div>
+              <div class="flex">
                 <div class="box">
                     <h2>{% trans "Want to help out with <strong>Documentation</strong>?" %}</h2>
                     <ul>
                         <li>{% blocktrans with url='https://docs.weblate.org/' %}The documentation is part of the main source code repository and you can easily follow the links to edit each page directly from the <a href="{{ url }}">documentation</a>.{% endblocktrans %}</li>
                         <li>{% blocktrans %}Once you have a patch ready, please follow <a href="#patch">patch submission</a> instructions.{% endblocktrans %}</li>
                     </ul>
-                    <a href="https://docs.weblate.org/" class="button">{% trans "Browse documentation" %}</a>
+                    <a href="https://docs.weblate.org/" class="button bottom-left">{% trans "Browse documentation" %}</a>
                 </div>
                 <div class="box">
                     <h2>{% trans "<strong>Financial support</strong> is always put to good use." %}</h2>
                     <p>{% trans "Please open the donation page for options on how to donate." %}</p>
-                    <a href="{% url 'donate' %}" class="button">{% trans "Donate now" %}</a>
+                    <a href="{% url 'donate' %}" class="button bottom-left">{% trans "Donate now" %}</a>
                 </div>
+              </div>
+              <div class="flex">
                 <div class="box">
                     <h2>{% blocktrans %}<strong>Are you a translator?</strong> Help translate Weblate itself.{% endblocktrans %}</h2>
                     <p>{% blocktrans %}You can translate Weblate and many other projects at <a href="https://hosted.weblate.org/engage/weblate/">hosted.weblate.org</a>.{% endblocktrans %}</p>
-                    <a href="https://hosted.weblate.org/engage/weblate/" class="button">{% trans "Start translating" %}</a>
+                    <a href="https://hosted.weblate.org/engage/weblate/" class="button bottom-left">{% trans "Start translating" %}</a>
                 </div>
+              </div>
             </div>
         </div>
     </div>
diff --git a/weblate_web/templates/snippets/bottom.html b/weblate_web/templates/snippets/bottom.html
index c3dab3a379..65c1d05b3d 100644
--- a/weblate_web/templates/snippets/bottom.html
+++ b/weblate_web/templates/snippets/bottom.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 <section class="bottom {{ extra_css }}">
-    <div class="row">
+    <div class="row flex">
         {% include "snippets/box-join.html" %}
         {% include "snippets/box-donate.html" %}
     </div>
diff --git a/weblate_web/templates/support.html b/weblate_web/templates/support.html
index e26de64e3e..97fb32bf82 100644
--- a/weblate_web/templates/support.html
+++ b/weblate_web/templates/support.html
@@ -48,6 +48,7 @@ <h1 class="section-title min-m">{% trans "Get help" %}</h1>
         <h2 class="section-title crypto">{% trans "Prepaid support for gratis service and self-hosted installations" %}</h2>
 
         <div class="installations">
+          <div class="flex">
             <div class="box">
                 <div class="icon"><img src="{% static "img/Support-Basic.svg" %}" /></div>
                 <h2>{% trans "Basic self-hosted support" %}</h2>
@@ -55,8 +56,8 @@ <h2>{% trans "Basic self-hosted support" %}</h2>
                     <li>{% trans "Issues in your environment fixed immediately." %}</li>
                     <li>{% trans "Priority e-mail support." %}</li>
                 </ul>
-                <a href="{% url 'subscription-new' %}?plan=basic" class="format-item">{{ 500 | price_format }}<span>{% trans "annually" %}</span></a>
-                <a href="{% url 'subscription-new' %}?plan=basic" class="button black right">{% trans "Buy now" %}</a>
+                <a href="{% url 'subscription-new' %}?plan=basic" class="format-item bottom-left">{{ 500 | price_format }}<span>{% trans "annually" %}</span></a>
+                <a href="{% url 'subscription-new' %}?plan=basic" class="button black right bottom-right">{% trans "Buy now" %}</a>
             </div>
             <div class="box">
                 <div class="icon"><img src="{% static "img/Support-Plus.svg" %}" /></div>
@@ -67,9 +68,11 @@ <h2>{% trans "Extended self-hosted support" %}</h2>
                     <li>{% trans "Priority e-mail support." %}</li>
                     <li>{% trans "Only available with the installation package" %}</li>
                 </ul>
-                <a href="{% url 'subscription-new' %}?plan=extended" class="format-item">{{ 750 | price_format }}<span>{% trans "annually" %}</span></a>
-                <a href="{% url 'subscription-new' %}?plan=extended" class="button black right">{% trans "Buy now" %}</a>
+                <a href="{% url 'subscription-new' %}?plan=extended" class="format-item bottom-left">{{ 750 | price_format }}<span>{% trans "annually" %}</span></a>
+                <a href="{% url 'subscription-new' %}?plan=extended" class="button black right bottom-right">{% trans "Buy now" %}</a>
             </div>
+          </div>
+          <div class="flex">
             <div class="box">
                 <div class="icon"><img src="{% static "img/Support-Premium.svg" %}" /></div>
                 <h2>{% trans "Premium self-hosted support" %}</h2>
@@ -79,8 +82,8 @@ <h2>{% trans "Premium self-hosted support" %}</h2>
                     <li>{% trans "Private consultations." %}</li>
                     <li>{% trans "Next business day support response guaranteed." %}</li>
                 </ul>
-                <a href="{% url 'subscription-new' %}?plan=premium" class="format-item">{{ 1200 | price_format }}<span>{% trans "annually" %}</span></a>
-                <a href="{% url 'subscription-new' %}?plan=premium" class="button black right">{% trans "Buy now" %}</a>
+                <a href="{% url 'subscription-new' %}?plan=premium" class="format-item bottom-left">{{ 1200 | price_format }}<span>{% trans "annually" %}</span></a>
+                <a href="{% url 'subscription-new' %}?plan=premium" class="button black right bottom-right">{% trans "Buy now" %}</a>
             </div>
             <div class="box" id="install">
                 <div class="icon"><img src="{% static "img/linux.png" %}" /></div>
@@ -91,9 +94,11 @@ <h2>{% trans "Installation on your Linux server" %}</h2>
                     <li>{% trans "Requires root access or close cooperation of your admins" %}</li>
                     <li>{% trans "Setup customization" %}</li>
                 </ul>
-                <a href="{% url 'subscription-new' %}?plan=install:linux" class="format-item">{{ 300 | price_format }}<span>{% trans "installation" %}</span></a>
-                <a href="{% url 'subscription-new' %}?plan=install:linux" class="button black right">{% trans "Buy now" %}</a>
+                <a href="{% url 'subscription-new' %}?plan=install:linux" class="format-item bottom-left">{{ 300 | price_format }}<span>{% trans "installation" %}</span></a>
+                <a href="{% url 'subscription-new' %}?plan=install:linux" class="button black right bottom-right">{% trans "Buy now" %}</a>
             </div>
+          </div>
+          <div class="flex">
             <div class="box" id="backup">
                 <div class="icon"><img src="{% static "img/Support-Backup.svg" %}" /></div>
                 <h2>{% trans "Backup service" %}</h2>
@@ -104,8 +109,8 @@ <h2>{% trans "Backup service" %}</h2>
                     <li>{% trans "Stores up to 100 GB of backups" %}</li>
                     <li><a href="https://docs.weblate.org/en/latest/admin/backup.html#cloudbackup">{% trans "Read more in the documentation." %}</a></li>
                 </ul>
-                <a href="{% url 'subscription-new' %}?plan=backup" class="format-item">{{ 250 | price_format }}<span>{% trans "annually" %}</span></a>
-                <a href="{% url 'subscription-new' %}?plan=backup" class="button black right">{% trans "Buy now" %}</a>
+                <a href="{% url 'subscription-new' %}?plan=backup" class="format-item bottom-left">{{ 250 | price_format }}<span>{% trans "annually" %}</span></a>
+                <a href="{% url 'subscription-new' %}?plan=backup" class="button black right bottom-right">{% trans "Buy now" %}</a>
             </div>
             <div class="box">
                 <div class="icon"><img src="{% static "img/icon-call.svg" %}" /></div>
@@ -115,9 +120,10 @@ <h2>{% trans "Consulting services and/or custom development" %}</h2>
                     <li>{% trans "Integration of Weblate into your workflow" %}</li>
                     <li>{% trans "Suggestions on the internationalization and localization" %}</li>
                 </ul>
-                <a class="format-item">{{ 70 | price_format }}<span>{% trans "hourly" %}</span></a>
-                <a href="mailto:sales@weblate.org?subject=Consulting services" class="button black right">{% trans "Contact us" %}</a>
+                <a class="format-item bottom-left">{{ 70 | price_format }}<span>{% trans "hourly" %}</span></a>
+                <a href="mailto:sales@weblate.org?subject=Consulting services" class="button black right bottom-right">{% trans "Contact us" %}</a>
             </div>
+          </div>
             <a href="mailto:support@weblate.org" class="button center">{% trans "Ask for help" %}</a>
         </div>
         <h2 class="section-title crypto payment-conditions">{% trans "Payment" %}</h2>

From 85db09da3edd236cdbafaa230410cfa6d51728d7 Mon Sep 17 00:00:00 2001
From: Creativetech <creative.joomdev@gmail.com>
Date: Mon, 15 Feb 2021 17:18:26 +0500
Subject: [PATCH 2/6] Updated CSS for Weblate team

---
 .gitignore                       |  3 +-
 weblate_web/static/style-rtl.css | 69 ++++++++++++++++++++++++++++++++
 weblate_web/static/style.css     | 69 ++++++++++++++++++++++++++++++++
 3 files changed, 139 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6bd1b11372..91f86e7d8e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,5 +12,4 @@
 /saml/saml.crt
 /saml/local_metadata.xml
 .idea
-venv
-requirements.txt
\ No newline at end of file
+venv
\ No newline at end of file
diff --git a/weblate_web/static/style-rtl.css b/weblate_web/static/style-rtl.css
index 35152ee160..98087e611b 100644
--- a/weblate_web/static/style-rtl.css
+++ b/weblate_web/static/style-rtl.css
@@ -4047,6 +4047,75 @@ input.fullwidth {
   }
 }
 
+/* About Us Weblate Team */
+
+.content-p {
+  width: 69%;
+  display: inline-block;
+  padding-right: 10px;
+  text-align: right;
+}
+
+.content-p p {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.weblate-team-content img {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  position: relative;
+  top: -15px;
+}
+
+.weblate-team-content {
+  display: table-cell;
+  padding-bottom: 90px;
+  padding-top: 20px;
+}
+
+.weblate-team {
+  display: table;
+  width: 78%;
+  margin: 0 auto;
+}
+
+@media (max-width: 1250px) {
+  .content-p {
+    width: 58%;
+  }
+}
+
+@media (max-width: 889px) {
+  .content-p {
+    width: 65%;
+  }
+
+  .weblate-team-content img {
+    width: 65px;
+    height: 65px;
+    border-radius: 50%;
+    top: -28px;
+  }
+
+  .weblate-team {
+    width: 90%;
+  }
+}
+
+@media (max-width: 790px) {
+  .content-p {
+    width: 100%;
+    display: unset !important;
+    text-align: center;
+  }
+
+  .weblate-team-content {
+    text-align: center;
+  }
+}
+
 /* Flex property for boxes */
 
 .flex{
diff --git a/weblate_web/static/style.css b/weblate_web/static/style.css
index 7e55a31aa7..6a5904647e 100644
--- a/weblate_web/static/style.css
+++ b/weblate_web/static/style.css
@@ -4039,6 +4039,75 @@ input.fullwidth {
   }
 }
 
+/* About Us Weblate Team */
+
+.content-p {
+  width: 69%;
+  display: inline-block;
+  padding-left: 10px;
+  text-align: left;
+}
+
+.content-p p {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.weblate-team-content img {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  position: relative;
+  top: -15px;
+}
+
+.weblate-team-content {
+  display: table-cell;
+  padding-bottom: 90px;
+  padding-top: 20px;
+}
+
+.weblate-team {
+  display: table;
+  width: 78%;
+  margin: 0 auto;
+}
+
+@media (max-width: 1250px) {
+  .content-p {
+    width: 58%;
+  }
+}
+
+@media (max-width: 889px) {
+  .content-p {
+    width: 65%;
+  }
+
+  .weblate-team-content img {
+    width: 65px;
+    height: 65px;
+    border-radius: 50%;
+    top: -28px;
+  }
+
+  .weblate-team {
+    width: 90%;
+  }
+}
+
+@media (max-width: 790px) {
+  .content-p {
+    width: 100%;
+    display: unset !important;
+    text-align: center;
+  }
+
+  .weblate-team-content {
+    text-align: center;
+  }
+}
+
 /* Flex property for boxes */
 
 .flex{

From 9191ead8cd68e22ef2e7313d7a4e94133ddb6646 Mon Sep 17 00:00:00 2001
From: Creativetech <creative.joomdev@gmail.com>
Date: Tue, 16 Feb 2021 11:14:10 +0500
Subject: [PATCH 3/6] Formatted

---
 weblate_web/static/style-rtl.css | 28 +++++++++++++++-------------
 weblate_web/static/style.css     | 28 +++++++++++++++-------------
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/weblate_web/static/style-rtl.css b/weblate_web/static/style-rtl.css
index 98087e611b..2c5eaa8897 100644
--- a/weblate_web/static/style-rtl.css
+++ b/weblate_web/static/style-rtl.css
@@ -1168,7 +1168,7 @@ section.bottom .box.join {
   background-image: url("img/box-join.jpg");
 }
 
-section.bottom .box.join a{
+section.bottom .box.join a {
   position: absolute;
   bottom: 40px;
 }
@@ -1178,7 +1178,7 @@ section.bottom .box.donate {
   background-image: url("img/box-donate.jpg");
 }
 
-section.bottom .box.donate a{
+section.bottom .box.donate a {
   position: absolute;
   bottom: 40px;
 }
@@ -4118,25 +4118,25 @@ input.fullwidth {
 
 /* Flex property for boxes */
 
-.flex{
+.flex {
   display: flex;
 }
 
 /* Box display flow root */
 
-.box{
+.box {
   display: flow-root !important;
   position: relative;
 }
 
 /* Box bottom leftand right button custom position */
 
-.bottom-left{
+.bottom-left {
   position: absolute;
   bottom: 40px;
 }
 
-.bottom-right{
+.bottom-right {
   position: absolute;
   bottom: 40px;
   left: 40px;
@@ -4145,8 +4145,8 @@ input.fullwidth {
 /* Media Queries */
 
 @media screen and (max-width: 891px) {
-  .flex{
-      display: unset;
+  .flex {
+    display: unset;
   }
 }
 
@@ -4157,7 +4157,8 @@ input.fullwidth {
     left: unset;
   }
 
-  .installations .box ul, .mailing .box ul {
+  .installations .box ul,
+  .mailing .box ul {
     padding-bottom: unset;
   }
 
@@ -4172,17 +4173,18 @@ input.fullwidth {
     margin-bottom: 100px;
   }
 
-  section.bottom .box.donate a{
+  section.bottom .box.donate a {
     bottom: 30px;
   }
 
-  section.bottom .box.join a{
+  section.bottom .box.join a {
     bottom: 30px;
   }
 }
 
 @media screen and (max-width: 1030px) and (min-width: 892px) {
-  .installations .box ul, .mailing .box ul {
+  .installations .box ul,
+  .mailing .box ul {
     padding-bottom: 50px;
   }
 
@@ -4193,4 +4195,4 @@ input.fullwidth {
   .bottom-right {
     bottom: 12px;
   }
-}
\ No newline at end of file
+}
diff --git a/weblate_web/static/style.css b/weblate_web/static/style.css
index 6a5904647e..52a4354414 100644
--- a/weblate_web/static/style.css
+++ b/weblate_web/static/style.css
@@ -1168,7 +1168,7 @@ section.bottom .box.join {
   background-image: url("img/box-join.jpg");
 }
 
-section.bottom .box.join a{
+section.bottom .box.join a {
   position: absolute;
   bottom: 40px;
 }
@@ -1178,7 +1178,7 @@ section.bottom .box.donate {
   background-image: url("img/box-donate.jpg");
 }
 
-section.bottom .box.donate a{
+section.bottom .box.donate a {
   position: absolute;
   bottom: 40px;
 }
@@ -4110,25 +4110,25 @@ input.fullwidth {
 
 /* Flex property for boxes */
 
-.flex{
+.flex {
   display: flex;
 }
 
 /* Box display flow root */
 
-.box{
+.box {
   display: flow-root !important;
   position: relative;
 }
 
 /* Box bottom left and right button custom position */
 
-.bottom-left{
+.bottom-left {
   position: absolute;
   bottom: 40px;
 }
 
-.bottom-right{
+.bottom-right {
   position: absolute;
   bottom: 40px;
   right: 40px;
@@ -4137,8 +4137,8 @@ input.fullwidth {
 /* Media Queries */
 
 @media screen and (max-width: 891px) {
-  .flex{
-      display: unset;
+  .flex {
+    display: unset;
   }
 }
 
@@ -4149,7 +4149,8 @@ input.fullwidth {
     right: unset;
   }
 
-  .installations .box ul, .mailing .box ul {
+  .installations .box ul,
+  .mailing .box ul {
     padding-bottom: unset;
   }
 
@@ -4164,17 +4165,18 @@ input.fullwidth {
     margin-bottom: 100px;
   }
 
-  section.bottom .box.donate a{
+  section.bottom .box.donate a {
     bottom: 30px;
   }
 
-  section.bottom .box.join a{
+  section.bottom .box.join a {
     bottom: 30px;
   }
 }
 
 @media screen and (max-width: 1030px) and (min-width: 892px) {
-  .installations .box ul, .mailing .box ul {
+  .installations .box ul,
+  .mailing .box ul {
     padding-bottom: 50px;
   }
 
@@ -4185,4 +4187,4 @@ input.fullwidth {
   .bottom-right {
     bottom: 12px;
   }
-}
\ No newline at end of file
+}

From a2b14ef6c4ef4a7b59da334d3d01a6ebe402eabc Mon Sep 17 00:00:00 2001
From: Creativetech <creative.joomdev@gmail.com>
Date: Tue, 16 Feb 2021 11:28:48 +0500
Subject: [PATCH 4/6] Formatted updated

---
 weblate_web/static/style-rtl.css           | 2 +-
 weblate_web/static/style.css               | 2 +-
 weblate_web/templates/snippets/bottom.html | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/weblate_web/static/style-rtl.css b/weblate_web/static/style-rtl.css
index 2c5eaa8897..dd4774b32d 100644
--- a/weblate_web/static/style-rtl.css
+++ b/weblate_web/static/style-rtl.css
@@ -4122,7 +4122,7 @@ input.fullwidth {
   display: flex;
 }
 
-/* Box display flow root */
+/* Box display flow root property */
 
 .box {
   display: flow-root !important;
diff --git a/weblate_web/static/style.css b/weblate_web/static/style.css
index 52a4354414..e365a3b73e 100644
--- a/weblate_web/static/style.css
+++ b/weblate_web/static/style.css
@@ -4039,7 +4039,7 @@ input.fullwidth {
   }
 }
 
-/* About Us Weblate Team */
+/* About Us Weblate Team CSS */
 
 .content-p {
   width: 69%;
diff --git a/weblate_web/templates/snippets/bottom.html b/weblate_web/templates/snippets/bottom.html
index 65c1d05b3d..b767d37321 100644
--- a/weblate_web/templates/snippets/bottom.html
+++ b/weblate_web/templates/snippets/bottom.html
@@ -1,7 +1,9 @@
 {% load i18n %}
 <section class="bottom {{ extra_css }}">
-    <div class="row flex">
+    <div class="row">
+        <div class="flex">
         {% include "snippets/box-join.html" %}
         {% include "snippets/box-donate.html" %}
+        </div>
     </div>
 </section>

From 825d617c62704ba9bb73558bfde25f10f51292f4 Mon Sep 17 00:00:00 2001
From: Creativetech <creative.joomdev@gmail.com>
Date: Tue, 16 Feb 2021 11:43:36 +0500
Subject: [PATCH 5/6] Formatted updated

---
 .gitignore                       | 2 +-
 weblate_web/static/style-rtl.css | 2 +-
 weblate_web/static/style.css     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 91f86e7d8e..8c79714d9c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,4 +12,4 @@
 /saml/saml.crt
 /saml/local_metadata.xml
 .idea
-venv
\ No newline at end of file
+venv
diff --git a/weblate_web/static/style-rtl.css b/weblate_web/static/style-rtl.css
index dd4774b32d..80396abec4 100644
--- a/weblate_web/static/style-rtl.css
+++ b/weblate_web/static/style-rtl.css
@@ -4129,7 +4129,7 @@ input.fullwidth {
   position: relative;
 }
 
-/* Box bottom leftand right button custom position */
+/* Box bottom left and right button custom position */
 
 .bottom-left {
   position: absolute;
diff --git a/weblate_web/static/style.css b/weblate_web/static/style.css
index e365a3b73e..cdfe983e62 100644
--- a/weblate_web/static/style.css
+++ b/weblate_web/static/style.css
@@ -4114,7 +4114,7 @@ input.fullwidth {
   display: flex;
 }
 
-/* Box display flow root */
+/* Box display flow root property */
 
 .box {
   display: flow-root !important;

From 2bffc50536e879cc23167476307b6e330bac0d86 Mon Sep 17 00:00:00 2001
From: Creativetech <creative.joomdev@gmail.com>
Date: Tue, 16 Feb 2021 12:01:22 +0500
Subject: [PATCH 6/6] Formatted updated

---
 weblate_web/static/style-rtl.css | 2 +-
 weblate_web/static/style.css     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/weblate_web/static/style-rtl.css b/weblate_web/static/style-rtl.css
index 80396abec4..07ac9b60af 100644
--- a/weblate_web/static/style-rtl.css
+++ b/weblate_web/static/style-rtl.css
@@ -4142,7 +4142,7 @@ input.fullwidth {
   left: 40px;
 }
 
-/* Media Queries */
+/* Media Queries for responsiveness */
 
 @media screen and (max-width: 891px) {
   .flex {
diff --git a/weblate_web/static/style.css b/weblate_web/static/style.css
index cdfe983e62..f922976cf9 100644
--- a/weblate_web/static/style.css
+++ b/weblate_web/static/style.css
@@ -4134,7 +4134,7 @@ input.fullwidth {
   right: 40px;
 }
 
-/* Media Queries */
+/* Media Queries for responsiveness */
 
 @media screen and (max-width: 891px) {
   .flex {