sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TRI-283: edit images xs

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-23 09:00:55 +03:00
parent 800b7ba493
commit 3c5331c2d3
25 changed files with 179 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/css/moover.css
View File

File diff suppressed because one or more lines are too long

306
static/css/moover/root.css
View File

@@ -1,304 +1,2 @@
.container { .container{margin:0 auto;width:1280px;position:relative}@media (min-width: 1720px){.container{width:1720px}}@media (max-width: 1304.98px){.container{width:1120px;max-width:88vw}}@media (max-width: 991.98px){.container{width:640px;max-width:100vw}}@media (max-width: 767.98px){.container{margin:0 16px;width:auto}}:root{--color-primary: #FF613A;--color-white: #FFFFFF;--color-black: #000000;--color-black2: #272424;--color-grey: #F1F1F1;--color-grey2: #7A7979;--color-orange: #FF613A;--box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20),
margin: 0 auto; 0 -1px 10px 0 rgba(198, 199, 203, 0.20);text-align:center;color:var(--color-black2)}body{overflow-x:hidden;padding-top:129px}@media (max-width: 1304.98px){body{padding-top:126px}}@media (max-width: 991.98px){body{padding-top:85px}}@media (max-width: 767.98px){body{padding-top:57px}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:700}h1,.h1{font-size:44px;line-height:52px}@media (min-width: 1720px){h1,.h1{font-size:48px;line-height:52px}}h2,.h2{font-size:24px;line-height:36px;margin-bottom:10px}@media (min-width: 1720px){h2,.h2{font-size:28px;margin-bottom:20px}}h3,.h3{font-size:20px;line-height:28px;margin-bottom:12px}@media (max-width: 1304.98px){h3,.h3{margin-bottom:13px}}h4,.h4{font-size:18px;line-height:26px;margin-bottom:20px}p{line-height:22px;margin-bottom:20px}@media (min-width: 1720px){p{font-size:20px;line-height:26px}}@media (max-width: 991.98px){p{margin-bottom:18px}}@media (max-width: 479.98px){p{margin-bottom:14px}}b{font-weight:500}@media (max-width: 991.98px){b{font-size:16px;line-height:22px}}.btn{display:inline-flex;text-decoration:none;color:black;line-height:22px;border-radius:10px;padding:20px 76px 18px;justify-content:center;align-items:center;margin:0 3px;letter-spacing:0.2px;font-size:18px}.btn--primary{background:var(--color-primary);color:var(--color-white)}.title{font-size:44px;font-weight:700;line-height:52px;margin-bottom:13px;margin-left:auto;margin-right:auto}@media (min-width: 1720px){.title{font-size:48px;margin-bottom:22px}}@media (max-width: 1304.98px){.title{margin-bottom:20px}}@media (max-width: 991.98px){.title{font-size:32px;line-height:38.73px}}@media (max-width: 767.98px){.title{margin-bottom:14px}}.subtitle{margin-bottom:81px;line-height:22px}@media (min-width: 1720px){.subtitle{font-size:20px;margin-bottom:105px}}@media (max-width: 1304.98px){.subtitle{margin-bottom:71px}}.hide{display:none}.hide__xxl{display:inline-flex}@media (min-width: 1720px){.hide__xxl{display:none}}@media (max-width: 991.98px){.hide__md{display:none}}@media (max-width: 479.98px){.hide__xs{display:none}}.show__xxl{display:none}@media (min-width: 1720px){.show__xxl{display:block}}.show__md{display:none}@media (max-width: 991.98px){.show__md{display:initial}}@media (min-width: 480px){.show__xs{display:none}}@media (min-width: 1440px){.br--xxl{display:none}}@media (max-width: 991.98px){.br--md{display:none}}@media (max-width: 767.98px){.br--sm{display:none}}@media (min-width: 1440px){.is-container.wrapper_main{max-width:initial}}.is-container.wrapper_main>.container{position:relative;left:15px}@media (min-width: 1720px){.is-container.wrapper_main>.container{left:17px}}@media (max-width: 767.98px){.is-container.wrapper_main>.container{left:0}}
width: 1280px;
position: relative;
}
@media (min-width: 1720px) {
.container {
width: 1720px;
}
}
@media (max-width: 1304.98px) {
.container {
width: 1120px;
max-width: 88vw;
}
}
@media (max-width: 991.98px) {
.container {
width: 640px;
max-width: 100vw;
}
}
@media (max-width: 767.98px) {
.container {
margin: 0 16px;
width: auto;
}
}
:root {
--color-primary: #FF613A;
--color-white: #FFFFFF;
--color-black: #000000;
--color-black2: #272424;
--color-grey: #F1F1F1;
--color-grey2: #7A7979;
--color-orange: #FF613A;
--box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20),
0 -1px 10px 0 rgba(198, 199, 203, 0.20);
text-align: center;
color: var(--color-black2);
}
body {
overflow-x: hidden;
padding-top: 129px;
}
@media (max-width: 1304.98px) {
body {
padding-top: 126px;
}
}
@media (max-width: 991.98px) {
body {
padding-top: 85px;
}
}
@media (max-width: 767.98px) {
body {
padding-top: 57px;
}
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
h1, .h1 {
font-size: 44px;
line-height: 52px;
}
@media (min-width: 1720px) {
h1, .h1 {
font-size: 48px;
line-height: 52px;
}
}
h2, .h2 {
font-size: 24px;
line-height: 36px;
margin-bottom: 10px;
}
@media (min-width: 1720px) {
h2, .h2 {
font-size: 28px;
margin-bottom: 20px;
}
}
h3, .h3 {
font-size: 20px;
line-height: 28px;
margin-bottom: 12px;
}
@media (max-width: 1304.98px) {
h3, .h3 {
margin-bottom: 13px;
}
}
h4, .h4 {
font-size: 18px;
line-height: 26px;
margin-bottom: 20px;
}
p {
line-height: 22px;
margin-bottom: 20px;
}
@media (min-width: 1720px) {
p {
font-size: 20px;
line-height: 26px;
}
}
@media (max-width: 991.98px) {
p {
margin-bottom: 18px;
}
}
@media (max-width: 479.98px) {
p {
margin-bottom: 14px;
}
}
b {
font-weight: 500;
}
@media (max-width: 991.98px) {
b {
font-size: 16px;
line-height: 22px;
}
}
.btn {
display: inline-flex;
text-decoration: none;
color: black;
line-height: 22px;
border-radius: 10px;
padding: 20px 76px 18px;
justify-content: center;
align-items: center;
margin: 0 3px;
letter-spacing: 0.2px;
font-size: 18px;
}
.btn--primary {
background: var(--color-primary);
color: var(--color-white);
}
.title {
font-size: 44px;
font-weight: 700;
line-height: 52px;
margin-bottom: 13px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1720px) {
.title {
font-size: 48px;
margin-bottom: 22px;
}
}
@media (max-width: 1304.98px) {
.title {
margin-bottom: 20px;
}
}
@media (max-width: 991.98px) {
.title {
font-size: 32px;
line-height: 38.73px;
}
}
@media (max-width: 767.98px) {
.title {
margin-bottom: 14px;
}
}
.subtitle {
margin-bottom: 81px;
line-height: 22px;
}
@media (min-width: 1720px) {
.subtitle {
font-size: 20px;
margin-bottom: 105px;
}
}
@media (max-width: 1304.98px) {
.subtitle {
margin-bottom: 71px;
}
}
.hide {
display: none;
}
.hide__xxl {
display: inline-flex;
}
@media (min-width: 1720px) {
.hide__xxl {
display: none;
}
}
@media (max-width: 991.98px) {
.hide__md {
display: none;
}
}
.show__xxl {
display: none;
}
@media (min-width: 1720px) {
.show__xxl {
display: block;
}
}
.show__md {
display: none;
}
@media (max-width: 991.98px) {
.show__md {
display: initial;
}
}
@media (min-width: 1440px) {
.br--xxl {
display: none;
}
}
@media (max-width: 991.98px) {
.br--md {
display: none;
}
}
@media (max-width: 767.98px) {
.br--sm {
display: none;
}
}
@media (min-width: 1440px) {
.is-container.wrapper_main {
max-width: initial;
}
}
.is-container.wrapper_main > .container {
position: relative;
left: 15px;
}
@media (min-width: 1720px) {
.is-container.wrapper_main > .container {
left: 17px;
}
}
@media (max-width: 767.98px) {
.is-container.wrapper_main > .container {
left: 0;
}
}

190
static/css/moover/use.css
View File

@@ -1,189 +1 @@
.use { .use{margin-bottom:123px}@media (min-width: 1720px){.use{margin-bottom:184px}}@media (max-width: 1304.98px){.use{margin-bottom:142px}}@media (max-width: 991.98px){.use{margin-bottom:121px}}.use__img{width:67.5%;margin-left:16px;margin-bottom:31px}@media (min-width: 1720px){.use__img{width:50.2%;margin-left:15px;margin-bottom:46px}}@media (max-width: 1304.98px){.use__img{width:77%;margin-left:10px;margin-bottom:34px}}@media (max-width: 991.98px){.use__img{margin-left:0;width:100%;margin-bottom:40px}}@media (max-width: 767.98px){.use__img{margin-bottom:30px}}.use__btn{margin-bottom:11px;text-align:center}@media (max-width: 767.98px){.use__btn{max-width:100%;padding-left:50px;padding-right:50px}}.use__link{font-size:18px;font-weight:600;line-height:26px;color:var(--color-grey2)}.use .title{max-width:80%;margin-bottom:49px}@media (min-width: 1720px){.use .title{max-width:40%}}@media (max-width: 991.98px){.use .title{margin-bottom:40px}}@media (max-width: 767.98px){.use .title{max-width:100%;margin-bottom:29px}}.use--lett{margin-bottom:120px}@media (min-width: 1720px){.use--lett{margin-bottom:126px}}@media (max-width: 1304.98px){.use--lett{margin-bottom:106px}}@media (max-width: 991.98px){.use--lett{margin-bottom:79px}}@media (max-width: 767.98px){.use--lett{margin-bottom:81px}}.use--lett .title{margin-bottom:51px}@media (max-width: 1304.98px){.use--lett .title{margin-bottom:39px}}@media (max-width: 767.98px){.use--lett .title{margin-bottom:0}}.use--lett .use__img{margin-left:-5px;margin-right:-5px;max-width:110%;width:1290px}@media (min-width: 1720px){.use--lett .use__img{width:initial}}@media (max-width: 1304.98px){.use--lett .use__img{margin-left:0;margin-right:0;max-width:100%;width:1120px}}@media (max-width: 767.98px){.use--lett .use__img{max-width:103%;margin-left:-5px;margin-top:-6px}}@media (max-width: 479.98px){.use--lett .use__img{margin-bottom:3px}}@media (max-width: 991.98px){.use .h3{max-width:75%;margin:0 auto 22px}}@media (max-width: 767.98px){.use .h3{max-width:100%;margin-bottom:16px}}
margin-bottom: 123px;
}
@media (min-width: 1720px) {
.use {
margin-bottom: 184px;
}
}
@media (max-width: 1304.98px) {
.use {
margin-bottom: 142px;
}
}
@media (max-width: 991.98px) {
.use {
margin-bottom: 121px;
}
}
.use__img {
width: 67.5%;
margin-left: 16px;
margin-bottom: 31px;
}
@media (min-width: 1720px) {
.use__img {
width: 50.2%;
margin-left: 15px;
margin-bottom: 46px;
}
}
@media (max-width: 1304.98px) {
.use__img {
width: 77%;
margin-left: 10px;
margin-bottom: 34px;
}
}
@media (max-width: 991.98px) {
.use__img {
margin-left: 0;
width: 100%;
margin-bottom: 40px;
}
}
@media (max-width: 767.98px) {
.use__img {
margin-bottom: 30px;
}
}
.use__btn {
margin-bottom: 11px;
text-align: center;
}
@media (max-width: 767.98px) {
.use__btn {
max-width: 100%;
padding-left: 50px;
padding-right: 50px;
}
}
.use__link {
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: var(--color-grey2);
}
.use .title {
max-width: 80%;
margin-bottom: 49px;
}
@media (min-width: 1720px) {
.use .title {
max-width: 40%;
}
}
@media (max-width: 991.98px) {
.use .title {
margin-bottom: 40px;
}
}
@media (max-width: 767.98px) {
.use .title {
max-width: 100%;
margin-bottom: 29px;
}
}
.use--lett {
margin-bottom: 120px;
}
@media (min-width: 1720px) {
.use--lett {
margin-bottom: 126px;
}
}
@media (max-width: 1304.98px) {
.use--lett {
margin-bottom: 106px;
}
}
@media (max-width: 991.98px) {
.use--lett {
margin-bottom: 79px;
}
}
@media (max-width: 767.98px) {
.use--lett {
margin-bottom: 81px;
}
}
.use--lett .title {
margin-bottom: 51px;
}
@media (max-width: 1304.98px) {
.use--lett .title {
margin-bottom: 39px;
}
}
@media (max-width: 767.98px) {
.use--lett .title {
margin-bottom: 0;
}
}
.use--lett .use__img {
margin-left: -5px;
margin-right: -5px;
max-width: 110%;
width: 1290px;
}
@media (min-width: 1720px) {
.use--lett .use__img {
width: initial;
}
}
@media (max-width: 1304.98px) {
.use--lett .use__img {
margin-left: 0;
margin-right: 0;
max-width: 100%;
width: 1120px;
}
}
@media (max-width: 767.98px) {
.use--lett .use__img {
max-width: 103%;
margin-left: -5px;
margin-top: -6px;
}
}
@media (max-width: 991.98px) {
.use .h3 {
max-width: 75%;
margin: 0 auto 22px;
}
}
@media (max-width: 767.98px) {
.use .h3 {
max-width: 100%;
margin-bottom: 16px;
}
}

BIN
static/img/png/mover/about-328.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 305 KiB

BIN
static/img/png/mover/benefits-328.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 558 KiB

BIN
static/img/png/mover/image1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
static/img/png/mover/image2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
static/img/png/mover/image3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
static/img/png/mover/image4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
static/img/png/mover/sore-328.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 165 KiB

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
static/img/png/mover/use-328.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 767 KiB

BIN
static/img/png/mover/use-letters-328.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 663 KiB

BIN
static/img/png/mover/use-letters-s1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

BIN
static/img/png/mover/use-letters-s2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 KiB

BIN
static/img/png/mover/use-letters-s3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 245 KiB

BIN
static/img/png/mover/use-letters-s4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 426 KiB

BIN
static/img/png/mover/use-letters-s5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 321 KiB

BIN
static/img/png/mover/use-letters-s6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 307 KiB

BIN
static/img/png/mover/use-letters-s7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 695 KiB

BIN
static/img/png/mover/use-letters-s8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

13
styles/moover/root.scss
View File

@@ -215,6 +215,13 @@ b {
display: none; display: none;
} }
} }
&__xs {
@media (max-width: 479.98px) {
display: none;
}
}
} }
.show { .show {
@@ -234,6 +241,12 @@ b {
display: initial; display: initial;
} }
} }
&__xs {
@media (min-width: 480px) {
display: none;
}
}
} }
.br { .br {

4
styles/moover/use.scss
View File

@@ -131,6 +131,10 @@
margin-left: -5px; margin-left: -5px;
margin-top: -6px; margin-top: -6px;
} }
@media (max-width: 479.98px) {
margin-bottom: 3px;
}
} }
} }

17
templates/blocks/n_header.html
View File

@@ -5,9 +5,9 @@
<header class="header"> <header class="header">
<div class="header__grid container"> <div class="header__grid container">
<div class="header__logo"> <div class="header__logo">
<a href="{% url 'main' %}"> {# <a href="{% url 'main' %}">#}
<img class="svg" src="/static/img/png/finlogo.png"> <img class="svg" src="/static/img/png/finlogo.png">
</a> {# </a>#}
</div> </div>
@@ -17,7 +17,7 @@
<a href="#benefits" class="header__link">{% trans "Преимущества" %}</a> <a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
</li> </li>
<li class="header__item"> <li class="header__item">
<a href="#rewiews" class="header__link">{% trans "Отзывы" %}</a> <a href="#chatterbox" class="header__link">{% trans "Отзывы" %}</a>
</li> </li>
<li class="header__item"> <li class="header__item">
<a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a> <a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
@@ -36,15 +36,12 @@
<div class="dropdown show__md"> <div class="dropdown show__md">
<img onclick="showMenu(this, event)" class="dropbtn" src="/static/img/svg/Menu.svg"> <img onclick="showMenu(this, event)" class="dropbtn" src="/static/img/svg/Menu.svg">
<div <div
onblur="hideMenu(event)"
class="dropdown-content" class="dropdown-content"
> >
<a href="#benefits" class="header__link">{% trans "Преимущества" %}</a> <a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
<a href="#rewiews" class="header__link">{% trans "Отзывы" %}</a> <a href="#chatterbox" class="header__link">{% trans "Отзывы" %}</a>
<a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a> <a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
<a href="#about" class="header__link">{% trans "О сервисе" %}</a> <a href="#about" class="header__link">{% trans "О сервисе" %}</a>
</div> </div>
</div> </div>
</div> </div>
@@ -71,4 +68,10 @@
$(document).ready(()=>{ $(document).ready(()=>{
initHeaderState(); initHeaderState();
}) })
$(document).off('click.hide-menu').on('click.hide-menu',(e)=>{
let el = e.target;
if (!el.closest('.dropdown')) {
$('.dropdown-content').removeClass('show');
}
})
</script> </script>

87
templates/pages/p_customer_landing_page.html
View File

@@ -165,18 +165,21 @@
<div class="subtitle"> <div class="subtitle">
{% translate "Чтобы разместить объявление - зарегистрируйтесь" %} {% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
</div> </div>
<a href="{% url "registration_page" %}" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a> <a href="{% url "registration_page" %}"
class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section> </section>
<section class="use"> <section class="use">
<div class="title">{% translate "Уже пользуются сайтом и находят посылки для перевозок" %}</div> <div class="title">{% translate "Уже пользуются сайтом и находят посылки для перевозок" %}</div>
<picture class="img"> <a href="{% url "registration_page" %}">
<source srcset="{% static "img/png/customer/use-1720.png" %}" media="(min-width: 1720px)"/> <picture >
<source srcset="{% static "img/png/customer/use-1280.png" %}" media="(min-width: 1304px)"/> <source srcset="{% static "img/png/customer/use-1720.png" %}" media="(min-width: 1720px)"/>
<source srcset="{% static "img/png/customer/use-1120.png" %}" media="(min-width: 1280px)"/> <source srcset="{% static "img/png/customer/use-1280.png" %}" media="(min-width: 1304px)"/>
<source srcset="{% static "img/png/customer/use-640.png" %}" media="(min-width: 768px)"/> <source srcset="{% static "img/png/customer/use-1120.png" %}" media="(min-width: 1280px)"/>
<img src="{% static "img/png/customer/use-328.png" %}" alt="list users" class="use__img"> <source srcset="{% static "img/png/customer/use-640.png" %}" media="(min-width: 768px)"/>
</picture> <img src="{% static "img/png/customer/use-328.png" %}" alt="list users" class="use__img">
</picture>
</a>
<div class="h3"> <div class="h3">
{% translate "Хотите перевезти посылку и окупить стоимость дороги, топлива?" %} {% translate "Хотите перевезти посылку и окупить стоимость дороги, топлива?" %}
</div> </div>
@@ -228,7 +231,7 @@
</div> </div>
</section> </section>
<section class="chatterbox"> <section class="chatterbox" id="chatterbox">
<div class="title">{% translate "Что о нас говорят люди" %}</div> <div class="title">{% translate "Что о нас говорят люди" %}</div>
<div class="chatterbox__slider slick-slider"> <div class="chatterbox__slider slick-slider">
{% for media_item in page.get_media_items %} {% for media_item in page.get_media_items %}
@@ -307,15 +310,66 @@
</script> </script>
</section> </section>
<section class="use use--lett" id="rewiews"> <section class="use use--lett" id="rewiews">
<div class="title">{% translate "Что о нас пишут люди" %}</div> <div class="title">{% translate "Что о нас пишут люди" %}</div>
<picture> <picture class="hide__xs">
<source srcset="{% static "img/png/mover/use-letters-1739.png" %}" media="(min-width: 1720px)"/> <source srcset="{% static "img/png/mover/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
<source srcset="{% static "img/png/mover/use-letters-1280.png" %}" media="(min-width: 1304px)"/> <source srcset="{% static "img/png/mover/use-letters-1280.png" %}" media="(min-width: 1304px)"/>
<source srcset="{% static "img/png/mover/use-letters-1120.png" %}" media="(min-width: 1280px)"/> <source srcset="{% static "img/png/mover/use-letters-1120.png" %}" media="(min-width: 1280px)"/>
<source srcset="{% static "img/png/mover/use-letters-640.png" %}" media="(min-width: 768px)"/> <source srcset="{% static "img/png/mover/use-letters-640.png" %}" media="(min-width: 768px)"/>
<img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters" class="use__img"> <img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters"
class="use__img">
</picture> </picture>
<div class="show__xs">
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s1.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s2.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s3.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s4.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s5.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s6.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s7.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s8.png" %}" alt="list letters"
class="use__img">
</picture>
</div>
</section> </section>
<section class="animate left"> <section class="animate left">
@@ -325,7 +379,8 @@
<div class="subtitle"> <div class="subtitle">
{% translate "Зарегистрируйся на&nbsp;<a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и&nbsp;получи отклики от&nbsp;людей с&nbsp;посылками" %} {% translate "Зарегистрируйся на&nbsp;<a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и&nbsp;получи отклики от&nbsp;людей с&nbsp;посылками" %}
</div> </div>
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a> <a href="{% url "registration_page" %}"
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const animate = document.querySelectorAll('.animate'); const animate = document.querySelectorAll('.animate');
@@ -407,7 +462,8 @@
<div class="title"> <div class="title">
{% translate "Размести свое объявление какую посылку ты можешь перевезти прямо сейчас " %} {% translate "Размести свое объявление какую посылку ты можешь перевезти прямо сейчас " %}
</div> </div>
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a> <a href="{% url "registration_page" %}"
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section> </section>
<section class="sore"> <section class="sore">
@@ -427,7 +483,8 @@
<div class="h3"> <div class="h3">
{% translate "Зарегистрируйся бесплатно прямо сейчас и начни размещать объявления о перевозки посылки" %} {% translate "Зарегистрируйся бесплатно прямо сейчас и начни размещать объявления о перевозки посылки" %}
</div> </div>
<a href="{% url "registration_page" %}" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a> <a href="{% url "registration_page" %}"
class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
<br/> <br/>
</div> </div>
</section> </section>

94
templates/pages/p_mover_landing_page.html
View File

@@ -45,7 +45,7 @@
<div class="cards__list"> <div class="cards__list">
<div class="cards__item"> <div class="cards__item">
<div class="cards__arrow"></div> <div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/mover/image1.webp" %}" alt="img1"/> <img class="cards__img" src="{% static "img/png/mover/image1.png" %}" alt="img1"/>
<p class="cards__desc"> <p class="cards__desc">
{% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl br--sm'/> цена доставки почтовых<br class='br--sm'/>" %} {% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl br--sm'/> цена доставки почтовых<br class='br--sm'/>" %}
{% translate "сервисов и она устала искать в<br class='br--xxl br--sm'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %} {% translate "сервисов и она устала искать в<br class='br--xxl br--sm'/> чатах тех, кто сможет перевезти<br class='br--xxl br--md'/> посылку." %}
@@ -53,7 +53,7 @@
</div> </div>
<div class="cards__item"> <div class="cards__item">
<div class="cards__arrow"></div> <div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/mover/image2.webp" %}" alt="img1"/> <img class="cards__img" src="{% static "img/png/mover/image2.png" %}" alt="img1"/>
<p class="cards__desc"> <p class="cards__desc">
{% translate "Мария, узнаёт о нашем сервисе<br class='br--sm'/>" %} {% translate "Мария, узнаёт о нашем сервисе<br class='br--sm'/>" %}
@@ -63,13 +63,13 @@
</div> </div>
<div class="cards__item"> <div class="cards__item">
<div class="cards__arrow"></div> <div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/mover/image3.webp" %}" alt="img1"/> <img class="cards__img" src="{% static "img/png/mover/image3.png" %}" alt="img1"/>
<p class="cards__desc"> <p class="cards__desc">
{% translate "Попутчик Егор увидел<br class='br--xxl br--sm'/> объявление Марии, нажал<br class='br--xxl br--sm'/> откликнуться и получил<br class='br--sm'/> возможность связаться с ней,<br class='br--xxl br--sm'/> удобным для него способом." %} {% translate "Попутчик Егор увидел<br class='br--xxl br--sm'/> объявление Марии, нажал<br class='br--xxl br--sm'/> откликнуться и получил<br class='br--sm'/> возможность связаться с ней,<br class='br--xxl br--sm'/> удобным для него способом." %}
</p> </p>
</div> </div>
<div class="cards__item"> <div class="cards__item">
<img class="cards__img" src="{% static "img/webp/mover/image4.webp" %}" alt="img1"/> <img class="cards__img" src="{% static "img/png/mover/image4.png" %}" alt="img1"/>
<p class="cards__desc"> <p class="cards__desc">
{% translate "Мария и Егор обговорили детали<br class='br--sm'/> доставки и потом встретились в<br class='br--sm'/> удобном для всех месте. После<br class='br--xxl br--sm'/> чего Мария передала посылку<br class='br--xxl br--sm'/> Егору и он её доставил." %} {% translate "Мария и Егор обговорили детали<br class='br--sm'/> доставки и потом встретились в<br class='br--sm'/> удобном для всех месте. После<br class='br--xxl br--sm'/> чего Мария передала посылку<br class='br--xxl br--sm'/> Егору и он её доставил." %}
</p> </p>
@@ -166,17 +166,21 @@
<div class="subtitle"> <div class="subtitle">
{% translate "Чтобы разместить объявление - зарегистрируйтесь" %} {% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
</div> </div>
<a href="{% url "registration_page" %}" class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a> <a href="{% url "registration_page" %}"
class="easy__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section> </section>
<section class="use"> <section class="use">
<div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div> <div class="title">{% translate "Уже пользуются сайтом и находят перевозчиков" %}</div>
<picture class="img"> <a href="{% url "registration_page" %}">
<source srcset="{% static "img/png/mover/use-1720.png" %}" media="(min-width: 1720px)"/> <picture>
<source srcset="{% static "img/png/mover/use-1280.png" %}" media="(min-width: 1304px)"/> <source srcset="{% static "img/png/mover/use-1720.png" %}" media="(min-width: 1720px)"/>
<source srcset="{% static "img/png/mover/use-1120.png" %}" media="(min-width: 1280px)"/> <source srcset="{% static "img/png/mover/use-1280.png" %}" media="(min-width: 1304px)"/>
<source srcset="{% static "img/png/mover/use-640.png" %}" media="(min-width: 768px)"/> <source srcset="{% static "img/png/mover/use-1120.png" %}" media="(min-width: 1280px)"/>
<img src="{% static "img/png/mover/use-328.png" %}" alt="list users" class="use__img"> <source srcset="{% static "img/png/mover/use-640.png" %}" media="(min-width: 768px)"/>
</picture> <img src="{% static "img/png/mover/use-328.png" %}" alt="list users" class="use__img">
</picture>
</a>
<div class="h3"> <div class="h3">
{% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %} {% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
</div> </div>
@@ -241,7 +245,7 @@
</div> </div>
</div> </div>
</section> </section>
<section class="chatterbox"> <section class="chatterbox" id="chatterbox">
<div class="title">{% translate "Что о нас говорят люди" %}</div> <div class="title">{% translate "Что о нас говорят люди" %}</div>
<div class="chatterbox__slider slick-slider"> <div class="chatterbox__slider slick-slider">
{% for media_item in page.get_media_items %} {% for media_item in page.get_media_items %}
@@ -321,13 +325,64 @@
</section> </section>
<section class="use use--lett" id="rewiews"> <section class="use use--lett" id="rewiews">
<div class="title">{% translate "Что о нас пишут люди" %}</div> <div class="title">{% translate "Что о нас пишут люди" %}</div>
<picture> <picture class="hide__xs">
<source srcset="{% static "img/png/mover/use-letters-1739.png" %}" media="(min-width: 1720px)"/> <source srcset="{% static "img/png/mover/use-letters-1739.png" %}" media="(min-width: 1720px)"/>
<source srcset="{% static "img/png/mover/use-letters-1280.png" %}" media="(min-width: 1304px)"/> <source srcset="{% static "img/png/mover/use-letters-1280.png" %}" media="(min-width: 1304px)"/>
<source srcset="{% static "img/png/mover/use-letters-1120.png" %}" media="(min-width: 1280px)"/> <source srcset="{% static "img/png/mover/use-letters-1120.png" %}" media="(min-width: 1280px)"/>
<source srcset="{% static "img/png/mover/use-letters-640.png" %}" media="(min-width: 768px)"/> <source srcset="{% static "img/png/mover/use-letters-640.png" %}" media="(min-width: 768px)"/>
<img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters" class="use__img"> <img src="{% static "img/png/mover/use-letters-328.png" %}" alt="list letters"
class="use__img">
</picture> </picture>
<div class="show__xs">
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s1.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s2.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s3.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s4.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s5.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s6.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s7.png" %}" alt="list letters"
class="use__img">
</picture>
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
media="(min-width: 480px)"/>
<img src="{% static "img/png/mover/use-letters-s8.png" %}" alt="list letters"
class="use__img">
</picture>
</div>
</section> </section>
<section class="animate left"> <section class="animate left">
<div class="title"> <div class="title">
@@ -336,7 +391,8 @@
<div class="subtitle"> <div class="subtitle">
{% translate "Зарегистрируйся на <a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и получи запросы на перевозку твоей посылки" %} {% translate "Зарегистрируйся на <a href='#' class='animate__link'>Trip With Bonus</a> прямо сейчас, размести бесплатно объявление и получи запросы на перевозку твоей посылки" %}
</div> </div>
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a> <a href="{% url "registration_page" %}"
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const animate = document.querySelectorAll('.animate'); const animate = document.querySelectorAll('.animate');
@@ -475,7 +531,8 @@
<div class="subtitle"> <div class="subtitle">
{% translate "Достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %} {% translate "Достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %}
</div> </div>
<a href="{% url "registration_page" %}" class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a> <a href="{% url "registration_page" %}"
class="use__btn btn btn--primary">{% translate "Разместить объявление" %}</a>
</section> </section>
<section class="sore"> <section class="sore">
<div class="title"> <div class="title">
@@ -494,7 +551,8 @@
<div class="h3"> <div class="h3">
{% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %} {% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %}
</div> </div>
<a href="{% url "registration_page" %}" class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a> <a href="{% url "registration_page" %}"
class="sore__btn btn btn--primary">{% translate "Зарегистрироваться и разместить" %}</a>
<br/> <br/>
</div> </div>
</section> </section>