Docs(MD): Added interview questions and answers

Author: ViktorSvertoka

README.md

@@ -262,7 +262,188 @@
 </details>
 
 <details>
-<summary>10. </summary>
+<summary>10. Що таке медіазапити та як їх використовувати?</summary>
+
+- Медіазапити — це умови, які дозволяють застосовувати різні стилі в залежності від характеристик пристрою (наприклад, розміру екрану, орієнтації). Вони використовуються в CSS через правило @media.
+
+- Приклад медіазапиту для адаптивного дизайну:
+
+  ```css
+  /* Стилі для мобільних пристроїв */
+  @media (max-width: 768px) {
+    body {
+      background-color: lightblue;
+    }
+  }
+
+  /* Стилі для десктопів */
+  @media (min-width: 769px) {
+    body {
+      background-color: lightgreen;
+    }
+  }
+  ```
+
+</details>
+
+<details>
+<summary>11. Як можна приховати елемент за допомогою CSS?</summary>
+
+- Щоб приховати елемент за допомогою CSS, можна використовувати:
+  - `display: none;` — видаляє елемент з потоку документа. Він не займає місця на сторінці і з ним не можна взаємодіяти.
+  - `visibility: hidden;` — елемент стає невидимим, але зберігає своє місце на сторінці.
+  - `opacity: 0;` — робить елемент прозорим, але він залишається видимим і займає місце на сторінці.
+
+</details>
+
+<details>
+<summary>12. Як можна зробити лого посередині екрана?</summary>
+
+- Щоб розмістити лого посередині екрана, можна використати такі способи:
+
+1. Flexbox:
+
+   ```css
+   body,
+   html {
+     height: 100%;
+     margin: 0;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+   }
+
+   .logo {
+     /* стилі лого */
+   }
+   ```
+
+2. Grid:
+
+   ```css
+   body,
+   html {
+     height: 100%;
+     margin: 0;
+     display: grid;
+     place-items: center;
+   }
+
+   .logo {
+     /* стилі лого */
+   }
+   ```
+
+3. Absolute позиціювання:
+
+   ```css
+   body,
+   html {
+     height: 100%;
+     margin: 0;
+     position: relative;
+   }
+
+   .logo {
+     position: absolute;
+     top: 50%;
+     left: 50%;
+     transform: translate(-50%, -50%);
+   }
+   ```
+
+</details>
+
+<details>
+<summary>13. Як розмістити хрестик для закриття справа зверху елемента?</summary>
+
+- Щоб розмістити хрестик для закриття в правому верхньому куті елемента, можна використати абсолютне позиціювання:
+
+  ```css
+  .container {
+    position: relative; /* щоб хрестик позиціонувався відносно контейнера */
+  }
+
+  .close-btn {
+    position: absolute;
+    top: 10px; /* відстань від верхнього краю */
+    right: 10px; /* відстань від правого краю */
+    cursor: pointer; /* щоб курсор змінювався при наведенні */
+  }
+  ```
+
+  ```html
+  <div class="container">
+    <div class="close-btn">&times;</div>
+    <!-- інший контент -->
+  </div>
+  ```
+
+</details>
+
+<details>
+<summary>14. Як зробити останній елемент списку червоним, незалежно від довжини списку без JS?</summary>
+
+- Щоб зробити останній елемент списку червоним без JavaScript, можна використати псевдоклас `:last-child:`.
+- Це правило зробить останній елемент у будь-якому списку (незалежно від його довжини) червоним.
+
+  ```css
+  ul li:last-child {
+    color: red;
+  }
+  ```
+
+- Це правило зробить останній елемент у будь-якому списку (незалежно від його довжини) червоним.
+
+</details>
+
+<details>
+<summary>15. Які є можливості задати колір?</summary>
+
+- У CSS є кілька способів задати колір:
+
+1. Ім’я кольору:
+
+   ```css
+   color: red;
+   ```
+
+2. Шістнадцятковий код:
+
+   ```css
+   color: #ff0000; /* червоний */
+   ```
+
+3. RGB (Red, Green, Blue):
+
+   ```css
+   color: rgb(255, 0, 0); /* червоний */
+   ```
+
+4. RGBA (Red, Green, Blue, Alpha):
+
+   ```css
+   color: rgba(255, 0, 0, 0.5); /* червоний з прозорістю */
+   ```
+
+5. HSL (Hue, Saturation, Lightness):
+
+   ```css
+   color: hsl(0, 100%, 50%); /* червоний */
+   ```
+
+6. HSLA (Hue, Saturation, Lightness, Alpha):
+
+   ```css
+   color: hsla(0, 100%, 50%, 0.5); /* червоний з прозорістю */
+   ```
+
+7. Ключові слова прозорості:
+
+   ```css
+   color: transparent; /* прозорий */
+   ```
+
+- Ці способи дозволяють вибирати колір за різними параметрами: від прямого опису кольору до використання прозорості або відтінків.
 
-- coming soon...
 </details>