diff --git a/05-lection3/02-modal/README.md b/05-lection3/02-modal/README.md
new file mode 100644
index 0000000..77f07e1
--- /dev/null
+++ b/05-lection3/02-modal/README.md
@@ -0,0 +1,26 @@
+# Модалка
+
+figma: [https://www.figma.com/file/LavZmQfQccqyrTMzoSJYNu/CSS-Course?node-id=17326%3A0](https://www.figma.com/file/LavZmQfQccqyrTMzoSJYNu/CSS-Course?node-id=17326%3A0)
+
+Модалка или попап - блок, который открывается поверх содержимого страницы. Компонент встречается в любом проекте :)
+
+Хочу обратить внимание на затемнение страницы за модалкой - его делают с помощью растянутого на всю страницу полупрозрачного элемента.
+Само модальное окно обычно располагают посередине страницы, нужно сделать так же)
+
+На странице нужно разместить модальное окно и кнопку, при нажатии на которую оно будет открываться. Компонент кнопки у вас уже есть :)
+Модалки обычно открывают и закрывают с помощью JavaScript. Скрипт уже написан и подключен к решению.
+
+При нажатии на кнопку с `id="modal-open"` скрипт будет:
+- добавлять блоку модального окна с `id="modal"` свойство `display: block`
+- добавлять `body` свойство `overflow: hidden` чтобы запретить скролл страницы
+
+При нажатии на крестик с `id="modal-close"`:
+- добавлять блоку модального окна с `id="modal"` свойство `display: none`
+- добавлять `body` свойство `overflow: initial`, тем самым разрешая скролл на странице
+
+Резюмируя, чтобы скрипт заработал:
+- Кнопке присвоить `id="modal-open"`
+- Крестику в модалке присвоить `id="modal-close"`
+- Самому компоненту модального окна - `id="modal"`
+
+Не забудьте, что изначально модальное окно должно быть скрыто.
\ No newline at end of file
diff --git a/05-lection3/02-modal/index.html b/05-lection3/02-modal/index.html
new file mode 100644
index 0000000..f54da50
--- /dev/null
+++ b/05-lection3/02-modal/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Modal
+
+
+
+
+
diff --git a/05-lection3/02-modal/index.js b/05-lection3/02-modal/index.js
new file mode 100644
index 0000000..c12976f
--- /dev/null
+++ b/05-lection3/02-modal/index.js
@@ -0,0 +1,19 @@
+(function() {
+ const close = document.getElementById('modal-close');
+ const modal = document.getElementById('modal');
+ const modalOpen = document.getElementById('modal-open');
+
+ if (!close || !modalOpen || !modal) {
+ return;
+ }
+
+ modalOpen.addEventListener('click', () => {
+ modal.style.display = 'block';
+ document.body.overflow = 'hidden';
+ });
+
+ close.addEventListener('click', () => {
+ modal.style.display = 'none';
+ document.body.overflow = 'initial';
+ });
+})();
\ No newline at end of file
diff --git a/05-lection3/02-modal/modal.css b/05-lection3/02-modal/modal.css
new file mode 100644
index 0000000..e69de29
diff --git a/05-lection3/02-modal/test/solution.test.js b/05-lection3/02-modal/test/solution.test.js
new file mode 100644
index 0000000..89c2978
--- /dev/null
+++ b/05-lection3/02-modal/test/solution.test.js
@@ -0,0 +1,7 @@
+const expect = require('chai').expect;
+
+describe('lection3/modal', () => {
+ it('Модалка', () => {
+ expect(1).to.equal(1);
+ });
+});