add second part of How To Use page

css/instructions.css

@@ -32,6 +32,7 @@
 .main-cont {
     display: flex;
     flex-direction: row;
+    margin-bottom: 10vh;
 }
 
 .left-cont {
@@ -92,8 +93,54 @@
     font-size: large;
     font-weight: 400;
 }
+.subtitle{
+    font-size: 2vh;
+}
+.show-button-cont{
+    display: flex;
+    justify-content: center;
+}
+.show-button{
+    display: none;
+}
+.rotate{
+    transform: rotate(180deg);
+}
+.show-button-arrow{
+    font-size: 4vh;
+    font-weight: 300;
+    cursor:pointer;
+}
+.methods-gifs-cont{
+    display: none;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.gifs-cont{
+    margin-left: 3rem;
+    margin-right: 3rem;
+    display: flex;
+}
+.method-gif{
+    width: 30vh;
+    height: auto;
+    margin-bottom:0.5vh ;
+}
+.method-cont{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    font-size: 2vh;
+    margin-bottom:2vh ;
+}
 
 @media (max-width: 1197px) {
+    .methods-gifs-cont{
+        justify-content: center;
+    }
     .main-cont{
         flex-direction: column;
     }

html/instructions_en.html

@@ -171,7 +171,42 @@
         </div>
         <div class="right-cont">
           <div class="gif-cont">
-            <img src="../img/how-to-use.gif " class="how-to-use-gif">
+            <img src="../img/how-to-use.gif " class="how-to-use-gif" />
+          </div>
+        </div>
+      </div>
+      <div class="heading-cont">
+        <p class="heading">Examples</p>
+      </div>
+      <div class="heading-cont">
+        <p class="subtitle">Analyzing Material Structure Using Algorithms</p>
+      </div>
+      <div class="show-button-cont">
+        <button class="show-button" id="show-button"></button>
+        <label
+          for="show-button"
+          class="show-button-arrow"
+          id="show-button-arrow"
+          >^</label
+        >
+      </div>
+      <div class="gifs-cont">
+        <div class="methods-gifs-cont" id="methods-gifs-cont">
+          <div class="method-cont">
+            <img class="method-gif" src="../img/von Neumann.gif" />
+            <p>von Neumann</p>
+          </div>
+          <div class="method-cont">
+            <img class="method-gif" src="../img/Probability Circle.gif" />
+            <p>Probability Circle</p>
+          </div>
+          <div class="method-cont">
+            <img class="method-gif" src="../img/Probability Ellipse.gif" />
+            <p>Probability Ellipse</p>
+          </div>
+          <div class="method-cont">
+            <img class="method-gif" src="../img/Moore.gif" />
+            <p>Moore</p>
           </div>
         </div>
       </div>
@@ -183,28 +218,27 @@
             MatViz3D
           </a>
           <p>
-            Department of Mathematical Modeling and Intelligent Computing in Engineering (MMI), NTU "KhPI", st. 2
-            Kyrpychova
-            Ave., c. Kharkiv, Ukraine, 61002
-          </p>
-          <p>
-            [email protected]
+            Department of Mathematical Modeling and Intelligent Computing in
+            Engineering (MMI), NTU "KhPI", st. 2 Kyrpychova Ave., c. Kharkiv,
+            Ukraine, 61002
           </p>
+          <p>[email protected]</p>
         </div>
       </div>
       <div class="right-footer-cont">
         <div class="footer-links mr-5">
           <a href="https://web.kpi.kharkov.ua/dpm/uk/istoriya-kafedri/">
             About the Department
           </a>
-          <a href="#">
-            Team
-          </a>
-          <a href="https://web.kpi.kharkov.ua/dpm/uk/kontaktna-informatsiya-kafedri/">
+          <a href="#"> Team </a>
+          <a
+            href="https://web.kpi.kharkov.ua/dpm/uk/kontaktna-informatsiya-kafedri/"
+          >
             Contact
           </a>
         </div>
       </div>
     </footer>
   </body>
+  <script src="../js/show-button.js"></script>
 </html>

js/show-button.js

@@ -0,0 +1,13 @@
+document.getElementById("show-button-arrow").addEventListener("click", function () {
+    const cont = document.getElementById("methods-gifs-cont");
+    const button = document.getElementById("show-button-arrow");
+
+    // Проверяем видимость контейнера
+    if (cont.style.display === "none" || cont.style.display === "") {
+        cont.style.display = "flex";
+        button.classList.add("rotate");
+    } else {
+        cont.style.display = "none";
+        button.classList.remove("rotate");
+    }
+});