diff --git a/static/css/styles.css b/static/css/styles.css index 55c32bf..9f2a6f3 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -2027,6 +2027,290 @@ button#send_feedback_form{ padding-top: 40px; } + +/*tabs_on_main_page*/ + .tabs { + font-size: 0; + margin-left: auto; + margin-right: auto; + text-align: center; + } + + .tabs>input[type="radio"] { + display: none; + } + + .tabs>div + + { + /* скрыть контент по умолчанию */ + display: none; + font-size: 16px; + } + + /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */ + #tab-btn-1:checked~#content-1, + #tab-btn-2:checked~#content-2 + { + display: block; + } + + .tabs>label { + display: inline-block; + text-align: center; + vertical-align: middle; + user-select: none; + background-color: white; + font-size: 16px; + line-height: 1.5; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; + cursor: pointer; + position: relative; + top: 1px; + padding: 10px; + border-radius: 10px; + margin-bottom: 30px; + } + .tabs>div>#title_static{ + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 36px; + } + + .tabs>label:not(:first-of-type) { + border-left: none; + } + + .tabs>input[type="radio"]:checked+label { + + border-radius: 10px; + background: #FF613A; + color: white; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 22px; + padding: 10px; + + } + +/*tabs_on_main_page*/ + +.pre_bottom_block_static{ + width: 90%; + margin: auto; +} + +.cards_wrapper{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + + +.cards_item_1{ + width: 630px; + height: 322px; + border-radius: 10px; + background: #272424; + + /* Shadow 1 */ + box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20); + margin: 10px; +} +.cards_item_1_left, +.cards_item_2_left, +.cards_item_3_left, +.cards_item_4_left{ + width: 55%; + float: left; +} + + + +.cards_item_1_right{ + float: right; + + border-radius: 10px; + background: url(/static/img/png/cards_item_1.png), lightgray 0px -24.489px / 100.69% 113.347% no-repeat; + width: 279px; + height: 322px; + +} + +.cards_item_2{ + width: 630px; + height: 322px; + border-radius: 10px; + background: #FFF; + + /* Shadow 1 */ + box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20); + margin: 10px; + +} + +.cards_item_2_left>div, +.cards_item_3_left>div{ + color: black; +} + +.cards_item_2_right{ + float: right; + border-radius: 10px; + background: url(/static/img/png/cards_item_2.png), lightgray 50% / cover no-repeat; + width: 279px; + height: 322px; + +} +.card_gradient{ + + border-radius: 10px; + background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); + width: 100px; + height: 322px; + +} +.card_gradient_black{ + border-radius: 10px; + background: linear-gradient(90deg, #272424 0%, rgba(39, 36, 36, 0.00) 100%); + width: 100px; + height: 322px; +} + + +.cards_item_3{ + width: 630px; + height: 322px; + border-radius: 10px; + background: #FFF; + box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20); + margin: 10px; + +} + +.cards_item_3_right{ + float: right; + border-radius: 10px; + background: url(/static/img/png/cards_item_3.png), lightgray 50% / cover no-repeat; + width: 279px; + height: 322px; + +} + + + +.cards_item_4{ + width: 630px; + height: 322px; + border-radius: 10px; + background: #272424; + + /* Shadow 1 */ + box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20); + margin: 10px; + +} +.cards_item_4_right{ + float: right; + border-radius: 10px; + background: url(/static/img/png/cards_item_4.png), lightgray 50% / cover no-repeat; + width: 279px; + height: 322px; + +} + + +.card_title_1{ + color: #FFF; + font-size: 44px; + font-style: normal; + font-weight: 700; + line-height: 52px; /* 118.182% */ + margin: 104px 0 0 20px; +} +.card_title_2{ + color: #FFF; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 36px; /* 150% */ + margin: 15px 0 0 20px; +} +.card_title_3{ + color: #FFF; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 22px; + margin: 20px 0 0 20px; + width: 80%; +} + +/*faq_main_page*/ + +.faq_main_page { + display: flex; + flex-direction: column; + align-items: center; +} + + +details{ + display: block; + background: #fff; + width: 87%; + box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + border-radius: 8px; + overflow: hidden; + margin-bottom: 1.5rem; + margin-right: 22px; +} + + +summary::-webkit-details-marker{display:none;} +summary::-moz-list-bullet{list-style-type:none;} +summary::marker{display:none;} +summary { + display: block; + padding: 0.3em 1em 0.3em 0.9em; + font-size: 1.4em; + cursor: pointer; + position: relative; + margin: 10px 0 10px 0px; +} +summary:before { + top: .4em; + right: .3em; + color: transparent; + background: url(/static/img/svg/icon_cross.svg) no-repeat 50% 50% / 1em 1em; + width: 1em; + height: 1em; + content: ""; + position: absolute; + transition: transform .5s; +} +details[open] > summary:before { + transform: scale(1,-1); +} +summary ~ * { + padding: 0 1em 10px 1.4em; +} +details[open] summary ~ *{ + animation: sweep .5s ease-in-out; +} +@keyframes sweep { + 0% {opacity: 0;} + 100% {opacity: 1;} +} +summary:focus { + outline:0; + box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); +} + +/*END faq_main_page*/ + /*end_static_pages*/ diff --git a/static/img/png/cards_item_1.png b/static/img/png/cards_item_1.png new file mode 100644 index 0000000..082b522 Binary files /dev/null and b/static/img/png/cards_item_1.png differ diff --git a/static/img/png/cards_item_2.png b/static/img/png/cards_item_2.png new file mode 100644 index 0000000..c052870 Binary files /dev/null and b/static/img/png/cards_item_2.png differ diff --git a/static/img/png/cards_item_3.png b/static/img/png/cards_item_3.png new file mode 100644 index 0000000..cce00d6 Binary files /dev/null and b/static/img/png/cards_item_3.png differ diff --git a/static/img/png/cards_item_4.png b/static/img/png/cards_item_4.png new file mode 100644 index 0000000..083190a Binary files /dev/null and b/static/img/png/cards_item_4.png differ diff --git a/static/img/svg/icon_cross.svg b/static/img/svg/icon_cross.svg new file mode 100644 index 0000000..ac04099 --- /dev/null +++ b/static/img/svg/icon_cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/svg/icon_cross_2.svg b/static/img/svg/icon_cross_2.svg new file mode 100644 index 0000000..ea52df4 --- /dev/null +++ b/static/img/svg/icon_cross_2.svg @@ -0,0 +1,3 @@ + + + diff --git a/templates/pages/p_main.html b/templates/pages/p_main.html index 4c5152a..efeb1ac 100644 --- a/templates/pages/p_main.html +++ b/templates/pages/p_main.html @@ -12,12 +12,12 @@
-
-

{% translate "Отправляй" %}

- {% translate "посылку" %} -

{% translate "в любую точку мира" %}

-

!

-
+
+

{% translate "Отправляй" %}

+ {% translate "посылку" %} +

{% translate "в любую точку мира" %}

+

!

+

{% translate "Сервис, который позволяет передавать посылки с путешественниками" %} @@ -25,37 +25,33 @@

-
-
-
+
+
+
- - -
-
- - + + +
+
+ + +
+ + + + + +
- - - - - - - -
{% include "blocks/b_find_route_form.html" %}
- -
-

{% translate "О сервисе Trip With Bonus" %}

@@ -67,8 +63,66 @@ +
-

{% translate "Вам нужно отправить посылку быстро и недорого?" %}

+ + + + + + + + +
+

{% translate "Вам нужно отправить посылку быстро и недорого?" %}

+
+ +
+ +
+ + + +
+ +
+ + + +
+ +
+ +
+ +
+
+ +

{% translate "Найдите перевозчика" %}

+ + {% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска перевозчика." %} +
+ +
+

{% translate "Свяжитесь с перевозчиком" %}

+ {% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки" %} + +
+ +
+

{% translate "Передайте посылку" %}

+ + {% translate "Встречайтесь, знакомьтесь и передавайте посылку" %} + +
+ +
+
+ +
+
+
+

{% translate "Вам нужно отправить посылку быстро и недорого?" %}

@@ -91,134 +145,114 @@
- {% if page.url == 'for_customers' %} -

{% translate "Найдите перевозчика" %}

- {% endif %} - {% if page.url == 'for_movers' %} + +

{% translate "Разместите объявление" %}

- {% endif %} - {% if page.url == 'for_customers' %} - {% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска перевозчика." %} - {% endif %} - - {% if page.url == 'for_movers' %} {% translate "Укажите откуда, куда хотите перевезти посылку, а также Вашу дату отправки и прибытия. При желании Вы можете указать дополнительные параметры: тип, вес, вид перевозки и т.д" %} - {% endif %} +

{% translate "Свяжитесь с перевозчиком" %}

- {% if page.url == 'for_customers' %} - {% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки" %} - {% endif %} - {% if page.url == 'for_movers' %} + + {% translate "В отобразившемся списке выберите подходящего отправителя и посылку, откройте контакты и свяжитесь удобным способом. Если не нашли подходящего отправителя с посылкой, разместите объявление о возможности перевезти посылку и отправители Вас сами найдут" %} - {% endif %} +

{% translate "Передайте посылку" %}

- {% if page.url == 'for_customers' %} - {% translate "Встречайтесь, знакомьтесь и передавайте посылку" %} - {% endif %} - {% if page.url == 'for_movers' %} - {% translate "Обсудите с отправителем все условия: время, место и прочие детали. Готово! Доставьте посылку из пункта А в пункт Б и получите благодарность отправителя!" %} - {% endif %} + {% translate "Обсудите с отправителем все условия: время, место и прочие детали. Готово! Доставьте посылку из пункта А в пункт Б и получите благодарность отправителя!" %} +
+
+ +
+
- +
+
+

{% translate "Trip With Bonus это комфорт и эффективность!" %}

- -
- {% if page.url == 'for_customers' %} - - {% endif %} - {% if page.url == 'for_movers' %} - - {% endif %} -
-
-

{% translate "Тарифы" %}

- -
- {% for subscribe in subscribes %} -
-
-
- {{ subscribe.name }} -
-
- {% if subscribe.price %} - {{ subscribe.price|floatformat }}$ - {% else %} - Бесплатно - {% endif %} -
-
- Период: {{ subscribe.period_name }} -
+
+
+
+
{% translate "+5%" %}
+
{% translate "рост путешествий ежегодно" %}
+
{% translate "В среднем на 5% растёт количество путешествий ежегодно. Просто путешествуй и получай бонусы." %}
-
-
- Опции: -
-
-
    - {% for opt in subscribe.options.all %} -
  • {{ opt.name }}
    • - {% endfor %} - {% for opt_dis in subscribe.disabled_options %} -
  • {{ opt_dis.name }}
    • - {% endfor %} - -
-
+
+
+
+
+
{% translate "в 3 раза" %}
+
{% translate "быстрее других сервисов" %}
+
{% translate "Почтовые сервисы доставляет посылки в среднем за 10 дней. 
С нами - быстрее!" %}
-
- +
+
- {% endfor %} -
+
+
+
{% translate "+142" %}
+
{% translate "заявки ежедневно" %}
+
{% translate "На перевозку или отправку посылок в разные уголки мира" %}
+
+
+
+ +
+
+
+
+
{% translate "30+" %}
+
{% translate "стран" %}
+
{% translate "С TWB отправляй посылки по всему миру! С нами нет границ!" %}
+
+
+
+
+
+
-
-
-

{% translate "Оформи" %}

- {% translate "подписку" %} -

{% translate "сейчас и получи" %}

-
+
+

{% translate "Частые вопросы" %}

-
- {% translate "1 день" %} -

{% translate "пользования сервисом" %}

- {% translate "в подарок" %} -

!

-
+
+ {% translate "Как пользоваться сервисом?" %} +

Скандинавская мифология — мифология древних скандинавов, часть древнегерманской мифологии.

+
+
+ {% translate "Как разместить объявление о посылке/перевозке?" %} +

Скандинавская мифология — мифология древних скандинавов, часть древнегерманской мифологии.
+ Основным источником сведений о ней являются тексты поэтической «Старшей Эдды» и прозаической «Младшей Эдды» С. Стурлусона XII века н. э.
+ Примерно в то же время датский хронист Саксон Грамматик в «Деяниях датчан» передаёт многие мифологические сюжеты. Ценные сведения о
древнегерманской мифологии имеются в «Германии» Тацита.

+
+
+ {% translate "Как оплатить лицензию?" %} +

{% translate "Однозначно, явные признаки победы институционализации ограничены исключительно образом мышления. Следует отметить, что новая модель организационной деятельности обеспечивает широкому кругу (специалистов) участие в формировании как самодостаточных, так и внешне зависимых концептуальных решений. " %}

+
+
+
+

{% translate "Последние новости" %}

-
- -
- - - - -