forked from organicmaps/website
all page
This commit is contained in:
borntojesus
parent
47f6aa9d97
commit
f4f83419d3
4 changed files with 201 additions and 51 deletions
|
|
@ -21,7 +21,7 @@ extra:
|
|||
desktop_shop_name_2: Linux
|
||||
download_section_title: Already downloaded?
|
||||
download_section_list_title_1: Offline Maps and Exploration
|
||||
download_section_list_title_2: Offline Maps and Exploration
|
||||
download_section_list_title_3: Offline Maps and Exploration
|
||||
download_section_list_title_4: Offline Maps and Exploration
|
||||
download_section_list_title_2: Privacy-Centric
|
||||
download_section_list_title_3: No Ads, No Tracking
|
||||
download_section_list_title_4: Open-Source and Community-Driven
|
||||
---
|
||||
|
|
@ -33,5 +33,6 @@
|
|||
@import "./pages/faq-page";
|
||||
@import "./pages/about-us";
|
||||
@import "./pages/crowdfunding";
|
||||
@import "./pages/download";
|
||||
|
||||
|
||||
|
|
|
|||
112
sass/pages/download.scss
Normal file
112
sass/pages/download.scss
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
@import "../variables/media";
|
||||
|
||||
|
||||
.section-device {
|
||||
padding: var(--container-mob-section) 0;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
gap: 10rem;
|
||||
@media (max-width: $media-md) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
max-width: 130rem;
|
||||
}
|
||||
|
||||
&__item {
|
||||
background-color: var(--bg-green);
|
||||
border-radius: 10rem;
|
||||
padding: 30rem 20rem;
|
||||
flex-grow: 1;
|
||||
@media (max-width: $media-md) {
|
||||
padding: 20rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@media (max-width: $media-md) {
|
||||
margin-bottom: 16rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
color: var(--green-button);
|
||||
@media (max-width: $media-md) {
|
||||
width: 18rem;
|
||||
height: 18rem;
|
||||
svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content-item {
|
||||
padding: 26rem 16rem;
|
||||
border-radius: 10rem;
|
||||
border: 1px solid var(--common-line-color);
|
||||
display: flex;
|
||||
gap: 10rem;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
|
||||
&:last-of-type {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media (max-width: $media-md) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 20rem 16rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__content-title {
|
||||
margin-bottom: 20rem;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
gap: 10rem;
|
||||
@media (max-width: $media-md) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-step {
|
||||
padding-bottom: var(--container-mob-section);
|
||||
|
||||
&__title {
|
||||
margin-bottom: 30rem;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
justify-content: space-between;
|
||||
@media (max-width: $media-md) {
|
||||
grid-template-columns:1fr;
|
||||
gap: 30rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-top: 15rem;
|
||||
}
|
||||
&__item {
|
||||
@media (max-width: $media-md) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 23rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -35,7 +35,6 @@
|
|||
|
||||
<section class="section-device">
|
||||
<div class="container section-device__container">
|
||||
|
||||
<div class="section-device__item">
|
||||
<div class="section-device__title-row">
|
||||
<h3 class="h5 section-device__title">{{ page.extra.mobile_payment_title | safe }}</h3>
|
||||
|
|
@ -45,64 +44,102 @@
|
|||
</div>
|
||||
|
||||
<div class="section-device__content">
|
||||
<p class="p-15-bold section-device__content-title">{{ page.extra.mobile_payment_methods_1 | safe }}</p>
|
||||
<div class="section-device__content-item">
|
||||
<p class="p-15 section-device__text">{{ page.extra.mobile_shop_name_1 | safe }}</p>
|
||||
<img class="section-device__img" src="/images/download/app-store-logo.png" alt="img">
|
||||
<div class="section-device__card">
|
||||
<p class="p-15-bold section-device__content-title">{{ page.extra.mobile_payment_methods_1 | safe }}</p>
|
||||
<p class="p-15 section-device__text">{{ page.extra.mobile_shop_name_1 | safe }}</p>
|
||||
<img class="section-device__img" src="/images/download/app-store-logo.png" alt="img">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="section-device__content-item">
|
||||
<div class="section-device__card">
|
||||
<p class="p-15-bold section-device__content-title">{{ page.extra.mobile_payment_methods_2 | safe }}</p>
|
||||
<p class="p-15 section-device__text">{{ page.extra.mobile_shop_name_2 | safe }}</p>
|
||||
<img class="section-device__img" src="/images/download/googleplay-logo.png" alt="img">
|
||||
</div>
|
||||
<div class="section-device__card">
|
||||
<p class="p-15 section-device__text">{{ page.extra.mobile_shop_name_3 | safe }}</p>
|
||||
<img class="section-device__img" src="/images/download/f-droid-logo.png" alt="img">
|
||||
</div>
|
||||
<div class="section-device__card">
|
||||
<p class="p-15 section-device__text">{{ page.extra.mobile_shop_name_4 | safe }}</p>
|
||||
<img class="section-device__img" src="/images/download/app-gallery-logo.png" alt="img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="section-device__item">
|
||||
<div class="section-device__title-row">
|
||||
<h3 class="h5 section-device__title">{{ page.extra.desktop_payment_title | safe }}</h3>
|
||||
<div class="section-device__icon">
|
||||
{% include 'ui/icons/social/upload.html' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>{{ page.extra.mobile_payment_methods_1 | safe }}</p>
|
||||
<div class="section-device__content">
|
||||
<div class="section-device__content-item">
|
||||
<div class="section-device__card">
|
||||
<p class="p-15-bold section-device__content-title">{{ page.extra.desktop_payment_methods_1 | safe }}</p>
|
||||
<p class="p-15 section-device__text">{{ page.extra.desktop_shop_name_1 | safe }}</p>
|
||||
<img class="section-device__img" src="/images/download/app-store-logo.png" alt="img">
|
||||
</div>
|
||||
<div class="section-device__card">
|
||||
<p class="p-15-bold section-device__content-title">{{ page.extra.desktop_payment_methods_2 | safe }}</p>
|
||||
<p class="p-15 section-device__text">{{ page.extra.desktop_shop_name_2 | safe }}</p>
|
||||
<img class="section-device__img" src="/images/download/flathub-logo.png" alt="img">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p>{{ page.extra.mobile_payment_methods_2 | safe }}</p>
|
||||
<p>{{ page.extra.mobile_shop_name_2 | safe }}</p>
|
||||
<img src="images/download/googleplay-logo.png">
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ page.extra.mobile_shop_name_3 | safe }}</p>
|
||||
<img src="images/download/f-droid-logo.png">
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ page.extra.mobile_shop_name_4 | safe }}</p>
|
||||
<img src="images/download/app-gallery-logo.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>{{ page.extra.desktop_payment_title | safe }}</h3>
|
||||
<div>
|
||||
<p>{{ page.extra.desktop_payment_methods_1 | safe }}</p>
|
||||
<p>{{ page.extra.desktop_shop_name_1 | safe }}</p>
|
||||
<img src="images/download/app-store-logo.png">
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ page.extra.desktop_payment_methods_2 | safe }}</p>
|
||||
<p>{{ page.extra.desktop_shop_name_2 | safe }}</p>
|
||||
<img src="images/download/flathub-logo.png">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h2>{{ page.extra.download_section_title | safe }}</h2>
|
||||
<div>
|
||||
<p>{{ page.extra.download_section_list_title_1 | safe }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ page.extra.download_section_list_title_2 | safe }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ page.extra.download_section_list_title_3 | safe }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ page.extra.download_section_list_title_4 | safe }}</p>
|
||||
|
||||
<section class="section-step">
|
||||
<div class="container section-step__container">
|
||||
<h2 class="h6 section-step__title">{{ page.extra.download_section_title | safe }}</h2>
|
||||
<div class="section-step__content">
|
||||
<div class="section-step__item">
|
||||
<div class="services-support__count">
|
||||
<span class="icon-count services-support__number">01</span>
|
||||
<div class="services-support__icon">
|
||||
{% include 'ui/icons/new-support/pin.html' %}
|
||||
</div>
|
||||
</div>
|
||||
<p class="h5 section-step__text">{{ page.extra.download_section_list_title_1 | safe }}</p>
|
||||
</div>
|
||||
<div class="section-step__item">
|
||||
<div class="services-support__count">
|
||||
<span class="icon-count services-support__number">02</span>
|
||||
<div class="services-support__icon">
|
||||
{% include 'ui/icons/new-support/pin.html' %}
|
||||
</div>
|
||||
</div>
|
||||
<p class="h5 section-step__text">{{ page.extra.download_section_list_title_2 | safe }}</p>
|
||||
</div>
|
||||
<div class="section-step__item">
|
||||
<div class="services-support__count">
|
||||
<span class="icon-count services-support__number">03</span>
|
||||
<div class="services-support__icon">
|
||||
{% include 'ui/icons/new-support/pin.html' %}
|
||||
</div>
|
||||
</div>
|
||||
<p class="h5 section-step__text">{{ page.extra.download_section_list_title_3 | safe }}</p>
|
||||
</div>
|
||||
<div class="section-step__item">
|
||||
<div class="services-support__count">
|
||||
<span class="icon-count services-support__number">04</span>
|
||||
<div class="services-support__icon">
|
||||
{% include 'ui/icons/new-support/pin.html' %}
|
||||
</div>
|
||||
</div>
|
||||
<p class="h5 section-step__text">{{ page.extra.download_section_list_title_4 | safe }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
{% include 'section/donate.html' %}
|
||||
{%- endblock content %}
|
||||
Loading…
Add table
Reference in a new issue