diff --git a/Media/Pump.mp4 b/Media/Pump.mp4
new file mode 100644
index 0000000..0fabac3
Binary files /dev/null and b/Media/Pump.mp4 differ
diff --git a/Media/ambience_bar_ground_larger.wav b/Media/ambience_bar_ground_larger.wav
new file mode 100644
index 0000000..9967dff
Binary files /dev/null and b/Media/ambience_bar_ground_larger.wav differ
diff --git a/Media/image_crib.png b/Media/image_crib.png
new file mode 100644
index 0000000..b2b2f27
Binary files /dev/null and b/Media/image_crib.png differ
diff --git a/README.md b/README.md
index c8f2351..d774020 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,640 @@
-# CribHtml
+## 👥 Синтаксис HTML и Селекторы CSS 👥
+
☀️ Базовая Структура HTML ☀️
+
+```html
+
+
+
+ Document
+
+
+ Заголовок
+ Текст параграфа.
+
+
+```
+
+- ``: Объявление типа документа (HTML5).
+- ``: Корневой элемент HTML-документа.
+- ``: Содержит метаданные о документе (заголовок, кодировка, стили, скрипты).
+- `
⭐ Структурные теги ⭐
+
+* ``: Шапка сайта или раздела.
+
+ ```html
+
+ ```
+* `
+
+
+ ```
+* `
+ ...
+
+
+ ```
+
+* `
+ Заголовок статьи
+ Текст статьи...
+
+ ```
+
+* ``: Дополнительная информация (боковая панель).
+
+ ```html
+
+ Реклама
+ Рекламный текст...
+
+ ```
+
+* ``: Подвал сайта или раздела.
+
+ ```html
+
+ ```
+
+* ``: Раздел содержимого.
+
+ ```html
+
+ Заголовок раздела
+ Текст раздела...
+
+ ```
+
+* `
`: Универсальный контейнер (не имеет семантического значения).
+
+ ```html
+
+
Содержимое внутри div.
+
⭐ Текст ⭐
+
+* `Заголовок первого уровня
+ Заголовок второго уровня
+ Заголовок третьего уровня
+ ```
+Заголовок первого уровня
+Заголовок второго уровня
+Заголовок третьего уровня
+
+
`: Параграф (абзац).
+
+ ```html
+ Это текст параграфа.
+ ```
+Это текст параграфа.
+
+Текст над линией.
+ Текст под линией.
+ ```
+Текст над линией.
+Текст под линией.
+
+Ссылка на example.com
+ ```
+Ссылка на example.com
+
+Это часть текста.
+ ```
+Это часть текста.
+
+Это важный текст.
+ ```
+Это важный текст.
+
+Это выделенный текст.
+ ```
+Это выделенный текст.
+
+
+ let x = 5;
+
+ ```
+
+let x = 5;
+
+
+
+ Это текст,
+ сохраненный с форматированием.
+
+ ```
+
+Это текст,
+сохраненный с форматированием.
+
+
+
+
⭐ Списки ⭐
+
+* ``: Неупорядоченный список.
+
+ ```html
+
+ Элемент списка 1
+ Элемент списка 2
+ Элемент списка 3
+
+ ```
+
+
+ Элемент списка 1
+ Элемент списка 2
+ Элемент списка 3
+
+
+
+ Элемент списка 1
+ Элемент списка 2
+ Элемент списка 3
+
+ ```
+ - `
+ Элемент списка 1
+ Элемент списка 2
+ Элемент списка 3
+
+
+
⭐ Изображения и мультимедиа ⭐
+
+* `
+
+ Ваш браузер не поддерживает тег video.
+
+ ```
+
+
+
+ Ваш браузер не поддерживает тег video.
+
+
+
+
+ Ваш браузер не поддерживает тег audio.
+
+ ```
+
+
+ Ваш браузер не поддерживает тег audio.
+
+
+
⭐ Формы ⭐
+
+* ``: Форма.
+
+ ```html
+
+ ```
+
+ - `
+ Volvo
+ Saab
+ Mercedes
+ Audi
+
+ ```
+
+ - `
+ Volvo
+ Saab
+ Mercedes
+ Audi
+
+
+Нажми меня
+ ```
+
+Нажми меня
+
+
⭐ Таблицы ⭐
+
+* ``: Таблица.
+* `
+
+ Имя
+ Возраст
+
+
+ Иван
+ 30
+
+
+ Мария
+ 25
+
+
+ ```
+
+
+
+ Имя
+ Возраст
+
+
+ Иван
+ 30
+
+
+ Мария
+ 25
+
+
+
+
⭐ Встраиваемые элементы ⭐
+
+* ``: Встраиваемый фрейм (для вставки контента с другого сайта).
+
+ ```html
+
+ ```
+
+
+
+
⭐ Селекторы CSS ⭐
+
+**`CSS`** (Cascading Style Sheets) используется для стилизации HTML-элементов. Селекторы **`CSS`** определяют, к каким элементам применяются стили.
+
+* **Селектор по тегу (Type Selector):**
+
+ ```css
+ p {
+ color: blue;
+ }
+ ```
+
+ Применяет стиль ко всем элементам ``.
+
+* **Селектор по классу (Class Selector):**
+
+ ```css
+ .highlight {
+ background-color: yellow;
+ }
+ ```
+
+ Применяет стиль ко всем элементам с классом `highlight`.
+
+ ```html
+
Этот текст будет выделен.
+ ```
+
+* **Селектор по ID (ID Selector):**
+
+ ```css
+ #main-title {
+ font-size: 24px;
+ }
+ ```
+
+ Применяет стиль к элементу с ID `main-title`. (ID должен быть уникальным на странице).
+
+ ```html
+ Главный заголовок
+ ```
+
+* **Универсальный селектор (Universal Selector):**
+
+ ```css
+ * {
+ margin: 0;
+ padding: 0;
+ }
+ ```
+
+ Применяет стиль ко всем элементам на странице. Используется для сброса стилей по умолчанию.
+
+* **Селектор атрибутов (Attribute Selector):**
+
+ ```css
+ a[href] {
+ color: green;
+ }
+
+ input[type="text"] {
+ border: 1px solid #ccc;
+ }
+ ```
+
+ * `a[href]`: Выбирает все элементы `` с атрибутом `href`.
+ * `input[type="text"]`: Выбирает все элементы ``, которые являются потомками элемента ``.
+
+* **Селектор дочерних элементов (Child Selector):**
+
+ ```css
+ ul > li {
+ border: 1px solid black;
+ }
+ ```
+
+ Выбирает все элементы ``, которые являются *непосредственными* дочерними элементами ``.
+
+* **Селектор смежных элементов (Adjacent Sibling Selector):**
+
+ ```css
+ h2 + p {
+ font-style: italic;
+ }
+ ```
+
+ Выбирает первый элемент ``, который непосредственно следует за элементом `
`.
+
+* **Селектор общих элементов (General Sibling Selector):**
+
+ ```css
+ h2 ~ p {
+ color: red;
+ }
+ ```
+
+ Выбирает все элементы ` `, которые являются общими братьями и сестрами элемента `
` (то есть находятся на одном уровне и следуют после ``).
+
+* **Псевдоклассы (Pseudo-classes):**
+
+ * `:hover`: Стиль применяется при наведении курсора мыши на элемент.
+
+ ```css
+ a:hover {
+ color: red;
+ }
+ ```
+
+ * `:active`: Стиль применяется, когда элемент активирован (например, нажата кнопка).
+
+ ```css
+ button:active {
+ background-color: #ccc;
+ }
+ ```
+
+ * `:focus`: Стиль применяется, когда элемент в фокусе (например, текстовое поле).
+
+ ```css
+ input:focus {
+ border: 2px solid blue;
+ }
+ ```
+
+ * `:visited`: Стиль для посещенных ссылок.
+
+ ```css
+ a:visited {
+ color: purple;
+ }
+ ```
+
+ * `:nth-child(n)`: Выбирает элемент, который является n-м потомком своего родителя
+
+ ```css
+ li:nth-child(odd) {
+ background-color: #f2f2f2;
+ }
+
+ li:nth-child(even) {
+ background-color: #ffffff;
+ }
+ ```
+
+* **Псевдоэлементы (Pseudo-elements):**
+
+ * `::before`: Вставляет контент *перед* элементом.
+
+ ```css
+ p::before {
+ content: "Читать далее: ";
+ }
+ ```
+
+ * `::after`: Вставляет контент *после* элемента.
+
+ ```css
+ h1::after {
+ content: " - Новый заголовок";
+ }
+ ```
+ * `::first-line`: Стилизует первую строку элемента.
+
+ ```css
+ p::first-line {
+ font-weight: bold;
+ }
+ ```
+
+ * `::first-letter`: Стилизует первую букву элемента
+
+ ```css
+ p::first-letter {
+ font-size: 200%;
+ color: red;
+ }
+ ```
+
+#### Комбинирование селекторов
+
+Селекторы можно комбинировать для создания более сложных правил:
+
+```css
+/* Элемент с классом "highlight" внутри элемента
с ID "content" */
+#content div p.highlight {
+ font-size: 16px;
+}
\ No newline at end of file
+
+