0.0.178 media 320px v.1

This commit is contained in:
2023-10-23 19:34:16 +03:00
parent 906856b01b
commit e07cf3f9d6
3 changed files with 105 additions and 110 deletions

View File

@@ -1954,14 +1954,19 @@ button#more_button{
}
.benefit_title_item>h3{
font-size: 24px;
.benefit_img_item>h3{
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 36px;
text-align: center;
}
.benefit_img_item>span{
text-align: center;
margin-bottom: 10px;
}
.benefit_img_about_service>figure{
display: flex;
width: 197px;
@@ -2068,15 +2073,10 @@ button#more_button{
}
.benefit_img_item{
width: 20%;
max-width: 360px;
}
.benefit_title_item>span{
text-align: center;
margin-bottom: 10px;
width: 340px;
display: block;
}
.map_wrapper{
position: relative;
@@ -2295,7 +2295,9 @@ button#send_feedback_form{
width: 48%;
height: 322px;
border-radius: 10px;
background: #272424;
background: url(/static/img/png/cards_item_1.png) #242223 50%;
background-repeat: no-repeat;
background-position: right;
/* Shadow 1 */
box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20);
@@ -2315,7 +2317,7 @@ button#send_feedback_form{
float: right;
border-radius: 10px;
background: url(/static/img/png/cards_item_1.png), lightgray 0px -24.489px / 100.69% 113.347% no-repeat;
/*background: url(/static/img/png/cards_item_1.png), lightgray 0px -24.489px / 100.69% 113.347% no-repeat;*/
width: 45%;
height: 322px;
@@ -2356,7 +2358,7 @@ button#send_feedback_form{
}
.card_gradient_black{
border-radius: 10px;
background: linear-gradient(90deg, #272424 0%, rgba(39, 36, 36, 0.00) 100%);
background: linear-gradient(90deg, #242223 0%, rgba(39, 36, 36, 0.00) 100%);
width: 100px;
height: 322px;
}
@@ -2681,6 +2683,54 @@ details[open] summary ~ *{
/*END news articles all*/
/*media breakpoints*/
@media (max-width: 320px) {
.header_big_background {
max-width: 100%;
}
#sub_title_static>p{
white-space: normal;
}
.top_block_static{
padding: 0;
}
.mid_block_static{
padding: 0;
}
.wrapper_tab_button{
width: 55%;
}
.benefit_img{
flex-wrap: wrap;
}
.tab-btn-2{
margin: 0 0 5px 0;
}
button#more_button{
width: 100%;
}
#title_static{
font-size: 34px;
}
.cards_item_1,
.cards_item_2,
.cards_item_3,
.cards_item_4
{
width: 100%;
height: 180px;
background-size:60%;
}
}
@media (max-width: 992px) {
.benefit_img>img{
display: none;
}
}
/*END media breakpoints*/

View File

@@ -22,25 +22,6 @@
</p>
</span>
{# <div class="wrapper_switch">#}
{# <div class="switch">#}
{# <div class="form_radio_btn">#}
{##}
{# <input class="{% if account_type == "mover" %}active {% else %} deactive{% endif %}" id="radio-1" type="radio" name="account_type" value="mover" >#}
{# <label for="radio-1">{% translate "Автоперевозки" %}</label>#}
{# </div>#}
{# <div class="form_radio_btn">#}
{# <input class="{% if account_type == "sender" %}active {% else %} deactive{% endif %}" id="radio-2" type="radio" name="account_type" value="sender" checked>#}
{# <label for="radio-2">{% translate "Авиаперевозки" %}</label>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <img src="/static/img/png/Box1.png" alt="">#}
{# <img src="/static/img/png/Box2.png" alt="">#}
{# <img src="/static/img/png/Box3.png" alt="">#}
{# <img src="/static/img/png/Box4.png" alt="">#}
</div>
</div>
@@ -95,106 +76,69 @@
<h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
<div class="benefit_img">
<div class="benefit_img_item">
<img src="/static/img/svg/Find_carrier.svg" alt="">
<h3>{% translate "Найдите перевозчика" %}</h3>
<span>{% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска перевозчика." %}</span>
</div>
<img src="/static/img/svg/Arrow_direction.svg" alt="">
<div class="benefit_img_item">
<img src="/static/img/svg/Contact_carrier.svg" alt="">
<h3>{% translate "Свяжитесь с перевозчиком" %}</h3>
<span>{% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки" %}</span>
</div>
<img src="/static/img/svg/Arrow_direction.svg" alt="">
<div class="benefit_img_item">
<img src="/static/img/svg/Pass_package.svg" alt="">
<h3>{% translate "Передайте посылку" %}</h3>
<span>{% translate "Встречайтесь, знакомьтесь и передавайте посылку" %}</span>
</div>
</div>
<div class="button_container">
<button id="more_button">{% translate "Отправить посылку" %}</button>
</div>
</div>
<div id="content-2">
<h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
<div class="benefit_img">
<div class="benefit_img_item">
<img src="/static/img/svg/Find_carrier.svg" alt="">
<h3>{% translate "Разместите объявление" %}</h3>
<span>{% translate "Укажите откуда, куда хотите перевезти посылку, а также Вашу дату отправки и прибытия. При желании Вы можете указать дополнительные параметры: тип, вес, вид перевозки и т.д" %}</span>
</div>
<img src="/static/img/svg/Arrow_direction.svg" alt="">
<div class="benefit_img_item">
<img src="/static/img/svg/Contact_carrier.svg" alt="">
<h3>{% translate "Свяжитесь с перевозчиком" %}</h3>
<span>{% translate "В отобразившемся списке выберите подходящего отправителя и посылку, откройте контакты и свяжитесь удобным способом. Если не нашли подходящего отправителя с посылкой, разместите объявление о возможности перевезти посылку и отправители Вас сами найдут" %}</span>
</div>
<img src="/static/img/svg/Arrow_direction.svg" alt="">
<div class="benefit_img_item">
<img src="/static/img/svg/Pass_package.svg" alt="">
</div>
</div>
<div class="benefit_title">
<div class="benefit_title_item">
<h3>{% translate "Найдите перевозчика" %}</h3>
<span>{% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска перевозчика." %}</span>
</div>
<div class="benefit_title_item">
<h3>{% translate "Свяжитесь с перевозчиком" %}</h3>
<span>{% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки" %}</span>
</div>
<div class="benefit_title_item">
<h3>{% translate "Передайте посылку" %}</h3>
<span>{% translate "Встречайтесь, знакомьтесь и передавайте посылку" %}</span>
<span>{% translate "Обсудите с отправителем все условия: время, место и прочие детали. Готово! Доставьте посылку из пункта А в пункт Б и получите благодарность отправителя!" %}</span>
</div>
</div>
<div class="button_container">
<button id="more_button">{% translate "Отправить посылку" %}</button>
<button id="more_button">{% translate "Перевезти посылку" %}</button>
</div>
</div>
<div id="content-2">
<h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
<div class="benefit_img">
<div class="benefit_img_item">
<img src="/static/img/svg/Find_carrier.svg" alt="">
</div>
<img src="/static/img/svg/Arrow_direction.svg" alt="">
<div class="benefit_img_item">
<img src="/static/img/svg/Contact_carrier.svg" alt="">
</div>
<img src="/static/img/svg/Arrow_direction.svg" alt="">
<div class="benefit_img_item">
<img src="/static/img/svg/Pass_package.svg" alt="">
</div>
</div>
<div class="benefit_title">
<div class="benefit_title_item">
<h3>{% translate "Разместите объявление" %}</h3>
<span>{% translate "Укажите откуда, куда хотите перевезти посылку, а также Вашу дату отправки и прибытия. При желании Вы можете указать дополнительные параметры: тип, вес, вид перевозки и т.д" %}</span>
</div>
<div class="benefit_title_item">
<h3>{% translate "Свяжитесь с перевозчиком" %}</h3>
<span>{% translate "В отобразившемся списке выберите подходящего отправителя и посылку, откройте контакты и свяжитесь удобным способом. Если не нашли подходящего отправителя с посылкой, разместите объявление о возможности перевезти посылку и отправители Вас сами найдут" %}</span>
</div>
<div class="benefit_title_item">
<h3>{% translate "Передайте посылку" %}</h3>
<span>{% translate "Обсудите с отправителем все условия: время, место и прочие детали. Готово! Доставьте посылку из пункта А в пункт Б и получите благодарность отправителя!" %}</span>
</div>
</div>
<div class="button_container">
<button id="more_button">{% translate "Перевезти посылку" %}</button>
</div>
</div>
</div>

View File

@@ -5,6 +5,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>