0.1.335 upd cards_wrapper on main page

This commit is contained in:
2024-01-12 17:41:48 +03:00
parent ad909b98bf
commit f75e94f706
3 changed files with 125 additions and 72 deletions

View File

@@ -71,41 +71,41 @@
left: 33%; left: 33%;
} }
.cards_item_1, /* .cards_item_1,*/
.cards_item_2, /*.cards_item_2,*/
.cards_item_3, /*.cards_item_3,*/
.cards_item_4 /*.cards_item_4*/
{ /*{*/
width: 46%; /* width: 46%;*/
height: 180px; /* height: 180px;*/
background-size:60%; /* background-size:60%;*/
} /*}*/
.card_title_1{ /* .card_title_1{*/
font-size: 34px; /* font-size: 34px;*/
font-style: normal; /* font-style: normal;*/
font-weight: 700; /* font-weight: 700;*/
line-height: 42px; /* line-height: 42px;*/
margin: 22px 0 0 10px; /* margin: 22px 0 0 10px;*/
text-shadow: 1px 1px 0px #272424; /* text-shadow: 1px 1px 0px #272424;*/
} /*}*/
.card_title_2{ /*.card_title_2{*/
font-size: 17px; /* font-size: 17px;*/
font-style: normal; /* font-style: normal;*/
font-weight: 600; /* font-weight: 600;*/
line-height: 26px; /* line-height: 26px;*/
margin: 10px 0 0 10px; /* margin: 10px 0 0 10px;*/
text-shadow: 1px 1px 0px #272424; /* text-shadow: 1px 1px 0px #272424;*/
} /*}*/
.card_title_3{ /*.card_title_3{*/
margin: 10px 0 0 10px; /* margin: 10px 0 0 10px;*/
width: 95%; /* width: 95%;*/
font-size: 12px; /* font-size: 12px;*/
font-style: normal; /* font-style: normal;*/
font-weight: 400; /* font-weight: 400;*/
line-height: 20px; /* line-height: 20px;*/
text-shadow: 1px 1px 0px #272424; /* text-shadow: 1px 1px 0px #272424;*/
} /*}*/
.sf_1_column { .sf_1_column {
padding-left: 25px; padding-left: 25px;
padding-right: 90px; padding-right: 90px;

View File

@@ -780,7 +780,7 @@ span.btn_profile_name {
/*height: 60px;*/ /*height: 60px;*/
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
width: 100%; width: 80%;
margin-top: 10px; margin-top: 10px;
display: inline-block; display: inline-block;
@@ -2652,18 +2652,36 @@ button#send_feedback_form:active{
} }
.cards_wrapper{ .cards_wrapper{
display: flex; /*display: flex;*/
flex-direction: row; /*flex-direction: row;*/
flex-wrap: wrap; /*flex-wrap: wrap;*/
justify-content: center; /*justify-content: center;*/
display: inline-block;
}
.cards_item_1, .cards_item_3{
float: left;
}
.cards_item_2, .cards_item_4{
float: right;
}
.cards_item_1>.cards_item_img>img, .cards_item_2>.cards_item_img>img, .cards_item_3>.cards_item_img>img, .cards_item_4>.cards_item_img>img{
float: right;
}
.cards_item_2>.cards_item_text>div, .cards_item_3>.cards_item_text>div{
color: #1d1e20;
} }
.cards_item_1{ .cards_item_1{
width: 48%; width: 48%;
height: 322px;
border-radius: 10px; border-radius: 10px;
background: url(/static/img/png/cards_item_1.png) #1d1e20 50%; /*background: url(/static/img/png/cards_item_1.png) #1d1e20 50%;*/
background: #1d1e20 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right; background-position: right;
@@ -2672,12 +2690,11 @@ button#send_feedback_form:active{
margin: 10px; margin: 10px;
} }
.cards_item_1_left, .cards_item_1,
.cards_item_2_left, .cards_item_2,
.cards_item_3_left, .cards_item_3,
.cards_item_4_left{ .cards_item_4{
width: 55%; height: 322px;
float: left;
} }
@@ -2694,9 +2711,10 @@ button#send_feedback_form:active{
.cards_item_2{ .cards_item_2{
width: 48%; width: 48%;
height: 322px;
border-radius: 10px; border-radius: 10px;
background: url(/static/img/png/cards_item_2.png) white 50%; /*background: url(/static/img/png/cards_item_2.png) white 50%;*/
background: white 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right; background-position: right;
@@ -2706,13 +2724,23 @@ button#send_feedback_form:active{
} }
.cards_item_2>div, .cards_item_text {
.cards_item_3>div{ float: left;
color: black; width: 50%;
text-shadow: none;
text-shadow: 1px 1px 0px #ffffff;
} }
.cards_item_img {
float: right;
width: 50%;
}
/*.cards_item_2>div,*/
/*.cards_item_3>div{*/
/* color: black;*/
/* text-shadow: none;*/
/* text-shadow: 1px 1px 0px #ffffff;*/
/*}*/
.cards_item_2_right{ .cards_item_2_right{
float: right; float: right;
border-radius: 10px; border-radius: 10px;
@@ -2739,9 +2767,10 @@ button#send_feedback_form:active{
.cards_item_3{ .cards_item_3{
width: 48%; width: 48%;
height: 322px;
border-radius: 10px; border-radius: 10px;
background: url(/static/img/png/cards_item_3.png) white 50%; /*background: url(/static/img/png/cards_item_3.png) white 50%;*/
background: white 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right; background-position: right;
box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20); box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20);
@@ -2762,9 +2791,10 @@ button#send_feedback_form:active{
.cards_item_4{ .cards_item_4{
width: 48%; width: 48%;
height: 322px;
border-radius: 10px; border-radius: 10px;
background: url(/static/img/png/cards_item_4.png), #111217 50%; /*background: url(/static/img/png/cards_item_4.png), #111217 50%;*/
background: #111217 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right; background-position: right;
@@ -2789,7 +2819,7 @@ button#send_feedback_form:active{
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
line-height: 52px; /* 118.182% */ line-height: 52px; /* 118.182% */
margin: 104px 0 0 20px; margin: 67px 0 0 20px;
} }
.card_title_2{ .card_title_2{
color: #FFF; color: #FFF;
@@ -2806,7 +2836,7 @@ button#send_feedback_form:active{
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
margin: 20px 0 0 20px; margin: 20px 0 0 20px;
width: 50%;
} }
/*faq_main_page*/ /*faq_main_page*/

View File

@@ -167,31 +167,47 @@
<div class="cards_wrapper"> <div class="cards_wrapper">
<div class="cards_item_1"> <div class="cards_item_1">
<div class="cards_item_img">
<img src="/static/img/png/cards_item_1.png" alt="">
</div>
<div class="cards_item_text">
<div class="card_title_1">{% translate "+5%" %}</div> <div class="card_title_1">{% translate "+5%" %}</div>
<div class="card_title_2">{% translate "рост путешествий ежегодно" %}</div> <div class="card_title_2">{% translate "рост путешествий ежегодно" %}</div>
<div class="card_title_3">{% translate "В среднем на 5% растёт количество путешествий ежегодно. Просто путешествуй и получай бонусы." %}</div> <div class="card_title_3">{% translate "В среднем на 5% растёт количество путешествий ежегодно. Просто путешествуй и получай бонусы." %}</div>
</div>
{# <div class="cards_item_1_right">#}
{# <div class="card_gradient_black"></div>#}
{# </div>#}
</div> </div>
<div class="cards_item_2"> <div class="cards_item_2">
<div class="cards_item_img">
<img src="/static/img/png/cards_item_2.png" alt="">
</div>
<div class="cards_item_text">
<div class="card_title_1">{% translate "в 3 раза" %}</div> <div class="card_title_1">{% translate "в 3 раза" %}</div>
<div class="card_title_2">{% translate "быстрее других сервисов" %}</div> <div class="card_title_2">{% translate "быстрее других сервисов" %}</div>
<div class="card_title_3">{% translate "Почтовые сервисы доставляет посылки в среднем за 10 дней. С нами - быстрее!" %}</div> <div class="card_title_3">{% translate "Почтовые сервисы доставляет посылки в среднем за 10 дней. С нами - быстрее!" %}</div>
</div>
{# <div class="card_gradient"></div>#} {# <div class="card_gradient"></div>#}
{# <div class="cards_item_2_right">#}
{# #}
{# </div>#}
</div> </div>
<div class="cards_item_3"> <div class="cards_item_3">
<div class="cards_item_img">
<img src="/static/img/png/cards_item_3.png" alt="">
</div>
<div class="cards_item_text">
<div class="card_title_1">{% translate "+142" %}</div> <div class="card_title_1">{% translate "+142" %}</div>
<div class="card_title_2">{% translate "заявки ежедневно" %}</div> <div class="card_title_2">{% translate "заявки ежедневно" %}</div>
<div class="card_title_3">{% translate "На перевозку или отправку посылок в разные уголки мира" %}</div> <div class="card_title_3">{% translate "На перевозку или отправку посылок в разные уголки мира" %}</div>
</div>
{# <div class="cards_item_3_right">#} {# <div class="cards_item_3_right">#}
{# <div class="card_gradient"></div>#} {# <div class="card_gradient"></div>#}
@@ -199,9 +215,16 @@
</div> </div>
<div class="cards_item_4"> <div class="cards_item_4">
<div class="card_title_1">{% translate "30+" %}</div> <div class="cards_item_img">
<div class="card_title_2">{% translate "стран" %}</div> <img src="/static/img/png/cards_item_4.png" alt="">
<div class="card_title_3">{% translate "С TWB отправляй посылки по всему миру! С нами нет границ!" %}</div> </div>
<div class="cards_item_text">
<div class="card_title_1">{% translate "30+" %}</div>
<div class="card_title_2">{% translate "стран" %}</div>
<div class="card_title_3">{% translate "С TWB отправляй посылки по всему миру! С нами нет границ!" %}</div>
</div>
{# <div class="cards_item_4_right">#} {# <div class="cards_item_4_right">#}
{# <div class="card_gradient_black"></div>#} {# <div class="card_gradient_black"></div>#}