feat: added faq

This commit is contained in:
Aliaksei Karzhou
2024-07-03 14:40:41 +03:00
parent 90709707fc
commit 5799ef038b
7 changed files with 419 additions and 0 deletions

View File

@@ -2380,6 +2380,12 @@ h3 {
border-radius: 8px 30px;
background-color: #ffffff;
}
@media (max-width: 768px) {
.team__modal-body {
max-height: calc(100vh - 80px);
padding: 20px;
}
}
.team__modal-body::before {
content: "";
position: absolute;
@@ -2392,12 +2398,25 @@ h3 {
background: url(../img/icons/close.svg) center no-repeat;
cursor: pointer;
}
@media (max-width: 768px) {
.team__modal-body::before {
top: -34px;
left: 50%;
right: auto;
transform: translateX(-50%);
}
}
.team__modal-content {
max-height: calc(100vh - 180px);
padding-right: 4px;
overflow: auto;
/* Handle */
}
@media (max-width: 768px) {
.team__modal-content {
max-height: calc(100vh - 120px);
}
}
.team__modal-content::-webkit-scrollbar {
width: 4px;
}
@@ -2416,4 +2435,137 @@ h3 {
align-items: center;
gap: 24px;
margin-top: 40px;
}
.faq {
margin: 90px 0 100px;
overflow: hidden;
}
@media (max-width: 768px) {
.faq {
margin: 90px 0 60px;
}
}
.faq__title {
margin: 18px 0 25px;
}
@media (max-width: 768px) {
.faq__title {
margin: 21px 0;
}
}
.faq__content {
display: flex;
flex-wrap: wrap;
gap: 36px;
}
@media (max-width: 768px) {
.faq__content {
gap: 18px;
}
}
.faq__block {
flex: 0 0 calc(50% - 18px);
display: flex;
flex-direction: column;
gap: 32px;
}
@media (max-width: 768px) {
.faq__block {
flex: 1 1 100%;
gap: 18px;
}
}
.faq__item {
padding: 20px 26px;
color: #ffffff;
border-radius: 16px;
background-color: #ffffff;
}
@media (max-width: 768px) {
.faq__item {
padding: 28px 24px;
border-radius: 8px;
}
}
@media (max-width: 576px) {
.faq__item {
padding: 24px 20px;
}
}
.faq__item-question {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-weight: 500;
font-size: 21px;
line-height: 146%;
color: #2d2d2d;
}
@media (max-width: 768px) {
.faq__item-question {
font-size: 18px;
}
}
@media (max-width: 576px) {
.faq__item-question {
font-size: 16px;
}
}
.faq__item-question::after {
content: "+";
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-weight: 500;
font-size: 28px;
line-height: 100%;
color: #ffffff;
border-radius: 32px;
background-color: #609eff;
transition: transform ease-in-out 0.14s;
}
@media (max-width: 768px) {
.faq__item-question::after {
width: 30px;
height: 30px;
font-size: 24px;
}
}
@media (max-width: 576px) {
.faq__item-question::after {
width: 26px;
height: 26px;
font-size: 20px;
}
}
.faq__item.active .faq__item-question::after {
transform: rotate(-45deg);
}
.faq__item-answer {
display: flex;
flex-direction: column;
max-height: 0;
box-sizing: border-box;
overflow: hidden;
font-weight: 300;
font-size: 16px;
line-height: 148%;
color: #878787;
transition: max-height 0.2s ease-out;
}
@media (max-width: 768px) {
.faq__item-answer {
font-size: 14px;
}
}
.faq__item-answer::before {
content: "";
flex: 0 0 auto;
display: block;
height: 20px;
}