0.0.148 add faq on main page

This commit is contained in:
2023-09-21 17:50:58 +03:00
parent 54105c47f0
commit 5ae0e75a96
8 changed files with 345 additions and 125 deletions

View File

@@ -2069,6 +2069,13 @@ button#send_feedback_form{
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) {
@@ -2090,6 +2097,220 @@ button#send_feedback_form{
/*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*/