diff --git a/my code/26-vertical-slider/index.html b/my code/26-vertical-slider/index.html
new file mode 100644
index 0000000..176c2cc
--- /dev/null
+++ b/my code/26-vertical-slider/index.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+ 26 vertical slider
+
+
+
+
+
+
+
+
+ Nature flower
+ all in pink
+
+
+ Bluuue Sky
+ with it's mountains
+
+
+ Lonely castle
+ in the wilderness
+
+
+ Flying eagle
+ in the sunset
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/my code/26-vertical-slider/script.js b/my code/26-vertical-slider/script.js
new file mode 100644
index 0000000..d8c9c10
--- /dev/null
+++ b/my code/26-vertical-slider/script.js
@@ -0,0 +1,36 @@
+let currentSlide = 4;
+
+const descriptions = document.querySelector(".left");
+const pictures = document.querySelector(".right");
+
+const upButton = document.getElementById("up");
+const downButton = document.getElementById("down");
+
+upButton.addEventListener("click", upSlide);
+downButton.addEventListener("click", downSlide);
+
+function upSlide() {
+ currentSlide--;
+
+ if (currentSlide === 0) {
+ descriptions.style.transform = "translateY(-300vh)";
+ pictures.style.transform = "translateY(0)";
+ currentSlide = 4;
+ } else {
+ descriptions.style.transform = `translateY(-${(currentSlide - 1) * 100}vh)`;
+ pictures.style.transform = `translateY(-${(4 - currentSlide) * 100}vh)`;
+ }
+}
+
+function downSlide() {
+ currentSlide++;
+
+ if (currentSlide === 5) {
+ descriptions.style.transform = "translateY(0)";
+ pictures.style.transform = "translateY(-300vh)";
+ currentSlide = 1;
+ } else {
+ descriptions.style.transform = `translateY(-${(currentSlide - 1) * 100}vh)`;
+ pictures.style.transform = `translateY(-${(4 - currentSlide) * 100}vh)`;
+ }
+}
diff --git a/my code/26-vertical-slider/style.css b/my code/26-vertical-slider/style.css
new file mode 100644
index 0000000..bd43173
--- /dev/null
+++ b/my code/26-vertical-slider/style.css
@@ -0,0 +1,70 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ overflow: hidden;
+ font-family: Arial, Helvetica, sans-serif;
+ position: relative;
+}
+
+.left {
+ width: 30vw;
+ height: 400vh;
+ display: flex;
+ flex-direction: column;
+ transform: translateY(-300vh);
+ transition: transform 0.3s linear;
+}
+
+.left > span {
+ text-align: center;
+}
+
+.left span.name-slide {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 25%;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+ font-size: 36px;
+ font-weight: 600;
+}
+
+.left span.name-slide span.small {
+ font-size: 16px;
+ font-weight: 400;
+ margin-top: 20px;
+}
+
+.right {
+ width: 70vw;
+ height: 400vh;
+ transition: transform 0.3s linear;
+}
+
+.right div.picture-slide {
+ width: 100%;
+ height: 25%;
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+button {
+ position: absolute;
+}
+
+#up {
+ top: 0;
+ left: 0;
+}
+#down {
+ top: 20px;
+ left: 0;
+}