From cadd3104c0e27ec1d2e5213ad72f9a1505587af1 Mon Sep 17 00:00:00 2001
From: SBD <strigevitch.boris@gmail.com>
Date: Mon, 27 Nov 2023 14:28:04 +0300
Subject: [PATCH] 0.0.22

---
 static/aerbimCSS.css        | 73 +++++++++++++++++++++++++++++++++++++
 static/aerbimJS.js          |  6 +++
 templates/blocks/b_faq.html | 31 ++++++++++------
 3 files changed, 98 insertions(+), 12 deletions(-)

diff --git a/static/aerbimCSS.css b/static/aerbimCSS.css
index a848325..d4cde21 100644
--- a/static/aerbimCSS.css
+++ b/static/aerbimCSS.css
@@ -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);
+}
\ No newline at end of file
diff --git a/static/aerbimJS.js b/static/aerbimJS.js
index b9d1e91..1a3279e 100644
--- a/static/aerbimJS.js
+++ b/static/aerbimJS.js
@@ -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")
 }
\ No newline at end of file
diff --git a/templates/blocks/b_faq.html b/templates/blocks/b_faq.html
index e6875cd..8723add 100644
--- a/templates/blocks/b_faq.html
+++ b/templates/blocks/b_faq.html
@@ -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>
\ No newline at end of file