added a news page and a page with installation instructions

downloads.html

@@ -64,6 +64,8 @@ borders: top right bottom left !important
           <div class="u-custom-menu u-nav-container">
             <ul class="u-nav u-unstyled"><li class="u-nav-item"><a class="u-button-style u-nav-link" href="index.html">Главная</a>
 </li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="downloads.html" style="padding-right: 20px;">Загрузки</a>
+</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="news.html" style="padding-right: 20px;">Новости</a>
+</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="faq.html" style="padding-right: 20px;">Как установить?</a>
 </li></ul>
           </div>
           <div class="u-custom-menu u-nav-container-collapse">
@@ -72,6 +74,8 @@ borders: top right bottom left !important
                 <div class="u-menu-close"></div>
                 <ul class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-2"><li class="u-nav-item"><a class="u-button-style u-nav-link" href="index.html">Главная</a>
 </li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="downloads.html">Загрузки</a>
+</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="news.html">Новости</a>
+</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="faq.html">Как установить?</a>
 </li></ul>
               </div>
             </div>

faq.css

+.faq {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.ximper-description {
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-size: 16px;
+  color: #333;
+}
+
+.question {
+  margin-bottom: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px; /* Скругляем края рамки */
+  overflow: hidden; /* Прячем скругленные углы */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Добавляем тень для эффекта минимализма */
+  background-color: #ffc107; /* Цвет фона вопроса */
+}
+
+.question h2 {
+  margin: 0;
+  padding: 10px;
+  cursor: pointer;
+  color: #000; /* Черный цвет текста вопроса */
+  font-size: 18px; /* Размер текста вопроса */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.question.active h2 .toggle {
+  transform: rotate(90deg); /* Поворачиваем стрелку на 90 градусов */
+}
+
+.answer {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out; /* Плавная анимация максимальной высоты */
+  padding: 10px;
+  background-color: #fff; /* Белый цвет фона ответа */
+  color: #000; /* Черный цвет текста ответа */
+  font-size: 16px; /* Размер текста ответа */
+}
+
+.question.active .answer {
+  max-height: 1000px; /* Максимальная высота при активации */
+}
+
+.toggle {
+  font-size: 24px;
+  transition: transform 0.3s ease; /* Плавная анимация при изменении поворота */
+}
+
+.red-banner {
+  background-color: rgba(255, 0, 0, 0.2); /* Красный с прозрачностью */
+  border-left: 5px solid red; /* Левая рамка */
+  padding: 10px;
+  max-width: 700px; /* Увеличение ширины */
+  margin: 10px;
+  text-align: left;
+  color: red;
+}
+
+.blue-banner {
+  background-color: rgba(66, 170, 255, 0.2); /* Красный с прозрачностью */
+  border-left: 5px solid blue; /* Левая рамка */
+  padding: 10px;
+  max-width: 700px; /* Увеличение ширины */
+  margin: 10px;
+  text-align: left;
+  color: black;
+  font-family: monospace;
+}

faq.js

+document.addEventListener('DOMContentLoaded', function() {
+  const questions = document.querySelectorAll('.question');
+
+  questions.forEach(function(question) {
+    const title = question.querySelector('h2');
+    const answer = question.querySelector('.answer');
+
+    title.addEventListener('click', function() {
+      question.classList.toggle('active');
+      if (question.classList.contains('active')) {
+        const height = answer.scrollHeight + 'px';
+        answer.style.maxHeight = height;
+      } else {
+        answer.style.maxHeight = '0';
+      }
+    });
+  });
+});

index.html

@@ -16,7 +16,7 @@
 
 
 
-    
+
 
 
 
@@ -63,6 +63,8 @@ borders: top right bottom left !important
           <div class="u-custom-menu u-nav-container">
             <ul class="u-nav u-unstyled"><li class="u-nav-item"><a class="u-button-style u-nav-link" href="index.html">Главная</a>
 </li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="downloads.html" style="padding-right: 20px;">Загрузки</a>
+</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="news.html" style="padding-right: 20px;">Новости</a>
+</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="faq.html" style="padding-right: 20px;">Как установить?</a>
 </li></ul>
           </div>
           <div class="u-custom-menu u-nav-container-collapse">
@@ -71,6 +73,8 @@ borders: top right bottom left !important
                 <div class="u-menu-close"></div>
                 <ul class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-2"><li class="u-nav-item"><a class="u-button-style u-nav-link" href="index.html">Главная</a>
 </li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="downloads.html">Загрузки</a>
+</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="news.html">Новости</a>
+</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="faq.html">Как установить?</a>
 </li></ul>
               </div>
             </div>

news.css

+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f4f4f4;
+}
+
+.container {
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 20px;
+}
+
+.news {
+  background-color: #fff;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.news img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.news-content {
+  padding: 20px;
+  color: #000; /* черный цвет текста */
+}
+
+.news-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.news-date {
+  font-size: 14px;
+  color: #888;
+  margin-bottom: 10px;
+}