0.0.22
This commit is contained in:
@@ -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);
|
||||
}
|
||||
@@ -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")
|
||||
}
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user