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

View File

@@ -780,7 +780,7 @@ span.btn_profile_name {
/*height: 60px;*/
font-size: 18px;
font-weight: 500;
width: 100%;
width: 80%;
margin-top: 10px;
display: inline-block;
@@ -2652,18 +2652,36 @@ button#send_feedback_form:active{
}
.cards_wrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
/*display: flex;*/
/*flex-direction: row;*/
/*flex-wrap: wrap;*/
/*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{
width: 48%;
height: 322px;
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-position: right;
@@ -2672,12 +2690,11 @@ button#send_feedback_form:active{
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,
.cards_item_2,
.cards_item_3,
.cards_item_4{
height: 322px;
}
@@ -2694,9 +2711,10 @@ button#send_feedback_form:active{
.cards_item_2{
width: 48%;
height: 322px;
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-position: right;
@@ -2706,13 +2724,23 @@ button#send_feedback_form:active{
}
.cards_item_2>div,
.cards_item_3>div{
color: black;
text-shadow: none;
text-shadow: 1px 1px 0px #ffffff;
.cards_item_text {
float: left;
width: 50%;
}
.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{
float: right;
border-radius: 10px;
@@ -2739,9 +2767,10 @@ button#send_feedback_form:active{
.cards_item_3{
width: 48%;
height: 322px;
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-position: right;
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{
width: 48%;
height: 322px;
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-position: right;
@@ -2789,7 +2819,7 @@ button#send_feedback_form:active{
font-style: normal;
font-weight: 700;
line-height: 52px; /* 118.182% */
margin: 104px 0 0 20px;
margin: 67px 0 0 20px;
}
.card_title_2{
color: #FFF;
@@ -2806,7 +2836,7 @@ button#send_feedback_form:active{
font-weight: 400;
line-height: 22px;
margin: 20px 0 0 20px;
width: 50%;
}
/*faq_main_page*/

View File

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