This commit is contained in:
SBD
2023-11-27 14:28:04 +03:00
parent e610ef60b4
commit cadd3104c0
3 changed files with 98 additions and 12 deletions

View File

@@ -495,3 +495,76 @@ body,html{
.logo_3d_sec_designer{
width: 300px;
}
/*faq*/
.large_txt.faq{
width: 100%;
text-align: center;
}
.container_content_faq{
margin: 0 170px;
padding-bottom: 90px;
}
.faqs_container{
width: 100%;
display: block;
margin-top: 40px;
}
.faq_container{
width: 100%;
background: #ffffff;
box-shadow: 3px 4px 5.3px 0 rgba(151, 167, 176, 0.20);
}
.first_line_faq{
width: 100%;
}
.container_content_first_line{
padding: 22px;
width: calc(100% - 44px);
}
.name_faq{
float: left;
width: calc(100% - 25px);
margin-right: 10px;
}
.faq_icon{
width: 15px;
float: right;
}
.faq_icon_img{
width: 15px;
display: block;
position: relative;
top: 6px;
}
.faq_container.open .faq_icon_img{
transition: 200ms;
transform: rotate(180deg);
}
.faq_container.close .faq_icon_img{
transition: 200ms;
transform: rotate(0deg);
}
.faq_container.close .faq_content{
display: none;
}
.faq_container.open .faq_content{
display: block;
}
.faq_content{
color: #000000;
padding: 20px;
width: calc(100% - 40px);
}

View File

@@ -63,4 +63,10 @@ function replaceHrefOnOnclick () {
}
i++
})
}
function faq_open_close () {
let faq = document.querySelector(".faq_container")
faq.classList.toggle("open")
faq.classList.toggle("close")
}

View File

@@ -1,18 +1,25 @@
{% load static %}
{% load i18n %}
<div class="large_txt faq">
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
</div>
<div class="faqs_container">
<div class="faq_container">
<div class="first_line_faq">
<div class="name_faq">Lorem ipsum dolor sit amet consectetur?</div>
<div class="faq_icon">
<img class="faq_icon_img" width="15px" src="{% static "images/faq_icon.svg" %}">
</div>
<div class="cut-width">
<div class="container_content_faq">
<div class="large_txt faq">
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
</div>
<div class="faq_content standart_txt">
Lorem ipsum dolor sit amet consectetur. Enim convallis vulputate nam commodo. In varius orci ultrices aliquam penatibus vitae facilisi. Magna odio est justo aliquam tristique ullamcorper mi. Mi nulla tellus nunc sed. Faucibus tristique feugiat blandit ipsum donec. Commodo elit sit placerat diam tristique. Nunc enim erat magna bibendum egestas interdum eu id urna.
<div class="faqs_container">
<div class="faq_container close">
<div class="first_line_faq" onclick="faq_open_close()">
<div class="container_content_first_line">
<div class="name_faq">Lorem ipsum dolor sit amet consectetur?</div>
<div class="faq_icon">
<img class="faq_icon_img" width="15px" src="{% static "images/faq_icon.svg" %}">
</div>
<div class="clear_both"></div>
</div>
</div>
<div class="faq_content standart_txt">
Lorem ipsum dolor sit amet consectetur. Enim convallis vulputate nam commodo. In varius orci ultrices aliquam penatibus vitae facilisi. Magna odio est justo aliquam tristique ullamcorper mi. Mi nulla tellus nunc sed. Faucibus tristique feugiat blandit ipsum donec. Commodo elit sit placerat diam tristique. Nunc enim erat magna bibendum egestas interdum eu id urna.
</div>
</div>
</div>
</div>
</div>