diff --git a/topic_4/example1/index.html b/topic_4/example1/index.html
new file mode 100644
index 0000000..9f58477
--- /dev/null
+++ b/topic_4/example1/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+ Всплывающее меню
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/topic_4/example1/script.js b/topic_4/example1/script.js
new file mode 100644
index 0000000..467250b
--- /dev/null
+++ b/topic_4/example1/script.js
@@ -0,0 +1,23 @@
+window.onload = function() {
+ let nav = document.getElementById("nav")
+ let items = nav.getElementsByClassName("menu-item");
+ for (let i = 0; i < items.length; i++) {
+ let item = items[i]
+ item.onclick = function () {
+ for (let j = 0; j < items.length; j++) {
+ if (i === j) {
+ continue
+ }
+ let oldItem = items[j]
+ oldItem.getElementsByClassName("submenu")[0].classList.remove('show')
+ }
+
+ let submenu = item.getElementsByClassName("submenu")[0];
+ if (submenu.classList.contains('show')) {
+ submenu.classList.remove('show')
+ } else {
+ submenu.classList.add('show')
+ }
+ }
+ }
+}
diff --git a/topic_4/example1/style.css b/topic_4/example1/style.css
new file mode 100644
index 0000000..2094fb6
--- /dev/null
+++ b/topic_4/example1/style.css
@@ -0,0 +1,19 @@
+.menu-item {
+ font-size: 20px;
+ border: 2px solid #66CDAA;
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+}
+
+.menu-item .submenu {
+ width: 100px;
+ background: rgb(134, 173, 134);
+ position: absolute;
+ cursor: pointer;
+ display: none;
+}
+
+.menu-item .submenu.show {
+ display: block;
+}
diff --git a/topic_4/example2/img/pic1.webp b/topic_4/example2/img/pic1.webp
new file mode 100644
index 0000000..7b1887e
Binary files /dev/null and b/topic_4/example2/img/pic1.webp differ
diff --git a/topic_4/example2/img/pic2.png b/topic_4/example2/img/pic2.png
new file mode 100644
index 0000000..a4ac25e
Binary files /dev/null and b/topic_4/example2/img/pic2.png differ
diff --git a/topic_4/example2/img/pic3.webp b/topic_4/example2/img/pic3.webp
new file mode 100644
index 0000000..6f773c1
Binary files /dev/null and b/topic_4/example2/img/pic3.webp differ
diff --git a/topic_4/example2/index.html b/topic_4/example2/index.html
new file mode 100644
index 0000000..e8464eb
--- /dev/null
+++ b/topic_4/example2/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+ Слайдер
+
+
+
+
+
+
+
+
+
+
diff --git a/topic_4/example2/script.js b/topic_4/example2/script.js
new file mode 100644
index 0000000..d80aff2
--- /dev/null
+++ b/topic_4/example2/script.js
@@ -0,0 +1,27 @@
+let slideIndex = 1;
+
+showSlides(slideIndex);
+
+function nextSlide() {
+ showSlides(slideIndex += 1);
+}
+
+function previousSlide() {
+ showSlides(slideIndex -= 1);
+}
+
+function showSlides(n) {
+ let slides = document.getElementsByClassName("slider-line")[0].getElementsByTagName("img");
+
+ if (n > slides.length) {
+ slideIndex = 1
+ }
+ if (n < 1) {
+ slideIndex = slides.length
+ }
+
+ for (let slide of slides) {
+ slide.style.display = "none";
+ }
+ slides[slideIndex - 1].style.display = "block";
+}
diff --git a/topic_4/example2/style.css b/topic_4/example2/style.css
new file mode 100644
index 0000000..1f1a645
--- /dev/null
+++ b/topic_4/example2/style.css
@@ -0,0 +1,55 @@
+* {
+ margin: 0;
+}
+
+html, body {
+ font-size: 18px;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 30px auto;
+ background: #f1f1f1;
+ padding: 30px;
+}
+
+h1 {
+ text-align: center;
+ margin-bottom: 40px;
+}
+
+button {
+ background: none;
+ border: 1px solid black;
+ border-radius: 4px;
+ padding: 10px 20px;
+ font-size: .9rem;
+}
+
+button:hover {
+ background: orangered;
+}
+
+button:active {
+ background: black;
+ color: white;
+}
+
+.slider {
+ width: 256px;
+ height: 256px;
+ border: 2px solid black;
+ margin: 30px auto;
+ overflow: hidden;
+}
+
+.slider-line {
+ height: 256px;
+ width: 1024px;
+ background: orangered;
+ position: relative;
+ display: flex;
+ left: 0;
+ transition: all ease 1s;
+}
+
+ 
+ 
+